Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
Appi
20 / 20 / 7
Регистрация: 18.02.2015
Сообщений: 304
1

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

10.09.2016, 18:24. Просмотров 853. Ответов 6
Метки нет (Все метки)

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

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


Точно так же, как вот тут написано 4K
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.09.2016, 18:24
Ответы с готовыми решениями:

Прозрачный текст
Подскажите пожалуйста, необходимо сделать, так что бы текст к концу блока...

Прозрачный фон, а не текст!
У меня есть блок .breadcrumb для него стил css .breadcrumb { font-size:...

Как наложить на картинку прозрачный фон и текст?
вот css картинки .curved-hz-1 { position:relative; width: 700px;...

Прозрачный блок, внутри его не прозрачный
Скажите пожалуйста, можно ли сделать <div opacity 0.5 цвет белый> <div...

Прозрачный блог
Здравствуйте, подскажите как сделать такой же прозрачный блог ...

6
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,908
Записей в блоге: 5
10.09.2016, 19:19 2
Appi, не реально... ИМХО, если бесцветный текст ещё можно сделать, то белую подложку сделать под текст вряд ли выйдет...
1
boilzzz
Богатый духовно
453 / 260 / 145
Регистрация: 10.03.2015
Сообщений: 1,045
Завершенные тесты: 2
10.09.2016, 20:14 3
Appi, В теории можно сделать через svg или canvas
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
10.09.2016, 21:51 4
Лучший ответ Сообщение было отмечено Appi как решение

Решение

Дааа, расскажите мне про нереально
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>
Результат
1
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,908
Записей в блоге: 5
10.09.2016, 22:10 5
Цитата Сообщение от mrtoxas Посмотреть сообщение
Дааа, расскажите мне про нереально
То есть, то что ты сотворил - это реально по твоему?
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
10.09.2016, 22:29 6
Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,908
Записей в блоге: 5
10.09.2016, 22:39 7
Цитата Сообщение от mrtoxas Посмотреть сообщение
Это было не сложно и довольно быстро. линейка, triangle generator и pixel perfect
Угу, кто бы сомневался... Я уже всё отписал в отзыве... Сделал, молодец... Почему-то посмотрел на фигурки на макете и сразу машинально тебя вспомнил... К чему бы это?
0
10.09.2016, 22:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.09.2016, 22:39

Прозрачный бэкграунд
Как сделать прозрачный бэкграунд буз потери прозрачности, а именно есть див...

Прозрачный body
Вопрос. Как сделать прозрачный HTML или BODY элемент страницы, чтобы при...

Прозрачный html
Здравствуйте, нужна ваша помощь, установили хтмл затычку на сайте, но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru