Vlad Merjevici

La un moment dat a existat o anumită modă pentru textul cu umbre și un efect similar putea fi găsit pe aproape orice site web. ÎN editor grafic Umbra este adăugată simplu, arată grozav, aici este textul cu umbra și împins pe pagina web, indiferent de stilul site-ului și de simțul proporției al designerului. Când majoritatea browserelor au început să accepte proprietatea stilului text-shadow, moda trecuse deja, iar acum textul cu o umbră este destul de rar. Cu toate acestea, text-shadow are o serie de altele moduri implicite aplicații pe care puțini oameni le bănuiesc. Folosind această proprietate, puteți crea text de contur, îl puteți „extruda”, puteți crea o strălucire, estompare și multe altele.

Folosind text-shadow

Patru parametri sunt scriși ca valori: culoarea umbrei, deplasarea orizontală și verticală și raza de estompare a umbrei (Fig. 1).

Orez. 1. Parametri text-umbră

Culoarea poate fi scrisă la începutul sau la sfârșitul tuturor parametrilor în orice format CSS adecvat. Deci, puteți face o umbră translucidă format rgba. Valorile de offset pozitive aruncă umbra spre dreapta și în jos, în timp ce valorile negative ale offsetului aruncă umbra spre stânga și, respectiv, în sus. Pentru a avea o umbră în jurul textului, trebuie doar să setați valori zero decalaje. Raza de estompare stabilește cât de clară va fi umbra. Cum raza mai mare estompare, cu atât umbra pare mai moale.

Un mare avantaj al text-shadow este capacitatea de a adăuga mai multe umbre diferite simultan, listând parametrii acestora separați prin virgule. Această caracteristică vă permite practic să creați diferite efecte.

Din păcate, IE înainte de versiunea 10.0 nu acceptă text-shadow , așa că nu vom vedea nicio frumusețe în acest browser.

Textul contur se caracterizează prin faptul că fiecare literă este înconjurată de o linie, a cărei culoare diferă de culoarea textului (Fig. 2). Acest efect arată cel mai bine cu fonturi mari, cum ar fi titlurile. Pentru textul corpului, folosirea unui contur afectează doar lizibilitatea.

Orez. 2. Contur textul

Un contur poate fi creat folosind două metode. În prima metodă, setăm un offset de umbră zero și o rază mică de estompare, literalmente 1-2 pixeli (exemplul 1). Mărirea valorii de estompare transformă conturul într-o strălucire în jurul textului, care este un efect diferit.

Exemplul 1: Contur text

Contur textul

Conturul realizat prin această metodă este prezentat în Fig. 1. Conturul se dovedește a fi ușor neclar, așa că pentru cei care doresc să obțină o linie clară este destinată a doua metodă. Constă în folosirea a patru umbre ascuțite de aceeași culoare, acestea sunt mutate unghiuri diferite pe pixel (exemplul 2).

Exemplul 2. Patru umbre pentru contur

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Contur textul

Aspectul unui astfel de contur este prezentat în Fig. 3. Se observă că conturul este mai expresiv.

Orez. 3. Circuit cu cu ajutorul a patru umbre

Pentru a adăuga efectul de text 3D prezentat în Fig. 4, sunt aplicate simultan mai multe umbre, care sunt deplasate una față de alta cu un pixel pe orizontală și pe verticală.

Orez. 4. Text 3D

Personal, acest tip de text îmi amintește de literele în stil retro și, din nou, este cel mai potrivit pentru titluri, mai degrabă decât pentru corpul unei pagini web.

Numărul de umbre depinde de cât de mult doriți să „trageți” textul înainte. Cantitate mare crește „adâncimea” literelor, mai puțin, dimpotrivă, reduce tridimensionalitatea. Exemplul 3 folosește cinci umbre de aceeași culoare.

Exemplul 3: Umbrire pentru a adăuga tridimensionalitate

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Frigider cu zece camere

Pentru toate umbrele setăm raza de estompare la zero și aceeași culoare. Umbrele diferă doar prin valorile de offset.

Gravarea textului

Pentru a crea efectul de reliefare a textului sau, cu alte cuvinte, de relief, culoarea textului trebuie să se potrivească cu culoarea de fundal. O parte a literelor „proeminente” deasupra suprafeței pare să fie iluminată, în timp ce cealaltă parte este în umbră (Fig. 5).

Orez. 5. Text în relief

Pentru a adăuga un efect similar, avem nevoie de două umbre - mutăm umbra albă în sus la stânga cu un pixel, iar pe cea gri închis la dreapta (exemplul 4).

Exemplul 4: text în relief

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Text în relief

Relieful arată cel mai bine fundal gri, deci efectul nu este potrivit pentru toată lumea schema de culori site-ul. Apropo, este ușor să fii apăsat mai degrabă decât textul extrudat; doar schimbă culorile umbrelor.

Text-umbră: #333 -1px -1px 0, #fff 1px 1px 0;

Strălucire

Strălucirea din jurul textului este aceeași umbră, doar că este strălucitoare și contrastantă. Astfel, pentru a crea un efect de strălucire, trebuie doar să schimbați culoarea umbrei și să setați raza de estompare dorită. Deoarece strălucirea din jurul textului ar trebui să fie uniformă, compensarea umbrei ar trebui să fie setată la zero. În fig. Figura 6 prezintă un exemplu de strălucire în diferite culori.

Orez. 6. Text strălucitor

Exemplul 5. Strălucire

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Partea luminoasă

Partea întunecată

Estompa

Umbra în sine este neclară, așa că dacă lăsăm doar umbra și ascundem textul în sine, vom obține litere neclare (Fig. 7), iar gradul de estompare poate fi ajustat cu ușurință folosind parametrul text-shadow.

Orez. 7. Text cu estompare

A se ascunde text original este suficient să setați culoarea ca transparentă (exemplul 6). Culoarea umbrei acționează apoi ca culoarea textului, iar raza de estompare stabilește gradul de estompare al literelor.

Exemplul 6: estomparea textului

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Text neclar

Umbra și pseudo-clase

Umbra nu trebuie adăugată direct textului; proprietatea text-shadow se joacă frumos cu pseudo-clasele :hover și :first-litera. Datorită acestui fapt obținem efecte interesante cu text precum conturul primei litere a unui paragraf sau strălucirea unui link atunci când treceți cursorul mouse-ului peste acesta. Exemplul 7 prezintă astfel de tehnici.

Exemplul 7: Utilizarea Pseudo-claselor

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Un proiect de nișă încetinește canalul tradițional, indiferent de costuri. Structura pieței, eliminând detaliile, stabilizează departamentul de marketing și vânzări, folosind experiența campaniilor anterioare. Construirea mărcii, desigur, respinge în mod spontan PR-ul convergent, câștigând un segment de piață. Investiția sincronizează rolul statut social, crescând concurența. Marcă determină în mod natural planul de plasare, folosind experiența campaniilor anterioare.

Desigur, puteți crea frumusețe în Photoshop, dar ce se întâmplă dacă trebuie să salvați textul și să nu-l lipiți cu o imagine frumoasă?

De exemplu, pentru o indexare mai bună, am vrut să fac textul titlului în etichete

Deci, să facem niște text cu o umbră folosind CSS:

Nivelul 3 CSS are proprietatea „text-shadow” pentru a adăuga o umbră la fiecare literă a oricărui text.

1. Cea mai simpla forma: h3 (text-umbră: 0.1em 0.1em #333)
2. Umbre neclare ale textului: h3.b (text-umbră: 0.1em 0.1em 0.2em negru)
3. Text alb lizibil: h3.a (culoare: alb; text-umbră: negru 0.1em 0.1em 0.2em)
4. Umbre stratificate: h3 (text-umbră: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006)
5. Desenarea literelor și a contururilor: h3 (umbră text: -1px 0 negru, 0 1px negru, 1px 0 negru, 0 -1px negru)
6. Neon Glow: h3.a (text-shadow: 0 0 0.2em #8F7) h3.b (text-umbră: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Un alt exemplu interesant:

Conturarea textului cu CSS

Trage textul cu folosind CSS Este posibil să faceți acest lucru fără a recurge la scripturi. Acest efect poate fi creat folosind proprietatea text-shadow. Deși IE nu acceptă această proprietate în niciuna dintre versiunile sale, în altele browsere populare Rețeta descrisă va funcționa excelent.

Luați în considerare codul de mai jos:

Exemplul nr. 1

H1(text-shadow: roșu 1px 0px, roșu 1px 1px, roșu 0px 1px, roșu -1px 1px, roșu -1px 0px, roșu -1px -1px, roșu 0px -1px, roșu 1px -1px;)

Primul parametru al proprietății text-shadow setează culoarea umbrei, al doilea offset-ul orizontal al umbrei în raport cu textul, al treilea offset-ul vertical. Când specificați o compensare a umbrei în toate direcțiile din jurul textului cu 1 pixel la rândul său, obțineți efectul de contur.

Exemplul de accident vascular cerebral nr. 1

Pentru a face cursa mai saturată, puteți utiliza al patrulea parametru text-shadow, care este responsabil pentru raza de estompare a umbrei:

Exemplul nr. 2

H1(text-shadow: roșu 1px 0px, roșu 1px 1px, roșu 0px 1px, roșu -1px 1px, roșu -1px 0px, roșu -1px -1px, roșu 0px -1px, roșu 1px -1px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px;)

Exemplul de accident vascular cerebral nr. 2

Dacă observați, proprietatea „roșu 0 0 3px” se repetă de mai multe ori. Aici se află efectul de saturație. Pentru a obține un aspect mai clar al cursei, proprietatea poate fi adăugată cu alți parametri un numar mare de o singura data. Singurul dezavantaj este că poate încetini foarte mult browserul pe computere mai slabe.

Proprietate chenar CSS Funcționează pentru a crea marginea unui obiect, și anume grosimea cadrului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte Pentru percepție mai bună continutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxa chenarului CSS

granita: lățimea graniței chenar-stil chenar-culoare| moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau îl puteți utiliza valori standard subțire, mediu, gros (se deosebesc doar prin lățimea pixelilor)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • întreruptă - cadru format din liniuțe
  • solid - linie simplă(utilizat cel mai des)
  • dublu - cadru dublu
  • groove - margine 3D canelată
  • creasta, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau în format RGB(vezi numele culorilor html pentru site)

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Сегодня расскажу, как можно сделать в css обводку текста. Все манипуляции мы будем проводить исключительно со свойством text-shadow .

Тонкая четкая обводка

В качестве текста, на котором мы будем испытывать все наши задумки, я предлагаю использовать такой:

Тут видно, что блок с текстом имеет класс text-dec. Именно по нему мы будем обращаться к нашему элементу в css, применяя к нему нужные свойства. Итак, вот как делается тоненькая обводка:

Text-dec{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black }

Зададим сразу большой размер шрифта, чтобы все было очень хорошо видно, а цвет текста – желтый, допустим. Третья строчка в нашем случае и реализует ту самую обводку.

Свойство text-shadow позволяет добавить к тексту тень, теней можно добавлять сколько угодно, через запятую. Синтаксис свойства таков:

text-shadow: смещение по горизонтали | по вертикали | размытие | цвет

В нашем случае мы сначала задали небольшое смещение вниз и влево, а потом вверх и вправо. В результате текст по всему своему контуру получил обведение.

Если добавить к каждой тени еще и размытие в 10 пикселей, то она будет выглядеть так:

Размытая обводка

Другой подход заключается в том, чтобы вообще не задавать смещение, но определить размытие – тогда текст тоже будет как бы обведен, но не четко. Добавим такой же точно текст в html, но только стилевой класс задайте другой – text-dec2:

Text-dec2{ font-size: 50px; color: blue; text-shadow: 0 0 7px red; }

Жирная обводка

Это реализовать труднее, так как слишком сильное смещение теней может привести к нечитаемости текста. И все же определенного эффекта добиться можно, хотя для этого придется добавить гораздо больше теней, чем в предыдущих случаях. Соответственно, добавьте в html новые текстовые фрагменты с классами text-dec3 и text-dec4 . И вот такие для них стили:

Text-dec3{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px -3px 0 black, 4px 4px 0 black, -4px -4px 0 black } .text-dec4{ font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black }

Как видим, текст сохранил читаемость и при этом получил приличную черную обводку. Суть этого подхода в том, что мы постепенно добавляем новые тени, увеличивая смещение с каждым разом на 1 пиксель.

Еще более жирная обводка со всех сторон

Дальше — сложнее. Я лично не знал, как нормально реализовать обводку со всех сторон, но тут наткнулся в интернете на генератор text-shadow, который позволяет в визуальном режиме настроить тень, а потом нужно просто скопировать ее код. Вот ссылка на генератор.
С его помощью я смог сделать вот такую тень:

CSS пока не всесилен

На этом возможности css заканчиваются. Если вам нужна красивая жирная обводка, например, как эта:
То сделайте ее в фотошопе, а сам текст придется вставить на веб-страницу в виде изображения

Пока что я знаю такие варианты, как сделать в css обводку текста. Может и вы какие знаете, пишите в комментариях. В следующий раз я покажу еще несколько эффектов, которые можно сделать с текстом благодаря свойству text-shadow.

3.5 из 5

Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML

CSS

Trapezoid,
.polygon { display: -moz-inline-block; }

Polygon,
.trapezoid { margin:0; padding: 0; background: none; }

Polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }
.trapezoid {
display: inline-block; width: 1px; height: 0; margin: 0 auto;
border-left: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa { border-bottom: 10em solid; border-top: none; }

Polygon.r2 { height: 0em; }

Polygon.r3 { height: 8.66em; }
.polygon.r3 .trapezoid { border-width: 8.66em 5em; }

div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }
div.eg .polygon { display: block; margin: 0 auto; }

R3 { color: red; font-size: 0.5em; }

Звезда

HTML

CSS

#star span,
#star{
display: block;
}

#top{
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center{
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom{
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span{
margin-top: -2em;
color: #000;
font-weight: bold;
}

a#star:hover #center span{
color: #fff;
background-color: transparent;
}

a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}

Еще немного примеров

• Елка и необычная верстка от Эрика Мейера;
• Плитка и менюшка от главного технолога Технократи;