355

Малюємо андроїда на css3

Сучасна верстка отримала елемент творчості і стала потужним інструментом для web-дизайну. Нарешті можливості, які раніше могли відтворитися лише за рахунок громіздких кодів і спеціального програмного забезпечення (мертвий flesh), стали доступними і для простих смертних верстальщиків. Ці всі елементи творчості, можливі лише завдяки технології CSS3. Вона досі ще не повноцінна і не набула масового характеру вжитку, але це не заважає малювати нею різні цікаві речі. Хочу показати шматок коду, за допомогою якого я намалював усім відомий логотип андроїда, власне – самого Андроїда 🙂

Андроїд

Спочатку глянемо на html код:

Apple - гівнюк :) Антена андроїда з чого зроблена? О_о Android зроблений на цсс3 технології ..Тіло андроїда на css3 Ліва рука андроїда цсс3 права рука андроїда Ліва нога андроїда зліпленого з css3Малюнок андроїда на css3 технології

Це звичайний html код, як видно наш андроїд буде побудований на спанах, тому їм потрібно задати властивість display: block; – щоби легко ними керувати.

А тепер глянемо на css код нашого малюнка:

.android span{display: block; background: #8DC52B; text-align: center; color: #fff; font: normal normal 400 80px/19px Georgia;}
.android:hover .dron-liva-ryka{margin: -240px 0px 0px 70px; transform: rotate(160deg);}
.android:hover .dron-prava-ryka{margin: -40px 0px 0px 280px;}
.givnuk{width:200px; height:60px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;;margin:0 0 0 280px; border:3px solid #8DC52B; background:#fff !important; color:#000 !important; font-size:22px !important;padding-top:30px;-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}
.dron-left-rig{width:50px; height:10px;border-radius:5px 0px 0px 5px; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px;margin:0 0 0 135px; text-indent: -9999px;-webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg);}
.dron-right-rig{width:50px; height:10px;border-radius:5px 0px 0px 5px; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px;margin:-12px 0 0 215px; text-indent: -9999px;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg);}
.dron-cherep{width: 115px; height: 55px;margin: 0 auto 10px; border-radius: 70px 70px 0 0; -moz-border-radius: 70px 70px 0 0; -webkit-border-radius: 70px 70px 0 0; padding: 15px 0 0 25px; letter-spacing: 30px;}
.dron-tilo{width: 140px; height: 160px; margin: 0 auto; border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; text-indent: -9999px;}
.dron-liva-ryka{width: 40px; height: 120px;margin: -160px 0 0 80px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; text-indent: -9999px;}
.dron-prava-ryka{width: 40px; height: 120px;margin: -120px 0 0 280px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; text-indent: -9999px;}
.dron-liva-noga{width: 40px; height: 60px;margin: 40px 0px 0px 150px; border-radius: 0 0 20px 20px; -moz-border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; text-indent: -9999px;}
.dron-prava-noga{width: 40px; height: 60px;margin: -60px 0px 0px 210px; border-radius: 0 0 20px 20px; -moz-border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; text-indent: -9999px;}

Нічогенький такий код вийшов, але насправді не все так страшно як здається. Більшість коду звичайне css, призначене для відображення та позиціонування наших спанів (розміщення). І між ним заховався наш згадани css3 код. Використано всього лише дві нові властивасті, це border-radius – задає радіус скруглення блоків (у нас спанів), та transform: rotate(-70deg); – це властивість повертає блок на заданий градус. Для коректного відображення у фаєрфоксі, та хромі задано властивості: -moz-border-radius, -webkit-border-radius (аналоги border-radius), та -webkit-transform, -moz-transform, -o-transform, -ms-transform (аналог transform) відповідно.

А вийшов у нас ось такий Андроїд:

Apple – гівнюк 🙂Антена андроїда з чого зроблена? О_оAndroid зроблений на цсс3 технології..Тіло андроїда на css3Ліва рука андроїда цсс3права рука андроїдаЛіва нога андроїда зліпленого з css3Малюнок андроїда на css3 технології

Гарна штука ця CSS 3 🙂

Читайте також: