Внутренняя тень текста при помощи CSS
 | |
| В этой статье рассмотрим популярный метод в создание внутренней тени, который идет для текста. И только будет использоваться на стилях CSS. В то в этом отношение идет в плюс, так как теперь веб мастер может отлично сделать оформление знаков, и после этого загрузки на сайт не будет, все благодаря стилистике. Здесь все просто, только нужно понимать, что создание видимости изначально идет по внутренней тени, который закрепляется за текстом или знаком при помощи CSS. Для достижение этого оригинального эффекта для внутренней тени, здесь понадобится CSS свойства, под названием text-shadow. Эта тема по созданию, где становится чрезвычайно популярным в веб дизайне, где с помощью нескольких современных браузеров, которые теперь показывают поддержку свойства text-shadow CSS3, что теперь просто и легко создать эффект с помощью чистого CSS.И этим вы можете обновить дизайн на интернет ресурсе, также создать уникальные заголовки, вообще вести свой портал в своем оригинальном стиле. Благодаря недавней поддержке текстового преобразования в Safari и Firefox и других, этот эффект можно легко создать без использования каких-либо методов замены изображений. Это означает, что ваш текст намного проще редактировать и имеет преимущество в том, что он отображается непосредственно в браузере. По сути все готово, только остается настроить простой HTML документ, затем добавьте несколько строк текста, чтобы проверить. Также создаем текст, где используем обычные свойства CSS, чтобы отредактировать размер и внешний вид. Теперь все готово для применения свойство text-shadow, который отвечает за видимость. Приступаем к установке: Первый вариант:  HTML Код <h2>Эффект чистого текста CSS</ h2> CSS Код h2 { font: 65px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #191818; text-shadow: 0px 2px 3px #696767; font-weight: bold; } Это был первый и простой вариант, где просто задали увет шрифта и выставили свойство, которое и показало, как будто вдавленные знаки. Демонстрация Второй вариант: Здесь более профессиональнее идет, это как можно больше цветовой гаммы добавлено, чтоб по всем сторонам корректно смотрелось, но и сам эффект более качествен.  HTML Код <h1>ZorNet.Ru: Портал Вебмастера</h1> CSS Код html { background-color: rgb(108, 111, 67); background: -webkit-linear-gradient(-45deg, rgb(110, 113, 68) 25%, rgb(73, 76, 35) 25%, rgb(86, 88, 54) 50%, rgb(106, 109, 74) 50%, rgb(122, 125, 75) 75%, rgb(84, 88, 35) 75%); background-size: 5px 5px; } h1 { text-align: center; font-family: 'Oleo Script', cursive; font-size: 7em; color: transparent; letter-spacing: 0.1em; text-shadow: 0 1px 5px rgb(75, 78, 34), 0 -1px 0 rgb(12, 12, 12), 0 -3px 0 rgba(10, 10, 10, 0.49), 0 1px 0 rgba(247, 244, 244, 0.54), 0 2px 2px rgba(247, 244, 244, 0.11); } Как посмотреть, то изначально внутренний идет показ, то идет выкуплый, что по мне еще оригинальнее, но уже кто как рассмотрел. Демонстрация Чтобы разработать эффективность для нажатия, нам нужно добавить тень, которая светлее, чем цвет текста, чтобы гарантировать, что эффект работает правильно. Здесь мы используем #191818 против более темного цвета текста #696767. 2px вертикальное смещение и очень тонкая размытость. Которая помогают дать точный внешний вид, который нам нужен. Для более оригинального видение нужно сделать фоновое изображение, на нем этот эффект более элегантнее просматривается. PS - Безусловно есть тема, как создать 3D Эффект, здесь можно сказать все в таком же методе, только наоборот, что покрасите и стилю не уступает другим форматам. Также есть другие способы, что были просмотрены, где много стилей и теней нужно добавлять, а видимость почти аналогична. Если кому интересна эта текстура, то на форуме создана аналогичная тема, под названием текстовый эффект с тиснением при помощи CSS, где вы также можете найти другие эффекты, которые безусловно отличаются от других. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |