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

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

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

Опубликовано на сайте: 26.01.2015

Автор: Перевод - Константин Войцеховский

Источник: http://www.prostoweb.com.ua/

Заказать онлайн:

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

кредит наличными

кредитку

кредит под залог

страховку


Полезное видео

Простоbank ТВ рассказывает о всех возможных способах выведения средств с электронного кошелька. Подписывайтесь на наш канал на Youtube, чтобы не пропустить новое полезное видео о личных и бизнес-финансах.




Забавное видео

2-х летний малыш любит бросать. Смотрите, что получилось, когда родители купили ему баскетбольное кольцо! Посмотреть все видео малыша можно на канале BasketBoy TV