Create icons using only CSS

body { background: #f5f5eb; } #drive { top: 20px; left: 50%; position: absolute; width: 320px; height: 162px; -o-transition: transform 1s; -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } #drive:hover { -o-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } #sq1 { content: ''; position: relative; background: #fcd049; background-image: -o-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%); background-image: -moz-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%); background-image: -webkit-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%); background-image: -ms-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%); width: 100px; height: 177px; -o-transform: translate(153px) skewx(30deg); -moz-transform: translate(153px) skewx(30deg); -webkit-transform: translate(153px) skewx(30deg); transform: translate(153px) skewx(30deg); } #sq2 { position: relative; top: 0px; right: -72px; background: #3f82f7; background-image: linear-gradient(left , #0048E4 7%, #3F82F7 35%); background-image: -o-linear-gradient(left , #0048E4 7%, #3F82F7 35%); background-image: -moz-linear-gradient(left , #0048E4 7%, #3F82F7 35%); background-image: -webkit-linear-gradient(left , #0048E4 7%, #3F82F7 35%); background-image: -ms-linear-gradient(left , #0048E4 7%, #3F82F7 35%); width: 207px; height: 85px; -o-transform: skewx(-30deg); -moz-transform: skewx(-30deg); -webkit-transform: skewx(-30deg); transform: skewx(-30deg); } #sq3 { position: absolute; top: 28px; left: 33px; background: #2eb572; background-image: linear-gradient(top, #018D47 7%, #2EB572 35%); background-image: -o-linear-gradient(top, #018D47 7%, #2EB572 35%); background-image: -moz-linear-gradient(top, #018D47 7%, #2EB572 35%); background-image: -webkit-linear-gradient(top, #018D47 7%, #2EB572 35%); background-image: -ms-linear-gradient(top, #018D47 7%, #2EB572 35%); width: 84px; height: 207px; -o-transform: rotate(30deg) skewy(30deg); -moz-transform: rotate(30deg) skewy(30deg); -webkit-transform: rotate(30deg) skewy(30deg); transform: rotate(30deg) skewy(30deg); } #drive span { display: block; text-align: center; width: 100%; font-family: verdana; text-shadow: 0 1px #FFF; letter-spacing: -.08em; font-size: 24px; color: #a7a8a3; position: absolute; bottom: -50px; }
Hey guys, I want to share with you my new code snippet!

3 Responses

very informative snippet for CSS. Nice job man!
This is awesome, thanks!
Thank you!! Im trying to relearn all this again. So this is all very helpful!

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.