Pure CSS3 Forrst Icon
Just was messing around and made this Forrst Icon using CSS3. This is all CSS3 coding (no images used), It works with Google Chrome and Mozilla, I never checked it out on Safari but I'm sure it's fine on that too. Our profile on Forrst is http://forrst.com/people/IconDeposit for more of my posts.
Zoom in and out, it's all CSS3 code!
The Wikidot syntax (for wikidot users):
[[div class="forrst-wrap"]]
[[div class="forrst-tree"]]
[[div class="forrst-trunk"]]
[[div class="forrst-branch1"]]
[[div class="forrst-branch2"]]
[[div class="forrst-branch3"]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
The HTML coding:
<div class="forrst-wrap"> <div class="forrst-tree"> <div class="forrst-trunk"> <div class="forrst-branch1"> <div class="forrst-branch2"> <div class="forrst-branch3"> </div> </div> </div> </div> </div> </div>
The CSS:
.forrst-wrap { /* Background of Icon */ width: 300px ; height: 300px ; border: none ; background: #335D30; background: -moz-linear-gradient(top,#4A7746 25%,#335D30 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,#4A7746),color-stop(100%,#335D30)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A7746',endColorstr='#335D30',GradientType=0); padding: 8px 15px 8px 12px; margin: 30px auto 0 ; padding: 30px ; -webkit-border-radius: 200px ; -moz-border-radius: 200px ; border-radius: 61px; position : relative; -webkit-box-shadow: 0 0 7px #1A3911 ; -moz-box-shadow: 0 0 7px #1A3911 ; box-shadow: 0px 0px 5px rgba(255,255,255,.5), inset 1px 1px 5px rgba(255,255,255,0.5) ; top:-20px; } .forrst-tree { /* Forrst Tree */ margin: 0 auto ; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 270px solid #4a9e64 ; width: 2px ; position: relative; } .forrst-trunk { /* The Tree Trunk */ width: 20px ; height: 125px ; background: #336f30; position: absolute ; top: 170px ; left: -10px ; } .forrst-branch1, .forrst-branch2, .forrst-branch3 { /* The Branches */ position: absolute; width: 13px; height: 45px; background: #336f30; } .forrst-branch1 { /* Left Branch */ left: -13px; top: 20px; margin-righ: 50px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;} .forrst-branch2 { /* Top Right Branch */ left: 25px; top: 20px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;} .forrst-branch3 { /* Bottom Left Branch */ left: -30px; top: -10px; right: -60px; -moz-transform: rotate(-0deg) !important; -webkit-transform: rotate(-0deg) !important; height: 60px !important;}
09 Jun 2011 22:21
No images??? Just CSS?? LOL this is really cool!!
Thanks :D
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Acquiring Psychology Writing Services is convenient? Seek Psychology Term Paper Services from a reputable company for your Psychology Writing Help Services online.
Are you in need of Criminology Writing Services for your Custom Criminology Research Paper Writing Services? Seek our Online Criminology Essay Writing Services.
Acquiring Engineering Assignment Help Services is convenient? Seek Online Engineering Writing Help Services from a reputable company for your Engineering Writing Services online.
Acquiring Psychology Assignment Help Services is convenient? Seek Psychology Essay Help Online from a reputable company for your Custom Psychology Papers Writing Services online.
Great work!