<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

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

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Эффект многослойного текста

Эффект многослойного текста

Для создания эффекта многослойного текста, нам потребуется атрибут data-text, два псевдоэлемента, прозрачный цвет и свойство text-stroke.


HTML разметка


Создадим обычное меню и присвоим каждому тегу a свое значение через атрибут data-text.

<ul>
    <li><a href="#" data-text="Home">Home</a></li>
    <li><a href="#" data-text="About">About</a></li>
    <li><a href="#" data-text="Portfolio">Portfolio</a></li>
    <li><a href="#" data-text="Team">Team</a></li>
    <li><a href="#" data-text="Contact">Contact</a></li>
</ul>


Эффект многослойного текста.


Создание пустотелого текста


Для эффекта нам нужен прозрачный текст с внешней обводкой. Добиться это можно, если указать цвет текста transparent и задать свойство text-stroke.

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    font-family: 'Poppins', sans-serif;/*семейство шрифтов*/
}
body{
    display: flex;/*сетка флексбокс*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на всю высоту экрана*/
    background: #000;/*цвет фона*/
    overflow: hidden;/*спрятать переполненность*/
}
ul li{
    list-style: none;/*убрать черные маркеры*/
}
ul li a{
    position: relative;/*относительное позиционирование*/
    display: block;/*отображать как блочный элемент*/
    color: transparent;/*прозрачный цвет ссылок*/
    -webkit-text-stroke: 1px #fff;/*обводка текста белым цветом*/
    font-size: 6.5em;/*размер шрифта*/
    font-weight: 900;/*жирность шрифта*/
    text-decoration: none;/*ссылки без подчеркивания*/
    line-height: 1.2em;/*высота линии*/
}


Эффект многослойного текста.


Заполнение текста цветом при наведении


При наведении, пустой внутри текст заполнится белым цветом. Это будет нижний слой.

ul li a:hover{
    color: #fff;/*цвет текста*/
    -webkit-text-stroke: 1px #000;/*обводка текста черным цветом*/
    transition: 0.5s;/*плавный переход*/
}


Эффект многослойного текста.


Наложение сверху двух слоев


С помощью псевдоэлементов before и after создадим еще два слоя с тем же самым текстом. Функция attr() получит значения из заданных атрибутов data-text и вставит их в стили. На скриншоте видно, что текст стал ярче за счет добавленных слоев.

ul li a:before,
ul li a:after {
    content: attr(data-text);/*получение значений атрибутов*/
    position: absolute;/*абсолютное позиционирование*/
    top: 0;
    left: 0;
    transition: 0.5s;


Эффект многослойного текста.


Эффект многослойности при наведении


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

ul li a:hover:before {
    color: #f00;/*слой с красным текстом*/
    z-index: 1;/*очередность наложения слоя*/
    -webkit-text-stroke: 1px #000;
    transform: translate(10px,-10px);/*смещение текста*/
}
ul li a:hover:after {
    color: #0ff;/*слой с зеленым текстом*/
    z-index: 2;
    -webkit-text-stroke: 1px #000;
    transform: translate(20px,-20px);
}


Эффект многослойного текста.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.