Abr@X@bra.ru
Css эффект - разорванный текст
Css эффект - разорванный текст

Css эффект - разорванный текст

25.10.2017
81
В данном посте, хочу поделиться, как можно сделать очень интересный эффект - разорванного текста с помощью CSS.

Готовый результат

Разметка HTML

Первым делом, настроим HTML разметку. В качестве примера воспользуемся тегом H1 и добавим ему  атрибут data. Это настраиваемый атрибут, который позволит совершать обмен информацией между HTML и DOM. В нашем случае это также позволит нам взаимодействовать с ним через CSS.

В данном случае мы хотим, чтобы текст в нашем атрибуте data был таким же, как текст в нашем h1. Использование атрибута data вместо дублирования нашей разметки приводит к созданию более чистого html.

<h1 data-heading="AbraXabra">AbraXabra</h1>

CSS

На тег body поставил черный цвет, с помощью FlexBox выровнял контент по центру:

body
  background: #000
  font-size: 16px
  line-height: 1.6
  width: 100vw
  height: 100vh
  display: flex
  align-items: center
  justify-content: center

Добавим стили для тега H1:

h1
  font-size: 180px
  position: relative
  color: yellow

Добавим к тегу H1 два псевдо-класса с необходимыми параметрами:

 &:after,
 &:before
    content: attr(data-heading)
    position: absolute
    left: 0
    overflow: hidden

Далее начинается самое интересное. Задаем after следующие стили:

&:after	
    transform: translate(-10px)
    transform: rotate(0.1deg)
    height: 50%
    color: yellow

Также необходимо отдельно стилизовать before:

&:before
	height: 55%
	color: #000
	text-shadow: 3px -2px 5px #000, -3px 3px 4px #000

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

Вот, результат:

Анимация

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

Код анимации:

@keyframes abra
  0%
      transform: translateX(0)
  50%
      transform: translate(-20px, 2%)

И вызовем ее в after:

&:after	
        transform: translate(-10px)
	transform: rotate(0.1deg)
	height: 50%
	color: yellow
	animation: abra 5s infinite ease-out

Вот полный код - HTML:

<div class="container">
    <h1 data-heading="AbraXabra">AbraXabra</h1>
</div>

Вот полный код - CSS (SASS)

body
	font-family: 'Roboto Regular', sans-serif
	background: #000
	font-size: 16px
	line-height: 1.6
	width: 100vw
	height: 100vh
	display: flex
	align-items: center
	justify-content: center

h1
	font-size: 180px
	position: relative
	color: yellow
	&:after,
	&:before
		content: attr(data-heading)
		position: absolute
		left: 0
		overflow: hidden
	&:after	
		transform: translate(-10px)
		transform: rotate(0.1deg)
		height: 50%
		color: yellow
		animation: abra 5s infinite ease-out
	&:before
		height: 55%
		color: #000
		text-shadow: 3px -2px 5px #000, -3px 3px 4px #000

@keyframes abra 
	0% 
			transform: translateX(0)
	50% 
			transform: translate(-20px, 2%)

Готовый результат можно посмотреть вот ТУТ.




CSS
Читайте также:
CSS font-display: будущее рендеринга шрифтов

CSS font-display: будущее рендеринга шрифтов

Одним из недостатков использования веб-шрифтов является то, что если шрифт не доступен на устройстве пользователя, его н...
Читать
Canvas – HTML5. Подробное руководство

Canvas – HTML5. Подробное руководство

Canvas с его обманчиво простым API может революционно преобразовать создание веб-приложений для всех устройств, а не тол...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать