CSS - Test Your CSS Skills Number 12 :

**Paul O'B** · Feb 6, 2009 08:39

Solutions

In case you haven't yet worked out the main method of doing the quiz I'll quickly run through the techniques required.

As most of you guessed the secret to constructing the logo was to use the border property to create the rectangular shapes needed for the logo. As borders are mitred towards the corners it means that by declaring different widths for various sides of the border we can achieve different angles.

If you have never heard of this technique then it was used many many years ago in this wonderful demo.

To get the transparent effect on one edge all that was needed was to use transparent as the border-color and that allowed the background of the page to be seen underneath.

IE6 doesn't understand transparent borders so another trick was needed. The trick was to use dashed (or dotted) borders because the first part of the border is always transparent in IE6 and therefore gives us the same effect as other browsers.

The only other problems to overcome would be positioning the borders in the right place which could be achieved with floats and margins.

Using ems for all measurements means that everything can scale together and look good at all sizes.

There were also some unorthodox solutions which I will show later.

Here is the Basic version that Erik and I came up with.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simon/Paul Quiz#12 - Level 2-5</title>
<style type="text/css">
h1 {
    background:#eef;
    font-size:300&#37;;
    float:left;
        padding:0 0 0 3px;
        margin:0 0 10px 0;
clear:both;
}
h1.alt1{background:#fff}
h1.alt2{background:#ffcccc}

.a1 span.a {
    border:solid #f60;
    border-left-color:transparent;
    border-width:0 0 .55em .27em;
    border-style: solid dashed;
    float:left;
    width:.28em;
    height:0;
    overflow:hidden;
}
.a1 span.b {
    border: #f60;
    border-width:.55em .27em 0 0;
    border-right-color:transparent;
    border-style:solid dashed;
    float:left;
    height:0;
    overflow:hidden;
}
.a2 span.a {
    border:solid #036;
    border-left-color:transparent;
    border-width:.55em 0 0 .27em;
    border-style: solid dashed;
    float:left;
    width:.28em;
    height:0;
    overflow:hidden;
}
.a2 span.b {
    border:solid transparent;
    border-width:.55em 0 0 .27em;
    border-left-color:#036;
    border-style:dashed solid;
    float:left;
    height:0;
    overflow:hidden;
}
.a1 {
    display:inline;
    float:left;
}
.a2 {
    display:inline;
    float:left;
    margin:.61em 0 0 -.82em;
}
.a3 {
    margin:.61em 0 0 .05em;
}
.a4 {
    margin:1.21em 0 0 -.82em;
}
strong {
    display:inline;
    float:left;
    clear:left;
    margin:-1.555em 0 0 1.85em;
    color:#036;
}
</style></head><body>
 
<h1>
    <span class="a1">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2 a3">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a1 a4">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <strong>sitepoint</strong>
</h1>

<h1 class="alt1">
    <span class="a1">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2 a3">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a1 a4">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <strong>sitepoint</strong>
</h1>

<h1 class="alt2">
    <span class="a1">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a2 a3">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <span class="a1 a4">
        <span class="a"></span>
        <span class="b"></span>
    </span>
    <strong>sitepoint</strong>
</h1>

</body></html>

The first correct solution to work in all browsers using the above method was Centauri so well done Graeme

The first correct solution using a method other than borders was from RoObear - so well done also.

They are therefore the joint winners of this competetion although there are in fact others who came up with the winning solution so i will just mention all below.

Vim.F, funktifiknow, YuriKolovsky, 2009site2009 and not forgetting Eric Watson - level 5

Special mention to all the following who were nearly there and some had multiple entries.

markBrown4, Stormrider, Eric Watson, Coothead, SecretAgent Regge, Ornette.

I also had some othe interesting entries from:

zcorpan, SecretAgentRegge, stomme Poes all using different methods.

Here are the entries from Centauri and RoObear first and then I will just post some of the other interesting entries.

Centauri:

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">
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 150%;
    padding: 20px;
}
h1 {
    font-size: 1.8em;
    float: left;
    color: #003366;
    margin: -0.4em 0 -1em 0.2em;
}
b, i {
    float: left;
    height: 0;
    width: 0;
    overflow: hidden;
}
b {
    width: 0.5em;
}
.orange {
    height: 1em;
    margin-bottom: 0.1em;
    clear: both;
}
.blue {
    float: left;
    margin: 0 0.1em 0.1em 0;
}
.lower {
    margin-left: 1.6em;
}
.orange b {
    border-bottom: 1em solid #FF6600;
    border-left: 0.5em dashed transparent;
}
.orange i {
    border-top: 1em solid #FF6600;
    border-right: 0.5em dashed transparent;
}
.blue b {
    border-top: 1em solid #003366;
    border-left: 0.5em dashed transparent;
}
.blue i {
    border-bottom: 1em solid #003366;
    border-right: 0.5em dashed transparent;
}
</style>
</head>

<body>
<div class="orange"><b></b><i></i></div>
<div class="blue"><b></b><i></i></div>
<div class="blue"><b></b><i></i></div>
<h1>sitepoint</h1>
<div class="orange lower"><b></b><i></i></div>
</body>
</html>

RoObear: (uses an "x" not the border property)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ro0bear</title>
<style type="text/css">
#container {
    margin: 10%;
    background-color: #EEEEFF;
    height: 14.2em;
    position: relative;
    padding: 0;
    width: 40em;
}
#b1 {
    position: absolute;
    font-family: arial;
    font-size: 20em;
    height: 0.225em;
    width: 0.319em;
    font-weight: bold;
    overflow: hidden;
    color: #FF6600;
    padding: 0;
}
#b1 p {
    width: 1em;
    height: 1em;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: -5%;
    bottom: -0.17em;
    line-height: 100%;
}
#b2 {
    position: absolute;
    top: 0.24em;
    font-family: arial;
    font-size: 20em;
    height: 0.225em;
    width: 0.325em;
    font-weight: bold;
    overflow: hidden;
    color: #003366;
    padding: 0;
}
#b2 p {
    width: 1em;
    height: 1em;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: -0.335em;
    bottom: -0.17em;
    line-height: 100%;
}
#b3 {
    position: absolute;
    top: 0.480em;
    left: 0.3em;
    font-family: arial;
    font-size: 20em;
    height: 0.225em;
    width: 0.319em;
    font-weight: bold;
    overflow: hidden;
    color: #FF6600;
    padding: 0;
}
#b3 p {
    width: 1em;
    height: 1em;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: -5%;
    bottom: -0.17em;
    line-height: 100%;
}
#b4 {
    position: absolute;
    top: 0.24em;
    left: 0.292em;
    font-family: arial;
    font-size: 20em;
    height: 0.225em;
    width: 0.325em;
    font-weight: bold;
    overflow: hidden;
    color: #003366;
    padding: 0;
}
#b4 p {
    width: 1em;
    height: 1em;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: -0.335em;
    bottom: -0.17em;
    line-height: 100%;
}
h1 {
    font-size: 6em;
    padding-top: 0.5em;
    padding-bottom: 0.24em;
    padding-left: 2.5em;
    font-family: serif;
    color: #003366;
}
</style>
</head>
<body>
<div id="container">
    <div id="b1">
        <p>X</p>
    </div>
    <div id="b2">
        <p>X</p>
    </div>
    <div id="b3">
        <p>X</p>
    </div>
    <div id="b4">
        <p>X</p>
    </div>
    <h1>sitepoint</h1>
</div>
</body>
</html>

Continued in next post:

**Paul O'B** · Feb 6, 2009 08:39

Solutions Continued:

Vim.F

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sitepoint Logo - update 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
    /* Preparation */
    * {
        margin:0;
        padding:0;
    }
    body {
        padding:1em;
        background:#fcc;
        font-size:100&#37;;
    }
    /* The Logo */
    #ico {
        float:left;
        width:4.8em;
        margin:0 .5em 0 0;
    }
    body h1 {
        float:left;
        color:#036;
        font:3em/1.74 arial,helvetica,sans-serif;
    }
    body i {
        float:left;
        height:0;
        width:0;
        line-height:0;
        position:relative;
        border-right:.06em solid #f60;
        border-bottom:1.75em solid #f60;
        border-left:.75em dotted transparent;
    }
    body i i {
        float:right;
        padding:0 .75em 0 0;
        margin:0 -1.5em -1.75em 0;
        border:none;
        border-top:1.75em solid #f60;
        border-right:.75em dotted transparent;
    }
    body .a {
        margin:0 3.75em .25em 0;
    }
    body .b-1,
    body .b-2 {
        border-top:1.75em solid #036;
        border-right:.06em solid #036;
        border-bottom:none;
        margin:0 0 .25em;
    }
    body .b-1 i,
    body .b-2 i {
        border-top:none;
        border-right:.75em dotted transparent;
        border-bottom:1.75em solid #036;
        margin:-1.75em -1.5em 0 0;
    }
    body .b-2 {
        float:right;
        margin-right:1.5em;
    }
    body .c {
        margin:0 1.5em .25em 0;
        float:right;
    }
</style>
</head>
<body>
    <div id="ico">
        <i class="a"><i></i></i>
        <i class="b-1"><i></i></i>
        <i class="b-2"><i></i></i>
        <i class="c"><i></i></i>
    </div>
    <h1>sitepoint</h1>
</body>
</html>

There were other entries on a similar vein so I won't post them all but instead focus on some other different methods.

Zcorpan: (uses generated content works in Opera )

Code:

<!DOCTYPE html>
<title>CSS quiz 12A (zcorpan)</title>
<style>
.logo {
    display:inline-block;
    font:bold 7em Times New Roman, Times, serif;
    height:0;
    width:.2em;
    overflow:hidden;
    padding-top:.1em;
    padding-bottom:.1em;
    vertical-align:middle
}
.logo:before {
    content:'/\a/';
    display:block;
    white-space:pre;
    line-height:.78em;
    margin-top:-.79em;
    text-indent:.1em;
    margin-left:-.1em;
    color:orangered
}
.logo:after {
    content:'\\\\';
    display:block;
    white-space:nowrap;
    height:.3em;
    overflow:hidden;
    margin-top:-1.03em;
    letter-spacing:-.18em;
    color:navy
}
h3 {
    background:pink
}
</style>
<h1><span class=logo></span> sitepoint</h1>
<h2><span class=logo></span> sitepoint</h2>
<h3><span class=logo></span> sitepoint</h3>

zcorpan (uses CSS transformations - this only works in firefox 3.1 (nightly)

Code:

<!DOCTYPE html>
<style>
.logo {
    display:inline-block;
    vertical-align:middle
}
.logo:before {
    content:'\2580\a\2580';
    white-space:pre;
    color:orangered;
    -webkit-transform:skew(-15deg);
    -moz-transform:skew(-15deg);
    display:block;
    text-indent:-1.35em;
    padding-left:1.35em;
    line-height:1.3
}
.logo:after {
    content:'\2580  \2580';
    color:navy;
    display:block;
    -webkit-transform:skew(15deg);
    -moz-transform:skew(15deg);
    margin-top:-2em;
    padding-left:.3em
}
h3 {
    background:pink
}
</style>
<h1><span class=logo></span> sitepoint</h1>
<h2><span class=logo></span> sitepoint</h2>
<h3><span class=logo></span> sitepoint</h3>

secretAgentRegge (Css transformations - works in Safari)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>CSS - Test Your CSS Skills Number 12 A</title>
    <style type="text/css">
        body {padding:0.5em; font-size:1.5em; font-family:"Times New Roman", sans-serif;}
        b,i {display:block; height:3em; width:3em; margin-right:1em; margin-bottom:0.3em; overflow:hidden;}
        b {background:#f60; -webkit-transform:skew(-20deg, 0deg);}
        i {float:left; background:#036; -webkit-transform:skew(20deg, 0deg);}
        p + b {clear:both; margin-left:4em;}
        p {float:left; padding-left:0.18em; color:#036; font-size:6em; font-weight:bold; height:0em; overflow:visible; margin-top:-0.45em;}
    </style>
</head>
<body>
<b></b><i></i><i></i><p>sitepoint</p><b></b>
</body>
</html>

Stomme Poes:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="nl">
<title>Teh Log0z</title>
<meta name="description" content="logoz zonder tekens behalve voor IE6">
<style type="text/css">

* {
    margin: 0;
    padding: 0;
}
#logo {
    margin: 10px;
    padding-bottom: 1em;
    font-family: georgia, "times new roman", serif;
    width: 40em; /*IE6*/
    overflow: hidden;
    background-color: #eef; /*testz*/
}
b, i {
    height: 0;
    width: 0;
    float: left;
    font: bold 1.5em/1.2em impact, "arial black", sans-serif;/*IE6*/
    letter-spacing: -.4em; /*IE6*/
}
div[id] b, div[id] i {
    border-top: 1.8em solid transparent;
    border-right: 1.3em solid #f60;
    text-indent: -9999em;
    font-size: 1em;
    line-height: 1.1em;
}
i {
    font-style: italic; /*IE6*/
    color: #f60; /*IE6*/
}
div[id] i+i {
    border: 1em solid #f60;
    border-bottom-color: transparent;
    border-width: 0 0 1.8em 1.3em;
}
div p+i {
    margin-left: 2.8em;
}
div[id] b {
    font-size: .7em;
    border-top: 0;
    border-bottom: 1.8em solid transparent;
    border-right: 1.3em solid #036;
}
div b[class] {
    border-top: 1.8em solid transparent;
    border-left: 1.3em solid #036;
    border-bottom: 0;
    border-right: 0;
}
p {
    clear: left;
    color: #036;
    width: 100%; /*IE6*/
    margin: -.5em 0;/*IE6*/
    line-height: 1.5em;
}
div[id] p {
    padding: .14em 0;
    margin: 0;
    font-size: 1.5em;
    line-height: 1em;
    overflow: hidden;
}
</style>
</head>
<body>
<div id="logo"> <i>//////</i><i></i>
    <p><b>\\\\\\</b><b class="placeyoursecretmessagehere"></b><b>\\\\\\</b><b class="lawlz"></b> sitepoint.nl</p>
    <i> </i><i>//////</i> </div>
</body>
</html>

Yurikolovsky: (generateed content modern browers only)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
  <head>
  <meta http-equiv="logo-Type" logo="text/html; charset=utf-8">
  <title>YuriKolovsky: Solution to CSS Quiz #12A modern browsers</title>
  <style type="text/css">
  * {
        margin:0;
        padding:0;
        position:relative;
  }
  body {
        font-size:100%;  
  }
  #container {
        height:7.125em;
        border:solid #000 1px;
        background-color:#eeeeff;
        display:block;
        width:18.7em;
        margin:50px auto;
        padding:0.1em 2.625em 0.1em 0.1em;
  }
  span {
        font-size:4em;  
        font-family:"Times New Roman", Times, serif;
        color:#003366;
        float:left;
        line-height:160%;
        left:0.156em;
        height:100%;
  }
  #logo {
        width:7.375em;/*6.875em*/
        height:7.125em;
        float:left;
  }
  #logo b {
        float:left;
        margin:0 0.25em 0.25em 0;
  }
  #logo b:first-child {
        clear:right;
        margin-right:3.248em;
  }
  #logo b:last-child {
        clear:left;
        margin-left:3.248em;
  }
  #logo b:before, #logo b:after {
        content:"";
        display:block; 
        overflow:hidden;    
        border:0;
        height:0;
        width:0;
  }
  #logo b:before {
        border-right:1.063em dashed transparent;
        border-left:1.125em solid #003366;
        border-bottom:2.188em solid #003366;
        margin-left:1.063em;
  }
  #logo b:after {
        border-left: 1.063em dashed transparent;
        border-right: 1.063em dashed transparent;
        border-top:2.188em solid #003366;
        margin-top:-2.188em;
  }
  #logo b:first-child:before {
        border-left:1.063em dashed transparent;
        border-right:1.063em solid #ff6600;
        border-bottom:2.188em solid #ff6600;
        margin-left:0;
  }
  #logo b:first-child:after {
        border-left:1.063em solid #ff6600;
        border-right:1.125em dashed transparent;
        border-top:2.188em solid #ff6600;
        margin-left:1.063em;
        margin-top:-2.188em;
  }
  #logo b:last-child:before {
        border-left:1.063em dashed transparent;
        border-right:1.063em solid #ff6600;
        border-bottom:2.188em solid #ff6600;
        margin-left:0.25em;
  }
  #logo b:last-child:after {
        border-left:1.063em solid #ff6600;
        border-right:1.125em dashed transparent;
        border-top:2.188em solid #ff6600;
        margin-left:1.313em;
        margin-top:-2.188em;
  }
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
  <div id="container">
  <div id="logo"> <b></b><b></b><b></b><b></b> </div> 
  <span>sitepoint</span>
  </div>
  </body>
  </html>

Ornettes answer to quiz B with the square boxes:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}

div.box_1 {
    width: 40px;
    height: 40px;
    border-top: solid 2px #ccc;
    border-left: solid 2px #ccc;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    position:relative;
    top: 0px;
    left: 0px;
}

div.box_2 {
    width: 30px;
    height: 30px;
    border-top: solid 2px #ccc;
    border-left: solid 2px #ccc;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    position:relative;
    top: -39px;
    left: 5px;
}

div.box_3 {
    width: 20px;
    height: 20px;
    border-top: solid 2px #ccc;
    border-left: solid 2px #ccc;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    position:relative;
    top: -68px;
    left: 10px;
}

div.box_4 {
    width: 10px;
    height: 10px;
    border-top: solid 2px #ccc;
    border-left: solid 2px #ccc;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    position:relative;
    top: -87px;
    left: 15px;
}

div.box_5 {
    width: 2px;
    height: 2px;
    border-top: solid 2px #ccc;
    border-left: solid 2px #ccc;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    position:relative;
    top: -97px;
    left: 19px;
}

div.container_1 {
    width: 45px;
    height: 45px;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    font-size: 0;
}

div.container_2 {
    width: 45px;
    height: 45px;
    position: relative;
    top: -38px;
    left: 600px;
    overflow: hidden;
    font-size: 0;
}

div.container_3 {
    width: 45px;
    height: 45px;
    position: relative;
    top: 110px;
    left: 300px;
    overflow: hidden;
    font-size: 0;
}

div.container_4 {
    width: 45px;
    height: 45px;
    position: relative;
    top: 240px;
    left: 0;
    overflow: hidden;
    font-size: 0;
}

div.container_5 {
    width: 45px;
    height: 45px;
    position: relative;
    top: 200px;
    left: 600px;
    overflow: hidden;
    font-size: 0;
}
</style>
</head>
<body>
<div class ="container_1">
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
  <div class="box_5"></div>
</div>
<div class="container_2">
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
  <div class="box_5"></div>
</div>
<div class="container_3">
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
  <div class="box_5"></div>
</div>
<div class="container_4">
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
  <div class="box_5"></div>
</div>
<div class="container_5">
  <div class="box_1"></div>
  <div class="box_2"></div>
  <div class="box_3"></div>
  <div class="box_4"></div>
  <div class="box_5"></div>
</div>
</body>
</html>

YuriKolovsky solution to quiz 12 B:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
  <head>
  <meta http-equiv="logo-Type" logo="text/html; charset=utf-8">
  <title>YuriKolovsky: Solution to CSS Quiz #12B</title>
  <style type="text/css">
  * {
    margin:0;
    padding:0;
    position:relative;
  }
  html, body {
    height:80%;
  }
  body {
    font-size:100%;  
  }
  #container {                       /*I made the thing resizable for the fun of it*/
    height:200px;                    /*make this 50%*/
    width:220px;                     /*make this 23%*/
    margin:100px auto;
    border:solid #d8d9db 1px;
    border-bottom:solid #46494c 1px;
    border-right:solid #46494c 1px;
    padding:15px 5px 15px 5px;       
  }
  #a, #b, #c, #d, #e {
    width:50%;
    height:33%;
    float:left;
  }
  #b, #e {
    float:right;
  }
  #c {
    width:100%;
  }
  #b div {
    right:0;
  }
  #c div {
    position:absolute;
    text-align: center;
    top:50%;
    left:50%;
    margin-left:-11px;
    margin-top:-11px;
  }
  #c div div {
    position:relative;
    top:0;
    left:0;
    margin-left:0;
    margin-top:0;
  }
  #d div {
    bottom:0;
  }
  #e div {
    right:0;
    bottom:0;
  }
  div div div {
    border:solid #d8d9db 1px;
    border-bottom:solid #46494c 1px;
    border-right:solid #46494c 1px;
  }
  #container div div div div div div {
    width:1px;
    height:1px;
  }
  #container div div div {
    position:relative;
    display:block;
    padding:1px;
  }
  #container div div {
    position:absolute;
    display:block;
    overflow:hidden;
    padding:1px;
  }
  #container div div div div div div {
    padding:0px;
  }
  </style>
  </head>
  <body>
  <div id="container">
      <div id="a"><div><div><div><div><div></div></div></div></div></div></div>
      <div id="b"><div><div><div><div><div></div></div></div></div></div></div>
      <div id="c"><div><div><div><div><div></div></div></div></div></div></div>
      <div id="d"><div><div><div><div><div></div></div></div></div></div></div>
      <div id="e"><div><div><div><div><div></div></div></div></div></div></div>
  </div>
  </body>
  </html>

I think that covers most of the methods used so congratulations to all. If I missed anyone or I didn't post your entry then feel free to post your entries in a post of your own.

Thanks for taking part and keep an eye out for the next quiz which I will post tonight or tomorrow.

**RyanReese** · Feb 6, 2009 08:50

Whens next one.

Edit: Nvm, Tonight=a few hours from now?

**YuriKolovsky** · Feb 6, 2009 09:12

lol RoObear and Stomme Poes, i would have never thought of that!
using a text shape to create the sitepoint logo, lol!

haha stomme poes i see yours says sitepoint.nl
mine said sitetest the whole time i was making it, then i changed it to sitepoint, i don't know why i did that, i should have kept it.

i have no idea how zcorpan's version works, some help zcorpan?

**Paul O'B** · Feb 6, 2009 09:18

NEW Quiz Posted

I posted the new quiz already as I may not have time later. You can find it here:

**Raffles** · Feb 6, 2009 11:35

Paul, the second of Simon's entries is the same as the first. I'd be interested to see the use of the transforms!

**Stomme poes** · Feb 6, 2009 12:19

Man, I thought everyone else had used way less HTML and CSS than I. Now I feel better. I thought mine was very very bloated. : )

**Vim.F** · Feb 6, 2009 12:43

I thought of using the X too but scraped it since it needed more html...
Quite proud of myself that my 2nd version uses even less code than the original

I'll come back and give no. 13 a try after today's work.

**Paul O'B** · Feb 6, 2009 14:21

Originally Posted by Raffles

Paul, the second of Simon's entries is the same as the first. I'd be interested to see the use of the transforms!

oops - I've entered the correct one now - thanks

**PicnicTutorials** · Feb 6, 2009 14:56

Here's my code...

The pixel perfect version - pretty clean!

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>SitePoint Test #12</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
width:350px;
margin:50px auto;
position:relative;
}
.a {
width:20px;
border-top:35px solid #f60;
border-right:15px dashed transparent;
position:relative;
}
.b {
line-height:0;
width:20px;
border-bottom:35px solid #f60;
border-left:15px dashed transparent;
position:absolute;
top:-35px;
left:-15px;
}
.c { 
width:20px;
border-top:35px solid #036;
border-left:15px dashed transparent;
position:relative;
margin:4px 35px 4px -15px;
float:left;
}
.d {
line-height:0;
width:20px;
border-bottom:35px solid #036;
border-right:15px dashed transparent;
position:absolute;
top:-35px;
right:-15px;
}
.clear {
clear:left;
margin:0 0 0 55px;
}
p {
position:absolute;
top:-24px;left:100px;
line-height:1.2;
color:#036;
font-size:4em;
font-weight:bold;
}
</style> 
</head>

<body>
<div class="a"><div class="b"></div><p>sitepoint</p></div>
<div class="c"><div class="d"></div></div>
<div class="c"><div class="d"></div></div>
<div class="a clear"><div class="b"></div></div>
</body>
</html>

The scaling/ems version. A little polluted for my taste, but it works!

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>SitePoint Test #12</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
width:350px;
margin:50px auto;
position:relative;
line-height:0;
font-size:100%;
}
.a {
width:20px;
border-top:2.2em solid #f60;
border-right:.95em dashed transparent;
position:relative;
}
.b {
width:20px;
border-bottom:2.2em solid #f60;
border-left:.95em dashed transparent;
position:absolute;
top:-2.2em;
left:-.95em;
}
.c { 
width:20px;
border-top:2.2em solid #036;
border-left:.95em dashed transparent;
position:relative;
margin:0px 35px 4px -15px;
float:left;
display:inline;
}
.d {
width:20px;
border-bottom:2.2em solid #036;
border-right:.95em dashed transparent;
position:absolute;
top:-2.2em;
right:-.95em;
}
p {
position:absolute;
top:.18em;left:1.6em;
line-height:1.2;
color:#036;
font-size:4em;
font-weight:bold;
z-index:1;
}
.hide {
overflow:hidden;
padding:0 0 0 20px;
height:2.1em;
margin:0 0 .4em -20px;
}
.clear {
clear:left;
margin-left:2.15em;
}
.extra {
padding:0 0 0 1.21em;
}
.flaot {
float:left;
}
</style> 
</head>

<body>
<div class="hide extra"><div class="a"><div class="b"></div></div><p>sitepoint</p></div>
<div class="hide flaot"><div class="c"><div class="d"></div></div></div>
<div class="hide flaot"><div class="c"><div class="d"></div></div></div>
<div class="hide clear"><div class="a"><div class="b"></div></div></div>
</body>
</html>

**YuriKolovsky** · Feb 6, 2009 15:58

hahaha, pretty good entry EricWatson.

**zcorpan** · Feb 6, 2009 17:03

Originally Posted by YuriKolovsky

i have no idea how zcorpan's version works, some help zcorpan?

The one with the slashes? Well, there's the text "/" followed by a linebreak followed by another "/", which, after being cropped and aligned carefully, become the orange parts of the logo. Then there's the text "\\" which are also cropped and carefully aligned which are the blue parts of the logo. And that's all there's to it really.

**YuriKolovsky** · Feb 7, 2009 03:50

now when i think of it, it does sound obvious.
that is what i wanted to achieve <div class="logo"></div>

genius!

**Paul O'B** · Mar 3, 2009 07:31

A very late entry from iggyflo which uses another slightly different method.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sitepoint 12A</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin-left:150px;
width: 6em;
padding:0.2em;
background-color: #FFC;
color:#036;
font-size: 3em;
font-weight:bold;
line-height: 0.8em;
}
.a,.b,.d,.e{
position: absolute;
font-family: Arial;
letter-spacing: -0.2em;
}
.b,.d{
color:#f60;
}
.c{
padding-bottom: 0.2em;
position: absolute;
margin-left:1.5em;
}
.d,.e{
margin-left:0.7em;
}
</style>

</head>
<body>
<div>
<span class="b">/////////</span><br>
<span class="a">\\\\\\\\\</span>&nbsp;<span class="e">\\\\\\\\\</span>&nbsp;<span class="c">sitepoint</span><br>
&nbsp;<span class="d">/////////</span>
</div>
</body>
</html>

User Tag List

Thread: CSS - Test Your CSS Skills Number 12 :

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions