Различни чипове и техники, използващи CSS и винаги са привлекли вниманието ми. Сред тях има и начин за блокиране на закръгляване ъгли без използването на графики.
Наистина ми хареса този подход, но единственото нещо, което спъван от прилагането му техники - тези ъгли не изглеждат гладки (да, това е начина, по който аз съм претенциозен :). А това, че не са имали, така че реших да отида до края, достъпно подобрена версия.
Така че моята задача е да се прилага с CSS Ето една кутия, напълно, без да използва картинката:
Повишена ъгъл на изображението е както следва:
Направих абсолютно идентична версия с CSS. В основата е било взето по-рано предложи версия. За да добавите допълнителни пиксели, които дават ъглите изгладени, аз използвах няколко вложени тагове. всеки от които се състои от една буква (б. т. р). Това дава възможност да се оптимизира HTML-кода. HTML
CSS - това е страхотно!
Резултатът е по-скоро грозен дизайн, който "мирише" извращение, но аз съм готов да се жертва за тази възможност може да разчита на графика. Ако сравните размера на HTML-кода с "променливата" опция, разликата не е толкова значителен.
За сравнение, 3 варианта виждат примери за решаване на проблема с закръгляване ъгли: с помощта на изображения, просто закръгляване, използвайки CSS и заглажда крива.
Това, което имаме като резултат:
- валиден код CSS и HTML;
- код Cross-браузър съвместимост;
- заоблени ъгли, без използването на графики;
- ъгли са изгладени.
От минусите на този модел заслужава да се отбележи само не-семантичен маркиране и код размер, който, IMHO, не е от значение.
информация
Свързани статии