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


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

Агропросперіс Банк

Розрахунково-касове обслуговування для бізнесу

РКО для бізнесу

Безкоштовне відкриття рахунку

до 31.03.2021

Вигідні тарифи на обслуговування

Відсотки на залишок

Оперативне проведення платежів

Надійна система клієнт-банк iFOBS

Безкоштовні консультації

Валютні операції за вигідним курсом

Агропросперіс Банк

Кредити на розвиток бізнесу

Кредити для бізнесу

Сума: до 1 млн. дол. або еквівалент у гривні

Термін: обігові кошти – до 2 років, інвестиційні цілі – до 5 років

Овердрафти: без обов’язкової застави з періодом безперервного користування коштами до 90 днів

Bookeeper

295 грн. у місяць

Онлайн бухгалтерія

для ФОП і малого бізнесу

перші 30 днів безкоштовно!

Хотите получать уведомление на ваш email, когда мы опубликуем новые статьи?

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

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

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

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

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