Кодування Кунг-фу 35 Графіка Вбудована чисто з CSS3
Подивіться на графіку нижче, вражаюча Photoshop працює правильно? Ні, вони створені CSS3. Так, вони повністю “звернено” за допомогою CSS3! Коли ми бачили достатню кількість анімацій CSS3, ми думали, що все це може зробити CSS3 як потенційний Flash-вбивця, але ми помиляємося. Розробники, можливо, не задовольняють задоволення від анімації, тому знову ж таки, вони просувають кордони CSS3, щоб кинути виклик графічному редактору.
З цим постом виходить 35 ретельно підготовлених CSS3 графіки, які навіть включають те, що ви не хотіли б пов'язати з CSS3 Apple iPhone, мультиплікаційний персонаж Doraemon, і ще більше сюрпризів! Чорт, деякі з них навіть приходять з докладним підручником, який навчить вас, як його досягти! Так що не пропустіть чудовий шанс навчитися створювати графіку за допомогою CSS3 і трохи HTML, давайте будемо шалені з CSS3!
Настійно рекомендується переглянути ці демонстрації за допомогою останньої версії Google Chrome у версії Safari або Developer. Більшість демонстрацій підтримують останню версію Firefox і Google Chrome.
Піктограма RSS-каналу
RSS Feed Icon побудований з 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, Поке-м'яч, Кірбі
“Будучи ботаніком, я зробила деякі трюки для засмічення - гриби Маріо, Triforce, Pokéball і Kirby. Для тих, хто використовує браузери динозаврів, є скріншот того, як він повинен виглядати.”
нянь кішка
“Він містить 81 DOM елементів, 688 рядків чистого CSS і одну функцію JavaScript для циклічного аудіо. Мій CSS не пройшов тест CSSLint, і я дуже пишаюся цим.”
Шаблони
CSS3 настільки великий, що він також може бути використаний для створення основного активу для веб-дизайну, наприклад, таких шаблонів.
BonBon
BonBon - це милі кнопки CSS3, створені з метою: сексуальні, дійсно гнучкі кнопки з максимально мінімальною розміткою.
Піктограми iOS
Дивовижний? Так. Ці піктограми побудовані закруглені кути, тіні, градієнти, rgba, псевдоелементи, і перетворює, за допомогою певних інструментів, таких як інструменти westciv і Border Radius.
Соціальні медіа іконок
Це неможливо для веб-розробника не створювати іконки соціальних медіа, якщо вони можуть створювати iPhone і Doraemon за допомогою CSS3. І ці ікони дуже добре побудували.
Соціальні медіа іконок
Інший набір іконок соціальних медіа, які показують можливості CSS3 у створенні корисних іконок.
Своєрідне
“Особливістю є безкоштовний пакет іконок, створений тільки в CSS. Він створений для сайтів і веб-додатків, які залежать від меншої кількості запитів HTTP або взагалі не потребують використання жодного зображення.”
Іконки графічного інтерфейсу
84 простих графічних іконки використовують тільки CSS і семантичний HTML. Це як і раніше розглядається як “готова невиробнича” іконки, але вони виглядають дуже перспективно.
Стів Джобс
Стів Джобс - це не тільки ікона цифрового віку, але й лідер, який дуже сприяє HTML5.
Twitter Fail Whale
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 не надто складно зробити, але результат виглядає професійно.
Логотип McDonald
Я люблю 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: Створення меню навігації Breadcrumb
- CSS3: Створення логотипу RSS-каналу
- CSS3: Створити вікно пошуку
- CSS3: Посібник для початківців
- CSS3 / HTML5: Створення веб-сторінок
- CSS3 / HTML5: Створити контактну форму на основі AJAX
