13.10.2016

Кути Гірських Вершин

Original: http://alistapart.com/article/mountaintop

за Деном Седерхольмом 30 квітня 2004 р.

каскадні таблиці стилів) (графічний дизайн)

Або я ніколи не турбувався про те, щоб спробувати простіші методи для створення заокруглених кутів, або я не боюся отримати жахливий зір усього за п’ять-вісім років. Незважаючи на це, один із моїх найчастіше використовуваних маленьких прийомів створення образів пов’язаний із гірськими вершинами: хочу цей кут трохи кругліше? Просто додайте ще один пік. Це починає мати сенс в мить.

Figure 1

Рисунок 1

Розглянемо рисунок 1. Нудна квадратна коробка, у якої з кожного кута видалено один піксель. При погляді на все 100%, відсутність цього одного пікселя створює ілюзію того, що коробка все-таки злегка закруглена. Це один із тих методів, який був використаний з тих часів, коли TRON був ультрасучасний.

Менша кількість пікселів = більше заокруглення

Ви можете взяти ілюзію ще далі, хоча, видаляючи більше пікселів і створення “вершини гір” (а ви думали, що це просто нерозумно назва). Подивіться на малюнку 2, і ви побачите в збільшеному масштабі вид коробки кутку, з кілька пікселів видалені, щоб сформувати зазубрений, діагональний пейзаж. При погляді на все 100%, кут виглядає красиво округлені.

Figure 2

Рисунок 2

Для більш легких фонів, ви можете видалити ще ще кілька пікселів, щоб створити ще більш округлий ефект. Створюючи нерівний діагоналі, як ми робили раніше, і потім видалення один додатковий піксель в обох кінцях ми можемо Гладкі краю трохи (дивись малюнок 3). Все, що з трьох вершинах гір або більше, як правило, вимагає цей додатковий піксель простору і працює особливо добре з світлого кольору, який змішується з основним фоном сторінки.

Figure 3

Рисунок 3

Прозорі вершини

На даний момент, ви можете сказати: “Ден, це нерозумно простий метод.” І це. Але реальне значення за допомогою інструменту олівця, щоб збрити пікселі, коли закруглений кут бажано (в стороні від непарного задоволення, яке ви можете отримати в цьому) є поєднання прозорості і CSS для створення вікон і меж, розмір і колір яких можна змінити.

Через гірської вершини кутів використовують тільки два кольори, ми можемо встановити один з цих кольорів як прозорих, залишаючи на гірські вершини і той же колір як фон сторінки, тим самим створюючи округлий ефект.

Гнучкий хамелеон

Так, візьмемо звичайний список визначень (<dl>) елементів і встановимо верхнє та нижнє background-image (зображення тла) прозорих заокруглених кутів.  Потім можна за допомогою CSS призначити background-color (колір тла) і за бажанням змінити вигляд усього вікна.

Семантична розмітка буде виглядати таким чином:

Mt. Everest
The tallest mountain in the world.
29,035 feet

Можна, звичайно, використовувати будь-яку структуру, яку ви хотіли б, але структура списку визначень дає нам приємне кількість елементів стилю за допомогою CSS.

Далі ми створимо 240-піксельне широке зображення, яке буде виступати в якості верхньої частини закругленої коробки. Цей образ буде просто достатньо високий, до містять білі верхні кути на обох кінцях, в той час як інші будуть прозорими (де фоновий колір, який ми будемо за допомогою CSS вказати покаже через). На малюнку 4 показана конденсується і збільшеному версію зображення, щоб показати деталі.

Figure 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).

Figure 5

Рисунок 5 — Альтернатива нижнього зображення (збільшеного) з видом на силует гори

Підсумки

Оскільки background-image (зображення тла) елемента розташоване зверху його background-color (кольору тла), ми можемо використовувати зображення GIF які створюють ілюзію круглих або загострених кутів і межПідтримуючи ці декоративні графіки в CSS, ми можемо досягти гнучкі контейнери, які можуть змінити колір з оновленням одного правила CSS. Щасливого туризму.

Про автора

Ден Седерхольм

Ден Седерхольм – дизайнер, автор і оратор, проживає в місті Салем, штат Массачусетс. Він є співзасновником Dribbble, співтовариства для дизайнерів, і засновником SimpleBits, крихітної студії дизайну. Давній прихильник заснованих на стандартах веб-дизайну, Ден працював із YouTube, Microsoft, Google, MTV, ESPN тощо. Він написав кілька популярних книг про веб-дизайн і отримав нагороду TechFellow на початку 2012 року. У даний час випробовує свої сили у грі на банджо в гурті Clawhammer й іноді носить бейсболку.

Більше від цього автора

Перекладено з дозволу A List Apart і автора.

About The Author

admin

Comments are closed.