Кодиране на Kung-fu 35 Графика, построена изцяло с CSS3

Вижте графиките по-долу, страхотно Photoshop работи правилно? Не, те са създадени от CSS3. Да, те са напълно “съставен” от CSS3! Когато видяхме достатъчно CSS3 анимации, смятахме, че всички тези CSS3 могат да направят като потенциален Flash убиец, но грешихме. Разработчиците може би не се задоволяват с удоволствието от анимацията, така че отново изтласкват границите на CSS3, за да оспорват сферата на графичния редактор..

С тази публикация идват 35 внимателно изработени CSS3 графики, които дори включват нещо, което не бихте имали връзка с CSS3 Apple iPhone, анимационен герой Doraemon, и още изненади! По дяволите, някои от тях дори идват с подробен урок, който ви научи как да го постигнете! Така че не пропускайте големия шанс да се научите да създавате графики с помощта на CSS3 и малко HTML, нека да се побъркаме с CSS3!

Препоръчваме ви да видите тези демонстрации, като използвате последната версия на Safari или версията на Google Chrome за програмисти. Повечето демонстрации поддържат последната версия на Firefox и Google Chrome.

Икона на RSS емисия

RSS Feed Икона построена с CSS3, изключително от Hongkiat! Заедно с връзката идва и урок, който всъщност можете да научите “рисувам” иконата на RSS емисия, без да използвате дори едно изображение. Създайте чудо CSS3 със собствените си ръце!

Apple iMac

Да, очите ми също не могат да повярват, но това е iMac “сглобени” само с CSS3.

Клавиатура на Apple

Apple клавиатура е изградена с CSS3! По дяволите, бутоните на клавиатурата могат дори да бъдат натиснати.

Apple iPhone

О, още нещо: iPhoneCSS3.

черешов цвят

Истинската невероятност на CSS3 е, че тя може да се използва за изграждане на нещо, включително растения и животни!

Чаша за кафе

Изморителен ден? Нека имаме CSS3 кафе, най-добре поднесено с Safari / Google Chrome.

Doraemon

Този Doraemon е известен с CSS3 теста за съвместимост. Опитайте го в Internet Explorer 8 или по-долу и имайте приятен ден.

Meowww!

Сега гледате котка, построена изцяло с код! Жалко, че CSS3 не може да генерира звукови ефекти, поне засега.

Гъби, Triforce, Поке топка, Кърби

“Като маниак, направих някои измислени творения - гъби Марио, Трифорс, Покел и Кирби. За тези, които използват браузъри с динозаври, има скрийншот на това как трябва да изглежда.”

Nyan Cat

“Той съдържа 81 елемента DOM, 688 реда чист CSS и една JavaScript функция за циклично аудио. Моят CSS не успее да тества CSSLint и наистина се гордея с това.”

Модели

CSS3 е толкова голям, че може да се използва и за изграждане на основен актив за уеб дизайн, като тези модели.

BonBon

BonBon са сладки бутони на CSS3, създадени с мисъл: секси изглеждащи, наистина гъвкави бутони с възможно най-минималистичен маркер.

IOS икони

Невероятно? Да. Тези икони са изградени от заоблени ъгли, сенки, градиенти, RGBA, псевдо-елементи, и трансформации, с помощта на определени инструменти, като инструменти на westciv и радиус на границата.

Икони на социалните медии

Това е невъзможно за уеб разработчиците да не изграждат икони на социални медии, ако могат да създадат iPhone и Doraemon с CSS3. И изградиха тези икони много добре.

Икони на социалните медии

Друг набор от икони на социалните медии, които показват възможностите на CSS3 при създаването на използваеми икони.

особен

“Особено е безплатен пакет с икони, направен само в CSS. Той е създаден за сайтове и уеб приложения, които зависят от възможно най-малко HTTP заявки или не се нуждаят от никакви изображения.”

Икони на GUI

84 прости GUI икони, използващи само CSS и семантичен HTML. Това все още се счита за “готов за производство” икони, но изглеждат много обещаващи.

Стийв Джобс

Стив Джобс е не само икона на дигиталната ера, но и лидер, който силно насърчава HTML5.

Twitter Неуспешен кит

Twitter китът няма да успее да ви изненада, освен в Internet Explorer 8 или по-долу.

umbrUI

Елементите на потребителския интерфейс станаха възможни с CSS3 и изглежда наистина елегантно!

Лого на Adobe Photoshop

Почит на Photoshop без използване на Photoshop.

Android лого

Android е направен от доста прости форми, но обяснява предимството на CSS3: можете да правите прости неща и да ги модифицирате по какъвто начин искате, като използвате само код, но не и Photoshop.

Лого на Apple

Ретро лого на Apple, представено с помощта на CSS3, все още е толкова страхотно като времето, когато е създадено.

Лого на Atari

Преди години, който би си помислил, че логото на Atari ще бъде пресъздадено с помощта на CSS3.

Лого на BP

Лесното лого може да се направи лесно с CSS3. Най-доброто нещо с някои от тези логотипи, представени тук, са кодовете, които можете да изпробвате!

Лого на Dribbble

Известното лого на сайта на Dribbble, задвижвано от потребителя, е демонстрирано с помощта на CSS3.

Лого на Magento

Логото на Magento не е твърде трудно за изготвяне, но резултатът изглежда професионално.

Лого на Макдоналд

Обичам CSS3!

Twitter Птица

Перфектна пропорция, върха на шапката към създателя.

Лого на Windows

Лого на Windows! Изглежда наистина страхотно и е лесно да се създаде!

Лого на Internet Explorer

Наистина страхотно творение! Работи в основни браузъри, с изключение на Internet Explorer 8 или по-ниска.

Лого на Google Chrome

Не съм сигурен, че обичате новото лого на Google Chrome или не, но това лого на CSS3 Google Chrome изглежда страхотно!

Лого на Opera

Сега практиката за вас: какви са разликите между тази част от CSS3 и реалната сделка?

Лого на HTML5

HTML5 не може да свети без CSS3!

Лого на Volkswagen

Освен цветовата схема, този CSS3 клон изглежда идентичен с оригиналния.

размисъл

С разцвета на логата и графиките, направени от чистия CSS3, идват дискусиите, които силно дебатират за използваемостта на графиките, произведени от CSS3 в реалната световна производствена среда.

Като цяло CSS3 графиката е наред, но тя може да получите досадно, особено когато трябва да промените дизайна или просто да промените размера на графиката, и най-голямата болка тук е, че технологията все още не се поддържа напълно от някои браузъри като Internet Explorer.

Какво мислиш? Ще използвате ли графиката на CSS3 в сайта си? Имате ли решение за текущите си недостатъци? Споделете вашите мисли и споделете с нас, ако току-що изпечете CSS3 графика!

| Повече ▼

Имате ли желание да направите нещо с CSS3? Вие сте попаднали на правилното място! По-долу са изброени ръководства и ръководства, които да ви помогнат много по пътя към овладяването на CSS3.

CSS3: Създаване на меню за навигация в кръв
CSS3: Създаване на лого на RSS емисия
CSS3: Създаване на поле за търсене
CSS3: Ръководство за начинаещи
CSS3 / HTML5: Създаване на уеб страници
CSS3 / HTML5: Създаване на формуляр за контакт, базиран на AJAX