Web Style Sheets
CSS съвети и трикове

Заоблени ъгли и рамки със сенки

CSS3 ще има свойство за рамки със заоблени ъгли, ръбове, състоящи се от картинки и кутии със сенки, но с малко труд тези ефекти могат да се симулират и чрез CSS2 — и без никакви таблици или допълнителна работа.

Тази страница е вдъхновена от една, създадена Arve Bersvendsen. Той има и много интересни CSS примери.

Разбира се, заоблените рамки и сенките ще бъдат доста по-прости с CSS3. Например, за да се зададе на параграф плътна червена рамка с заоблени ъгли, ще са необходими само няколко реда в CSS3, подобни на тези:

P { border: solid thick red;
    border-radius: 1em }

А за добавяне на замъглена сянка половин em отдолу и в дясно на параграфа, ще е достатъчен един ред:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Може да разгледате примера тук ако вече работи.) Ако желаете тези възможности сега и нямате нищо против сложността и липсата на гъвкавост, можете да използвате техниката по-долу. И най-накрая, това ще е един добър тест за бъгави браузъри…

Пет картинки в един елемент

Основният трик е да се използва генерирано съдържание ('::before' и '::after') за добавяне на допълнителни четири картинки към елемент. Псевдо-елементът '::before' картинка за фон и за фронт, псевдо елементът '::after' също, и самият елемент картинка за фон, общо пет картинки.

Създаваме пет PNG картинки и ги поставяме на подходящите места в четирите ягли на елемента. Ето и картинките:

горен ляв ъгъл:

горен ръб и горен десен ъгъл:

средната част и десен ръб:

долен ляв ъгъл:

долен ръб и долен десен ъгъл:

Ето и CSS правила за позиционирането им:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Тъй като картинката ни за фон е широка 620px, не можем да позволим кутии по-широки от 620px, без да се получат пролуки. Затова използваме свойството 'max-width'. Свойството 'display: block' е необходимо за да сме сигурни, че генерираното съдържание се формира като кутии над и под основното съдържание, независимо, че е било добавено на първата и последната линия. Свойството 'line-height: 0' подсигурява, че няма да има празно място, което да може да се увеличава или намалява.

Резултат

Ето и как изглежда:

HTML кода наистина не е повече от необходимото:

<blockquote>
<p>Виждате ли светлозелена кутия със заоблени ъгли
и преливаща в белия фон сянка? Ако не, то Вашият браузър 
не се справя добре с генерирано съдържание
(или изобщо не поддържа такова).
</blockquote>

И ако желаете да тествате, дали браузърът Ви може да направи това чрез CSS3, можете да проверите тук.