SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Circle? Possibilities are?

    Is it possible to create a circle shape using only CSS. I know Border-radius creates circular shape corners but lets say I want to create a circle for the part of my design, how would that be made? Or should I just use an image and place a Href anchor in it?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There are little tricks you can do, but basically, no. We would need to see an example of what you are trying to do to suggest how to go about it. Somewhere in the dim future, CSS3 might offer what you want, but it's a long way away.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There are little tricks you can do, but basically, no. We would need to see an example of what you are trying to do to suggest how to go about it. Somewhere in the dim future, CSS3 might offer what you want, but it's a long way away.
    I seen many sites with it but I can't find the examples, it's pretty much a circle with a title and the title links you to another .html page. Example, circle with the title FORUMS and links to forum and has a hover etc. can't really explain but anyhow you recommend creating it with photoshop and using the <img src=""> tag

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    you recommend creating it with photoshop and using the <img src=""> tag
    Fo a simple link, you can either use an image or border radius. If you need an image, I would do it as a "sprite" background image on an <a> element.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I may be misunderstanding the question, but this is what it sounds like to me:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?999248-Circle-Possibilities-are
    Thread: Circle? Possibilities are?
    2013.03.12 17:12
    AndreeU17
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    a {
        display:block;
        width:100px;
        height:100px;
        background-color:red;
        border-radius:50%;
        margin:0 auto;
    }
    
        </style>
    </head>
    <body>
    
    <div><a href=""></a></div>
    
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I may be misunderstanding the question, but this is what it sounds like to me:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?999248-Circle-Possibilities-are
    Thread: Circle? Possibilities are?
    2013.03.12 17:12
    AndreeU17
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    a {
        display:block;
        width:100px;
        height:100px;
        background-color:red;
        border-radius:50%;
        margin:0 auto;
    }
    
        </style>
    </head>
    <body>
    
    <div><a href=""></a></div>
    
    </body>
    </html>
    Yes thats exactly what im talking about, a simple circle.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    Yes thats exactly what im talking about, a simple circle.
    So, has this answered your question then?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it has thank you very much. much appreciated from everyone here.
    thanks
    -Jonathan


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
  •