18 потрясающих примеров CSS 01.04.2015

Вопреки популярному мнению, CSSнужен не только для отображения базовых стилей на веб-странице для того, чтобы сделать её более привлекательной. Существует большое количество вещей, которые можно сделать с помощью CSS, таких как анимация и взаимодействие с пользователями. Prostobiz.ua предлагает ознакомиться с ними. // 01.04.2015

1. Симпсоны

Крис Паттль (Chris Pattle) создал членов семьи Симпсонов используя только CSS. Он взял лицо каждого персонажа, разбил его на простые фигуры и снова собрал их воедино. Он даже анимировал глаза, чтобы вдохнуть больше жизни в этих персонажей.

2. Минионы

Если вам нравится мультфильм «Гадкий я», вам понравятся минионы, созданные Амром Закариа (Amr Zakaria) исключительно с помощью CSS - они укомплектованы мигающими глазами и дружественным взмахом руки.

3. Неисправная неоновая вывеска

Восхитительный пример применения text-shadow для достижения эффекта несправной неоновой вывески с помощью CSS (наведите курсор мыши на буквы “C”, “n” и “i”).

4. Сыыыыыырррр!

На первый взгляд, это обычный кусок сыра... Хьюго Гирадель (Hugo Giraduel) создал его с помощью CSS.

5. Пиксельный 8-битный персонаж

Ещё одно творение Хьюго Гираделя. На этот раз он создал пиксельный 8-битный персонаж с помощью одного элемента CSS.

6. Щит викингов

Этот щит викингов создал LukyVj. Он так хорошо сделан с помощью CSS, что его невозможно отличить от нарисованного в графическом редакторе.

7. Плавное меню с прозрачными пиктограммами

Это уникальное прозрачное меню с цветным слайдером, который окрашивает пункт, на который наведен курсор мыши.

8. CSS-создания

CSS-создания созданы @bennettfeely и могут улыбаться, смеяться или быть безэмоциональными. Вы можете добавить зубы, усы, изменить цвет создания, его глаза или рот.

9. Длиннокот

Изменяйте ширину окна вашего браузера и смотрите, как тело кота будет растягиваться или сжиматься.

10. Катящаяся банка колы

Когда вы нажимаете курсорные клавиши «вправо» и «влево», банка проворачивается влево или вправо.

11. Калькулятор

Дизайн этого калькулятора простой, но выполнен только с помощью CSS. Алгоритм работы калькулятора реализован на JavaScript.

12. Сеточный эффект анимации

Интересный эффект анимации.

13. Переключатель iOS7

Этот переключатель был сделан Дэном Иденом (Dan Eden).

14. Анимированная «галочка»

Саша Микаэль Тринкаус (Sascha Michael Trinkaus) создал анимированную «галочку», окружённую градиентной заливкой. Чтобы увидеть анимацию, кликните на неё.

15. Минион

Ещё одни очаровательный минион, созданный ислючительно с помощью CSS.

16. Анимация переключения меню

Посмотрите, как анимирован переход между разными формами.

17. Маскировка изображений

CSSMuse применил круглые, пятиугольные и шестиугольные маски к изображениям. Кроме того, маски увеличиваются при наведении на них курсора мыши.

18. Набор индикаторов загрузки

Вашему вниманию предлагается набор индикаторов загрузки, созданных только с помощью CSS.

А как вы используете CSS? Напишите в комментариях!

Первоисточник: сайт hongkiat.com


Горячие предложения

Кредиты на карту

более 30 онлайн-сервисов!

Ставка - от 0.01%

Срок - до 180 дней

Сумма - до 20 000 грн.

Документы - паспорт и код

Hotline Finance

Зелена карта для виїзду за кордон

Ціна нижча, ніж при покупці страховки на кордоні

Без візитів до страхових агентів

Готова страховка з доставкою на email

Безпечне оформлення і оплата онлайн

Получать все новости и статьи сайта в одном email в день?

также следить за новостями сайта можно в Facebook Instagram Twitter Viber Telegram

Рейтинги услуг банков для бизнеса

Путеводители

Кредит предприятию и частному предпринимателю (СПД)

Кредиты для бизнеса и частных предпринимателей в Украине (ЧП, СПД): ставки, порядок предоставления