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

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

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

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

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

@Fedor92 · 10.09.2016, 19:19

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

@boilzzz · 10.09.2016, 20:14

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

@mrtoxas · 10.09.2016, 21:51

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
1
2
3
4
5
6
7
<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

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

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

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

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

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Appi 20 / 20 / 7 Регистрация: 18.02.2015 Сообщений: 304

	Прозрачный текст 10.09.2016, 18:24. Показов 2634. Ответов 6 Метки нет (Все метки) Как сделать прозрачный текст, а фон на нем был цветной. Точно так же, как вот тут написано 4K 0

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

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

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

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

Решение