Welcome to 10For2 Web Development

An online presence is more than just a website; it’s the face of your company to the world. We specialize in developing that presence for small to medium size businesses.

Full Service Online Solutions

While our main focus is website design and development, we also specialize in marketing material, video production, and email and data hosting. Our goal is to become your one-stop shop for business identity solutions.

Login Panel




web development · content strategy · e-commerce wordpress · site maintenance · social media · seo

Blog Entry » July 31st, 2012

CSS Card Suit Shapes: The Club

Drawing inspiration from Chris Coyier’s “The Shapes of CSS” at CSS Tricks, I decided to have some fun with css and the suits in a deck of cards. The club is all CSS, however, it requires mulitple divs to pull off.


Club

The HTML:

                <div id="circle"></div>    
                <div id="triangle"></div>
                <div id="base"></div>
            

The CSS:

           #circle { 
                width: 100px; 
                height: 100px; 
                background: black; 
                -moz-border-radius: 50px; 
                -webkit-border-radius: 50px; 
                border-radius: 50px;
                position:absolute;
                left: 63px;
                z-index: 100;
            } 
            #circle:before { 
                width: 100px; 
                height: 100px; 
                background: black; 
                -moz-border-radius: 50px; 
                -webkit-border-radius: 50px; 
                border-radius: 50px;
                position:absolute;
                left:-60px;
                top:80px;
                z-index: 100;
                content: "";
            }

            #circle:after { 
                width: 100px; 
                height: 100px; 
                background: black; 
                -moz-border-radius: 50px; 
                -webkit-border-radius: 50px; 
                border-radius: 50px;
                position:absolute;
                left: 60px;
                top:80px;
                z-index: 100;
                content: "";
                } 
    
            #triangle {
                width: 0; 
                height: 0; 
                border-left: 75px solid transparent; 
                border-right: 75px solid transparent; 
                border-bottom: 105px solid black;
                position:absolute;
                top:40px;
                left: 38px;
                z-index: 100;
            }
            #base {
                background: none repeat scroll 0 0 black;
                height: 70px;
                left: 0;
                position: absolute;
                top: 140px;
                width: 200px;
                z-index: 0; 
            }
            #base:before {
                width:0px;
                height:10px;
                position:absolute;
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px; 
                border-bottom-left-radius: 0px; 
                border-bottom-right-radius: 60px;
                left: 0px;
                content: "";
            }

            #base:after {
                width:0px;
                height:10px;
                position:absolute;
                border-left: 50px solid white;
                border-right: 50px solid white;
                border-top: 10px solid white;
                border-bottom: 50px solid white;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px; 
                border-bottom-left-radius: 60px; 
                border-bottom-right-radius: 0px;
                left: 125px;
                content: "";
            }
            

Author’s Note: I had intended on doing all the card suits in one post, but after finishing the club I never got back to it. This post has been sitting in my drafts for a while now, and I just wanted to get it out. The heart and diamond can be found on CSS Tricks (linked above) and hopefully I’ll get to the spade soon.

This entry was posted on July 31st, 2012 @ 10:02am and is filed under Blog, Code, CSS3. You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

2 Responses

  1. Michele Cimmino says:

    And here is the Spade!

    (Using the same html code)

    #circle { 
                    width: 100px; 
                    height: 100px; 
                    background: black; 
                    -moz-border-radius: 50px; 
                    -webkit-border-radius: 50px; 
                    border-radius: 50px;
                    position:absolute;
                    left: 63px;
    				top:45px;
                    z-index: 100;
                } 
                #circle:before { 
                    width: 100px; 
                    height: 100px; 
                    background: black; 
                    -moz-border-radius: 50px; 
                    -webkit-border-radius: 50px; 
                    border-radius: 50px;
                    position:absolute;
                    left:-60px;
                    top:35px;
                    z-index: 100;
                    content: "";
                }
    
                #circle:after { 
                    width: 100px; 
                    height: 100px; 
                    background: black; 
                    -moz-border-radius: 50px; 
                    -webkit-border-radius: 50px; 
                    border-radius: 50px;
                    position:absolute;
                    left: 60px;
                    top:35px;
                    z-index: 100;
                    content: "";
                    } 
        
                #triangle {
                    width: 100; 
                    height: 50; 
                    border-left: 100px solid transparent; 
                    border-right: 100px solid transparent; 
                    border-bottom: 100px solid black;
                    position:absolute;
                    top:0px;
                    left: 13px;
                    z-index: 100;
                }
                #base {
                    background: none repeat scroll 0 0 black;
                    height: 70px;
                    left: 0;
                    position: absolute;
                    top: 140px;
                    width: 200px;
                    z-index: 0; 
                }
                #base:before {
                    width:0px;
                    height:10px;
                    position:absolute;
                    border-left: 50px solid white;
                    border-right: 50px solid white;
                    border-top: 10px solid white;
                    border-bottom: 50px solid white;
                    border-top-left-radius: 0px;
                    border-top-right-radius: 0px; 
                    border-bottom-left-radius: 0px; 
                    border-bottom-right-radius: 60px;
                    left: 0px;
                    content: "";
                }
    
                #base:after {
                    width:0px;
                    height:10px;
                    position:absolute;
                    border-left: 50px solid white;
                    border-right: 50px solid white;
                    border-top: 10px solid white;
                    border-bottom: 50px solid white;
                    border-top-left-radius: 0px;
                    border-top-right-radius: 0px; 
                    border-bottom-left-radius: 60px; 
                    border-bottom-right-radius: 0px;
                    left: 125px;
                    content: "";
                }
    • 10for2 says:

      Awesome! Thanks Michele!

      For anyone else checking these out, keep in mind that the white borders would need to change to the color of the background you’re putting these on.

Leave a Reply