12 ефекти за текстови сенки с помощта на CSS

Типография е най-любимите играчки на уеб дизайнери. CSS се състои от един много интересен инструмент - текст сянка (сянката на текста), който на пръв поглед изглежда достатъчно проста, но тя може да се използва за създаване на запомнящи се ефекти, ако се свържете изобретателността и въображението.

Основна употреба на сенки

Текст-сянка имот е много лесен за използване. Тя се поддържа от всички съвременни браузъри, дори и без използването на представки. Но подкрепа в IE (дори и в IE9) отсъства. Можете да използвате инструменти като, Modernizr. за да помогне дръпнете CSS3 ефекти, дори и в по-старите версии на IE.

За да създадете сянка на текста с помощта на синтактичните свойства на текст сянка. дадена по-долу. Трябва да се определи четири параметъра: първите две определят позицията на сянка, а третият определя нивото на замъгляване, а четвъртият определя цвета на сянка.

По-долу е пример за сянка на текста, което се компенсира с два пиксела и надолу четири пиксела вдясно, три пиксела неясни и е с черен цвят до нивото на непрозрачност на 30%.

В резултат на използването на този имот е, както следва:

Защо да използваме RGBA?

Вие не трябва да се използва RGBA да зададете цвят на сянка при определяне на свойствата. Въпреки това, RGBA добавя друго измерение при определяне на сянка - на нивото на прозрачност.

Този метод е много по-лесно в сравнение с други начини за определяне на цвят. Не е нужно да се фокусира върху определяне на цвят нюанс на цвета, който може да е малко по-тъмен или по-светъл от цвета на фона. С RGBA можете просто да използвате бял или черен цвят и повишаване на тяхната прозрачност, за да се постигне желания нюанс на цвета на фона, когато се смесят.

гравиран текст

С текстови сянка имот, можете да създадете различни ефекти за текст, без да се ограничава само до паднат сенки. Например, тук е код за формиране на илюзии Дент текст.

Първо трябва да се определи цвета на текста малко по-тъмен от цвета на фона. И след това, че е необходимо да се използва свойството на текстови сянка с бял цвят и по-голяма прозрачност.

Цветът на фона на # 222, и цвета на текста е непрозрачността на 60%. Белият цвят е позициониран леко на дясно и надолу до нивото на непрозрачност на 10%.

ясна сянка

Не е необходимо да се мият от сянка. Ясно сянка може да се комбинира идеално с дизайна на сайта.

двойна сянка

Истинското забавление започва, когато те отхвърли други ограничения има само една сянка. Използвайте запетая за разделяне на определенията, можете да използвате колкото се може повече сенки, както искате!

Ето един пример за използване на два нюанса. Първият е в същия цвят като на заден план.

Преместването надолу към голяма дистанция

След като сте усвоили използването на няколко сенки, резултатът ще бъде все по-изразителен. Много лесно да се създаде 3D ефект за текста.

Примерът използва четири сенки всички изместен надолу на различни разстояния и замъглено.

Преместването за кратко разстояние и силно замъгляване

Тук е още въплъщение на една и съща идея. Три сенки, се компенсират от късо разстояние и по-неясно.

3D текст от Марк Dotto

Ефект се използва за MarkDotto.com сайт. Той използва 12 различни нюанси, за да създадете страхотно 3D ефект.

Гравирани надписи текст от Гордън Hall

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

Гордън използва някои сериозни CSS вуду да потеглям не само външна сянка, а действителна вътрешна сянка, както добре. Проверете си блог пост за пълно обяснение на техниката.

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!