Лого www.SiteHere.ru

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

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

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

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

1. Симпсоны

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

Симсоны на CSS

2. Миньоны

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

Миньоны на CSS

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

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

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

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

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

Сыр на CSS

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

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

8-битный персонаж на CSS

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

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

Щит викинга на CSS

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

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

Меню с прозрачными иконками на CSS

8. Существа

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

Существа на CSS

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

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

Вывод

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

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

Успехов!

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

Невероятная CSS технология — Часть 1 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • Владимир

    Очень классные CSS плюшки. Спасибо Юрий. Кое что возьму на заметку для своего сайта.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *