Главная

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) создал анимированную «галочку», окружённую градиентной заливкой. Чтобы увидеть анимацию, кликните на неё.