Четыре разных вида оформления текста.
Возможно пригодится для стилизации landing page.
Содержание статьи
1). Первый это неоновый текст.
Сделаем каркас из секции с идентификатором futur4.
Внутри будет заголовок первого уровня h1.
Код в index.html.
|
1 2 3 4 5 6 7 |
<section id="futur4"> <div class="container"> <div class="row"> <h1 class="neon" data-text="Неоновый текст">Неоновый текст</h1> </div> </div> </section> |
Добавим css к каркасу для неонового текста.
Зададим задний фон картинкой background-image: url (), которая не повторяется и background-size: cover.
Второй стиль добавим h1, позиция будет абсолютной.
Цвет белый и розовая тень 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.
|
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 h1 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.
|
1 2 3 4 5 6 7 |
<section id="futur3"> <div class="container"> <div class="row"> <h2>3D текст для меню</h2> </div> </div> </section> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#futur3 background-color: #e59ad5 height: 25vh h2 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). Прозрачный текст, для заголовка h1.
Текст красиво смотрится с наложением текстур.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 |
<section id="futur2"> <div class="container"> <div class="row"> <div class="item"> <h1>Прозрачный h1</h1> </div> </div> </div> </section> |
Код в main.sass.
|
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 h1 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.
|
1 2 3 4 5 6 7 8 9 10 |
<section id="futur"> <div class="container"> <div class="row"> <div class="wrap"> <div class="text">Шрифт FuturaRound</div> <div class="text">Эффект выпуклости</div> </div> </div> </div> </section> |
Код в main.sass.
|
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) |