Примери за HTML и CSS - сянка на CSS кутия

Тази страница описва начини за създаване наCSS сянка върху блокове или други елементи в HTML страница. По принцип обикновено сенките се задават специално за блокове и това не е задължително да са блокови елементи по тип, те могат да бъдат вградени (на ниво ред), но разширени с помощта на вътрешни отстъпи. CSS 3 вече има свойства за създаване на сенки без изображения, но тъй като по-старите браузъри не ги разбират, опциите, използващи изображения, също ще бъдат разгледани тук.

Сянка с CSS 3, без изображения

Този пример използва функциите на CSS 3, които улесняват създаването на сенки върху елементи, които не са изображения.

Пример за HTML и CSS: Създаване на сенки с CSS 3

Описание на примера

Недостатъкът на този пример е, че блоковата сянка в по-стария IE ще изглежда различно, отколкото в други браузъри. В допълнение, филтрите могат да "забавят" работата на IE браузърите.

Сянка с CSS 3, без изображения (опция 2)

Пример за HTML и CSS: Създаване на сенки с CSS 3 (Вариант 2)

Описание на примера

Сянка с CSS 3, без изображения (опция 3)

В основата си този пример е подобен на предишния, но тук CSS структурата ще се промени малко, което ще повлияе положително на използваемостта на метода. Вярно е, че поради това ще трябва да пожертвате поддръжката за IE6.

Пример за HTML и CSS: Създаване на сенки с CSS 3 (опция 3)

Описание на примера

  1. Както казах, този пример е подобен на предишния, но тук се отърваваме от използването на свойството CSS float в основния блок, което често не е необходимо. И все пак - ширината и височината вече се регулират от различни блокове.

CSS сянка с изображения

Подготвяме сянката.

примери

Плащанеимайте предвид, че парчето от долния десен ъгъл ( rb ), когато бъде отрязано, ще улови част от самия блок. Затова след изрязване премахваме вътрешната част и я правим прозрачна (това позволява форматът PNG).

Пример за HTML и CSS: Сенки с помощта на изображения

Описание на примера

  1. Според правилата на HTML, ако елементите са вложени един в друг, тогава тези, които са вътре, ще бъдат поставени върху тези, които са отвън. Същото важи и за фона на елементите.
  2. За най-външните блокове на нашия пример ("rc" и "cb"), ние определяме фон, използвайки свойството CSS фон. Освен това, за "rc" позиционираме фона от дясната страна на блока и му позволяваме да се възпроизвежда само вертикално, а за "cb" - от долната страна с възпроизвеждане само хоризонтално. В резултат на това получаваме две ленти сянка, които са разположени вдясно и под съдържанието. Но в ъглите тази сянка изглежда напълно различно от това, което искаме, особено в долния десен ъгъл, където ивиците се припокриват. Продължавай.
  3. Вътре във външните блокове поставяме още три ("lb", "rb" и "rt"), всеки от които задава един ъгъл на сянката като фон. Позиционираме фоновите изображения в желаните ъгли на блоковете и им забраняваме да се възпроизвеждат (без повторение). В резултат на това тези части на фона частично покриха фоновите ивици, които бяха създадени по-рано на местата, от които се нуждаехме. Всичко, сега сянката е готова.
  4. По подразбиране кутиите се разтягат до пълната ширина на техния родител, така че ще използваме най-външния елемент ( "cb"), за да го коригираме, като приложим към него свойството CSS width с желаната стойност. Ние също така определяме цвета на фона за него (ако посочите цвета на фона за друг блок, той ще блокира част от сянката).
  5. Напротив, задаваме височината (ако е необходимо) и вътрешната подложка на най-вътрешния елемент ("rt"). Тук е особено важно да се посочи долнатаи дясна подложка, така че съдържанието да не се припокрива със сянката.
  6. За да може всичко да се показва според очакванията в IE6 и IE7, ние задаваме свойството zoom: 1 за тях. Свойството не е в спецификацията на CSS.

По този начин можете да създадете сянка не само от две страни, но и, например, от четири, въпреки че ще са необходими повече опаковъчни блокове, което е основният недостатък на този метод.