Грунтуючись на розробках деяких шановних буржуинов, вони в цьому плані хлопці спритні, виходять непогані результати, в плані створення модальних вікон за допомогою CSS3. Завдання, в першу чергу полягає в тому, щоб домогтися більш-менш стійкою кросбраузерності кінцевого результату, ну і звичайно ж, з найменшими втратами, зменшити загальну кількість коду, як в HTML так і в CSS, щоб полегшити життя багатостраждальним трудівникам сайтобудування.
Що виходить в результаті, у мене в цьому плані на сьогоднішній день, ми з вами і подивимося, а заодно, і навчимося робити спливаючі модальні вікна за допомогою «магії» CSS3.
Для початку, все ті кого зацікавила ця тема, можете поглянути на приклад роботи модальних вікон в різних варіантах і завантажити вихідні:
Не варто сприймати цей урок, як керівництво до дії, так як на цьому етапі вдалося здобути впевнену підтримки лише сучасними браузерами (IE 9 +, Firefox, Safari, Opera, Chrome). З оглядкою на те, що стародавні версії браузера IE ще досить популярний серед користувачів, рекомендую розглядати цю статтю у вигляді якогось експерименту, демонстрації можливостей CSS3.
Добре, тепер перейдемо безпосередньо до самої розкладці html коду і стильового формування нашого модального вікна за допомогою css3)))
Крок 1. HTML
Далі наведу приклад базової html-розмітки спливаючих вікон і посилань активації:
Крок 2. CSS
За основу були взяті матеріали з сайту: dbmast.ru