CSS: Прозрачный текст с обводкой
Свойства меняющие цвет заливки и обводки текста с помощью CSS.
CSS 06.03.2021 2.7 г. Просмотров: 12.6k
Оценить код:
Комментарии
Ваш комментарий будет первым.
Войдите, чтобы оставить комментарий.
- Сниппеты
- —
- Дизайн и вёрстка
- —
- Прозрачный текст с обводкой
Ничего лишнего — только сниппеты на developer.donnoval.ru
2013-2023 © «Полезный код» | developer.donnoval.ru
Прозрачный текст на CSS
Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.
Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черным, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном.
Как сделать прозрачный текст?
Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто «дырявил блок»)
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 7 мая 2017 в 11:38
user245150 user245150
Может пример приведите.
7 мая 2017 в 11:41
хорошо, приведу
– user245150
7 мая 2017 в 11:56
css — нельзя сделать(не считая background-clip, который еще не поддерживается почти никем емнип). SVG — можно
7 мая 2017 в 12:23
Ну, подскажите.
– user245150
7 мая 2017 в 12:26
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
div#wrapper < position: relative; height: 500px; background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg); >div#button < background: white; position: absolute; top: 160px; left: 73px; text-align: center; padding: 15px; font-size: 72px; >div#button span < background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) -73px -160px no-repeat; -webkit-text-fill-color: transparent; -webkit-background-clip: text; display:block; > КНОПКА Замечу, что тут два фона: один основной и один — у текста кнопки.
Важно в background с текстом поставить тот же фон, на котором кнопка и находится и сместить её на такое количество пикселей, на котором кнопка смещена относительно основного фона
По поводу поддержки браузерами — не могу подсказать, какие версии поддерживают. Самые последние Chrome/FF/Edge — точно работают
Поэтому, как мне кажется, лучше такое пока изображать в SVG
Полупрозрачный текст на фоне в CSS
На этом уроке я покажу вам как сделать очень необычный текстовый эффект, применяя чистый CSS. Для этого потребуется большая фотография в качестве фона, а сверху фона мы напишем крупный заголовок нестандартным шрифтом.
Демо
Как обычно начнем с HTML разметки:
Полупрозрачный текст на фоне
Заголовок h1 мы поместили в контейнер div, оба элемента — блочные и на странице пока виден — невзрачный текст. Разметка сделана, переходим в файл стилей. Обнуляем поля и отступы одновременно у body и h1.
body, h1 margin: 0;
padding: 0;
font-family: ‘Alegreya Sans SC’, sans-serif;
>
Я не зря выше упомянул, что h1 тоже является блочным элементом, а это значит, что вокруг заголовка браузеры по умолчанию создают свои поля и отступы.
После обнуления margin и padding, проблема исчезает. Еще, я прописал шрифт из коллекции Google Font, если в названии шрифта больше одного слова, то его заключают в кавычки. Кроме того, все сторонние шрифты, которых обычно нет на компьютере пользователя, обязательно надо подключать в файле стилей.
Фотография на все окно браузера
На сайте pixabay.com выбираете понравившееся вам фото, сохраняете себе на компьютер или просто копируете URL картинки и вставляете в код селектора div.
div background: url(https://cdn.pixabay.com/photo/2018/03/19/20/20/wheat-3241114_1280.jpg);
>
Все прописанные свойства ниже, растягивают фотографию, как фон, на весь экран браузера.
div height: 100vh;
background-size: cover;
background-repeat: no-repeat;
>
Поверх фона идет крупный текст, примерно посередине окна, у которого все буквы заглавные. Ничего особенного, выглядит скучно, как бы фон сам по себе, а заголовок сам по себе.
h1 font-size: 6em;
position: absolute;
top: 30%;
text-align: center;
text-transform: uppercase;
>
Эффект полупрозрачного текста с наложением слоев
Для эффекта надо добавить всего лишь 4 свойства для селектора h1.
Цвет текста делаем белым и полупрозрачным.
color: rgba(255, 255, 255,.7);
Создаем тень для заголовка
text-shadow: 0 5px 10px rgba(0,0,0,1);
Создаем нижнюю тень для блока h1
box-shadow: 0 5px 10px rgba(0,0,0,1);
Это придаст небольшую объемность всей композиции.
Смешиваем слои, теперь нижний слой с фотографией чётко проглядывает сквозь полупрозрачный текст, не перекрывая его. Красота эффекта напрямую будет зависеть от выбранного изображения и шрифта.
Поддержка браузерами
Свойство mix-blend-mode, поддерживается всеми современными браузерами, за исключением Internet Explorer и Edge. Однако Microsoft реализацию поддержки включил в список «на рассмотрении» для Edge. Поэтому у нас есть надежда, на скорейшую полную поддержку всеми браузерами.
Код полупрозрачного текста на фоне:
Для систематического изучения HTML5 и CSS3, будет полезным пройти мой видеокурс.
Создано 01.06.2018 10:08:20
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.