beta About

Play and Learn Attitude

You believe learning should be fun, creative and engaging, right? So do we! That’s why we’ve let our passion free to explore the power of CSS in uncoventional and fun challenges. We call them eCSSpertiments and we invite you to learn and have fun while playing with them.

Adidas Originals Adidas Originals, part of CSS3 Logos Logos recreated using pure HTML and CSS3. No images were harmed. Kremlin 2 Kremlin 2, part of CSS3 Patterns Infinite awesomeness with these CSS3 based patterns. eCSSpert 8bit Logo eCSSpert 8bit Logo, part of Miscellaneous A place to store our bits and pieces of untamed CSS.
beta About
Home Logos Comments Code
/* ________________ __
___ / ____/ ___/ ___/____ ___ _____/ /_ _________ ____ ___
/ _ \/ / \__ \\__ \/ __ \/ _ \/ ___/ __/ / ___/ __ \/ __ `__ \
/ __/ /___ ___/ /__/ / /_/ / __/ / / /_ _/ /__/ /_/ / / / / / /
\___/\____//____/____/ .___/\___/_/ \__/ (_)___/\____/_/ /_/ /_/
/_/ */
body, #apple, .apple6,.apple7,.apple8,.apple61 {
background: #f2f2f2;
}
#apple {
left: 50%;
height: 202px;
margin: -101px 0 0 -86px;
top: 25%;
width: 172px;
}
.apple1 {
border-radius: 108px 108px 108px 94px/128px 128px 128px 128px;
height: 128px;
top: 47px;
width: 108px;
}
.apple2 {
left: 72px;
}
.apple3 {
border-radius: 22px 64px 64px 64px/106px 106px 106px 106px;
height: 106px;
left: 12px;
transform: rotate(-25deg);
top: 98px;
width: 64px;
}
.apple4 {
border-radius: 64px 22px 64px 64px/106px 106px 106px 106px;
left: 103px;
transform: rotate(25deg);
}
.apple5 {
height: 145px;
left: 54px;
top: 53px;
width: 70px;
}
.apple6 {
left: 50px;
transform: scaley(0.5);
top: 14px;
}
.apple61 {
border-radius: 20px;
height: 80px;
transform: rotate(-45deg) scale(0.9);
width: 80px;
}
.apple7 {
border-radius: 50%;
height: 22px;
left: 66px;
top: 192px;
width: 47px;
}
.apple8 {
border-radius: 50%;
height: 85px;
left: 144px;
top: 63px;
width: 85px;
}
#apple .slice {
height: 200px;
width: 180px;
}
#apple .slice1 *,.apple9:before,.apple9:after {
background: #62bb47;
}
#apple .slice2 * {
background: #fcb827;
}
#apple .slice3 * {
background: #f6821f;
}
#apple .slice4 * {
background: #e03a3e;
}
#apple .slice5 * {
background: #963d97;
}
#apple .slice6 * {
background: #009ddc;
}
#apple .slice1 {
clip: rect(0 180px 73px 0px);
}
#apple .slice2 {
clip: rect(73px 180px 98px 0px);
}
#apple .slice3 {
clip: rect(98px 180px 123px 0px);
}
#apple .slice4 {
clip: rect(123px 180px 148px 0px);
}
#apple .slice5 {
clip: rect(148px 180px 174px 0px);
}
#apple .slice6 {
clip: rect(174px 180px 205px 0px);
}
.apple9 {
left: 122px;
top: -18px;
transform: rotate(40deg);
}
.apple9:before,.apple9:after {
border-radius: 50%;
content: "#";
display: block;
height: 90px;
position: absolute;
text-indent: -9999px;
width: 90px;
}
.apple9:before {
clip: rect(0 13px 80px 0px);
}
.apple9:after {
clip: rect(14px 100px 76px 76px);
left: -64px;
}
#apple .header h2 {
text-indent: 200px;
}
/* style for the eCSSpert logo */
#info .ecsspert:before {
color: #63d6b9;
}
#info .ecsspert:after {
color: #fff;
}
/*---------------------------------------------------------
-* General Styles
-*-------------------------------------------------------*/
.icon, .icon * {
display: block;
position: absolute;
}
.icon {
top: 35% !important;
}
/*---------------------------------------------------------
-* Info
-*-------------------------------------------------------*/
/*
* Web Fonts from fontspring.com
*
* All OpenType features and all extended glyphs have been removed.
* Fully installable fonts can be purchased at http://www.fontspring.com
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Fontspring. The fonts are protected under domestic and international trademark and
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
* (c) 2010-2013 Fontspring
*
* The fonts included are copyrighted by the vendor listed below.
* Vendor: Fontfabric
* License URL: http://www.fontspring.com/fflicense/fontfabric
*/
@font-face {
font-family: "ZagBoldRegular";
src: url("/assets/fonts/ZagBold/Zag_Bold-webfont.eot");
src: url("/assets/fonts/ZagBold/Zag_Bold-webfont.eot?#iefix") format("embedded-opentype"),
url("/assets/fonts/ZagBold/Zag_Bold-webfont.woff") format("woff"),
url("/assets/fonts/ZagBold/Zag_Bold-webfont.ttf") format("truetype"),
url("/assets/fonts/ZagBold/Zag_Bold-webfont.svg#ZagBoldRegular") format("svg");
font-weight: normal;
font-style: normal;
}
#info {
bottom: 0;
color: #000;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 16px;
height: 40%;
position: absolute;
text-align: center;
width: 100%;
}
#info .post-title {
color: inherit;
font-family: "ZagBoldRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 48px;
margin: 0;
padding: 30px 0 0;
}
#info .post-info {
line-height: 1.35em;
margin-top: 1em;
}
#info .post-info p {
margin: 0;
}
#info .post-info a {
font-weight: bold;
color: inherit;
text-decoration: underline;
}
#info .ecsspert {
font-size: 2px;
margin-left: auto;
margin-right: auto;
opacity: 0.5;
transition: all 0.5s ease;
}
#info .ecsspert:hover {
opacity: 1;
} /*--------------------------------------------------------- -* The eCSSpert logo drawn wih CSS3 -*-------------------------------------------------------*/ .ecsspert { display: block; height: 15em; margin-top: 20px; overflow: hidden; position: relative; text-indent: 999px; white-space: nowrap; width: 58em; } .ecsspert:before, .ecsspert:after { content: ""; display: block; height: 1em; left: 0; position: absolute; top: 0; width: 1em; } .ecsspert:before { color: #fff; font-size: 2em; box-shadow: 3.5em 0 #48CFAD, 4.5em 0 #48CFAD, 5.5em 0 #48CFAD, 6.5em 0 #48CFAD, 7.5em 0 #48CFAD, 8.5em 0 #48CFAD, 9.5em 0 #48CFAD, 10.5em 0 #48CFAD, 11.5em 0 #48CFAD, 12.5em 0 #48CFAD, 13.5em 0 #48CFAD, 14.5em 0 #48CFAD, 0.5em 1em, 1.5em 1em, 3.5em 1em #48CFAD, 14.5em 1em #48CFAD, 16.5em 1em, 17.5em 1em, 20em 1em, 21em 1em, 23.5em 1em, 24.5em 1em, 26.5em 1em, 0em 2em, 2em 2em, 3.5em 2em #48CFAD, 9em 2em #48CFAD, 10em 2em #48CFAD, 12.5em 2em #48CFAD, 13.5em 2em #48CFAD, 14.5em 2em #48CFAD, 16em 2em, 18em 2em, 19.5em 2em, 21.5em 2em, 23em 2em, 25em 2em, 26.5em 2em, 27.5em 2em, 0em 3em, 1em 3em, 2em 3em, 3.5em 3em #48CFAD, 14.5em 3em #48CFAD, 16em 3em, 17em 3em, 19.5em 3em, 20.5em 3em, 21.5em 3em, 23em 3em, 24em 3em, 26.5em 3em, 0em 4em, 3.5em 4em #48CFAD, 5.5em 4em #48CFAD, 6.5em 4em #48CFAD, 8em 4em #48CFAD, 9em 4em #48CFAD, 11.5em 4em #48CFAD, 12.5em 4em #48CFAD, 14.5em 4em #48CFAD, 16em 4em, 19.5em 4em, 23em 4em, 25em 4em, 26.5em 4em, 2em 4.5em, 21.5em 4.5em, 0.5em 5em, 1.5em 5em, 3.5em 5em #48CFAD, 14.5em 5em #48CFAD, 16em 5em, 20em 5em, 21em 5em, 23em 5em, 25em 5em, 27.5em 5em, 3.5em 6em #48CFAD, 4.5em 6em #48CFAD, 5.5em 6em #48CFAD, 6.5em 6em #48CFAD, 7.5em 6em #48CFAD, 8.5em 6em #48CFAD, 9.5em 6em #48CFAD, 10.5em 6em #48CFAD, 11.5em 6em #48CFAD, 12.5em 6em #48CFAD, 13.5em 6em #48CFAD, 14.5em 6em #48CFAD, 6.5em 3em 0 1em #48CFAD, 0 1.5em, 2em 1.5em, 16em 1.5em, 18em 3em, 19.5em 1.5em, 21.5em 1.5em, 23em 1.5em, 26em 1.5em, 25em 3em, 0em 4.5em, 19.5em 4.5em, 26.5em 4.5em, 27em 5em; } .ecsspert:after { color: #000; font-size: 1em; box-shadow: 31em 1em, 9em 2em, 10em 2em, 11em 2em, 12em 2em, 13em 2em, 14em 2em, 16em 2em, 17em 2em, 18em 2em, 19em 2em, 20em 2em, 21em 2em, 23em 2em, 24em 2em, 25em 2em, 26em 2em, 27em 2em, 28em 2em, 31em 2em, 9em 3em, 16em 3em, 23em 3em, 31em 3em, 55em 3em, 2em 4em, 3em 4em, 6em 4em, 9em 4em, 16em 4em, 23em 4em, 31em 4em, 34em 4em, 35em 4em, 38em 4em, 41em 4em, 42em 4em, 45em 4em, 48em 4em, 49em 4em, 52em 4em, 2em 5em, 6em 5em, 9em 5em, 16em 5em, 23em 5em, 31em 5em, 34em 5em, 38em 5em, 41em 5em, 45em 5em, 48em 5em, 52em 5em, 57em 5em, 6em 6em, 9em 6em, 16em 6em, 19em 6em, 20em 6em, 21em 6em, 23em 6em, 26em 6em, 27em 6em, 28em 6em, 31em 6em, 38em 6em, 45em 6em, 52em 6em, 55em 6em, 56em 6em, 57em 6em, 6em 7em, 9em 7em, 16em 7em, 23em 7em, 31em 7em, 37em 7em, 38em 7em, 45em 7em, 51em 7em, 52em 7em, 55em 7em, 2em 8em, 3em 8em, 4em 8em, 5em 8em, 6em 8em, 9em 8em, 31em 8em, 34em 8em, 35em 8em, 36em 8em, 37em 8em, 41em 8em, 42em 8em, 43em 8em, 44em 8em, 45em 8em, 48em 8em, 49em 8em, 55em 8em, 2em 9em, 9em 9em, 20em 9em, 27em 9em, 31em 9em, 34em 9em, 41em 9em, 48em 9em, 52em 9em, 55em 9em, 6em 10em, 9em 10em, 12em 10em, 13em 10em, 14em 10em, 16em 10em, 17em 10em, 18em 10em, 19em 10em, 20em 10em, 23em 10em, 24em 10em, 25em 10em, 26em 10em, 27em 10em, 31em 10em, 34em 10em, 45em 10em, 48em 10em, 52em 10em, 5em 11em, 6em 11em, 9em 11em, 16em 11em, 23em 11em, 31em 11em, 34em 11em, 44em 11em, 45em 11em, 48em 11em, 52em 11em, 57em 11em, 2em 12em, 3em 12em, 4em 12em, 5em 12em, 31em 12em, 33em 12em, 34em 12em, 41em 12em, 42em 12em, 43em 12em, 44em 12em, 47em 12em, 48em 12em, 51em 12em, 52em 12em, 55em 12em, 56em 12em, 57em 12em, 31em 13em, 19em 25em 0 11em, 31em 14em, 15em 2em #48CFAD, 22em 2em #48CFAD, 15em 3em #48CFAD, 22em 3em #48CFAD, 15em 4em #48CFAD, 22em 4em #48CFAD, 15em 5em #48CFAD, 22em 5em #48CFAD, 15em 6em #48CFAD, 22em 6em #48CFAD, 15em 7em #48CFAD, 22em 7em #48CFAD, 15em 8em #48CFAD, 22em 8em #48CFAD, 15em 9em #48CFAD, 22em 9em #48CFAD, 15em 10em #48CFAD, 22em 10em #48CFAD, 15em 11em #48CFAD, 22em 11em #48CFAD; } #info .ecsspert { border: 2em solid transparent; border-bottom-width: 1em; border-right-width: 1em; font-size: 2px; margin-left: auto; margin-right: auto; opacity: 1; transition: all 0.5s ease; } #info .ecsspert:hover { opacity: 1; } .reference { background: #fc0; border-radius: 3px; box-shadow: 0 -3px 0 rgba(0,0,0,.5) inset; color: #332900; display: inline-block; margin: 10px 5px 5px; padding: 5px 10px 8px 10px; text-decoration: none; text-shadow: 0 1px 0 #ff0; } .reference:hover { box-shadow: 0 -5px 0 rgba(0,0,0,.5) inset; margin-top: 8px; padding-bottom: 10px; } .reference:active { box-shadow: 0 -1px 0 rgba(0,0,0,.5) inset; margin-top: 12px; padding-bottom: 6px; }
<div id="apple" class="icon">
<div class="slice1 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice2 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice3 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice4 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice5 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice6 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice">
<div class="apple6"><div class="apple61"></div></div>
<div class="apple7"></div>
<div class="apple8">
</div>
<div class="apple9"></div>
</div>
</div>
<div id="info">
<h1 class="post-title">Apple</h1>
<div class="post-info"><p>No images were harmed in the making of this logo.</p><p>Pure CSS3 and HTML rendering!</p></div>
<a href="http://www.ecsspert.com/css3-logos/apple#home" target="_top" class="ecsspert">eCSSpert.com</a>
</div>
CSS
HTML