This was Inspired by some pure CSS3 logos I saw on 1stwebdesigner.com. So just for fun I thought I would create a Twitter logo using a few divs and some CSS3 properties such as border radius, gradients and box shadow. Absolutely no images were used whatsoever. If you are using an up to date modern browser such as Chrome, Safari, Firefox then you should see the correct rendering of the logo in this demo.
Here’s how the logo renders in a selection of popular browsers
The HTML
1 | <div class="wrapper"></div> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | .wrapper{ width:420px; height:430px; background-color:#67C7EA; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px;} .outline{ width:395px; height:405px; background-color:#A0DDF2; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; position:absolute;top:20px;left:20px} .inner{ width:370px; height:380px; background: -moz-linear-gradient(-90deg, #67C7EA, #fff); background: -o-linear-gradient(#67C7EA, #fff); background: -webkit-gradient(linear, 0 top, 0 bottom, from(#67C7EA), to(#fff)); border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; position:absolute;top:12px;left:12px} .white-twitter-left{ width:130px; height:331px; background-color:#ffffff; -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-left-radius:120px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomleft:120px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius:120px; -webkit-box-shadow: 0 10px 130px hsla(0,0%,0%,.2); -moz-box-shadow: 0 10px 130px hsla(0,0%,0%,.2); box-shadow: 0 10px 130px hsla(0,0%,0%,.2); position:relative;top:20px;left:60px;} .white-twitter-right{ width:130px; height:130px; background-color:#fff; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; position:relative;top:72px;left:120px;} .white-twitter-bottomright{width:130px; height:130px; background-color:#fff; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; position:relative;top:71px;left:120px;} .blue-twitter-left{ width:75px; height:275px; background-color:#B2F1FF; -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-left-radius:120px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomleft:120px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius:120px; position:relative;top:-230px;left:30px;} .blue-twitter-right{ width:120px; height:70px; background-color:#B2F1FF; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; position:relative;left:-20px;top:25px;} .blue-twitter-bottom-right{ width:120px; height:70px; background-color:#B2F1FF; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; position:relative;left:-20px;top:34px;} |
Very interesting and creative
Thank you Douglas! It’s so much fun!