Реалістичні тіні за допомогою css3 без використання зображень

Main View - Скарбничка розробника. Все про дизайн, розробці та створенні сайтів

Main View - блог про дизайн, веб дизайн та веб розробці. Якщо ви займаєтеся розробкою веб сайтів, або цікавитеся веб дизайном і просто дизайном речей, які нас оточують, або вам просто цікава тематика веб дизайну та веб розробок, то цей блог буде вам дуже корисний. На блозі ви можете знайти статті, огляди, уроки і багато іншого.

Реалістичні тіні за допомогою css3 без використання зображень

Привіт шановні Новомосковсктелі блогу mainview.ru. Продовжуємо освоювати основи CSS3. і сьогодні розглянемо кілька прикладів того, як створити реалістичні тіні за допомогою CSS3 без використання зображень. Як відомо тіні дуже широко використовуються в дизайні, оскільки саме тіні створюють ефект реалістичності. Раніше для створення тіней використовувалися зображення, але з приходом CSS3 стало можливим швидко і легко створювати реалістичні тіні.


У чому основна перевага тіней, створених за допомогою CSS3, так це в простоті реалізації. Вам достатньо визначити відповідні правила і призначити їх потрібного контейнера. В HTML документі ви використовуєте всього один тег, наприклад тег

. Тепер вам не потрібна додаткова розмітка, оскільки будуть створені додаткові псевдо елементи і поміщені за основним об'єктом.
В основі правила для створення тіней виглядають наступним чином:

Далі ми повинні розташувати псевдо-елементи і задати їм явні або неявні розміри:

Далі ви зможете подивитися готові приклади і повний код, необхідний для їх реалізайіі.

Реалістичні тіні за допомогою CSS3 без використання зображень

Друзі, дякую вам за ваші думки, сам я дотримуюся такої думки: якщо людина працює не на самому останньому браузері, і не хоче використовувати останні нововведення і можливості, швидкості і функціонал, то це його право, значить за великим рахунком йому наплювати і на нові можливості CSS3 і HTML5, і ймовірно він не оцінить те, що ці специфікації дозволяють робити. Це його вибір. Для тих, хто йде в ногу з часом і використовує останні версії, крім швидкості і функціоналу зуміє оцінити і то що дозволяють нові стандарти і те, що робить CSS3 думаю буде йому до смаку. А стара відмазка розробників намагаються догодити мертвому IE, мені не цікава. Краще витратити час на опрацювання верстки та застосування CSS3, ніж прилаштовувати милиці і фікси для старих браузерів. Їх час минув, як йде час флеш сайтів, і не стоїмо тягнути за вуха IE і йому подібні.

Я за CSS3 і проти IE)))
Ну а якщо серйозно, то Артем прав, контент то нікуди не дінеться

відмінна добірка! обов'язково почну використовувати.

з приводу того, що в іе7-8 це не працює. Ці речі є прикрасами, і на доступність контенту ніяк не впливають. Тому моя думка таке - якщо у людини не зовсім просунутий браузер, то він побачить сайт не таким красивим, як той відвідувач, у якого нормальний браузер. Головне те, що обидві людини прочитають інформацію.

плюс ще, використовуючи css3, ми зменшимо кількість запитів на сервер з картинками.

Залишайтеся на зв'язку

Читаючи цей сайт Ви даєте свою згоду на використання файлів Cookie. В іншому випадку покиньте цей сайт. погоджуюся