Друг начин да украсите уеб страница е да направите текст със сянка в CSS. С правилното използване на този стил можете успешно да подчертаете заглавие, параграф или част от текста. Можете да регулирате цвета на сянката, отместването и замъгляването.
Можете да зададете текстова сянка в CSS, като използвате свойството text-shadow, което се поддържа от всички браузъри с изключение на Internet Explorer версия 9 и по-стари. Има проблеми и с Opera Mini - този браузър поддържа само частично собствеността. По-долу е даден пример за стил на писане и стойности на свойства:
H1 (текстова сянка: 3px 5px 6px #6C9;)
Както можете да видите, посочихме до четири стойности, разделени с интервал. Нека да го прегледаме по ред:
- 3px – първата стойност отговаря за изместването на сянката по оста X (дясно, ляво). Положителната стойност премества сянката надясно, а отрицателната стойност премества сянката наляво.
- 5px – втората стойност отговаря за отместването на сянката по оста Y (надолу, нагоре). Положителната стойност премества сянката надолу, а отрицателната стойност премества сянката нагоре.
- 6px – третата стойност отговаря за радиуса на замъгляване на сянката. Този параметър не е задължителен. По подразбиране размазването е 0 пиксела, което прави сянката ясна и незамъглена.
- #6c9 – четвъртата стойност отговаря за цвета на сянката. Този параметър не е задължителен. По подразбиране цветът на сянката е зададен на същия цвят като текста, към който се прилага стилът.
Как изглежда сянката в браузъра (екранна снимка):
Екранна снимка: текст със сянка, CSS Множество CSS сенки за текст
Също така е възможно да се използват множество групи от стойности за свойството text-shadow. Това означава, че можете да зададете няколко сенки за един текст. За да направите това, трябва да напишете групи от стойности, разделени със запетаи.
H1 (текстова сянка: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )
Резултатът от прилагането на този стил се вижда на екранната снимка:
Екранна снимка: Множество сенки за CSS текст Можете да създадете някои наистина красиви неща със свойството CSS text-shadow. Можете да експериментирате: инсталирайте голям бройразлични сенки, задайте цвета не само в шестнадесетичен, но и във формат RGBA, като използвате алфа канала за регулиране на прозрачността. Ето какво може да се случи, ако обърнете достатъчно внимание на този имот:
Екранна снимка: 3D текстова сянка в CSS Този урок представя няколко CSS техники за организиране различни ефектиза очертаване на елементи.
Лесен ефект на светла сянка може да се постигне с помощта на сивовърху контура. CSS3 има способността да създава истинска сянка, използвайки свойството кутия-сянка, но простият начин ще работи във всички браузъри:
Shadow (padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )
Ефектът на вдлъбнатия блок също се постига много лесно. Добавянето на CSS3 заоблени ъгли подобрява ефекта:
Натиснат (цвят: #fff; подложка: 20px; фон: #111; рамка: 1px плътен #000; border-right: 1px плътен #353535; border-bottom: 1px плътен #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )
Този ефект е много подобен на двоен удар, който често се използва за изображения. Използват се настройките за отстъп и щрих, което води до ефект на двойна граница.Допълнителната работа с настройките и използването на свойството контур ви позволява да постигнете ефекта на скосени ръбове.
Img.light ( контур: 1px плътен #ddd; граница отгоре: 1px плътен #fff; подложка: 10px; фон: #f0f0f0; ) img.dark ( контур: 1px плътен #111; граница отгоре: 1px плътен #555; подложка: 10px; фон: #333; )
Този ефект може да се използва в менюта или списъци. Това е проста комбинация от горни и долни щрихи с различни нюанси на цвета на фона. Едно нещо, което трябва да имате предвид е, че CSS селекторите за първо дете и последно дете не се поддържат от по-стари браузъри. За да заобиколите тази неприятна ситуация, можете да използвате jQuery.
#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li ( border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a (padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indented ul li a:hover (фон: #111;)
Типографията е любимата играчка на уеб дизайнерите. CSS има един много интересен инструмент - текст-сянка(текстова сянка), което на пръв поглед изглежда доста просто, но с негова помощ можете да създадете запомнящи се ефекти, ако използвате изобретателност и въображение.
Основи на сенките
Имот текст-сянкамного лесен за използване. Поддържа се от всички съвременни браузъри и дори без използването на префикси. Но няма поддръжка в IE (дори в IE9). Можете да използвате инструменти като Modernizr, за да помогнете за извличането на CSS3 ефекти дори на по-стари версии на IE.
Синтаксис
За да създадете текстова сянка, използвайте синтаксиса на свойството текст-сянкакойто е даден по-долу. Има четири параметъра за дефиниране: първите два задават позицията на сянката, третият задава нивото на замъгляване, а четвъртият определя цвета на сянката.
Text-shadow: horizontal_offset vertical_offset цвят на размазване;
По-долу е даден пример за текстова сянка, която е изместена с два пиксела надолу и четири пиксела надясно, замъглена с три пиксела и зададена на черно при 30% непрозрачност.
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Резултат от употреба от този имотще изглежда така:
Защо се използва rgba?
Не е нужно да използвате rgba, за да укажете цвета на сянката, когато дефинирате свойство. Rgba обаче добавя още едно измерение при дефинирането на сянка - нивото на прозрачност.
Този метод е много по-прост от другите методи за определяне на цвета. Не е нужно да се фокусирате върху определянето на нюанса на цвета на сянката, който може да е само малко по-тъмен или по-светъл от цвета на фона. С rgba можете просто да използвате бяло или черно и да увеличите тяхната непрозрачност, за да постигнете желания цвят на фона при смесване на цветове.
Използване на собственост текст-сянкаМожете да създавате различни ефекти за текст, без да се ограничавате до обикновени падащи сенки. Например, тук е кодът за създаване на илюзията за депресиран текст.
Първо трябва да зададете цвета на текста малко по-тъмен от цвета на фона. И тогава трябва да използвате имота текст-сянкас бял цвят и повишена прозрачност.
Цветът на фона е #222, а цветът на текста е настроен на 60% непрозрачност. Бялата сянка е разположена леко надолу и вдясно с ниво на непрозрачност от 10%.
Тяло (фон: #222;) #текст h1 (цвят: rgba(0,0,0,0.6); сянка на текста: 2px 2px 3px rgba(255,255,255,0.1); )
Изобщо няма нужда да размазвате сянката. Ясната сянка може да върви добре с дизайн на уебсайт.
Текстова сянка: 6px 6px 0px rgba(0,0,0,0.2);
Истинското забавление започва, когато отхвърлите ограничението да имате само една сянка. Като използвате запетая за разделяне на дефиниции, можете да използвате толкова сенки, колкото са ви необходими!
Text-shadow: shadow1, shadow2, shadow3;
Ето пример за използване на две сенки. Първият има същия цвят като фона.
Текстова сянка: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Преместване надолу на дълги разстояния
След като овладеете използването на множество сенки, резултатите ще стават все по-драматични. Много е лесно да създадете 3D ефект за текст.
Примерът използва четири сенки, всички изместени надолу на различни разстояния и замъглени.
Текстова сянка: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1) );
Преместете малко надолу и размажете силно
Ето още едно въплъщение на същата идея. Трите сенки са изместени на по-малко разстояние и са по-размазани.
Текстова сянка: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
3D текст от Марк Дото
Ефектът се използва на уебсайта MarkDotto.com. Той използва 12 различни сенки, за да създаде страхотен 3D ефект.
Текстова сянка: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Текст с отстъп от Гордън Хол
Забележете, че в примера по-горе нарекох моята техника „бърз и мръсен“ ефект на висок печат. Това е така, защото има много по-сложен начин за създаване на сериозно вмъкнат текст, който е много по-правдоподобен.
Гордън използва сериозно CSS вуду, за да извади не само външна сянка, но и истинска вътрешна сянка. Вижте публикацията в неговия блог за пълно обяснение на техниката.
Цвят на фона: #666666; -webkit-background-clip:текст; -moz-background-clip: текст; фонов клип: текст; цвят: прозрачен; текстова сянка: rgba(255,255,255,0.5) 0px 3px 3px;
Сияние
Текстова сянка: 0px 0px 6px rgba(255,255,255,0.7);
Текстова сянка: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Множество източници на светлина
Текстова сянка: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Цвят: rgba(0,0,0,0.6); текстова сянка: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Заключение
Като повечето CSS ефекти, сенките са много лесни за прилагане. Но комбинация от прости действия може да доведе до невероятни ефекти.
CSS свойството text-shadow отговаря за настройката на сянката на текста. Много подобно на свойството box-shadow.
CSS синтаксис текст-сянка
текст-сянка: X Y R цвят;
- X - изместване на сянката спрямо текста по оста X (най-често се задава в px пиксели);
- Y - изместване на сянката спрямо текста по оста Y (най-често се задава в px пиксели);
- R - радиус на сянката (най-често посочен в px пиксели);
- color - цвят (може да се посочи във всеки формат, вижте html имената на цветовете)
Синтаксисът text-shadow позволява да се определят множество сенки, разделени със запетаи. Например
текст-сянка: X1 Y1 R1 цвят1, X2 Y2 R2 цвят2, ...;
Приоритетът на сянка (кой е по-висок, кой е по-нисък) зависи от конкретната CSS версия. В CSS3 първата сянка в списъка се поставя най-отгоре, последната в списъка се поставя най-отдолу. В CSS2 е обратното.
Примери: как да направите сянка за текст в html
Пример №1. Проста сянка за текст в html
По-долу е най-простият пример със сянка на текст. Тук сме приложили и двете отмествания (X и Y) и също сме направили радиус на размазване.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Описание
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .
Синтаксис
text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Значения
None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Ще живеят ли цитрусите в гъсталаците на юг? Да, но фалшиво копие!
Резултатът от примера е показан на фиг. 1.
Ориз. 1. Изглед в сянка в браузъра Safari
Браузъри
Opera поддържа максимум 6–9 опции за сянка. Увеличаването на тази стойност, както и увеличаването на радиуса на замъгляване над 100px, се отразява на производителността на браузъра. Версии 9.5–10 на Opera използват дисплей с множество сенки, подобен на CSS2.
Safari преди версия 4.0 поддържа само една опция за сянка, останалите се игнорират. От версия 4.0 много сенки вече работят.
Internet Explorer разбира свойството text-shadow само от версия 10.0. Вместо това се използва свойството на филтъра: Shadow(parameters) . Например, следната конструкция определя цвета на сянката (#666666), нейната посока (45° от вертикала) и стойността на отместване (4 пиксела).
филтър: Сянка (Цвят=#666666, Посока=45, Сила=4);
