5 цікавих проектів, реалізованих на CSS без використання JavaScript


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Силу CSS легко недооцінити. Для тих, хто використав CSS2, це лише інструмент для налаштування стилів. Із приходом CSS3 перед нами відкрилося багато можливостей: від стилізації елементів до створення анімацій, раніше можливих тільки з використанням Adobe Flash або JS. У цій статті наведені приклади, які наочно показують усі сучасні фічі CSS.

Тривимірна Сонячна система

Це демо займає 1500 рядків CSS-коду і використовує base64-зображення. Використовується зовсім небагато JavaScript, але що таке 42 рядки?

Мона Ліза

Автор описує свою Мону Лізу як “безглузду, але забавну”. Картина була відтворена з використанням великої кількості елементів box-shadow. Кожен елемент має невелике зрушення і розмиття, що надає зображенню приємного вигляду. Цікава альтернатива base64.

Прогрес-бар

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

iPhone 6

“Краще, що є в iPhone 6 – це його округла форма, адже тепер його можна намалювати на CSS”, – говорить автор цієї демо-версії. Живі шпалери смартфона також анімовані. Весь код займає 500 рядків, але для реалізації знадобилася достатня кількість HTML-елементів <div>

Жодні вбудовані зображення не використовуються.

Вступ із “Зоряних воєн”

“Я люблю Star Wars, але я не зміг знайти веб-версію вступу фільму 1977 року, тому мені довелося зробити її самому”. Інших пояснень і не треба – просто запускайте демо! Музика, звичайно, наявна в HTML у вигляді файлів .ogg.

Переклад статті “Stretching the limits of CSS 3: Amazing creations in pure CSS”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *