Октябрь 2017
Автор: Рубрика: Верстка Комментариев нет

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

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

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

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

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

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

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

Код в index.html.

Добавим 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.

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

неоновый текст.

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

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

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

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

Код в index.html.

Код в main.sass.

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

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

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

Код в index.html.

Код в main.sass.

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

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

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

Код в index.html.

Код в main.sass.

Комментариев нет

Комментарии:

Комментарии запрещены