Css вдавленный текст – html — Как прописать css блоку так, что бы текст не наезжал и при этом текст нормально отражался

Leave a Comment / Css / By /

Как сделать эффект вдавленного текста на CSS3.

Вы здесь: Главная — CSS — CSS3 — Как сделать эффект вдавленного текста на CSS3.

Как сделать эффект вдавленного текста на CSS3.

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

HTML разметка довольно проста.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Вдавленный текст</title>
</head>
<body>
  <div>
   <p>Вдавленный текст</p>
  </div>
</body>
</html>

Но и CSS код не сложнее

body {
  background: #222;
  color: #131313;
  font-size: 200px;
}

.wrapper p {
  text-align: center;
  text-transform: uppercase;
  text-shadow: 3px 3px 5px #2c2c2c;
}

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

Итак, спасибо за внимание и удачи!

  • Как сделать эффект вдавленного текста на CSS3. Создано 06.09.2014 20:22:57
  • Как сделать эффект вдавленного текста на CSS3. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Затухание текста средствами CSS / Habr

Иногда бывает необходимость при верстке сайта вывести на экран только часть текста. Чтобы пользователю было понятно, что далее следует продолжение можно, например, поставить троеточие или ссылку «читать далее». Но есть весьма красивый способ сделать так, чтобы текст постепенно затухал.
Чтобы было понятно о чем идет речь сразу приведу пример.
Из всего материала, который мне удалось найти за день более всего мне подходил простой и понятный способ, описанный здесь. Но он имеет существенный минус: тень сложно позиционировать и боковые края приходится отделять, используя отступы.
Для тех, кто ищет простой способ сделать затемнение текста привожу свой простой пример.

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

<div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>

И всего два класса CSS:

#textbox{
    max-height:100px;
    overflow:hidden;
    margin-top:-20px;
}
#textbox:before{
    content:"";
    display:block;
    height:20px;
    position:relative;
    top:80px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}

Теперь суть:
Используя псевдокласс before мы создаем маленький блок с градиентной заливкой. По умолчанию он располагается вверху блока с текстом. Используя position:relative отодвигаем этот блок вниз так, чтобы он закрывал одну (или несколько) последних строчек текста. Все.

Из преимуществ можно выделить:
— простота реализации (используем только css)
— выделяемый текст

Из минусов:
— Не работает в IE до 9 версии включительно (кто б сомневался)
— Подходит для блоков с фиксированной высотой

Свойства CSS: text-shadow

В CSS имеется свойство text-shadow для добавления тени на каждую букву текста. Само свойство было представлено еще в CSS2, но не поддерживалось браузерами. Затем ситуация стала меняться к лучшему.

Свойство text-shadow хорошо тем, что позволяет создавать интересные эффекты с текстом без необходимости пользоваться изображениями. А значит текст доступен поисковикам и т.д.

Самый простой пример использования данного стиля выглядит следующим образом.


h3.shadow
{
    text-shadow: 2px 2px 1px red;
}

Пример заголовка с тенью

В этом примере мы добавляем к заголовку второго уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке WebKit поддерживают цвет в формате rgba, что позволяет использовать полупрозрачность.


h3.blurshadow
{
    text-shadow: 0.1em 0.1em 0.2em red;
}

Заголовок с размытой тенью

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


lightback {background-color: #F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Белый текст без тени на светлом фоне
Белый текст с тенью

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

Многослойные тени

У свойства text-shadow есть одна интересная особенность — вы можете создавать более чем одну тень. На первый взгляд это кажется необычным, но пользователи, работающие с графикой, знакомы с техникой создания объемных букв (вдавленных или выпуклых) при помощи нескольких теней.

Создадим на сером фоне два варинта объемного текста.


.ThreeD
{
    background: #CCC;
}

.a
{
    color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
    font-size: 24pt;
}

.b
{
    color: #D1D1D1;
    text-shadow: 1px 1px white, -1px -1px #333;
    font-size: 24pt;
}

Выпуклый текст
Вдавленный текст

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

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.


p.contur
{
    background: #CCF;
    padding: 1em;
}

.conturtext
{
    font-size: 24pt;
    color: #BBE;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Текст с контуром

Неоновое свечение

Если создать тень без смещения и размыть ее, то получим эффект неонового свечения.


.neon
{
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F
}

Неоновое свечение

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Ниже приводятся два примера, взятых с сайта http://maettig.com

Старт/стоп.

Анимация тени

Горящий текст

Дополнительная информация

Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.

Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).

CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.

Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров

Несколько примеров на русском

Реклама

Затухание текста на CSS3 / Habr

Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки

Нам понадобится два блока — контейнер и блок с текстом.
<div>
		<div>
			----------------------------
		</div>
	</div>

И всего два класса в css

 .shadow{
width:400px;
margin:20px auto;
cursor:text;
box-shadow:inset 0px -190px 190px -50px #add7f8;
}

.text{
color:#000;
position:relative;
z-index:-1;
background:#f9fca3;
}

Теперь суть.
Вкладываем блок с текстом в контейнер, которому задаем внутреннюю тень. Саму тень смещаем туда, где нам необходимо «затухание». Однако, внутренняя тень будет распределяться по всему контуру блока, и чтобы этого избежать, задаем ей отрицательное растяжение. За счет того, что у нас большое рассеивание и огромный сдвиг — затухание тень окажется только там, где она и нужна.
Текстовому блоку необходимо задать отрицательный z-index, чтобы тень контейнера была поверх него.
Вот и все дела.

Из плюсов:
1)текст полностью выделяемый
2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)
3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

Из минусов:
1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)
2)в опере(11.52) несколько иначе отрабатывается растяжение, в результате чего тень становится очень интенсивной.
3)не работает в ИЕ до 8 включительно

Соответственно цвета, интенсивность и размеры можно выставить в параметрах тени.

Пример здесь

upd товарищ VitaZheltyakov предлагает накладывать еще одну тень для более плавного слияния с основным фоном.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *