Різні фішки і прийоми з використанням CSS завжди привертали і привертають мою увагу. У їх числі знаходиться і спосіб заокруглення кутів блоку без використання будь-якої графіки.
Мені даний підхід дуже сподобався, але єдине, що стримувало від застосування оной методики - такі кути не виглядають згладженими (так, ось такий я вибагливий :). А цього мені не вистачало, тому вирішив піти до кінця, допрацювавши наявний варіант.
Отже, моя задача полягала в реалізації за допомогою CSS ось такий рамки, абсолютно не використовуючи зображення:
Збільшене зображення кута виглядає наступним чином:
Я зробив абсолютно ідентичний варіант за допомогою CSS. За основу був узятий запропонований раніше варіант. Щоб додати додаткові пікселі, які додадуть кутах згладжена, я використовував кілька вкладених тегів. кожен з яких складається з однієї літери (b. i. q). Це дозволяє максимально оптимізувати HTML-код. HTML
CSS - це здорово!
Вийшла досить-таки негарна конструкція, що "пахне" збоченням, але я особисто готовий пожертвувати цим заради можливості обійтися без графіки. Якщо порівнювати розмір HTML-коду з "незгладжені" варіантом, то різниця не така вже й значна.
Для порівняння 3-х варіантів подивіться приклади рішення задачі заокруглення кутів: за допомогою зображень, просте закруглення з використанням CSS і згладжені заокруглення.
Що ми маємо в результаті:
- Дійсний код CSS і HTML;
- кроссбраузерность коду;
- кути закруглені без використання графіки;
- кути згладжені.
З мінусів даної моделі варто відзначити лише несемантіческую верстку і розмір коду, який, имхо, не так важливий.