Pure CSS3 Forrst Logo - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class="logo"> <div id="tree"></div> <div id="trunk"> <div id="left-branch"></div> <div id="right-bottom-branch"></div> <div id="right-top-branch"></div> </div> </div>

body { font-family: myriad pro, arial; color: #; } a { text-decoration: none; } /* logo styles */ .logo { height: 220px; margin: 150px auto; position: relative; width: 160px; animation: fadeIn 3s; -moz-animation: fadeIn 3s; /* Firefox */ -webkit-animation: fadeIn 3s; /* Safari and Chrome */ } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } #tree { border-bottom: 200px solid #5b9a68; border-left: 80px solid transparent; border-right: 80px solid transparent; height: 0; left: 0; position: absolute; top: 0; width: 0; } #trunk { background: #3b543f; bottom: 0; height: 85px; left: 72px; position: absolute; width: 16px; } #left-branch { background-color: #3b543f; height: 30px; left: -10px; position: absolute; top: 15px; width: 6px; -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); -ms-transform: rotate(-50deg); -o-transform: rotate(-50deg); transform: rotate(-50deg); } #right-bottom-branch { background-color: #3b543f; height: 50px; left: 23px; position: absolute; top: 15px; width: 6px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } #right-top-branch { background-color: #3b543f; height: 27px; left: 20px; position: absolute; top: 2px; width: 6px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } /* end logo styles */

Tutorials Palace 17 December, 2018 No Comments

136 Views