Doorschijnende foto met aangepaste CSS-kleurschaduw. Afbeeldingen met schaduwen
Met de CSS box-shadow eigenschap kunt u een schaduw instellen html-element. Het wordt vrij vaak gebruikt door websiteontwerpers om frames op de een of andere manier te versieren en te markeren met tekst en afbeeldingen, en om de inhoud leesbaarder te maken.
CSS-box-shadow-syntaxis
... vakschaduw: X Y R1 R2 kleur; ...
- X - offset langs de X-as (horizontaal)
- Y - offset langs de Y-as (verticaal)
- R1 - vervaging (hoe hoger de waarde, hoe vloeiender de overgang)
- R2 - straal van verlenging (indien positief, rekt het uit, negatief, het comprimeert)
- kleur - kleur (kan in elk formaat worden opgegeven: #RGB, kleurnaam)
- inzet - als deze waarde aanwezig is, bevindt de schaduw zich binnen het blok (element)
Voorbeeld 1. HTML-frame met box-shadow zonder offset
Hieronder ziet u de eenvoudigste manier om schaduw te gebruiken CSS-eigenschap doosschaduw aan html-pagina wanneer het gelijkmatig rond het hele frame stroomt, zonder verplaatsing.
Пример №1. Рамка с тенью
Пример №1. Рамка с тенью
Пример 2. HTML рамка со смещенной тенью box-shadow
Практически тот же пример, что и первый, но только со смещением рамки.
Пример №2. Рамка со смещенной тенью
На странице преобразуется в следующее
Пример №2. Рамка со смещенной тенью
Пример №3. Свечение рамки html
Реализация тени в виде свечения
Пример №3. Свечение
На странице преобразуется в следующее
Пример №3. Свечение
Пример 4. Внутреннее свечение границы html
Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .
Пример №4. Внутреннее свечение
На странице преобразуется в следующее
Пример №4. Внутреннее свечение
Пример 5. Совмещение теней в html
Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.
Пример №5. Совмещение теней
На странице преобразуется в следующее
Пример №5. Совмещение теней
Примечание: старые браузерыIE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow
- -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
- -moz-box-shadow - для Firefox до версии 4.0
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.box-shadow
Конструкция box-shadow содержит несколько различных значений:Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow :Значения аналогичные, только нет spread-shadow . Пример использования:
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div . Для начала вот обычный код картинки:
Логично предположить, что добавить тень можно так:
Img { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); }
Но тень не видно:
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый - это обернуть картинку в обычный div :
Div { height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); } img { height: 200px; width: 400px; position: relative; z-index: -2; }
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ - это установить изображение фоном нужного блока:
Div { height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); }
Вот, что может получится при использовании внутренних теней:
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); }
Вот, что получается:
Добавляем секретный ингредиент background-clip , который обрезает все, что выходит за пределы текста (на темный фон):
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
То же, что и обновление 3, но с современными правилами css (= less), чтобы не требовалось специального позиционирования на псевдоэлементе.
#box { background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); } .box-shadow:after { content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; }
ОБНОВЛЕНИЕ 3
#box { background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; }
ОБНОВЛЕНИЕ 2
По-видимому, вы можете сделать это только с дополнительным параметром CSS-тэга box, поскольку все остальные просто указали. Здесь демо:
Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;
Это было бы лучшим решением. Дополнительный параметр, который добавляется, описывается как:
Четвертая длина - это спрэд расстояние. Положительные значения вызывают теневая форма для расширения направления по указанному радиусу. Отрицательные значения вызывают форму тени договориться.
UPDATE
То, что я сделал, это создать "теневой элемент", который будет скрываться за фактическим элементом, который вы хотели бы иметь в тени. Я сделал ширину "теневого элемента" ровно менее широкой, чем фактический элемент, в 2 раза превышающей указанную тень; затем я выровнял его правильно.
#wrapper { width: 84px; position: relative; } #element { background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; } #shadow { background-color: #3D668F; height: 8px; width: 80px; margin-left: -40px; position: absolute; bottom: 0px; left: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; }
Оригинальный ответ
Да, вы можете сделать это с тем же синтаксисом, который вы предоставили. Первое значение контролирует горизонтальное позиционирование, а второе значение контролирует вертикальное позиционирование. Поэтому просто установите первое значение 0px , а второе - произвольное смещение, которое вы хотели бы сделать следующим образом.
CSS свойство box-shadow добавляет одну или несколько теней к элементу. Для указания нескольких теней необходимо добавить дополнительное значение тени /-ей, разделенных запятыми.
![](https://i1.wp.com/basicweb.ru/css/primer/875a.png)
Поддержка браузерами
Свойство | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
CSS синтаксис:
box-shadow: "none| inset h-shadow v-shadow blur-radius spread-radius color | initial | inherit" ;JavaScript синтаксис:
Object.style.boxShadow = "10px 5px 5px red"
Значения свойства
Значение | Описание |
---|---|
none | Тень не отображается. Это значение по умолчанию. |
inset | Необязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличии ключевого слова (значения) inset , тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней. |
h-shadow | Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений. |
v-shadow | Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений. |
blur-radius | Необязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются. |
spread-radius | Необязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расширяться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента). |
color | Необязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета "). Значением по умолчанию является черный цвет. |
Устанавливает свойство в значение по умолчанию. | |
Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
Voegt een schaduw toe aan een element. Het is mogelijk om meerdere schaduwen te gebruiken, waarbij de parameters worden aangegeven, gescheiden door komma's; bij het toepassen van schaduwen zal de eerste schaduw in de lijst hoger zijn, de laatste lager. Als via de eigenschap border-radius voor een element een afrondingsradius wordt opgegeven, heeft de schaduw ook afgeronde hoeken. Het toevoegen van een schaduw vergroot de breedte van het element, zodat het kan verschijnen horizontale streep scrollen in de browser.
Korte informatie
Syntaxis
Vakschaduw: geen |<тень> [,<тень>]*
Waar<тень>:
inzet<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Benamingen
Beschrijving | Voorbeeld | |
---|---|---|
<тип> | Geeft het type waarde aan. | <размер> |
A && B | De waarden moeten in de aangegeven volgorde worden uitgevoerd. | <размер> && <цвет> |
Een | B | Geeft aan dat u slechts één waarde uit de voorgestelde waarden hoeft te selecteren (A of B). | normaal | small-caps |
Een || B | Elke waarde kan afzonderlijk of samen met anderen in willekeurige volgorde worden gebruikt. | breedte || graaf |
Groepeert waarden. | [bijsnijden || kruis ] | |
* | Herhaal nul of meer keer. | [,<время>]* |
+ | Herhaal dit een of meerdere keren. | <число>+ |
? | Het opgegeven type, woord of groep is optioneel. | inzet? |
(A, B) | Herhaal minimaal A, maar niet vaker dan B keer. | <радиус>{1,4} |
# | Herhaal dit een of meer keren, gescheiden door komma's. | <время># |
Waarden
geen Annuleert het toevoegen van een schaduw. inzet De schaduw wordt binnen het element getekend.<сдвиг по x>De horizontale verschuiving van de schaduw ten opzichte van het element. Een positieve waarde van deze parameter stelt de schaduwverschuiving naar rechts in, een negatieve waarde - naar links.<сдвиг по y>De verticale verschuiving van de schaduw ten opzichte van het element. Een positieve waarde verschuift de schaduw naar beneden, een negatieve waarde verschuift deze naar boven.<размытие>Stelt de straal van de schaduwvervaging in. Hoe hoger deze waarde, hoe meer de schaduw wordt afgevlakt en breder en lichter wordt. Als deze parameter niet wordt opgegeven, wordt de standaard ingesteld op 0, waardoor de schaduw scherp in plaats van wazig wordt.<растяжение>Een positieve waarde rekt de schaduw uit, een negatieve waarde comprimeert deze juist. Als deze parameter niet wordt opgegeven, is de standaardwaarde 0, waardoor de schaduw dezelfde grootte heeft als het element.<цвет>Schaduwkleur in elk beschikbaar CSS-formaat, standaardschaduw is zwart.
Het is mogelijk om meerdere schaduwen op te geven, waarbij de parameters worden gescheiden door een komma. Er wordt rekening gehouden met de volgende volgorde: de eerste schaduw in de lijst wordt helemaal bovenaan geplaatst, de laatste in de lijst staat helemaal onderaan.
Voorbeeld
Het resultaat van het voorbeeld wordt getoond in Fig. 1.
Rijst. 1. Soort schaduw
Objectmodel
Voorwerp.style.boxShadow
Opmerking
Safari vóór versie 5.1, Chrome vóór versie 10.0, Android vóór versie 4.0 ondersteunen de eigenschap -webkit-box-shadow.
Firefox vóór versie 4.0 ondersteunt de eigenschap -moz-box-shadow.
Internet Explorer vóór versie 9.0 ondersteunt de eigenschap box-shadow niet; in plaats daarvan kunt u de eigenschap filter gebruiken:
Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, kleur=#000000);
Hier: offX - horizontale schaduwverschuiving; offY — verticale schaduwverschuiving; kleur - schaduwkleur.
Het gebruik van het slagschaduwfilter levert een heldere, scherpe schaduw op, zodat u het schaduwfilter kunt gebruiken voor een vervagingseffect.
Filter: progid:DXImageTransform.Microsoft.shadow(richting=120, kleur=#000000, sterkte=10);
Hier: richting — hoek van de schaduwrichting van 0 tot 360°; kleur - schaduwkleur; sterkte — schaduwverschuiving in pixels.
Specificatie
Elke specificatie doorloopt verschillende goedkeuringsfasen.
- Aanbeveling - De specificatie is goedgekeurd door het W3C en wordt aanbevolen als standaard.
- Aanbeveling van kandidaten ( Mogelijke aanbeveling ) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze aan de doelstellingen voldoet, maar heeft hulp nodig van de ontwikkelingsgemeenschap om de standaard te implementeren.
- Voorgestelde aanbeveling Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Adviesraad.
- Werkconcept - Een meer volwassen versie van een concept dat is besproken en aangepast voor beoordeling door de gemeenschap.
- Redactievoorstel ( Redactie ontwerp) - een conceptversie van de standaard nadat wijzigingen zijn aangebracht door de projectredacteuren.
- Voorlopige versie ( Conceptspecificatie) - de eerste conceptversie van de standaard.