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)

    Best way to recreate this?

    I want to recreate this little image or code, what ever it is i would like to recreate it.



    I was wondering to create something like this:
    Code:
    <section>
         <h2>Skills</h2>
         <p>HTML</p>
         <p>CSS</p>
         <p>Javascript</p>
         <p>Design</p>
    </section>
    Would the rest be CSS or is there anyway to create all this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Best to mark it up at an unordered list, because that's kind of a list you have there. Anyhow, you can do this with just CSS if you wish, except that you'd need backgrund images to get that nice texture, but that's easy enough. Here's an example of how you could do it with CSS alone:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
    ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 0 50px 10px 20px; overflow: hidden;}
    li {line-height: 32px; margin: 5px 0; overflow: hidden;}
    li.border {
        border-top: 0 solid transparent; 
        border-right: 12px solid transparent;
        border-bottom: 12px solid #e5563a;
        border-left: 12px solid transparent;
        margin: 0 0 20px;
    }
    li span {width: 315px; position: relative; background: #d4d4d4;}
    li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
    i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;}
    li span, li b {float: left;}
    
    .w100 {width: 95%;}
    .w95 {width: 90%;}
    .w90 {width: 85%;}
    .w85 {width: 80%;}
    .w80 {width: 75%;}
    .w75 {width: 70%;}
    .w70 {width: 65%;}
    .w50 {width: 45%;}
    .w30 {width: 25%;}
    
    span:before {      
    	content: "";
    	position: absolute;
    	width:0; height: 0; 
    	border-top: 8px solid #e7e7e7;
    	border-right: 8px solid #e7e7e7;
    	border-bottom: 8px solid transparent;
    	border-left: 8px solid transparent;
    	top:0; right: 0;
    } 
    
    span:after {      
    	content: "";
    	position: absolute;
    	width:0; height: 0; 
    	border-top: 8px solid transparent;
    	border-right: 8px solid #e7e7e7;
    	border-bottom: 8px solid #e7e7e7;
    	border-left: 8px solid transparent;
    	bottom:0; right: 0;
    } 
    </style>
    
    </head>
    <body>
    <ul>
    	<li class="border"></li>
    	<li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
    	<li><span><i class="w90">Branding</i></span> <b>90%</b></li>
    	<li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
    	<li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
    	<li><span><i class="w70">Typography</i></span> <b>70%</b></li>
    	<li><span><i class="w50">SEO</i></span> <b>50%</b></li>
    	<li><span><i class="w30">SEM</i></span> <b>30%</b></li>
    	<li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
    </ul>
    
    </body>
    </html>
    It would be better not to use an empty LI at the top for the border, but that's enough for one day.
    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
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Based on my last comment above (that it's better not to use an empty LI for the top border) here's a better version:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
    ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 32px 50px 10px 20px; overflow: hidden; position: relative;}
    ul:before {
        content: "";
        width: 348px;
        height: 0;
        top: 0;
        left: 20px;
        position: absolute;
        border-top: 0 solid transparent; 
        border-right: 12px solid transparent;
        border-bottom: 12px solid #e5563a;
        border-left: 12px solid transparent;
    	
    }
    li {line-height: 32px; margin: 5px 0; overflow: hidden;}
    li span {width: 315px; position: relative; background: #d4d4d4;}
    li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
    i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;}
    li span, li b {float: left;}
    
    .w100 {width: 95%;}
    .w95 {width: 90%;}
    .w90 {width: 85%;}
    .w85 {width: 80%;}
    .w80 {width: 75%;}
    .w75 {width: 70%;}
    .w70 {width: 65%;}
    .w50 {width: 45%;}
    .w30 {width: 25%;}
    
    span:before {      
        content: "";
        position: absolute;
        width:0; height: 0; 
        border-top: 8px solid #e7e7e7;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        top:0; right: 0;
    } 
    
    span:after {      
        content: "";
        position: absolute;
        width:0; height: 0; 
        border-top: 8px solid transparent;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid #e7e7e7;
        border-left: 8px solid transparent;
        bottom:0; right: 0;
    } 
    </style>
    
    </head>
    <body>
    <ul>
        <li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
        <li><span><i class="w90">Branding</i></span> <b>90%</b></li>
        <li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
        <li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
        <li><span><i class="w70">Typography</i></span> <b>70%</b></li>
        <li><span><i class="w50">SEO</i></span> <b>50%</b></li>
        <li><span><i class="w30">SEM</i></span> <b>30%</b></li>
        <li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
    </ul>
    
    </body>
    </html>
    Here's an online example (working in Chrome, FF, Safari, Opera, IE9 ... but a little off in IE8, and tolerable in IE7):

    http://pageaffairs.com/sp/1018689/
    Last edited by ralph.m; Apr 2, 2013 at 02:23.
    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."

  4. #4
    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
    Based on my last comment above (that it's better not to use an empty LI for the top border) here's a better version:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
    ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 32px 50px 10px 20px; overflow: hidden; position: relative;}
    ul:before {
        content: "";
        width: 348px;
        height: 0;
        top: 0;
        left: 20px;
        position: absolute;
        border-top: 0 solid transparent; 
        border-right: 12px solid transparent;
        border-bottom: 12px solid #e5563a;
        border-left: 12px solid transparent;
    	
    }
    li {line-height: 32px; margin: 5px 0; overflow: hidden;}
    li span {width: 315px; position: relative; background: #d4d4d4;}
    li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
    i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;}
    li span, li b {float: left;}
    
    .w100 {width: 95%;}
    .w95 {width: 90%;}
    .w90 {width: 85%;}
    .w85 {width: 80%;}
    .w80 {width: 75%;}
    .w75 {width: 70%;}
    .w70 {width: 65%;}
    .w50 {width: 45%;}
    .w30 {width: 25%;}
    
    span:before {      
        content: "";
        position: absolute;
        width:0; height: 0; 
        border-top: 8px solid #e7e7e7;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        top:0; right: 0;
    } 
    
    span:after {      
        content: "";
        position: absolute;
        width:0; height: 0; 
        border-top: 8px solid transparent;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid #e7e7e7;
        border-left: 8px solid transparent;
        bottom:0; right: 0;
    } 
    </style>
    
    </head>
    <body>
    <ul>
        <li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
        <li><span><i class="w90">Branding</i></span> <b>90%</b></li>
        <li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
        <li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
        <li><span><i class="w70">Typography</i></span> <b>70%</b></li>
        <li><span><i class="w50">SEO</i></span> <b>50%</b></li>
        <li><span><i class="w30">SEM</i></span> <b>30%</b></li>
        <li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
    </ul>
    
    </body>
    </html>
    Here's an online example (working in Chrome, FF, Safari, Opera, IE9 ... but a little off in IE8, and tolerable in IE7):

    http://pageaffairs.com/sp/1018689/

    thank you for the thoughtful response i understand how to do it now.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post

    Here's an online example (working in Chrome, FF, Safari, Opera, IE9 ... but a little off in IE8, and tolerable in IE7):

    http://pageaffairs.com/sp/1018689/
    Good work Ralph My first thought was mitred borders also.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Good work Ralph My first thought was mitred borders also.
    Thanks Paul. The one thing I couldn't get right is that in IE8, the blue background overlaps the arrow corners. I set a higher z-index on them, tried every combination I could thing of and still couldn't get them to sit over the blue part. (I don't care much about IE8, but still ...) The only thing I didn't try is a negative z-index on the blue <i> element. Maybe will try that later, but IE is sleeping now, and I hate to disturb it.
    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."

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

    Quote Originally Posted by ralph.m View Post
    Thanks Paul. The one thing I couldn't get right is that in IE8, the blue background overlaps the arrow corners. I set a higher z-index on them, tried every combination I could thing of and still couldn't get them to sit over the blue part. (I don't care much about IE8, but still ...) The only thing I didn't try is a negative z-index on the blue <i> element. Maybe will try that later, but IE is sleeping now, and I hate to disturb it.
    A negative z-index would work if the blue wasn't sitting on the light gray because it will go under the light gray and be invisible. IE8 can't handle the z-index properly on :before or :after and we've seen this before a while ago.

    You could place the borders in relation to the "i" element instead and sidestep the issue.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    body {margin: 0; pading: 0; font-family: arial, verdana, helvetica, sans-serif; font-size: 85%;}
    ul {width: 370px; background: #e7e7e7; list-style: none; margin: 0; padding: 32px 50px 10px 20px; overflow: hidden; position: relative;}
    ul:before {
        content: "";
        width: 348px;
        height: 0;
        top: 0;
        left: 20px;
        position: absolute;
        border-top: 0 solid transparent; 
        border-right: 12px solid transparent;
        border-bottom: 12px solid #e5563a;
        border-left: 12px solid transparent;
    	
    }
    li {line-height: 32px; margin: 5px 0; overflow: hidden;}
    li span {width: 315px; position: relative; background: #d4d4d4;}
    li b {font-weight: normal; width: 40px; padding-left: 15px; text-align: right;}
    i {background: #8bc3e0; padding-left: 5%; font-style: normal; display: inline-block;position:relative}
    li span, li b {float: left;}
    
    .w100 {width: 95%;}
    .w95 {width: 90%;}
    .w90 {width: 85%;}
    .w85 {width: 80%;}
    .w80 {width: 75%;}
    .w75 {width: 70%;}
    .w70 {width: 65%;}
    .w50 {width: 45%;}
    .w30 {width: 25%;}
    
    i:before {      
        content: "";
        position: absolute;
        width:0; height: 0;
        border-top: 8px solid #e7e7e7;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
        top:0; left: 299px;
    } 
    
    i:after {      
        content: "";
        position: absolute;
        width:0; height: 0; 
        border-top: 8px solid transparent;
        border-right: 8px solid #e7e7e7;
        border-bottom: 8px solid #e7e7e7;
        border-left: 8px solid transparent;
        bottom:0; left: 299px;
    } 
    </style>
    
    </head>
    <body>
    <ul>
        <li><span><i class="w85">Print Media</i></span> <b>85%</b></li>
        <li><span><i class="w90">Branding</i></span> <b>90%</b></li>
        <li><span><i class="w95">Web Design</i></span> <b>95%</b></li>
        <li><span><i class="w90">HTML & CSS</i></span> <b>90%</b></li>
        <li><span><i class="w70">Typography</i></span> <b>70%</b></li>
        <li><span><i class="w50">SEO</i></span> <b>50%</b></li>
        <li><span><i class="w30">SEM</i></span> <b>30%</b></li>
        <li><span><i class="w100">JavaScript</i></span> <b>100%</b></li>
    </ul>
    
    </body>
    </html>
    It's a nasty IE8 bug.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks Paul. Jeesh, I even posted in that other thread (not very inspiringly). Shows how little I take in.

    Anyhow, good to know it was just a bug. Hopefully IE8 will fade away faster than IE6 did.
    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."


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
  •