Закрыть ... [X]

Как в css сделать обводку текста

Настоящую обводку текста с помощью CSS (не прибегая к position), как оказалось сделать не очень просто, некое подобие обводки получается cделать с помощью text-shadow, далее пример css:

h1{text-shadow:-1px 0px black, как в css сделать обводку текста 0px -1px black, 1px 0px black, 0px 1px black, -1px -1px black, 1px 1px black, -1px 1px black, 1px -1px black}

Из-за острых углов некоторых букв, видно неточности.(смотри №1)

Пример обводки текста CSS

Но всё упрощается если нам нужно сделать обводку с тенью, так как тень немного скрывает "зазубрены" букв. (смотри №2)

h2{text-shadow:-1px 0px black, 0px -1px black, 1px 0px black, 0px 1px black, -1px -1px black, 1px 1px black, -1px 1px black, 1px -1px black, 1px 0px 4px black, 0px 0px 2px black, 0px 0px 3px black, 0px 0px 2px black, 0px 0px 3px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black, 0px 0px 4px black;}

Причём эту часть свойства text-shadow ", 0px 0px 4px black" можно повторять много раз, но это очень сильно повлияет на производительность компьютера. Так что будьте осторожны с данным свойством.


Поделись с друзьями



Рекомендуем посмотреть ещё:



Делаем тень к тексту на CSS. Обводка текста с помощью CSS Как сделать чтобы не шумел процессор

Как в css сделать обводку текста Обводка текста с помощью CSS
Как в css сделать обводку текста Обводка текста css, как сделать обводка текста, css3
Как в css сделать обводку текста Контур для текста - t
Как в css сделать обводку текста Генератор обводки текста на CSS3
Как в css сделать обводку текста Как сделать обводку текста в CSS?


ШОКИРУЮЩИЕ НОВОСТИ