238

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

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

Андроїд

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

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

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

Нічогенький такий код вийшов, але насправді не все так страшно як здається. Більшість коду звичайне 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 🙂

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