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

Leave a Comment / Css / By /

Сделаем неоновый, 3d, прозрачный и выпуклый текст

Сделаем неоновый, 3d, прозрачный и выпуклый текст

10 Октябрь 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

Четыре разных вида оформления текста.

Возможно пригодится для стилизации landing page.

Содержание статьи

  • 1 1). Первый это неоновый текст.
    • 1.1 Добавим css к каркасу для неонового текста.
  • 2 2). Тест становится 3d при наведении.
  • 3 3). Прозрачный текст, для заголовка h2.
  • 4 4). Выпуклый текст, для landing.

1). Первый это неоновый текст.

Сделаем каркас из секции с идентификатором futur4.

Внутри будет заголовок первого уровня h2.

Код в index.html.

<section> <div> <div> <h2 data-text=»Неоновый текст»>Неоновый текст</h2> </div> </div> </section>

1

2

3

4

5

6

7

<section>

<div>

<div>

<h2 data-text=»Неоновый текст»>Неоновый текст</h2>

</div>

</div>

</section>

Добавим css к каркасу для неонового текста.

Зададим задний фон картинкой background-image: url (), которая не повторяется и background-size: cover.

Второй стиль добавим h2, позиция будет абсолютной.

Цвет белый и розовая тень text-shadow: 0 0 20px #ff005b.

Укажем z-index: 0 слой выше других.

Добавим элемент &:after.

Зададим атрибут content: attr (data-text) ниже не слой и с размытием filter: blur (20px).

Втором элементом &:before добавим большую область света с размерами height: 100% и width: 100%, цвет такой же, но есть непрозрачность opacity: .5 и размытие filter: blur (50px).

Код в main.sass.

#futur4 background-image: url(«../img/2.jpg») background-size: cover background-repeat: no-repeat height: 25vh h2 position: absolute font-size: 5em margin-top: 15px margin-left: 50px color: #FFF text-shadow: 0 0 20px #ff005b z-index: 0 &:after content: attr(data-text) position: absolute top: 0 left: 0 color: #ff005b z-index: -1 filter: blur(20px) &:before content: » position: absolute top: 0 left: 0 height: 100% width: 100% background-color: #fe6a78 z-index: -2 opacity: .

5 filter: blur(50px)

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

#futur4

background-image: url(«../img/2.jpg»)

background-size: cover

background-repeat: no-repeat

height: 25vh

h2

position: absolute

font-size: 5em

margin-top: 15px

margin-left: 50px

color: #FFF

text-shadow: 0 0 20px #ff005b

z-index: 0

&:after

content: attr(data-text)

position: absolute

top: 0

left: 0

color: #ff005b

z-index: -1

filter: blur(20px)

&:before

content: »

position: absolute

top: 0

left: 0

height: 100%

width: 100%

background-color: #fe6a78

z-index: -2

opacity: . 5

filter: blur(50px)

Текст, который получился в браузере.

2). Тест становится 3d при наведении.

Такой текст можно использовать в меню.

Как сделать 3d эффект переворота изображения с тектом.

Код в index.html.

<section> <div> <div> <h3>3D текст для меню</h3> </div> </div> </section>

1

2

3

4

5

6

7

<section>

<div>

<div>

<h3>3D текст для меню</h3>

</div>

</div>

</section>

Код в main.sass.

#futur3 background-color: #e59ad5 height: 25vh h3 position: absolute font-size: 5em margin-top: 10px margin-left: 50px color: #fff font-family: $round-font text-transform: uppercase transition: .

5s &:hover text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc, 0 1px 0 #ccc, 0 5px 5px rgba(0,0,0,.5)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#futur3

background-color: #e59ad5

height: 25vh

h3

position: absolute

font-size: 5em

margin-top: 10px

margin-left: 50px

color: #fff

font-family: $round-font

text-transform: uppercase

transition: .5s

&:hover

text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,

0 3px 0 #ccc,

0 4px 0 #ccc,

0 1px 0 #ccc,

0 5px 5px rgba(0,0,0,.5)

3).

Прозрачный текст, для заголовка h2.

Текст красиво смотрится с наложением текстур.

Код в index.html.

<section> <div> <div> <div> <h2>Прозрачный h2</h2> </div> </div> </div> </section>

1

2

3

4

5

6

7

8

9

<section>

<div>

<div>

<div>

<h2>Прозрачный h2</h2>

</div>

</div>

</div>

</section>

Код в main.sass.

#futur2 height: 50vh background-image: url(«../img/i.jpg») background-size: cover background-repeat: no-repeat h2 position: absolute padding: 220px 100px font-family: $round-font font-size: 5em color: #fff text-transform: uppercase text-shadow: 0 5px 10px rgba(0,0,0,1) mix-blend-mode: overlay

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#futur2

height: 50vh

background-image: url(«. ./img/i.jpg»)

background-size: cover

background-repeat: no-repeat

h2

position: absolute

padding: 220px 100px

font-family: $round-font

font-size: 5em

color: #fff

text-transform: uppercase

text-shadow: 0 5px 10px rgba(0,0,0,1)

mix-blend-mode: overlay

4). Выпуклый текст, для landing.

Выпуклость текста добивается путем наложения теней.

Код в index.html.

<section> <div> <div> <div> <div>Шрифт FuturaRound</div> <div>Эффект выпуклости</div> </div> </div> </div> </section>

1

2

3

4

5

6

7

8

9

10

<section>

<div>

<div>

<div>

<div>Шрифт FuturaRound</div>

<div>Эффект выпуклости</div>

</div>

</div>

</div>

</section>

Код в main. sass.

#futur position: absolute display: block width: 100% height: 25vh background-color: #9702A7 .wrap position: absolute margin: 30px .text position: relative display: block font-size: 5em font-family: $round-font color: #9702A7 line-height: 1 text-transform: uppercase text-shadow: -1px 1px 1px rgba(0,0,0,.4), 1px -1px 0 rgba(255,255,255,1)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#futur

position: absolute

display: block

width: 100%

height: 25vh

background-color: #9702A7

.wrap

position: absolute

margin: 30px

.text

position: relative

display: block

font-size: 5em

font-family: $round-font

color: #9702A7

line-height: 1

text-transform: uppercase

text-shadow: -1px 1px 1px rgba(0,0,0,. 4), 1px -1px 0 rgba(255,255,255,1)

Как сделать прозрачный фон в html

Полупрозрачный фон

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

Свойство opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя opacity: 1 , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .

Табл. 1. Вид блока в зависимости от значения opacity
0.10.40.81

В примере 1 показано создание полупрозрачного блока с использованием opacity .

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Полупрозрачный фон

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

Строчка «» подключает файл стилей CSS.

Вот он (он называется style.css):

В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.

Вот так всё просто. Пробуйте, у вас обязательно всё получится!

* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.

Способы создания прозрачных фонов

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

  • Свойство opacity.
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.
CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

В результате мы получили полупрозрачный блок:

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

  • с абсолютным позиционированием (position: absolute)
  • с фиксированным линейным размером (height или width).

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

    Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.
Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.
Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».
Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

Как сделать текст прозрачным (HTML/CSS)

спросил

Изменено 1 год, 3 месяца назад

Просмотрено 689 раз

Я пытался сделать свой текст прозрачным, чтобы он стал того же цвета, что и мой фон, меняющий цвет. Ниже приведен код, с которым я работаю; ваша помощь будет принята с благодарностью.

 <тело>
<ул>
 
  • Фальшивый текст
    • 

<стиль>
тело{
  анимация: 10000 мс плавное изменение цвета; отступ: 5px 5%;
}
@keyframes изменение цвета {
  0% {
    цвет фона:#0047ff;
  }
  50% {
    цвет фона:#6f0ce8;
  }
  100% {
    цвет фона:#0047ff;
  }
}
ул {
  тип стиля списка: нет;
}
#навигационная панель{
  вес шрифта: жирнее;
  размер шрифта: 33px;
  цвет фона: черный;
  белый цвет;
  радиус границы: 0,9бэр;
  поле: 0,9 бэр;
  переход: 0,3 с;
  украшение текста: нет
}
    • HTML
    • CSS

    4

    Один из приемов — вырезать фон элемента с помощью маскирования текста.

    В этом случае мы даем элементам a внутри каждого li тот же фон (т. е. анимацию), что и для тела.

    Сделайте цвет элемента прозрачным, и он замаскирует его фон, создав впечатление, что фон такой же, как и тело.

     тело {
  анимация: 10000 мс плавное изменение цвета;
  отступ: 5px 5%;
}
@keyframes изменение цвета {
  0% {
    цвет фона: #0047ff;
  }
  50% {
    цвет фона: #6f0ce8;
  }
  100% {
    цвет фона: #0047ff;
  }
}
ул {
  тип стиля списка: нет;
}
ли а {
  -webkit-background-clip: текст;
  фоновый клип: текст;
  цвет: прозрачный;
  анимация: 10000 мс плавное изменение цвета;
  отступ: 5px 5%;
}
#навигационная панель {
  вес шрифта: жирнее;
  размер шрифта: 33px;
  цвет фона: черный;
  белый цвет;
  радиус границы: 0,9бэр;
  поле: 0,9 бэр;
  переход: 0,3 с;
  текстовое оформление: нет;
} 
     <тело>
  <ул>
    
  • Фальшивый текст
    •

    Примечание: чтобы получить точную точность, нам нужно немного изменить положение фона — в приведенном выше случае иллюзия работает, потому что панель навигации находится в верхней части тела, а линейный градиент — нет. изменить многое, так что это более или менее в нужном месте.

    0

     тело {
  цвет фона: #0047ff;
}
ул {
  тип стиля списка: нет;
}
#навигационная панель {
  вес шрифта: жирнее;
  размер шрифта: 33px;
  цвет фона: черный;
  белый цвет;
  радиус границы: 0,9 бэр;
  поле: 0,9 бэр;
  переход: 0,3 с;
  текстовое оформление: нет
}
а: наведите {
  непрозрачность: 0
} 
     <ул>
  
  •  html" id=navbar>Фальшивый текст
    •

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но никогда не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Непрозрачность текста — Tailwind CSS

    Домашняя страница Tailwind CSS Версия Tailwind CSS v3v2. 2.16v1.9.6v0.7.4Tailwind CSS на GitHub

    Утилиты для управления непрозрачностью цвета текста элемента.

    Ссылка на класс по умолчанию

    Использование

    Управление непрозрачностью цвета текста элемента с помощью утилит text-opacity-{количество} .

    Быстрая коричневая лиса перепрыгивает через ленивую собаку.

    Быстрая коричневая лиса перепрыгивает через ленивую собаку.

    Быстрая коричневая лиса перепрыгивает через ленивую собаку.

    Быстрая коричневая лиса перепрыгивает через ленивую собаку.

    Быстрая коричневая лиса перепрыгивает через ленивую собаку.

     
    Быстрая коричневая лиса...
    

    Быстрая коричневая лиса...
    

    Быстрая коричневая лиса...
    

    Быстрая коричневая лиса...
    

    The quick brown fox...

    Обратите внимание, что поскольку эти утилиты реализованы с использованием настраиваемых свойств CSS, для их работы на том же элементе должна присутствовать утилита .text-{color} .

    Не пытайтесь использовать утилиты прозрачности текста для унаследованного цвета текста 

     
    
  <дел>...

    Не забудьте явно добавить утилиту цвета текста к тому же элементу 

     
    
  <дел>...

    Responsive

    Чтобы контролировать непрозрачность цвета текста элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите непрозрачности цвета текста. Например, используйте md:text-opacity-50 для применения утилиты text-opacity-50 только на экранах среднего размера и выше.

     <дел>

    Дополнительные сведения о функциях адаптивного дизайна Tailwind см. в документации по адаптивному дизайну.

    Настройка

    Чтобы одновременно настроить значения непрозрачности для всех связанных с непрозрачностью утилит, используйте раздел opacity конфигурации темы tailwind. config.js :

     // tailwind.config.js
  модуль.экспорт = {
    тема: {
      продлевать: {
        непрозрачность: {
+ «10»: «0,1»,
+ «20»: «0,2»,
+ '95': '0,95',
        }
      }
    }
  }

    Если вы хотите настроить только утилиты прозрачности текста, используйте раздел textOpacity :

     // tailwind.config.js
  модуль.экспорт = {
    тема: {
      продлевать: {
        непрозрачность текста: {
+ «10»: «0,1»,
+ «20»: «0,2»,
+ '95': '0,95',
        }
      }
    }
  }

    Узнайте больше о настройке темы по умолчанию в документации по настройке темы.

    Варианты

    По умолчанию для утилит прозрачности текста генерируются только адаптивные, темный режим (если включен) , групповое наведение, фокус внутри, наведение и фокус.

    Вы можете контролировать, какие варианты генерируются для утилит прозрачности текста, изменив свойство textOpacity в разделе вариантов файла tailwind.