SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    1.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <!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>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hehe, nice one, Paul. I'm shocked that you didn't make the camera spin on hover, though.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hehe, nice one, Paul. I'm shocked that you didn't make the camera spin on hover, though.
    It does now

  6. #6
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank Paul so much, what about image background, i mean how to create this concave?

  7. #7
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,395
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    Very clever @Paul O'B ; but I would have thought an image would have been easier to use

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    thank Paul so much, what about image background, i mean how to create this concave?
    Hmmm not sure what you mean? What concave exactly?

    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

    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.

  9. #9
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,395
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    That's an interesting link; I never knew you could do anything like that.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It does now
    Hehe, he fell for it.

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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It does now
    Hehe, he fell for it.

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

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

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    @demo: "IE9+ only"
    IE-only promotion? Browser war?
    Nevertheless, well done!

    ... shocked that you didn't make the camera spin on hover, though.
    ... it does now.
    ... Hehe, he fell for it.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Francky View Post
    "IE9+ only" IE-only promotion? Browser war?
    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.

    I fell for it too
    Nice work.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hehe, he fell for it.
    D'oh!

    I fell for it too.
    D'oh! too - but nice work

  15. #15
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    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!
    ________
    *) The html code in #3 was still static, and Paul's link you can do this all in CSS 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)" - WCAG guideline 1.4!
    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 message about this in the Forum Support & Feedback directory.

  16. #16
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank everybody so much

  17. #17
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but it become easier to use font icon

  18. #18
    SitePoint Enthusiast scout1idf's Avatar
    Join Date
    Nov 2009
    Location
    Ohio
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give it a spin....... (not for IE9 or below.)

    HTML Code:
    <!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>

  19. #19
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,216
    Mentioned
    236 Post(s)
    Tagged
    1 Thread(s)
    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

    @Paul O'B ; that's a really sweet link. It should go in your "this week in CSS" thread

  20. #20
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,216
    Mentioned
    236 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by molona View Post
    @Paul O'B ; that's a really sweet link. It should go in your "this week in CSS" thread
    Forget it. Some of the links don't work, at least for me


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •