Привет, друзья!
Вы хотели научиться понимать код? А ещё круче - писать его самому? Тогда лучшего повода, чем сейчас, вы не найдёте. Потому что в моём клубе Train IT стартовала Чёрная Пятница 😉
✅ Всегда мечтали не просто конструировать сайты из статичных блоков, а писать их самим?
✅ Добавлять крутые фишки, а, может, даже придумывать свои самостоятельно?
✅ Понимать весь код, с которым вы работаете?
✅ Быть уверенным в своих знаниях и иметь под рукой мощную опору в виде уроков клуба?
Тогда, лучшего повода, чем сейчас, вы не найдёте 😊
❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈
Для партнёров клуба эта распродажа ещё выгоднее 🤝
Ознакомиться с уроками по направлениям клуба можно здесь — https://train-it.ru/#current
В Train IT вы получите универсальные знания, которые можете применять везде и не зависеть от платформы. Приобретённые знания сделают вас поистине крутым специалистом.
Если вы хотите повысить свою ценность как крутого специалиста, то почему бы не начать делать это сейчас? 😉
Вы хотели научиться понимать код? А ещё круче - писать его самому? Тогда лучшего повода, чем сейчас, вы не найдёте. Потому что в моём клубе Train IT стартовала Чёрная Пятница 😉
✅ Всегда мечтали не просто конструировать сайты из статичных блоков, а писать их самим?
✅ Добавлять крутые фишки, а, может, даже придумывать свои самостоятельно?
✅ Понимать весь код, с которым вы работаете?
✅ Быть уверенным в своих знаниях и иметь под рукой мощную опору в виде уроков клуба?
Тогда, лучшего повода, чем сейчас, вы не найдёте 😊
❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈
Для партнёров клуба эта распродажа ещё выгоднее 🤝
Ознакомиться с уроками по направлениям клуба можно здесь — https://train-it.ru/#current
В Train IT вы получите универсальные знания, которые можете применять везде и не зависеть от платформы. Приобретённые знания сделают вас поистине крутым специалистом.
Если вы хотите повысить свою ценность как крутого специалиста, то почему бы не начать делать это сейчас? 😉
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Привет, друзья! Вы хотели научиться понимать код? А ещё круче - писать его самому? Тогда лучшего повода, чем сейчас, вы не найдёте. Потому что в моём клубе Train IT стартовала Чёрная Пятница 😉 ✅ Всегда мечтали не просто конструировать сайты из статичных…
Всем хорошего воскресенья, друзья 😉
Хочу напомнить, что до конца распродажи в моём клубе остались считанные часы.
В 23:59 сегодняшнего дня все заказы, которые были созданы и не оплачены в рамках распродажи, аннулируются и оплатить их по такой вкусной цене будет уже нельзя.
Знания, которые я даю в своём клубе — это универсальные инструменты, с помощью которых вы сможете покорить любые платформы. Не говоря уже о самом Геткурсе 😁
❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈
Поэтому торопитесь, потому что в полночь карета превратится в тыкву 😌
Хочу напомнить, что до конца распродажи в моём клубе остались считанные часы.
В 23:59 сегодняшнего дня все заказы, которые были созданы и не оплачены в рамках распродажи, аннулируются и оплатить их по такой вкусной цене будет уже нельзя.
Знания, которые я даю в своём клубе — это универсальные инструменты, с помощью которых вы сможете покорить любые платформы. Не говоря уже о самом Геткурсе 😁
❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈
Поэтому торопитесь, потому что в полночь карета превратится в тыкву 😌
train-it.ru
Train IT — клуб изучения востребованных направлений!
IT, Маркетинг, Дизайн — это далеко не все направления, которые мы предлагаем изучить. Короткие и практичные уроки помогут вам точечно изучить новые профессии и направления, а наши крутые кураторы подскажут и помогут вам на пути освоения новых знаний.
Витрина как в магазине 😎
Вы, конечно же, видели стеклянные красивые витрины в магазине, как красиво на них презентуется товар. Он завораживает взгляд и поселяет в сознании мысль купить его...
Что если я скажу вам, что подобный эффект "стеклянной витрины" мы можем сотворить на лендинге?
Мало кто знает, но существует специальное CSS правило
Пользоваться правилом довольно просто,
1. Направление отражения
2. Расстояние между элементом и началом его отражения
3. Маска, url() с путём к изображению или полупрозрачный градиент, который будет использоваться для отражения в качестве маски
Мой вариант на скриншоте имеет такие значения:
P.S.S. Применял к классу
#полезная_фишка
Вы, конечно же, видели стеклянные красивые витрины в магазине, как красиво на них презентуется товар. Он завораживает взгляд и поселяет в сознании мысль купить его...
Что если я скажу вам, что подобный эффект "стеклянной витрины" мы можем сотворить на лендинге?
Мало кто знает, но существует специальное CSS правило
box-reflect
, которое делает отражение элементов в заданных внутри правила значениях. Насколько красиво это выглядит даже на простых элементах, можно убедиться на скриншоте 😉Пользоваться правилом довольно просто,
box-reflect
принимает значения по порядку:1. Направление отражения
2. Расстояние между элементом и началом его отражения
3. Маска, url() с путём к изображению или полупрозрачный градиент, который будет использоваться для отражения в качестве маски
Мой вариант на скриншоте имеет такие значения:
box-reflect: below 15px linear-gradient(transparent, transparent, transparent, rgba(0,0,0,0.2));
P.S. Используйте префикс -webkit-
к свойству для совместимости с другими браузерами помимо Chrome.P.S.S. Применял к классу
.lt-tsr-content
в данном случае, с небольшой накруткой собственных стилей.#полезная_фишка
А что, так можно было? 😳
В этом посте я хочу поделиться с вами абсолютно неочевидной возможностью 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% от непредвиденных ситуаций с адаптацией 😁
#лайфхак
Друзья, всем привет 😉
У нас там происходит нечто...
А именно Чёрная Пятница!
Не простая, а совместная с партнёрскими проектами 👍
🔥 Школа Магии Геткурса
🔥 «Тонкая настройка» Оли Скороходовой
🔥 Мой клуб Train IT
🔥 КПД клуб Оли Скороходовой и Петра Петипака
🔥 PRO.Design School Веры Кулешовой
Общая распродажа тут
👉 https://gcwithme.ru/bf21 👈
Распродажа длится до 28 ноября, 23:59
Это ещё одна прекрасная возможность приобрести с большой скидкой доступ в клуб Train IT, где я учу понимать и писать CSS/HTML/JS, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉
У нас там происходит нечто...
А именно Чёрная Пятница!
Не простая, а совместная с партнёрскими проектами 👍
🔥 Школа Магии Геткурса
🔥 «Тонкая настройка» Оли Скороходовой
🔥 Мой клуб Train IT
🔥 КПД клуб Оли Скороходовой и Петра Петипака
🔥 PRO.Design School Веры Кулешовой
Общая распродажа тут
👉 https://gcwithme.ru/bf21 👈
Распродажа длится до 28 ноября, 23:59
Это ещё одна прекрасная возможность приобрести с большой скидкой доступ в клуб Train IT, где я учу понимать и писать CSS/HTML/JS, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉
Каморка Геткурсовода 💻 | Канал Максима Елисеева pinned «Друзья, всем привет 😉 У нас там происходит нечто... А именно Чёрная Пятница! Не простая, а совместная с партнёрскими проектами 👍 🔥 Школа Магии Геткурса 🔥 «Тонкая настройка» Оли Скороходовой 🔥 Мой клуб Train IT 🔥 КПД клуб Оли Скороходовой и Петра Петипака…»
Друзья, привет всем 😉
Хотел поделиться с вами двумя новостями:
Первая.
Сегодня последний день совместной распродажи. Закончится она сегодня (28 ноября) в 23:59, и ровно в 0:00 страницы распродажи закроются и нельзя будет оплатить созданные заказы.
Поэтому, кто хотел, но никак не мог решиться, у вас есть последняя возможность:
👉 https://gcwithme.ru/bf21 👈
Вторая.
Может быть для кого-то это всё ещё секрет, но мы проводим с 29 ноября очередную Неделю Магии 6 в Школее Магии Геткурса!
В этот раз мы сделали так, что у вас есть шанс побороться за призовой денежный фонд, который будет разделён между прошедшими Неделю Магии 6 участниками. Такое предложение доступно тем, кто выберет тариф "Экстрим".
Запись на Неделю Магии 6 👉 https://gcwithme.ru/magicweek6
P.S. По секрету, первый день Недели Магии 6 открываю Я 😁 И подготовил для вас очень крутой урок по вёрстке, чтобы вы смотрели и кайфовали от того, на сколько на самом деле круто верстать и видеть все изменения на странице 😊 А так же почерпнули для себя огромнейшие знания и фишки в вёрстке 👍
Хотел поделиться с вами двумя новостями:
Первая.
Сегодня последний день совместной распродажи. Закончится она сегодня (28 ноября) в 23:59, и ровно в 0:00 страницы распродажи закроются и нельзя будет оплатить созданные заказы.
Поэтому, кто хотел, но никак не мог решиться, у вас есть последняя возможность:
👉 https://gcwithme.ru/bf21 👈
Вторая.
Может быть для кого-то это всё ещё секрет, но мы проводим с 29 ноября очередную Неделю Магии 6 в Школее Магии Геткурса!
В этот раз мы сделали так, что у вас есть шанс побороться за призовой денежный фонд, который будет разделён между прошедшими Неделю Магии 6 участниками. Такое предложение доступно тем, кто выберет тариф "Экстрим".
Запись на Неделю Магии 6 👉 https://gcwithme.ru/magicweek6
P.S. По секрету, первый день Недели Магии 6 открываю Я 😁 И подготовил для вас очень крутой урок по вёрстке, чтобы вы смотрели и кайфовали от того, на сколько на самом деле круто верстать и видеть все изменения на странице 😊 А так же почерпнули для себя огромнейшие знания и фишки в вёрстке 👍
Привет, друзья 😉
Вчера (29 ноября 2021 года) был мой первый открывающий день в Неделю Магии 6. Хотелось бы собрать немного фидбеков о своём дне проведении урока. Он получился довольно длинным, на 45 минут. Но в него я вложил душу и дал вам максимально плотную и полезную информацию по прокачке ваших навыков в вёрстке. 😊
Всё буквально снималось одним дублем. Всего около 2х раз я останавливал видео, чтобы хотя бы дать отдохнуть своему голосу на 1 минуту 😁 Честно признаться, я очень боялся, что подобный формат не зайдет)
Полезно ли вам было окунуться в такую наглядную вёрстку с нуля? Много ли вы для себя узнали? Делитесь впечатлениями 😊
Вчера (29 ноября 2021 года) был мой первый открывающий день в Неделю Магии 6. Хотелось бы собрать немного фидбеков о своём дне проведении урока. Он получился довольно длинным, на 45 минут. Но в него я вложил душу и дал вам максимально плотную и полезную информацию по прокачке ваших навыков в вёрстке. 😊
Всё буквально снималось одним дублем. Всего около 2х раз я останавливал видео, чтобы хотя бы дать отдохнуть своему голосу на 1 минуту 😁 Честно признаться, я очень боялся, что подобный формат не зайдет)
Полезно ли вам было окунуться в такую наглядную вёрстку с нуля? Много ли вы для себя узнали? Делитесь впечатлениями 😊
Показать всё, что скрыто 🙄
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
1. Сам класс
2. Контейнер контента
#лайфхак
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
overflow
. И его нужно перевести в состояние visible
сразу в нескольких местах. И сейчас я расскажу в каких:1. Сам класс
.image-wrapper
, в котором находится наша картинка с классом .image
, мешает нам добиться нужного результата. Ставим в классе .image-wrapper
свойство overflow: visible;
В итоге мы отключим первое урезание (скриншот №3).2. Контейнер контента
.lt-tsr-content
тоже урезает нам выпадение контента за пределы себя, поэтому тут тоже прописываем overflow: visible;
И теперь выпадению картинки за пределы блока ничто не будет мешать ;)#лайфхак
Показ сторонних страниц на Геткурсе? Легко ✅
Многие знают: чтобы показать другую страницу в пределах аккаунта, нужно поставить блок из раздела "Вставка" => "Другая страница".
Но что делать, если, например, нам нужно показать какой-либо тест вне аккаунта, или какую-либо информацию совершенно с другого домена? 🧐
На помощь придёт HTML-блок с довольно простой разметкой внутри. На примере, у себя на проекте я вывел главную страницу Геткурса. Сделано это так, в HTML-блок нужно вставить такую конструкцию:
Данное решение будет полезно тем, кто делает какие-либо квизы или интерактивные материалы на сторонних сервисах, но не хотел бы уводить людей со своего проекта 😉
#полезная_фишка
Многие знают: чтобы показать другую страницу в пределах аккаунта, нужно поставить блок из раздела "Вставка" => "Другая страница".
Но что делать, если, например, нам нужно показать какой-либо тест вне аккаунта, или какую-либо информацию совершенно с другого домена? 🧐
На помощь придёт HTML-блок с довольно простой разметкой внутри. На примере, у себя на проекте я вывел главную страницу Геткурса. Сделано это так, в HTML-блок нужно вставить такую конструкцию:
<iframe style="height: 100vh; width: 100%;" src="https://getcourse.ru">
Текст в случае, если айфрейм не прогрузится.
</iframe>
В атрибут src
вставляется ссылка той страницы, которую мы будем тянуть к себе на проект :) В стилях iframe
можете легко подредактировать размер окна, который вам удобен и нужен.Данное решение будет полезно тем, кто делает какие-либо квизы или интерактивные материалы на сторонних сервисах, но не хотел бы уводить людей со своего проекта 😉
#полезная_фишка