Невероятная CSS технология — Часть 1

Если Вы постоянный посетитель моего сайта, то скорее всего Вы знаете насколько мощная CSS технология. А также знаете то, что с ее помощью можно сделать сайт «легче» и быстрее. Наверняка Вы видели уроки по анимации и трансформации, которые позволяют делать красивые двигающиеся элементы без использования Javascript. Но то, что Вы увидите сегодня — удивило даже меня!

Уроки по анимации на CSS3 смотрите здесь:

• 3D преобразования и анимация CSS — Урок 1. Вращение
• 3D преобразования и анимация CSS — Урок 2. Карусель новостей
• 3D преобразования и анимация CSS — Урок 3. Вращающийся куб
• 3D преобразования и анимация CSS — Урок 4. Управляем мячом
• 3D преобразования и анимация CSS — Урок 5. Колесо изображений

Я постоянно пишу какие-то сложные темы, которые многим непонятны. Поэтому сегодняшняя статья будет понятна для всех. Пора немного отдохнуть от всех этих сложных кодов и просто посмотреть что можно сделать с помощью CSS технологии.

1. Симпсоны

Crhris Pattle создал всех героев мультсериала «Симпсоны» используя ТОЛЬКО CSS! Лицо каждого персонажа он разбил на более мелкие формы и затем собрал их все вместе. Также он сделал глаза моргающими, что сделало их по-настоящему «живыми».

2. Миньоны

Следующие персонажи впечатлили меня еще больше! Все смотрели мультфильм «Гадкий я»? Я думаю — да. Amr Zakaria создал этих персонажей с помощью CSS. Также как и в примере выше — у миньонов моргающие глазки. Но ко всему этому один из них умеет махать рукой.

3. Мигающая неоновая вывеска

Это потрясающий пример использования свойства text-shadow, чтобы сделать красивый эффект «неработающих» букв. При наведении на буквы ‘c’,’n’ и ‘i’ они гаснут. Очень круто смотрится, а ведь всё это сделано только с помощью CSS3!

4. Аппетитный кусочек сыра

Hugo Giraduel создал достаточно реалистичный (для мультфильмов) кусочек сыра на тарелке. Не знаю как для Вас, но для меня он выглядит действительно круто, если учесть что это только CSS3!

5. «Одноэлементный» персонаж на CSS

Данное творение также принадлежит Hugo Giraduel. Чем выделяется данный 8-битный персонаж среди остальных, так это тем, что в HTML структуре используется только один элемент — один блок <div>!

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

Lucas Bonomi создал красивый щит викинга. Она настолько красиво выглядит, что даже не скажешь что она сделана с помощью CSS.

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

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

8. Существа

Эти существа, которые сделаны на CSS, могут улыбаться, смеяться или просто выглядеть равнодушно. При наведении они немного меняются — что добавляет немного интерактива.

9. Растягивающийся котенок

Тело этого котенка будет растягиваться или сжиматься в зависимости от того как меняется ширина окна браузера. Насколько далеко Вам удастся растянуть этого котёнка? 🙂

Вывод

Ну что, отдохнули? Я думаю расслабляющий получился пост, который одновременно показывает технологию CSS с другой стороны. Доступна следующая часть статьи о чудесах CSS.

Внимание! Скоро Вас ждет новогодний сюрприз, поэтому внимательно следите за обновлениями на сайте и Вы также его получите. Подарок очень эксклюзивный и пригодится каждому сайту.

Успехов!

С Уважением, Юрий Немец