А что, так можно было? 😳
В этом посте я хочу поделиться с вами абсолютно неочевидной возможностью CSS-свойства
Многие специалисты, которые изучают CSS, рано или поздно сталкиваются с необходимостью сделать на блоке повторяющиеся декоративные элементы. Первое, что приходит на ум — сделать их с помощью
Но вот проблема: псевдоэлемента всего два. А что, если повторяющихся декоративных элементов надо сделать, к примеру три или четыре?
Тут-то нам и понадобится хитрость использования свойства
На моём примере я поставил блок отзывов. И поставил на отзыв класс
Таким образом я делаю 2 декоративных элемента за единственное использование псевдоэлемента 😉
#лайфхак
В этом посте я хочу поделиться с вами абсолютно неочевидной возможностью CSS-свойства
box-shadow
.Многие специалисты, которые изучают CSS, рано или поздно сталкиваются с необходимостью сделать на блоке повторяющиеся декоративные элементы. Первое, что приходит на ум — сделать их с помощью
:before
и :after
. Но вот проблема: псевдоэлемента всего два. А что, если повторяющихся декоративных элементов надо сделать, к примеру три или четыре?
Тут-то нам и понадобится хитрость использования свойства
box-shadow
. Дело в том, что этим свойством мы отбрасываем тень нашего объекта, но при отключенных параметрах размытия мы копируем сам псевдоэлемент! И можем спокойно двигать его по координатам относительно псевдоэлемента.На моём примере я поставил блок отзывов. И поставил на отзыв класс
qoute-container
. От него я делаю декоративный элемент, который вешаю на :before
, и по задумке мне нужен ещё один рядом с ним. Я просто пишу свойство box-shadow
и по первой координате X двигаю его на расстояние нужное мне от моего псевдоэлемента (смотрите скриншоты).Таким образом я делаю 2 декоративных элемента за единственное использование псевдоэлемента 😉
#лайфхак
Три в ряд 🕹
Поделюсь с вами одним лайфхаком, который упрощает жизнь при популярном запросе о том, что нужно расположить 3 видео в ряд и чтобы они были адаптивны.
Многие начнут вспоминать, что можно JS кодом вставлять блоки куда угодно... Да, можно, но это безумно неудобно и сложно. Есть способ проще!
Мы просто возьмём и обманем блочную систему Геткурса! Просто поставим эти блоки с видео в один ряд. При этом мы не трогаем их структуру, вследствие чего они не будут терять свою адаптивность ;)
Я поставлю 3 блока с видео один за другим, растяну каждому их ширину на все 12 колонок, и добавлю каждому блоку класс
После этого я в CSS-блоке вверху страницы пропишу единственное правило для этого класса:
Соответственно для 4 видео, то это 25% ширины, но всегда призываю делать погрешность в 1% от непредвиденных ситуаций с адаптацией 😁
#лайфхак
Поделюсь с вами одним лайфхаком, который упрощает жизнь при популярном запросе о том, что нужно расположить 3 видео в ряд и чтобы они были адаптивны.
Многие начнут вспоминать, что можно JS кодом вставлять блоки куда угодно... Да, можно, но это безумно неудобно и сложно. Есть способ проще!
Мы просто возьмём и обманем блочную систему Геткурса! Просто поставим эти блоки с видео в один ряд. При этом мы не трогаем их структуру, вследствие чего они не будут терять свою адаптивность ;)
Я поставлю 3 блока с видео один за другим, растяну каждому их ширину на все 12 колонок, и добавлю каждому блоку класс
video-block
(смотрите скриншоты)После этого я в CSS-блоке вверху страницы пропишу единственное правило для этого класса:
.video-block {Таким образом, мои блоки с видео будут делить между собой по 33% расстояния в одной строке.
flex: 1 1 33%;
}
Соответственно для 4 видео, то это 25% ширины, но всегда призываю делать погрешность в 1% от непредвиденных ситуаций с адаптацией 😁
#лайфхак
Показать всё, что скрыто 🙄
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
1. Сам класс
2. Контейнер контента
#лайфхак
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
overflow
. И его нужно перевести в состояние visible
сразу в нескольких местах. И сейчас я расскажу в каких:1. Сам класс
.image-wrapper
, в котором находится наша картинка с классом .image
, мешает нам добиться нужного результата. Ставим в классе .image-wrapper
свойство overflow: visible;
В итоге мы отключим первое урезание (скриншот №3).2. Контейнер контента
.lt-tsr-content
тоже урезает нам выпадение контента за пределы себя, поэтому тут тоже прописываем overflow: visible;
И теперь выпадению картинки за пределы блока ничто не будет мешать ;)#лайфхак
Двигаем недвижимое 😜
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
Всего в контенте этой карточки несколько классов:
На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
#лайфхак
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
.lt-tsr-content {
display: flex;
flex-direction: column;
}
2) Теперь мы можем выстраивать порядок элементов как нам нужно с помощью свойства order
. Чем меньше значение свойства order
, тем главнее элемент. Проще всего это сравнить с последовательностью чисел: 1 — первый, 2 — второй, 3 — третий и т.д.Всего в контенте этой карточки несколько классов:
image-card
, subheader
, header
, description
и button
(если был выбран такой же блок, но с кнопкой).На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
.header {
order: 1;
}
.image-card {
order: 2;
}
.description {
order: 3;
}
То есть я просто выстроил элементы в таком порядке, как мне нужно. Сабхедер встал выше заголовка, потому что если не назначать order
, он будет считаться в приоритете по порядку.#лайфхак
Нажать, или не нажать? 🧐
Существует такая проблема, и "хотелка" многих, у кого на лендингах есть карточки с кнопками, чтобы кнопки были доступны для нажатия лишь определенному сегменту и то не на всех карточках.
Кажется, что это очередной взрыв мозга с кучей кода 😵💫
Но на самом деле всё не совсем так, и такую схему можно легко провернуть, обойдясь несколькими строчками кода, и задействовав немного логики показа блоков 😉
Разберём пример:
1) Для начала поставим стандартные блоки с карточками и кнопками (см. скриншот №1). Я присвою всему блоку класс
2) Для каждой карточки с кнопкой, соответственно, нам нужно поставить столько же JS-блоков, которые будут блочить нажатие кнопки каждый для своей карточки (см. скриншот №2)
3) В каждом таком JS-блоке пишем код, который блочит кнопку в определённой карточке. В моём примере код в блоках выглядит так:
В первом JS-блоке:
Вот и весь секрет лайфхака 😁
#лайфхак #полезная_фишка
Существует такая проблема, и "хотелка" многих, у кого на лендингах есть карточки с кнопками, чтобы кнопки были доступны для нажатия лишь определенному сегменту и то не на всех карточках.
Кажется, что это очередной взрыв мозга с кучей кода 😵💫
Но на самом деле всё не совсем так, и такую схему можно легко провернуть, обойдясь несколькими строчками кода, и задействовав немного логики показа блоков 😉
Разберём пример:
1) Для начала поставим стандартные блоки с карточками и кнопками (см. скриншот №1). Я присвою всему блоку класс
my-cards
в Стилях блока.2) Для каждой карточки с кнопкой, соответственно, нам нужно поставить столько же JS-блоков, которые будут блочить нажатие кнопки каждый для своей карточки (см. скриншот №2)
3) В каждом таком JS-блоке пишем код, который блочит кнопку в определённой карточке. В моём примере код в блоках выглядит так:
В первом JS-блоке:
$(function() {Во втором JS-блоке:
$('.my-cards .lt-tsr-block:nth-child(1) button').attr('disabled', true);
})
$(function() {В третьем JS-блоке:
$('.my-cards .lt-tsr-block:nth-child(2) button').attr('disabled', true);
})
$(function() {В итоге мы получаем то, что на всех трёх карточках мы заблочили возможность нажать кнопку для всех пользователей. Ну а теперь самое время внести чуток логики в наши блоки. А именно: мы будем скрывать нужный JS-блок от того сегмента, которому и должно быть доступно нажатие на эту кнопку.
$('.my-cards .lt-tsr-block:nth-child(3) button').attr('disabled', true);
})
Вот и весь секрет лайфхака 😁
#лайфхак #полезная_фишка
СЕО в вебе. Как много смысла в этих буквах 👈
Почему-то многие считают, что Геткурс в плане СЕО не гибкая платформа, и ищут альтернативы. У меня к таким людям всегда есть вопрос: а действительно ли вы знаете что такое СЕО именно в вебе? 😁
Начнём с того, что SEO (англ. Search Engine Optimization) – это комплекс мер по улучшению сайта для его ранжирования в поисковых системах. НЕ АНАЛИТИКА! Аналитика лишь позволяет выявить те самые необходимые меры, которые нужно сделать для оптимизации поисковой выдачи роботами.
Управлять этой оптимизацией довольно просто, гибко, и всегда на ваше усмотрение. По-мимо того, что Геткурс предлагает заполнить OG информацию о странице, есть ещё и раздел "Теги в разделе HEAD", где с помощью тегов
К примеру, в моём случае (см. скриншот), у меня стоит вспомогательный мета-тег, который отвечает за ключевые слова, чтобы мою страницу быстрее нашли роботы поисковых систем. Таким образом я повышаю свои шансы найти свой проект и страницу в поисковике.
И таких
#лайфхак
Почему-то многие считают, что Геткурс в плане СЕО не гибкая платформа, и ищут альтернативы. У меня к таким людям всегда есть вопрос: а действительно ли вы знаете что такое СЕО именно в вебе? 😁
Начнём с того, что SEO (англ. Search Engine Optimization) – это комплекс мер по улучшению сайта для его ранжирования в поисковых системах. НЕ АНАЛИТИКА! Аналитика лишь позволяет выявить те самые необходимые меры, которые нужно сделать для оптимизации поисковой выдачи роботами.
Управлять этой оптимизацией довольно просто, гибко, и всегда на ваше усмотрение. По-мимо того, что Геткурс предлагает заполнить OG информацию о странице, есть ещё и раздел "Теги в разделе HEAD", где с помощью тегов
<meta>
можно настроить поисковую оптимизацию гибче некуда 🥳К примеру, в моём случае (см. скриншот), у меня стоит вспомогательный мета-тег, который отвечает за ключевые слова, чтобы мою страницу быстрее нашли роботы поисковых систем. Таким образом я повышаю свои шансы найти свой проект и страницу в поисковике.
И таких
<meta>
тегов со специальными значениями достаточно много, и настроить СЕО можно очень гибко и быстро, помимо основного функционала Геткурса 😉#лайфхак
Сезам, откройся 🧙♂️
Если вас вдруг по каким-то причинам не устраивает как ведёт себя поле ввода имейла, особенно для зарегистрированных пользователей, подставляя туда данные без возможности их редактирования, то ловите лайфхак, как можно это обойти 😉
Дело в том, что в поле имейла подставляется атрибут
Если вас вдруг по каким-то причинам не устраивает как ведёт себя поле ввода имейла, особенно для зарегистрированных пользователей, подставляя туда данные без возможности их редактирования, то ловите лайфхак, как можно это обойти 😉
Дело в том, что в поле имейла подставляется атрибут
readonly
с таким же значением readonly
, что не позволяет полю редактироваться пользователем. Но с помощью JS мы можем снять это ограничение, убрав этот атрибут. Под форму следует поместить JS-блок с таким содержимым:$(function() {
document.querySelector('.f-input[name="formParams[email]"]').removeAttribute("readonly");
})
Если у вас на странице несколько форм, и вам нужно применить такое действие лишь к конкретной, то лучше поставить класс блоку этой формы, и пользоваться обращением через него. К примеру:$(function() {
document.querySelector('.my-class .f-input[name="formParams[email]"]').removeAttribute("readonly");
})
#лайфхакВаша боковая панель в Профиле без багов 😎
Я полагаю, уже большинство из вас в онлайн-школах и проектах модифицировали боковую панель, будь то своими силами, или силами мини-курса по боковой панели в Магии Геткурса.
Если вы делали боковую панель используя наши уроки из Магии, то напомню, что существует один неприятный баг своей кастомной панели. Если мы заходим в Профиль, переключаемся на "Уведомления", а затем возвращаемся во вкладку "Общие", мы видим уже не нашу стилизованную панель, а стандартную панель Геткурса. Так происходит потому, что страница Профиля сделана по особому, и существенно отличается от других системных страниц.
Но я обошел этот баг одним очень хитрым способом, которым хочу с вами поделиться 😉
❗️Чтобы правильно им воспользоваться, сначала вы должны сделать подмену страницы Профиля, как показано в Магии Геткурса, а затем приступать к моему методу обхода.
Метод обхода:
Вам нужно войти в Настройки аккаунта -> Настройки, и в поле тегов для HEAD вставить следующий тег со скриптом внутри:
#полезная_фишка #лайфхак
Я полагаю, уже большинство из вас в онлайн-школах и проектах модифицировали боковую панель, будь то своими силами, или силами мини-курса по боковой панели в Магии Геткурса.
Если вы делали боковую панель используя наши уроки из Магии, то напомню, что существует один неприятный баг своей кастомной панели. Если мы заходим в Профиль, переключаемся на "Уведомления", а затем возвращаемся во вкладку "Общие", мы видим уже не нашу стилизованную панель, а стандартную панель Геткурса. Так происходит потому, что страница Профиля сделана по особому, и существенно отличается от других системных страниц.
Но я обошел этот баг одним очень хитрым способом, которым хочу с вами поделиться 😉
❗️Чтобы правильно им воспользоваться, сначала вы должны сделать подмену страницы Профиля, как показано в Магии Геткурса, а затем приступать к моему методу обхода.
Метод обхода:
Вам нужно войти в Настройки аккаунта -> Настройки, и в поле тегов для HEAD вставить следующий тег со скриптом внутри:
<script>Не забудьте подождать 10 минут, как рекомендует Геткурс после сохранения. И проблема с дефолтной боковой панелью в Профиле при переключении вкладок исчезнет 🥳
$(() => {
if(window.location.href.includes('/pl/notifications/settings/my')) {
let linkProfile = document.querySelector('.standard-page-menu li:nth-child(1) a');
linkProfile.setAttribute('href', '/profile');
}
})
</script>
#полезная_фишка #лайфхак
Свои красивые границы блоков 🥳
С каждым разом обычные границы блоков перестают удивлять заказчиков своим видом, и всегда хочется большего. Ровно так же и для собственных дизайнов. Освежить дизайн вам точно поможет генератор границ блоков на SVG — Get Waves
Пользоваться им достаточно просто:
1) Выбираете настройки
2) Генерируете волнообразные/прямоугольные границы блоков кубиком справа
3) Получаете SVG разметку нажав на облачко со стрелкой 😉
В самом Геткурсе вставляете в отдельный HTML-блок там, где вы хотите видеть эту границу. Удаляете внутри HTML всё, что вам предлагает Геткурс, и просто вставляете скопированный SVG внутрь. Вы так же можете задать нужный вам цвет под цвет вашего проекта найдя внутри тега
С таким маленьким и очень полезным инструментом можно делать абсолютно разнообразные и не скучные границы блоков 😎
#лайфхак
С каждым разом обычные границы блоков перестают удивлять заказчиков своим видом, и всегда хочется большего. Ровно так же и для собственных дизайнов. Освежить дизайн вам точно поможет генератор границ блоков на SVG — Get Waves
Пользоваться им достаточно просто:
1) Выбираете настройки
2) Генерируете волнообразные/прямоугольные границы блоков кубиком справа
3) Получаете SVG разметку нажав на облачко со стрелкой 😉
В самом Геткурсе вставляете в отдельный HTML-блок там, где вы хотите видеть эту границу. Удаляете внутри HTML всё, что вам предлагает Геткурс, и просто вставляете скопированный SVG внутрь. Вы так же можете задать нужный вам цвет под цвет вашего проекта найдя внутри тега
<path>
атрибут fill
и задав свой цвет каким-нибудь хеш-номером 😊С таким маленьким и очень полезным инструментом можно делать абсолютно разнообразные и не скучные границы блоков 😎
#лайфхак
Механики всплывающих блоков ✔️
Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата
Но не многие знают, что за это отвечает один из уже встроенных в Геткурс функций
Например, мы можем использовать эту функцию в тексте в любом месте, обернув её в тег ссылки
#лайфхак #полезная_фишка
Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата
b-27f1
(для примера).Но не многие знают, что за это отвечает один из уже встроенных в Геткурс функций
ltShowModalBlock()
. И с помощью этой функции мы сами можем манипулировать тем, из какого места нам нужно открыть тот, или иной всплывающий блок 😉Например, мы можем использовать эту функцию в тексте в любом месте, обернув её в тег ссылки
<a></a>
и использовав атрибут onclick
чтобы вызвать данную функцию. Внутри скобок пишется номер блока в кавычках, который мы хотим вызвать. Пример использования в любом месте в тексте:<a onclick="ltShowModalBlock('b-27f1')">Запишись здесь!</a>
А чтобы применить в вашем собственном JS-коде, вы можете просто поставить вызов функции ltShowModalBlock('b-27f1')
с номером вашего блока 👍#лайфхак #полезная_фишка