How to create circle image

I wanna create CSS follow the image but i’m just newbie in CSS. Hope anyone can help me. Thank in advance! I think circle created with font-icon

You can easily create the circle part with border-radius. You could also do the camera with CSS, but it’s prolly not worth it in the real world. I’d use an image for that, or perhaps a font icon.

Hi,

As Ralph said you can do this all in CSS for IE9+ (and other modern browsers).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc }
.camera {
	background:#71b6d5;
	width:76px;
	height:76px;
	border:10px solid #fff;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
}
.camera:after {
	content:" ";
	position:absolute;
	top:50%;
	left:50%;
	margin:-6px 0 0 -7px;
	width:10px;
	height:10px;
	background:#fff;
	border:2px solid #71b6d5;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	z-index:3;
}
.camera span {
	content:" ";
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-9px 0 0 -15px;
	width:30px;
	height:21px;
	background:#fff;
	z-index:2;
}
.camera span:after {
	content:" ";
	position:absolute;
	top:-4px;
	left:8px;
	width:15px;
	height:4px;
	background:#fff;
	-webkit-border-radius:2px 2px 0 0;
	-moz-border-radius:2px 2px 0 0;
	border-radius:2px 2px 0 0;
}
</style>
</head>

<body>
<h1>IE9+ only (IE8 will be square)</h1>
<div class="camera"><span></span></div>
</body>
</html>

Hehe, nice one, Paul. I’m shocked that you didn’t make the camera spin on hover, though. :lol:

It does now :slight_smile:

thank Paul so much, what about image background, i mean how to create this concave?

Very clever @Paul_O_B ; but I would have thought an image would have been easier to use :slight_smile:

Hmmm not sure what you mean? What concave exactly? :slight_smile:

You just stick the element I created on the top middle of your image (absolutely place it into position).

Very clever @Paul_O_B ; but I would have thought an image would have been easier to use

That would be too easy lol :slight_smile:

It wasn’t that much code and was fun to do.

You can create a lot of icons without using images but sometimes the time in creating them yourself is not worth the effort.

That’s an interesting link; I never knew you could do anything like that.

Hehe, he fell for it. :smiley:

I couldn’t get it to work myself, but didn’t think to place it on .camera itself. :rolleyes:

Hehe, he fell for it. :smiley:

I couldn’t get it to work myself, but didn’t think to place it on .camera itself. :rolleyes:

@thehung1724: here’s an example of how to incorporate it into the design you posted: http://codepen.io/pageaffairs/pen/bHwla

@demo: “IE9+ only
IE-only promotion? Browser war? :wink:
Nevertheless, well done!

… shocked that you didn’t make the camera spin on hover, though. :lol:
… it does now. :slight_smile:
… Hehe, he fell for it. :smiley:

Nah, we just assume it works in real browsers, so the convention is just to indicate if it works in any version of IE … as a kind of bonus. :lol:

I fell for it too

Nice work. :slight_smile:

D’oh!

I fell for it too. 

D’oh! too - but nice work :slight_smile:

[ot]And here the matching anecdote.
First I didn’t see Paul’s circling circle. *) So I thought the “He fell for it” was a kind of joke. But I was expecting that Paul should produce the css-animation in short time. Just to kill time I entertained myself in making a javascript version (difference: in js the rotating is going on as long as you hover; a backwards rotating onmouseout could be added) . I’m not sure I did that If I had seen the simple css transform solution! :smiley:


*) The html code in #3 was still static, and Paul’s link [COLOR=“#808080”]you can do this all in CSS[/COLOR] I didn’t remark because of the rather strong incoming lamp light on my monitor.
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)” - [U]WCAG guideline 1.4[/U]!
That’s the reason I always underline my links by hand (afraid of somebody missing the link - and the work, in case it is an example). But in my opinion the deleting of the standard link underlining is a principal accessibility sin of the forum…

  • I posted a separate [U]message[/U] about this in the Forum Support & Feedback directory.
    [/ot]

thank everybody so much :smiley:

but it become easier to use font icon :smiley:

Give it a spin… (not for IE9 or below.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rotate the camera</title>
<style type="text/css">
body { background:#ccc }
.camera {
	background:#71b6d5;
	width:76px;
	height:76px;
	border:10px solid #fff;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	position:relative;
}
.camera:hover{
	-webkit-transform: rotate(1000485deg);
	-moz-transform: rotate(1000485deg);
	-o-transform: rotate(1000485deg);
	-ms-transform: rotate(1000485deg);
	transform: rotate(1000485deg);
	-webkit-transition: all 2000s ease 0s;
	transition: all 2000s ease 0s;
}
.camera:after {
	content:" ";
	position:absolute;
	top:50%;
	left:50%;
	margin:-6px 0 0 -7px;
	width:10px;
	height:10px;
	background:#fff;
	border:2px solid #71b6d5;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	z-index:3;
}
.camera span {
	content:" ";
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-9px 0 0 -15px;
	width:30px;
	height:21px;
	background:#fff;
	z-index:2;
}
.camera span:after {
	content:" ";
	position:absolute;
	top:-4px;
	left:8px;
	width:15px;
	height:4px;
	background:#fff;
	-webkit-border-radius:2px 2px 0 0;
	-moz-border-radius:2px 2px 0 0;
	border-radius:2px 2px 0 0;
}
</style>
</head>

<body>
<h1>Doesn't work in IE9 or older....</h1>
<div class="camera"><span></span></div>
</body>
</html>

You guys are truly amazing! This is just food for thought and obviously I’m very behind with my CSS because I’m trying to figure out what’s going on (no problem with the rotation but with the camera itself)

I would have thought that if you didn’t use an image, you could use svg… but not only CSS :smiley:

@Paul_O_B; that’s a really sweet link. It should go in your “this week in CSS” thread :smiley:

Forget it. Some of the links don’t work, at least for me :frowning: