Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post

    Help with CSS Logo

    Hello,

    I made a logo completely out of CSS and HTML http://db.tt/M9ftqdKn . It's made out of six 'pieces', four for the corners (one to four) and two for the centre (x1 & x2). The centre two (x1 & x2) hides parts of the other four. How can I get the middle parts to be transparent to the background and but not the four corners?
    Also any suggesting for improvements would be appreciated .
    Thanks.

    Here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
        >
    <style>
    
    * {
        margin: 50px;
    }
        
    #one {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
        height: 100px;
        -webkit-transform: skew(10deg) rotate(5deg);
        -moz-transform: skew(10deg) rotate(5deg);
        -o-transform: skew(10deg) rotate(5deg);
        background: #878787;
        border-radius:15px;
    }
    
    #two {
        position: absolute;
        top: 10px;
        left: 110px;
        width: 100px;
        height: 100px;
        -webkit-transform: skew(-10deg) rotate(-5deg);
        -moz-transform: skew(-10deg) rotate(-5deg);
        -o-transform: skew(-10deg) rotate(-5deg);
        background: -webkit-gradient(linear, left top, left bottom, from(#33B9FF), to(#129ADC));
        background: -moz-linear-gradient(top, #33B9FF, #129ADC);
        border-radius:15px;
    }
    
    #three {
        position: absolute;
        top: 109px;
        left: 10px;
        width: 100px;
        height: 100px;
        -webkit-transform: skew(-10deg) rotate(-5deg);
        -moz-transform: skew(-10deg) rotate(-5deg);
        -o-transform: skew(-10deg) rotate(-5deg);
        background: #B2B2B2;
        border-radius:15px;
    }
    
    #four {
        position: absolute;
        top: 109px;
        left: 110px;
        width: 100px;
        height: 100px;
        -webkit-transform: skew(10deg) rotate(5deg);
        -moz-transform: skew(10deg) rotate(5deg);
        -o-transform: skew(10deg) rotate(5deg);
        background: #878787;
        border-radius:15px;
    }
    
    #x1 {
        position: absolute;
        top: 55px;
        left: 45px;
        background-color: white;
        height: 110px;
        width: 130px;
        border-radius: 50px 50px 50px 50px / 200px 200px 200px 200px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }
    
    #x2 {
        position: absolute;
        top: 55px;
        left: 45px;
        background-color: white;
        height: 110px;
        width: 130px;
        border-radius: 50px 50px 50px 50px / 200px 200px 200px 200px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
    }
    
    </style>
    <html lang="en">
    <head>
        <title>CSS Logo Test</title>
    </head>
    <body>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
        <div id="four"></div>
        <div id="x1"></div>
        <div id="x2"></div>
    </body>
    </html>
    And what it looks like:

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Complete opacity would make the center disappear. Add this to the css and play with it:
    Code:
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sorry, I'm trying to get it to be transparent to the background but not to the other divs.


  •  

    Tags for this Thread

    Posting Permissions

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