Подвійна рамка з використанням css
Одним з цікавих додатків властивості CSS3 box-shadow є створення подвійний рамки навколо елемента. Дуже цікавий ефект для оформлення сторінок, Але працювати він буде тільки в нових версіях браузерів, які підтримують box-shadow.
Однак існує ще кілька методів для створення такого ефекту. Причому очевидне використання фонового зображення є дуже далеким від ідеалу.
В даному уроці представлені п'ять методів для створення подвійний рамки навколо елемента. Причому тільки один з них вимагає зображення, а всі інші використовують чистий код CSS з відмінною підтримкою в браузерах.
Метод 1: border і outline
Даний метод працює тільки в тих браузерах, які підтримують властивість outline (все, крім IE6 / 7). Ви додаєте елементу обидва властивості border і outline.
Причина по якій даний метод працює полягає в тому, що рамка outline завжди виводиться із зовнішнього боку прямокутника. Проблема властивості outline проявляється при використанні плаваючих елементів, так як рамка перекривається з сусідніми елементами.
Метод 2: псевдо елемент
Даний метод вимагає абсолютного позиціонування рамки:
Метод 3: тінь
Найкращий метод, так як потрібно тільки одна строчка коду з установками властивості box-shadow.
Для появи подвійної рамки використовуються дві тіні. Вони визначаються через кому. Розумієте встановлюється в 0. Так як друга тінь перекривається першої, то вона має вдвічі більшу ширину. Ключовий момент - використання непрозорих квітів, що створює чітку межу між рамками.
Як і властивість outline. box-shadow не впливає на сусідні елементи і може перекривати їх. Тому треба встановити поле для формування зовнішнього вигляду композиції.
Природно, підтримка властивості box-shadow обмежена новими браузерами.
Метод 4: Додатковий елемент div
В даному методі використовується зовнішній елемент
Зовнішній елемент має трохи більший розмір, що створює ілюзію подвійний рамки.
Метод 5: властивість border-image
Ще одним новим методом є часто забуваємо властивість CSS3 border-image:
Знаєте інший метод?
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
aleksandr.argen
Це все добре, але будуть труднощі, з різними межами (наприклад, для того щоб створити ефект 3D) Все ж найкращий варіант - це два div-а один в іншому. Можна ще змішану версту - таблиця (div) або div (таблиця). Немає обмежень по браузерам і можна робити свої властивості для кожної сторони.
zloboglaz
Повністю згоден! Ось недавно іспользаванной для подвійної розподільної лінії ось таку конструкцію.
border-image: url (multiple-borders) 12 12 12 12 repeat; / * For Opera * / .gif забули border-image: url (multiple-borders.gif) 12 12 12 12 repeat; / * For Opera * / так працює)
не кажучи вже про те, що без в FF і IE працювати не буде.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!