Неймовірна css технологія - частина 1

Неймовірна 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! Особа кожного персонажа він розбив на дрібніші форми і потім зібрав їх усі разом. Також він зробив очі моргають, що зробило їх по-справжньому «живими».

Сімсон на 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 структурі використовується тільки один елемент - один блок!

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

6. щит вікінга

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

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

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

Це унікальне прозоре меню з коричневим повзунком, який виділяє активний пункт меню при наведенні. Хочу зауважити як плавно при цьому повзунок ковзає по меню.

Меню з прозорими іконками на CSS

8. істоти

Ці істоти, які зроблені на CSS, можуть посміхатися, сміятися чи просто виглядати байдуже. При наведенні вони трохи змінюються - що додає трохи інтерактиву.

Істоти на CSS

9. розтягується кошеня

Тіло цього кошеня буде розтягуватися або стискатися залежно від того як змінюється ширина вікна браузера. Наскільки далеко Вам вдасться розтягнути цього кошеня? # 128578;

висновок

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

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

Успіхів!

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!