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

Сперва следует применить все наработки из этого поста, затем будем творить магию 😮

Для начала отключим у Геткурсовских инпутов их выделение при фокусе (делается это на основе псевдокласса :focus-visible) и допишем в имеющийся CSS такое правило:

.field-content input:focus-visible {
border: none;
outline: none;
}

И теперь мы можем во всей красе использовать ещё один мало известный псевдокласс :focus-within, который позволяет стилизовать элемент, если внутри него произошел фокус или же сам элемент был взят в фокус. Звучит сложно, да, но на деле отталкиваясь от этого мы можем присвоить стили всему, что лежит внутри этого родительского элемента, например нашему псевдоэлементу :after, а так же стилизовать при этом input.

Добавляем вот такой CSS:

.field-content:focus-within input {
border: 1px solid red;
box-shadow: 0 0 5px red;
}

.field-content:focus-within::after {
color: red;
}

И получаем красивый, а так же стильный эффект на наших полях для ввода! 😉

#лёгкая_кастомизация #полезная_фишка

Предыдущая лёгкая кастомизация с полями формы вам определённо понравилась, поэтому я продолжу эту рубрику на канале ☺️

В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:

.lt-tsr-content .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.lt-tsr-content .image {
    transition: 0.5s;
}

.lt-tsr-content:hover .image {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

Благодаря этому мы получим вполне крутой эффект, который превосходно смотрится даже на стандартном блоке без всякой дополнительной кастомизации, который уже не стыдно показать 😉

P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на image-wrapper появятся флексы, а с image-card уберутся ненужные абсолютные позиционирования с паддингом в размере 75%, что меня всегда сильно смущал. То есть flex ставится боксу с картинкой при отключении "Гибкой вёрстки". Л — логика 😆

#лёгкая_кастомизация #полезная_фишка

Без JS в современной web-разработке никуда 🙂

Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.

Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс text-block, а в кнопке поставил действие "Вызов JavaScript", которым, я уверен, мало кто пользуется.

В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод .slideToggle(), который помогает плавно открывать и закрывать блок:

$('.text-block').slideToggle();

А чтобы наш текстовый блок изначально не показывался на странице, зайдем в Стили блока и в "Подробных настройках" вставим следующий CSS:

.text-block {
display: none;
}

Благодаря таким простым действиям мы получили плавную "раскрывашку" текста по клику на кнопку и достаточно быстро нестандартно и интересно кастомизировали страницу. А если добавить нужные по вашему дизайну стили, будет ещё круче 😎

#лёгкая_кастомизация #полезная_фишка

Сегодня в рамках лёгкой кастомизации поделюсь с вами фишкой, которая украсит ваш блок и сделает более заметным и важным для восприятия на странице 🤔

На скриншоте я сделал на стандартном блоке в качестве примера, и опишу процесс, как нужно подходить к такому внедрению:

1) Я взял стандартный блок под названием "Текст в блоке";
2) Через панель разработчика выяснил, что родительский класс "серого" контейнера это block-box. Поэтому именно от него я буду делать псевдоэлементом этот треугольник в правой части. Чтобы треугольник правильно встал в правую часть, самому block-box надо прописать position: relative; в настройках стилей блока, вот так:

.block-box {
position: relative;
}

3) Поставил наш псевдоэлемент в правильное положение. Засчёт относительного позиционирования теперь правильно будет работать абсолютное положение у псевдоэлемента и, соответственно, прибиваем вправо вверх, то есть top: 0 и right: 0. Интересный момент, что треугольник полностью сделан на свойстве border, и манипулируя прозрачностью сторон бордеров можно добиться желаемого эффекта. Ниже вторым правилом дописываем так:

.block-box:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 25px solid red;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
}

Если вам нужно применить подобную фишку к своим блокам, найдите в инспекторе тот блок, который визуально максимально охватывает тот контейнер, который вам нужен, остановитесь на нём, кликните и посмотрите, какой блок покажет в инспекторе. От такого класса и отталкивайтесь, написав его вместо моего block-box 😉

#лёгкая_кастомизация

Какой же лендинг без кнопок?

На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо" 🤨

Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить div или span, а может и дополнительную большую вёрстку.

В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например: <i class="fa fa-envelope-open" aria-hidden="true"></i>

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

P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке 😎

.btn {
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 20px;
    transition: 0.3s;
}

.btn:hover {
    font-size: 1.2em;
}

P.P.S. Вставлять в "Стили" блока в "Подробные настройки"

#лайфхак #лёгкая_кастомизация

Анимированные элементы всегда привлекают внимание

В этот раз в качестве лёгкой кастомизации продемонстрирую пример того, как можно сделать мигающую надпись возле элемента. В своём примере я использовал на тренингах, но вы можете использовать подобную анимацию где угодно, даже возле предложений в форме (конечно же, потребуется найти нужный класс и следовать инструкции) 😎

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

1) Ставим этому контейнеру position: relative. В моём случае это:

.stream-table tr td {
position: relative
}

2) Следующим правилом к классу этого элемента добавляем :before, и стилизуем:

.stream-table tr td:before {
content: "\261A \0a Хит!";
font-size: 16px;
position: absolute;
right: -55px;
color: goldenrod;
animation: 1s blink infinite;
}

3) Ставим анимацию в отдельный CSS блок. Если вы делаете это в тренингах, как у меня, то анимацию ставите в самый верх, там где пишется общий CSS:

@keyframes blink {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

У меня так же стоит на .stream-table tr свойство display: flex; для того, чтобы контейнеры внутри tr стали занимать столько пространства, сколько внутри контента, чтобы не было распирания до краёв блока. Так что имейте в виду, если будете ставить на тренинги.

#лёгкая_кастомизация