Блоки використовуються практично на кожному сайті для виділення різних ділянок сторінки (меню, заголовків і т.п.). У цій статті я покажу, як зробити блок з округленими кутами, градієнтною заливкою і тінню.
В першу чергу нагадаю, як зробити звичайний прямокутний блок. Для цього досить використовувати дві CSS директиви: border і background-color. Перша встановлює колір, тип лінії і товщину рамки блоку, а друга - колір фону. За допомогою директив margin і padding можна змінювати відстані між кордонами блоків і між текстом всередині блоку і його межами.
Тут все просто. Але ми хочемо, щоб кордон нашого блоку мала закруглені кути, сам блок відкидав тінь, а верхня і нижня частина блоку були виділені за допомогою градієнта. Такий дизайн накладає деякі обмеження. По-перше, для створення кордонів з тінню, градієнта і закруглені кути нам доведеться використовувати малюнки. По-друге, розміри градієнтів і тіні визначаються цими малюнками і їх не можна змінювати (взагалі-то, можна, але виникнуть спотворення).
Щоб трохи спростити завдання, будемо вважати, що ширина блоку завжди залишається постійною, а висота може змінюватися.
В першу чергу намалюємо макет блоку.
Ви можете завантажити файл з макетом , Створений в Photoshop (72 кБ).
Наш макет умовно можна розбити на три частини. Верхня частина (в якій знаходиться заголовок) має фон у вигляді градієнта. Центральна частина - однотонний фон, але справа знаходиться кордон з тінню. Нижня частина - теж градієнт і тінь.
Таким чином, нам потрібно вирізати з нашого макета і зберегти у вигляді окремих малюнків три блоки: верхній градієнт, нижній градієнт і праву межу з тінню. Причому малюнок з кордоном повинен мати висоту 1 піксель. Надалі, за допомогою директиви background-repeat: repeat-y; ми продублюємо його по всій висоті центральній частині нашого блоку. Нижче показані малюнки, які у мене вийшли.
Примітка: ви можете подивитися, як розрізаний макет в програмі ImageReady, або зайти в папку images, яка знаходиться в архіві з прикладом. Якщо будете розрізати самі, не забудьте зробити невидимим шар з текстом заголовка.
Тепер подивіться на html розмітку нашого блоку.
<Div class = "roundRectBlock"> <! - Початок roundRectBlock -> <div class = "topImage"> <! - Початок topImage -> <p class = "title"> Заголовок </ p> </ div > <! - Кінець topImage -> <p> Текст блоку. Може містити різну кількість рядків з різним вирівнюванням. Наприклад, по лівому краю. </ P> <div class = "bottomImage"> <! - Початок bottomImage -> </ div> <! - Кінець bottomImage -> </ div> <! - Кінець roundRectBlock ->
Оскільки CSS не дозволяє привласнювати кілька фонових зображень для одного тега div, то ми використовуємо два таких тега з класами topImage, bottomImage (рядки 2 і 10) для верхнього і нижнього градієнтів, а основний текст в центральній частині будемо форматувати як зазвичай, за допомогою тегів < p>.
Для того, щоб змінювати положення всього блоку цілком, ми помістимо його в контейнер (тег <div class = "roundRectBlock"> рядок 1).
З розміткою розібралися. Тепер подивимося на таблицю стилів.
.roundRectBlock {left: 100px; top: 20px; width: 315px; margin-top: 20px; margin-bottom: 20px; margin-left: 20px; } .RoundRectBlock .topImage {margin: 0; padding: 0; background-image: url (images / header.gif); height: 41px; width: 315px; } .RoundRectBlock p.title {margin: 0; padding: 10px 10px 0px 30px; font-size: 130%; color: # 71775E; background-color: transparent; background-image: none; border-left: none; font-family: "Times New Roman", serif; } .RoundRectBlock p {margin: 0 0 0 0; padding: 5px 20px 5px 20px; background-color: #DCCEDB; font-size: 90%; color: # 005825; background-image: url (images / shadow.gif); background-repeat: repeat-y; background-position: right; border-left: solid 2px # 000000; font-family: "Arial", sans-serif; } .RoundRectBlock .bottomImage {margin: 0; padding: 0; background-image: url (images / footer.gif); height: 30px; width: 315px; }
Тут наведені лише ті стилі, які відносяться до нашого блоку.
Стилі для класу roundRectBlock (рядки 1-8) задають положення блоку на сторінці (в даному випадку ніякої ролі не грають, я їх встановлював так, щоб було зручно зробити скріншот).
Наступними йдуть стилі тега з класом topImage, який обов'язково повинен бути всередині тега з класом roundRectBlock (рядок 10). Тут ми видаляємо відступи (padding: 0), встановлюємо висоту і ширину блоку (точно за розміром картинки з верхнім градієнтом), і встановлюємо саму картинку background-image: url (images / header.gif).
Після цього ми задаємо стилі для тексту заголовка (рядок 18). Тут нічого складного. Встановлюємо параметри шрифту, відступи від краю блоку і вказуємо, що фон повинен бути прозорим (щоб побачити картинку з градієнтом).
Далі ми задаємо стилі параграфа в середній частині блоку (рядок 29). Тут є кілька цікавих моментів. По-перше, ми задаємо ліву кордон (рядок 38) так, щоб вона збігалася з межами верхньої і нижньої частини блоку. По-друге, в якості фонового зображення ми вказуємо картинку з правого кордоном і тінню (рядок 35), зміщуємо її вправо (рядок 37) та розмножуємо по вертикалі (рядок 36).
Останніми йдуть стилі для класу bottomImage (рядки 42-48). Як ви, напевно, здогадалися, тут ми тільки вказуємо фонове зображення (нижній градієнт), і ставимо розміри блоку.
Тепер подивимося на результат.
На скріншоті показано два блоки різної висоти (висота визначається обсягом тексту в центральній частині блоку). Як бачите, всі фрагменти нашого блоку точно узгоджуються один з одним.
Ви можете завантажити архів з усіма файлами проекту.
PS Тестування проводилося за допомогою Firefox 2, IE 6 і Opera 9.
постовий
Інструктор з водіння навчить вас впевнено почувати себе за кермом
