3D текстов ефект с CSS

Да видим как се правиЩе ни трябва:

• Основни познания по HTML и CSS
• Редактор на кодове
• Нашият браузър

Етап 1

Ще създадем папка в нашия локален сайт, за да запазим файловете, които ще ни трябват, ще го нарека "text_3d" в нея друго извикване css
Увеличете
Увеличете

Стъпка 2

Ще отидем в редактора на кода и ще създадем нов файл index.html, който ще запазим в корена на папката „3d_text“, която създадохме в предишната стъпка, в която ще напишем нашата основна html структура и ще добавим препратката към css файл, наречен "style. ccs", който ще създадем по -късно.
html код

Стъпка 3

Ще добавим линия вътре в тялото, в която ще поставим етикет

към който ще присвоим класа "3d-текст", който след това ще създадем във .css файла, ще поставя всеки текст в този етикет за тестване.

3-D текстов ефект

Ако го видим в браузъра в момента, няма да видим големи промени, просто нормален и текущ текст, така че за да имаме 3D изглед, е необходимо да дефинираме някои свойства чрез css. Направи го.
Увеличете

Стъпка 4

В нашия редактор на кодове ще създадем нов .css файл, който ще нарека style.css, в който ще поставим свойствата, така че нашият текст да има този 3D ефект, който искаме да постигнем.

Стъпка 5

Ще започнем да редактираме нашия css първо ще определим размера на тялото си, за това ще му дадем абсолютна позиция с ширина и височина 100%.

 тяло {позиция: абсолютна; ширина: 100%; височина: 100%} 

Стъпка 6

Ще напишем в нашия .ccs свойствата за класа "3d-текст", които коментирахме в стъпка 3. Ще започнем с дефиниране на шрифта, особено обичам да използвам шрифта "Helvetica Neue", разбира се можете използвайте го с шрифта, който искате. В този случай ще задам размера на шрифта на около 80px; удебелен или удебелен тип … И този път ще го оставя в бяло. Ако го видим в браузъра си, ще забележим, че текстът е изчезнал, това е така, защото сме го поставили в бяло и фонът на браузърите също е бял …

 тяло {позиция: абсолютна; ширина: 100%; височина: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; размер на шрифта: 80px; тегло на шрифта: удебелен; цвят: #fff; } 

Ще видим в браузъра, че текстът изчезва
Увеличете

Стъпка 7

Видяхме, че в предишната стъпка текстът изчезна, сега имаме нужда да се появи и с 3D ефект. За това трябва само да добавим сянка към нашия текст, използвайки свойството text-shadow, както следва.

 тяло {позиция: абсолютна; ширина: 100%; височина: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; размер на шрифта: 80px; тегло на шрифта: удебелен; цвят: #fff; text-shadow: 0 1px 0 #ccc; } 

Увеличете

Виждаме, че сме постигнали лек ефект на засенчване, но не е достатъчно, за да изглежда 3D, за щастие css ни позволява да комбинираме няколко сенки в рамките на свойството text-shadow, разделени със запетая, ще се възползваме от това, за да поставим няколко сенки на различно разстояние от нашия текст и с различни цветови тонове от по -тъмен към по -светъл, за да създадем ефекта, но ние също трябва да комбинираме тези сенки с помощта на rgba цветове и прозрачни фолиа, за да дадем този ефект на дифузия в края на засенчване.
По този начин нашият css код би изглеждал така.

 тяло {позиция: абсолютна; ширина: 100%; височина: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; размер на шрифта: 80px; тегло на шрифта: удебелен; цвят: #fff; text-shadow: 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); } 

И резултатът от ефекта ще бъде следният …
Увеличете
Това е всичко засега тук .zip с файловете, всякакви въпроси или предложения могат да се изпращат чрез коментари, поздрави …
text_3d20150917130359.zip 694 байта 217 изтеглянияХареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка