Кодирование графики 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 Feed Icon
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 не может генерировать звуковые эффекты, по крайней мере сейчас.
Гриб, Трифорс, Поке Болл, Кирби
“Будучи ботаником, я сделал несколько ботанических творений - гриб Марио, Трифорс, Покебол и Кирби. Для тех, кто использует браузеры динозавров, есть скриншот того, как он должен выглядеть.”
Нян кэт
“Он содержит 81 элемент DOM, 688 строк чистого CSS и одну функцию JavaScript для зацикливания звука. Мой CSS не проходит тест CSSLint, и я очень горжусь этим.”
Узоры
CSS3 настолько хорош, что его также можно использовать для создания фундаментального актива для веб-дизайна, такого как эти шаблоны.
BonBon
BonBon - это приятные кнопки CSS3, созданные с целью: сексуально выглядящие, действительно гибкие кнопки с максимально минималистичной разметкой, насколько это возможно.
iOS иконки
Удивительно? Да. Эти иконки построены закругленные углы, тени, градиенты, RGBA, псевдо-элементы, а также прообразы, с помощью определенных инструментов, таких как инструменты Westciv и Border Radius.
Иконки социальных медиа
Для веб-разработчика невозможно создать иконки для социальных сетей, если они могут создавать iPhone и Doraemon с помощью CSS3. И они очень хорошо построили эти иконки.
Иконки социальных медиа
Еще один набор значков социальных сетей, которые показывают возможности CSS3 в создании значков, которые можно использовать.
своеобразный
“Своеобразным является бесплатный пакет иконок, выполненный только в CSS. Он был создан для сайтов и веб-приложений, которые зависят от меньшего количества HTTP-запросов или вообще не нуждаются в использовании какого-либо изображения..”
Иконки GUI
84 простых иконки GUI с использованием только CSS и семантического HTML. Это все еще считается “непроизводственный готов” иконки, но выглядят они очень перспективно.
Стив Джобс
Стив Джобс является не только символом цифрового века, но и лидером, который активно продвигает HTML5.
Twitter Fail Whale
Неудавшийся кит Twitter не удивит вас, кроме как в Internet Explorer 8 или ниже.
umbrUI
Элементы пользовательского интерфейса стали возможны с помощью CSS3, и это выглядит действительно гладко!
Adobe Photoshop Logo
Дань Photoshop без использования Photoshop.
Логотип Android
Android сделан из довольно простых форм, но он объясняет преимущество CSS3: вы можете создавать простые вещи и изменять их так, как вам нужно, используя только код, но не Photoshop.
Логотип Apple
Ретро логотип Apple, представленный с использованием CSS3, по-прежнему такой же потрясающий, как и при создании.
Atari Logo
Несколько лет назад, кто бы мог подумать, что логотип Atari будет воссоздан с использованием CSS3.
BP Logo
Простой логотип можно легко сделать с помощью CSS3. Лучше всего с некоторыми из этих логотипов, представленных здесь, есть код, который вы можете попробовать!
Dribbble Logo
Известный пользовательский сайт-витрина с логотипом Dribbble, продемонстрированным с использованием CSS3.
Magento Logo
Логотип Magento не слишком сложен для рисования, но результат выглядит профессионально.
McDonald Logo
Я люблю CSS3!
Щебетать птица
Идеальная пропорция, шляпный наконечник создателю.
Windows Logo
Windows логотип! Выглядит действительно круто, и это легко создать!
Логотип Internet Explorer
Действительно великое творение! Он работает в основных браузерах, кроме Internet Explorer 8 или ниже.
Логотип Google Chrome
Я не уверен, что вы любите новый логотип Google Chrome или нет, но этот CSS3 логотип Google Chrome выглядит потрясающе!
Opera Logo
Теперь практика для вас: каковы различия между этой частью CSS3 и реальной сделкой?
HTML5 логотип
HTML5 не может светить без CSS3!
Volkswagen Logo
За исключением цветовой схемы, этот клон CSS3 выглядит идентично оригинальному.
отражение
С бумом логотипов и графики, сделанных из чистого CSS3, идут дискуссии, в которых много споров о возможности использования графики, созданной CSS3, в реальной производственной среде..
Вообще графика CSS3 это хорошо, но это может раздражать, особенно если вам нужно изменить дизайн или просто изменить размер графики, также самая большая проблема здесь - технология еще не полностью поддерживается некоторыми браузерами, такими как Internet Explorer..
Как вы думаете? Будете ли вы использовать на своем сайте графику, созданную с помощью CSS3? Есть ли у вас решение для его текущих недостатков? Дайте нам знать вашу мысль и поделитесь с нами, если вы только что испекли CSS3 графику!
Больше
Желаете что-то сделать с помощью CSS3? Вы пришли в нужное место! Ниже приведены руководства и учебные пособия, которые помогут вам на пути к освоению CSS3..
- CSS3: создать навигационное меню Breadcrumb
- CSS3: создание логотипа RSS-канала
- CSS3: Создать окно поиска
- CSS3: руководство для начинающих
- CSS3 / HTML5: создание веб-страниц
- CSS3 / HTML5: создание контактной формы на основе AJAX
