Прозрачный текст

@Appi · Регистрация: 18.02.2015

Author24 — интернет-сервис помощи студентам

Как сделать прозрачный текст, а фон на нем был цветной.

Точно так же, как вот тут написано 4K

@Fedor92 · 10.09.2016, 19:19

Appi, не реально... ИМХО, если бесцветный текст ещё можно сделать, то белую подложку сделать под текст вряд ли выйдет...

@boilzzz · 10.09.2016, 20:14

Appi, В теории можно сделать через svg или canvas

@mrtoxas · 10.09.2016, 21:51

Дааа, расскажите мне про нереально

CSS

html,
body {
  height: 100%;
}
body {
  padding: 20px;
  background: -webkit-linear-gradient(top, #d4e4ef 0%, #86aecc 100%);
  background: linear-gradient(to bottom, #d4e4ef 0%, #86aecc 100%);
}
.wrapper {
  width: 267px;
  height: 181px;
  box-sizing: border-box;
  position: relative;
}
.block1 {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 123px 98px 0 0;
  border-color: tomato transparent transparent transparent;
  top: 0;
  left: 0;
}
.block2 {
  position: absolute;
  width: 70px;
  height: 21px;
  background-color: tomato;
  bottom: 0;
  left: 0;
}
.block2:before {
  content: '';
  position: absolute;
  width: 42px;
  height: 21px;
  background-color: tomato;
  bottom: 0;
  left: 110px;
}
.block2:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 38px 26px;
  border-color: transparent transparent tomato transparent;
  top: -73px;
  right: 0;
}
.block3 {
  position: absolute;
  width: 42px;
  height: 121px;
  background-color: tomato;
  top: 0px;
  left: 110px;
}
.block3:after {
  content: '';
  position: absolute;
  width: 21px;
  height: 41px;
  background-color: tomato;
  top: 120px;
  right: 0;
}
.block4 {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 43px 0 0;
  border-color: tomato transparent transparent transparent;
  right: 28px;
  top: 0;
}
.block4:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 48px 38px 63px 0;
  border-color: transparent tomato transparent transparent;
  right: -70px;
  top: -30px;
}
.block5 {
  position: absolute;
  bottom: 0;
  right: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 0 0 45px;
  border-color: transparent transparent transparent tomato;
}
.block5:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 0 73px;
  border-color: transparent transparent transparent tomato;
  -webkit-transform: rotate(51deg) skew(10deg);
  transform: rotate(51deg) skew(10deg);
  top: -33px;
  right: -17.4px;
}

HTML5

<div class="wrapper">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div> 
<div class="block4"></div> 
<div class="block5"></div> 
</div>

Результат

@Fedor92 · 10.09.2016, 22:10

Сообщение от mrtoxas

Дааа, расскажите мне про нереально

То есть, то что ты сотворил - это реально по твоему?

@mrtoxas · 10.09.2016, 22:29

Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect

@Fedor92 · 10.09.2016, 22:39

Сообщение от mrtoxas

Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect

Угу, кто бы сомневался...

Я уже всё отписал в отзыве...

Сделал, молодец...

Почему-то посмотрел на фигурки на макете и сразу машинально тебя вспомнил... К чему бы это?

Новые блоги и статьи
Как работать с Kafka в Go (Golang) bytestream 22.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки событий и интеграции микросервисов. Эта система, изначально. . .	Как использовать RabbitMQ в Go (Golang) bytestream 22.01.2025 RabbitMQ представляет собой надежный и широко используемый брокер сообщений, который играет ключевую роль в построении современных распределенных систем и микросервисной архитектуры. В основе работы. . .	Как преобразовать список списков в простой список в Python bytestream 22.01.2025 При работе с Python разработчики часто сталкиваются с необходимостью обработки сложных структур данных, среди которых особое место занимают вложенные списки. Эти структуры представляют собой списки,. . .	Что такое GUID / UUID и как их создать bytestream 22.01.2025 В мире разработки программного обеспечения существует постоянная потребность в уникальной идентификации объектов, записей и ресурсов. Эта задача становится особенно актуальной в распределенных. . .	Как добавить пустую директорию в репозиторий Git bytestream 22.01.2025 При работе с системой контроля версий Git разработчики часто сталкиваются с ситуацией, когда необходимо сохранить пустую директорию в репозитории. Данная задача может показаться простой на первый. . .	Как валидировать адрес email в JavaScript bytestream 22.01.2025 JavaScript, как основной язык веб-разработки, предоставляет разработчикам множество инструментов для реализации эффективной валидации email-адресов. От простых встроенных решений до сложных. . .
Как заменить все вхождения подстроки в JavaScript bytestream 22.01.2025 Строки в JavaScript представляют собой неизменяемые последовательности символов, что делает их обработку особенно интересной с точки зрения оптимизации и выбора правильного подхода к решению задач. . . .	Управление версиями пакетов в Node.js. В чем разница между тильдой (~) и кареткой (^) в package.json bytestream 22.01.2025 В современной разработке программного обеспечения управление версиями пакетов играет ключевую роль в обеспечении стабильности и надежности проектов. Node. js, как одна из самых популярных платформ для. . .	Аутентификация на сайте с помощью формы bytestream 21.01.2025 В современном цифровом мире безопасная аутентификация становится краеугольным камнем защиты веб-приложений и пользовательских данных. Каждый день миллионы людей используют различные онлайн-сервисы,. . .	Как получить индекс в цикле for в Python bytestream 21.01.2025 При работе с коллекциями данных в Python часто возникает необходимость не только получить доступ к элементам последовательности, но и знать их позицию в процессе итерации. Индексация в циклах. . .	Как определить адрес, из которого локальный репозиторий Git был клонирован bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемой частью рабочего процесса. При работе с Git разработчики часто сталкиваются с необходимостью. . .	Какая разница между операторами == и === в сравнениях в JavaScript bytestream 21.01.2025 В мире веб-разработки JavaScript занимает особое место как динамический язык программирования, предоставляющий разработчикам широкий набор инструментов для создания интерактивных веб-приложений. . . .

@Appi 20 / 20 / 7 Регистрация: 18.02.2015 Сообщений: 304
		1
	Прозрачный текст 10.09.2016, 18:24. Показов 2519. Ответов 6 Метки нет (Все метки) Как сделать прозрачный текст, а фон на нем был цветной. Точно так же, как вот тут написано 4K 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.09.2016, 19:19	2
	Appi, не реально... ИМХО, если бесцветный текст ещё можно сделать, то белую подложку сделать под текст вряд ли выйдет... 1

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	10.09.2016, 20:14	3
	Appi, В теории можно сделать через svg или canvas 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.09.2016, 22:10	5
	Сообщение от mrtoxas Дааа, расскажите мне про нереально То есть, то что ты сотворил - это реально по твоему? 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.09.2016, 22:29	6
	Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.09.2016, 22:39	7
	Сообщение от mrtoxas Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect Угу, кто бы сомневался... Я уже всё отписал в отзыве... Сделал, молодец... Почему-то посмотрел на фигурки на макете и сразу машинально тебя вспомнил... К чему бы это? 0

Прозрачный текст

Решение