Сглаженные закругленные углы без использования изображений
Справді різні фішки і прийоми з використанням CSS як не можна більше завжди привертали і привертають мою увагу. У їхньому числі знаходиться і спосіб заокруглення кутів блоку без використання будь-якої графіки.
Мені разюче даний підхід більш менш дуже сподобався, але досить таки єдине, що стримувало від застосування тієї методики - такі кути не виглядають згладженими (так, ось такий я вибагливий:) . А цього мені не вистачало, неймовірно тому вирішив піти до кінця, допрацювавши наявний варіант.Отже, моя задача полягала в реалізації за допомогою CSS ось такий рамки, реально абсолютно не використовуючи зображення :
Не на жарт збільшене зображення кута виглядає наступним чином:
Я зробив невимовно абсолютно як не можна дуже ідентичний варіант за допомогою CSS. За основу було взято запропонований без сумніву раніше варіант. Щоб додати сильно додаткові пікселі, які додадуть кутах сглаженість, я використав кілька вкладених тегів , кожен з яких складається з однієї літери ( b , i , q ). Це дозволяє неймовірно максимально оптимізувати HTML-код. HTML
CSS - це здорово!
Вийшла досить-таки дивно негарна конструкція, що "попахує" збоченням, але я реально особисто готовий пожертвувати цим заради можливості обійтися без графіки. Якщо порівнювати розмір HTML-коду з "незгладжені" варіантом, то різниця не така вже й значна. CSS
. b1 i,. b2 i,. b3 i,. b4 i,. b5 i,
. b1 b,. b2 b,. b3 b,. b4 b,. b5 b,
. b1 q,. b2 q,. b3 q,. b4 q,. b5 q (
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
)
. b1 (
margin: 0 2px;
background: # EBEEF0;
border: none;
)
. b1 b (
margin: 0 1px;
background: # B8C3C8;
border-color: # CBD3D7;
)
. b2 (margin: 0 1px; border-color: # D6DCDF;)
. b2 b (border-color: # B8C3C8;)
. b2 i (border-color: # E4E8EA;)
. b2 q (border-color: # F7F8F9;)
. b3 (border-color: # EBEEEF;)
. b3 b (border-color: # BCC6CB;)
. b3 i (border-color: # F9FAFB;)
. b4 (border-color: # CAD2D6;)
. b4 b (border-color: # E5E9EB;)
. b5 (border-color: # B5C0C6;)
. b5 b (border-color: # FAFBFB;)
. text (
border: 1px solid # B0BCC2;
border-width: 0 1px;
padding: 0 12px;
)
Приклади рішенняДля порівняння 3-х варіантів подивіться приклади рішення задачі заокруглення кутів: за допомогою зображень, просте закруглення з використанням CSS і дійсно згладжені заокруглення. Що ми маємо в результаті:
- пройшов стандартизацію код CSS і HTML;
- кроссбраузерность коду;
- кути закруглені без використання графіки;
-
кути згладжені.З мінусів даної моделі варто відзначити лише
несемантіческую верстку і розмір коду, який, имхо, не так важливий.
Випадкові записи