Original: http://alistapart.com/article/mountaintop
за Деном Седерхольмом 30 квітня 2004 р.
каскадні таблиці стилів) (графічний дизайн)
Або я ніколи не турбувався про те, щоб спробувати простіші методи для створення заокруглених кутів, або я не боюся отримати жахливий зір усього за п’ять-вісім років. Незважаючи на це, один із моїх найчастіше використовуваних маленьких прийомів створення образів пов’язаний із гірськими вершинами: хочу цей кут трохи кругліше? Просто додайте ще один пік. Це починає мати сенс в мить.
Рисунок 1
Розглянемо рисунок 1. Нудна квадратна коробка, у якої з кожного кута видалено один піксель. При погляді на все 100%, відсутність цього одного пікселя створює ілюзію того, що коробка все-таки злегка закруглена. Це один із тих методів, який був використаний з тих часів, коли TRON був ультрасучасний.
Менша кількість пікселів = більше заокруглення
Ви можете взяти ілюзію ще далі, хоча, видаляючи більше пікселів і створення “вершини гір” (а ви думали, що це просто нерозумно назва). Подивіться на малюнку 2, і ви побачите в збільшеному масштабі вид коробки кутку, з кілька пікселів видалені, щоб сформувати зазубрений, діагональний пейзаж. При погляді на все 100%, кут виглядає красиво округлені.
Рисунок 2
Для більш легких фонів, ви можете видалити ще ще кілька пікселів, щоб створити ще більш округлий ефект. Створюючи нерівний діагоналі, як ми робили раніше, і потім видалення один додатковий піксель в обох кінцях ми можемо Гладкі краю трохи (дивись малюнок 3). Все, що з трьох вершинах гір або більше, як правило, вимагає цей додатковий піксель простору і працює особливо добре з світлого кольору, який змішується з основним фоном сторінки.
Рисунок 3
Прозорі вершини
На даний момент, ви можете сказати: “Ден, це нерозумно простий метод.” І це. Але реальне значення за допомогою інструменту олівця, щоб збрити пікселі, коли закруглений кут бажано (в стороні від непарного задоволення, яке ви можете отримати в цьому) є поєднання прозорості і CSS для створення вікон і меж, розмір і колір яких можна змінити.
Через гірської вершини кутів використовують тільки два кольори, ми можемо встановити один з цих кольорів як прозорих, залишаючи на гірські вершини і той же колір як фон сторінки, тим самим створюючи округлий ефект.
Гнучкий хамелеон
Так, візьмемо звичайний список визначень (<dl>) елементів і встановимо верхнє та нижнє background-image (зображення тла) прозорих заокруглених кутів. Потім можна за допомогою CSS призначити background-color (колір тла) і за бажанням змінити вигляд усього вікна.
Семантична розмітка буде виглядати таким чином:
- Mt. Everest
- The tallest mountain in the world.
- 29,035 feet
Можна, звичайно, використовувати будь-яку структуру, яку ви хотіли б, але структура списку визначень дає нам приємне кількість елементів стилю за допомогою CSS.
Далі ми створимо 240-піксельне широке зображення, яке буде виступати в якості верхньої частини закругленої коробки. Цей образ буде просто достатньо високий, до містять білі верхні кути на обох кінцях, в той час як інші будуть прозорими (де фоновий колір, який ми будемо за допомогою CSS вказати покаже через). На малюнку 4 показана конденсується і збільшеному версію зображення, щоб показати деталі.
Рисунок 4 — Масштабовані частини верхнього зображення
Ми також створимо подібну друге зображення, перевертається вертикально для нижніх закруглені кути. Найпростіший спосіб зробити це в Photoshop є вибрати Image › Rotate Canvas › Flip Canvas Vertical.
Указавши верхнє зображення як тло для елемента <dt>, а нижнє – для цілого <dl>, ми будемо мати округлу форму (фіксованої ширини), яка розширюється і стискається в залежності від кількості вмісту в межах – або якщо користувач вирішить підняти до розміру тексту.
dl {
width: 240px;
margin: 0 0 20px 20px;
background: #999 url(box_bottom.gif) »
no-repeat bottom left;
}dt {
margin: 0;
padding: 10px;
background: #999 url(box_top.gif) »
no-repeat top left;
}dd {
margin: 0;
padding: 10px;
}
Ви помітите, що я використовував скорочену метод для визначення кольору фону разом з його зображенням для обох елементів: <dl> і <dt> . Ви побачите, чому це має перевагу, коли ми змішаємо кольори пізніше.
Цей приклад демонструє, що шлях CSS вище встановлює фонові зображення на будь-якому кінці коробки, при призначенні колір фону світити через прозорі області зображення. Я також додав деякий шрифт дизайн і декоративне зображення стрілки, який сидить зліва від кожного елемента <dd>.
Спробуйте збільшити розмір тексту для прикладу сторінки, щоб побачити, як коробки будуть розширюватися і стискатися разом з текстом.
Піднімаючися вище
Ми можемо отримати ще смішніший результат, призначаючи різні фонові кольори для елементів <dl> і<dt>. У цьому прикладі видно, як два різні кольори тла з додаванням білої border-bottom (нижньої межі) для елемента <dt> можнаотримати з тієї ж розмітки і зображення.
Крім того, ми не обмежені тільки округлі форми. До тих пір поки ми будемо дотримуватися створення двоколірних GIF, ми можемо додати будь-яку форму, яку ми хотіли б фонові зображення, які обрамляють вікно. Цей останній приклад показує, як альтернативний зображення використовується для нижньої частини коробки, з додаванням білого на вершині гори силует (див. рисунок 5).
Рисунок 5 — Альтернатива нижнього зображення (збільшеного) з видом на силует гори
Підсумки
Оскільки background-image (зображення тла) елемента розташоване зверху його background-color (кольору тла), ми можемо використовувати зображення GIF які створюють ілюзію круглих або загострених кутів і меж. Підтримуючи ці декоративні графіки в CSS, ми можемо досягти гнучкі контейнери, які можуть змінити колір з оновленням одного правила CSS. Щасливого туризму.
Про автора
Ден Седерхольм
Більше від цього автора
Перекладено з дозволу A List Apart і автора.
