Български превод на "Rounded corners and shadowed boxes"

Настоящият документ е превод на статията "Rounded corners and shadowed boxes".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/roundshadow.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на ABA webdesign, Balkans и Velina Yankova.

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

(Тази страница използва CSS style sheets)

Заоблени и засенчени

Пет картинки

Резултат

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

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, можете да проверите тук.

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено 6 Jan 2004;
последно обновяване $Date: 2008/07/07 15:03:47 $ GMT