В даному уроці ми розберемо процес створення лайтбоксу з використанням тільки XHTML і CSS. Отриманий код буде працювати в Firefox, Opera, Chrome, Safari, IE6, IE7 та IE8.
Крок 1. Пишемо розмітку.
Розмітка дуже проста. На даному етапі у нас є два посилання, які ведуть в нікуди. Дані посилання в кінцевому підсумку будуть використовуватися для включення лайтбоксів, але спочатку нам потрібно додати розмітку для цих лайтбоксів після контейнера
Така розмітка обрана тільки для даного уроку. Вона дозволяє зробити CSS досить простим і наочним. У реальних проектах все можна змінювати так, як того вимагає дизайн інтерфейсу.
Крок 2. Робимо сторінку симпатичніше
Додамо наступний код CSS у секцію
вашого документа (вбудований CSS використовується тільки для наочності в рамках уроку):Все відносно просто, але треба зробити кілька пояснень, чому певні елементи мають задані властивості. Для лайтбоксу основну роль грає наступний стиль:
Зверніть увагу, що ми використовуємо RGBa для кольору фону. Internet Explorer, як завжди, не підтримує RGBa. Тому потрібно додати специфічну розмітку і стиль для IE, щоб обійти засідку. Помістіть наступний код CSS у секцію
вашого документа:Потім додайте наступну розмітку внизу визначення ваших лайтбоксів (перед закриває тегом кожного лайтбоксу):
Крок 3. Позиціонування лайтбоксу
Якщо подивитися на проміжний результат, то лайтбокс розташовується під нашим контентом. що не відповідає уявленням про даному елементі веб інтерфейсу. Таким нам потрібно додати властивостей CSS, щоб лайтбокс розташовувався поверх контенту. Наступний код треба додати до стилю #container.
Даний код може кілька бентежити. Чому ми додаємо його до #container. а не до стилю елемента #lightboxes. Тому що, якщо додати його до стилю елемента #lightboxes. то даний елемент-нащадок буде завжди над #container (незалежно від нічого), таким чином ми ніколи не зможемо натиснути на посилання в області контенту знову, навіть коли лайтбокс буде 'закритий'. А ми маємо в своєму розпорядженні # containerмежду елементами спадкоємцями #lightboxes. Чому це потрібно буде зрозуміло на наступному кроці.
Також нам потрібно бачити одночасно лише один лайтбокс, тому додамо до стилю #lightboxes.
Крок 4. Відкриття та закриття лайтбоксу
Отже, у нас налаштований вид елементів і позиціонування всього на сторінці, але як ми будемо відкривати і закривати лайтбокс? Просто.
Тепер нам треба видалити фоновий колір з елемента #close. щоб він виглядав так, як ніби тут нічого немає, і позиціонувати його позаду елемента #container, щоб ми могли натискати на посилання в #container.
Пам'ятайте, що елемент #container позиціонується між елементами лайтбоксу? Ось в чому полягає причина.
Наступний шматок CSS потрібно додати до стилю елемента #close.
Тепер можна відкривати і закривати лайтбокс!
Як це працює? Якщо ви не встановите z-index для елемента, то він буде розташовуватися в залежності від їхнього місця в коді. Отже елементи лайтбоксу
Крок 5. Додаємо контент в контейнер
В даний момент в нашому контейнері не так багато контенту, таким чином він весь виводиться на одну сторінку і все прекрасно працює. Однак, якщо ви додасте кілька сторінок контенту, то виявите, що ми ще не все зробили. З'являється смужка прокрутки, яка дозволяє прокручувати контент за кордон лайтбоксу і його перекриває шару. Так відбувається тому, що документ може прокручуватися, але лайтбокс має тільки 100% висоти вікна, а не документа. Елемент #container також має 100% висоти вікна, тому простим рішенням є переповнення контейнера, так що він буде прокручуватися замість документа. Додаємо до стилю елемента #container.
Якщо тепер подивитися на наш документ в Internet Explorer, то буде видно дві смуги прокрутки. Одна для #container і недоступна смуга прокрутки для документа. Це легко поправити, додавши наступний код CSS у розділ для IE:
Весь документ буде виглядати наступним чином:
висновок
Все зроблене служить тільки для проби сил і малоймовірно, що хтось буде використовувати його в реальних проектах. Але ніхто не може знати, на які думки і ідеї може наштовхнути подібний досвід!
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
Dicky_forester
на колесо миші неадекватно реагує
postaltomsk
скачати можна, а так би помістив в колекцію) thx
а також, коли наводиш курсор миші на смугу прокрутки, то все зникає (opera v. 10.62)
Дуже тупо виглядає кнопка демо як КУСОК.
На калёсіко миша навіщо реагує вікно? це не потрібно.
knyazsergei
Коли прямо на лайт боксі прокручуєш, він їде, а сторінка не прокручується!
Пару хаков застосував і стилі налаштував Начебто все норм, навіть на DLE поставив
Люди а можна як небуть змусити що якщо пройзашла яка нибуть помилка то виводилося в токую вікна?
судячи з усього текст в ній краще читається пошуковими системами. яб навіть може бути замінив би їм фейсбокс, еслиб НЕ прокрутка коліщатком))
tasmanangel
Скачайте код з "джерела уроку". Там нічого не прокручується, хоча начебто код один і той-же. Але я не порівнював повністю.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!