Как сделать эффект вдавленного текста на CSS3.
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
| E-mail: | |
| Имя: | |
Другие курсы
Как создать профессиональный Интернет-магазин
После семинара:
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Записаться
Другие курсы
Делай то, что в жизни тебе даётся легко, и делай это изо всех сил.
Неизвестный
Всем привет! Сегодня я покажу простой пример о том, как сделать вдавленный текст на чистом 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;
}
Вся суть в том, чтобы сделать цвет текста темнее, чем фоновый, а цвет тени, наоборот, сделать светлее фонового цвета, и тогда мы получим
Итак, спасибо за внимание и удачи!
- Создано 06.09.2014 20:22:57
- Михаил Русаков
Предыдущая статьяСледующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.
ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
- Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a> - BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.
ru»]Как создать свой сайт[/URL]
ru»]Как создать свой сайт[/URL]outline — CSS — Дока
- Кратко
- Пример
- Как пишется
- outline-width
- outline-style
- outline-color
- Подсказки
- На практике
- Алёна Батицкая советует
Кратко
Секция статьи «Кратко»Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.
Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!
Естественно, можно задавать это свойство любому элементу и без всяких фокусов 😏
Пример
Секция статьи «Пример»Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline.
outline..block { /* Чтобы видеть границы элемента */ border: 1px solid black; /* Сплошная обводка шириной 5 пикселей зелёного цвета */ outline: 5px solid green; /* От края элемента до края обводки 10 пикселей */ outline-offset: 10px;}
.block {
/* Чтобы видеть границы элемента */
border: 1px solid black;
/* Сплошная обводка шириной 5 пикселей зелёного цвета */
outline: 5px solid green;
/* От края элемента до края обводки 10 пикселей */
outline-offset: 10px;
}
Открыть демо в новой вкладкеКак пишется
Секция статьи «Как пишется»outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline, outline и outline.
Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:
outline-width Секция статьи «outline-width»- Ключевые слова
thin,medium,thick— задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно. - Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например,
10pxили0.. 2em
Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.outline-style Секция статьи «outline-style»none— обводка не отображается, даже если задано значение дляoutline.- width dotted— обводка будет состоять из точек. Круглых точек, вроде такого •••••dashed— обводка будет в виде пунктирной линии.solid— значение по умолчанию, если не задано иное. Сплошная линия.double— двойнаясплошнаялиния.
Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:
groove— обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.ridge— обводка отобразится объёмной, её центр будет приподнят. Противоположноgroove.inset— объёмная рамка, края направлены внутрь элемента.outset— объёмная рамка, края направлены наружу элемента, противоположноinset.
Цвет обводки (если он отличен от чёрного) станет двухцветным.Проще всего понять на примерах:
Открыть демо в новой вкладкеoutline-color Секция статьи «outline-color»- любое доступное значение цвета в вебе, включая ключевые слова
transparent,Color invert— ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.
Собираем все значения в шорткат.
Указано одно обязательное значение для outline:
..selector { outline: solid; }
selector { outline: solid;}
outline | outline:
.selector { outline: #f66 dashed;}
.selector {
outline: #f66 dashed;
}
outline | outline:
.selector { outline: inset thick;}
.selector {
outline: inset thick;
}
outline | outline | outline:
.selector { outline: green solid 3px;}
.selector {
outline: green solid 3px;
}
Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову medium (что, в свою очередь, равно 3 пикселям).
Заодно посмотрим на доступные значения для outline:
- Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство
outlineуказывает расстояние от края элемента до внутреннего края обводки.offset
Подсказки
Секция статьи «Подсказки»💡 В отличие от На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! 🥳 Во всех актуальных версиях браузеров, кроме Safari 😤border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить.
💡 Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.
💡 Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.
На практике
Секция статьи «На практике»Алёна Батицкая советует
Секция статьи «Алёна Батицкая советует»🛠 Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.
🛠 При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
border
alt + ←
→
outline
alt + →
Свойство CSS text-indent
❮ Назад Полное руководство по CSS Далее ❯
Пример
Отступ первой строки текста с разными значениями:
div.
a {
отступ текста: 50 пикселей;
}
div.b {
текстовый отступ: -2em;
}
div.c {
текстовый отступ:
30%;
}
Попробуйте сами »
Определение и использование
Свойство text-indent
Примечание: Допускаются отрицательные значения. Первая строка будет иметь отступ влево, если значение отрицательное.
Показать демо ❯
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | да |
| Анимация: | да. Читать про анимированный Попытайся |
| Версия: | УС1 |
| Синтаксис JavaScript: | объект .style.textIndent=»50px» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Недвижимость | |||||
|---|---|---|---|---|---|
| отступ текста | 1,0 | 3,0 | 1,0 | 1,0 | 3,5 |
Синтаксис CSS
text-indent: length |initial|inherit;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| длина | Определяет фиксированный отступ в px, pt, cm, em и т. д. Значение по умолчанию — 0. Прочтите о единицах длины | |
| % | Определяет отступ в % от ширины родительского элемента | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник по CSS: Интервал между текстами в CSS
Ссылка HTML DOM: свойство textIndent
❮ Предыдущий Полное руководство по CSS Следующий ❯
НАБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery 9007 Справочник по Top 6
9003
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
4
5 Top6 ExamplesПримеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
УСС | text-indent Property — GeeksforGeeks
|
sudo { 
