Поставить картинку в Геткурсе — задача не из лёгких 😅
Очень многие жалуются на то, что при вставке картинок в самый популярный блок с карточками она не встаёт как нужно и расплывается за границы отведенного ей пространства.
Всё дело в том, что у Геткурса по умолчанию на блоке с классом
Чтобы правильно разместить вашу картинку в блоке без урезки, в классе
#полезная_фишка
Очень многие жалуются на то, что при вставке картинок в самый популярный блок с карточками она не встаёт как нужно и расплывается за границы отведенного ей пространства.
Всё дело в том, что у Геткурса по умолчанию на блоке с классом
image
стоит правило background-size: cover
. И действительно, это правило помогает занимать всё доступное пространство картинкой, масштабируя её по отведенному месту. Но у Геткурса есть проблема с этим блоком, так как её основная оболочка содержит огромные внутренние отступы, из-за чего это свойство работает не правильно.Чтобы правильно разместить вашу картинку в блоке без урезки, в классе
image
используйте background-size: contain
вместо cover
. Тогда ваша иконка или картинка полностью уместится в этот блок. И не забудьте, чтобы перебить правило Геткурса, вам понадобится директива !important
к значению свойства.#полезная_фишка
Замылим всё! 😁
Многие после Недели Магии 5 открыли для себя чудесное свойство блюра изображений и блоков с помощью свойства
Этот пост будет не столько практическим, сколько информационным :)
Благодаря даже двум значениям этого свойства, можно построить удивительные механики на ваших проектах. К примеру, если на ваших уроках есть цветные картинки, то недоступные уроки можно обесцветить :) Или навести интригу: размыть блюром следующее название урока, и тогда пользователю будет ещё интереснее узнать, что же ждёт его дальше.
#информативные_размышления
Многие после Недели Магии 5 открыли для себя чудесное свойство блюра изображений и блоков с помощью свойства
filter
со значением blur()
. Так же многих заинтересовало значение grayscale()
. Этот пост будет не столько практическим, сколько информационным :)
Благодаря даже двум значениям этого свойства, можно построить удивительные механики на ваших проектах. К примеру, если на ваших уроках есть цветные картинки, то недоступные уроки можно обесцветить :) Или навести интригу: размыть блюром следующее название урока, и тогда пользователю будет ещё интереснее узнать, что же ждёт его дальше.
#информативные_размышления
Добавим немного возможностей Геткурсу? 😉
Сегодня речь пойдет об инструменте скрытия блоков по параметру из URL. Кто-то уже знает, как работает эта штука, а кто-то нет :) Вкратце, идёт проверка параметра из урла страницы, проверяется её значение и блок либо скрывается, либо показывается.
Но меня смущает одно... функционал придумали целиковому блоку, а элементам - нет...
Я решил это немного исправить :) Теперь можно по параметру из урл что-либо сотворить с элементом на странице. В своём примере я изначально дал класс
Сам код ставится в конце вашей страницы, а в квадратных скобках и кавычках пишется тот параметр, который вы хотите проверить (у меня этот параметр
Cам код будет в посте ниже :)
#полезная_фишка
Сегодня речь пойдет об инструменте скрытия блоков по параметру из URL. Кто-то уже знает, как работает эта штука, а кто-то нет :) Вкратце, идёт проверка параметра из урла страницы, проверяется её значение и блок либо скрывается, либо показывается.
Но меня смущает одно... функционал придумали целиковому блоку, а элементам - нет...
Я решил это немного исправить :) Теперь можно по параметру из урл что-либо сотворить с элементом на странице. В своём примере я изначально дал класс
hide
картинке, чтобы скрыть её, а затем проверял параметр select
. И если он равняется единице, то скрипт показывает картинку на странице :)Сам код ставится в конце вашей страницы, а в квадратных скобках и кавычках пишется тот параметр, который вы хотите проверить (у меня этот параметр
select
).Cам код будет в посте ниже :)
#полезная_фишка
Сам код:
$(function() {
var params = window
.location
.search
.replace('?','')
.split('&')
.reduce(
function(p,e){
var a = e.split('=');
p[decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
return p;
},
{}
);
if(params['select'] === '1') {
$('.secret-image').removeClass('hide');
}
})
Любой блок в форме... и не только там 😱
Геткурс открывает удивительные возможности, если знать как их применить :) В данном случае, можно поставить любой блок куда угодно и как угодно с помощью HTML-блока в редакторе.
На скриншотах грубый пример того, как в блок формы уместился и блок "Две колонки с произвольным контентом", который я заранее подредактировал, так как после вставки подобным образом он перестаёт быть редактируемым :)
Подобным трюком я пользовался на многих проектах, когда делал нестандартные возможности для блоков. Один из примеров такого использования — это панель на странице распродажи с общей суммой и количеством выбранных предложений, которые как раз размещались по колонкам, создавая дополнительную адаптивность за счёт того, что это родные блоки Геткурса. И таких фантазий насчёт блоков может быть безграничное множество... 😉
#лайфхак
Геткурс открывает удивительные возможности, если знать как их применить :) В данном случае, можно поставить любой блок куда угодно и как угодно с помощью HTML-блока в редакторе.
На скриншотах грубый пример того, как в блок формы уместился и блок "Две колонки с произвольным контентом", который я заранее подредактировал, так как после вставки подобным образом он перестаёт быть редактируемым :)
Подобным трюком я пользовался на многих проектах, когда делал нестандартные возможности для блоков. Один из примеров такого использования — это панель на странице распродажи с общей суммой и количеством выбранных предложений, которые как раз размещались по колонкам, создавая дополнительную адаптивность за счёт того, что это родные блоки Геткурса. И таких фантазий насчёт блоков может быть безграничное множество... 😉
#лайфхак
Красота в Чатиуме 🥳
Друзья, много раз поднимался этот вопрос, поэтому хочу данную информацию закрепить в этом посте. Многие спрашивают, как сделать такой же красивый вид ваших тренингов и уроков, как на десктопе и в мобильном браузере, но в Чатиуме?
Всё очень просто!
Достаточно лишь поставить вот эту галочку (смотрите скриншот) в настройках списков тренингов или уроков во вкладке "В приложении", и тогда вся красота перенесётся ещё и в Чатиум ;)
#лайфхак
Друзья, много раз поднимался этот вопрос, поэтому хочу данную информацию закрепить в этом посте. Многие спрашивают, как сделать такой же красивый вид ваших тренингов и уроков, как на десктопе и в мобильном браузере, но в Чатиуме?
Всё очень просто!
Достаточно лишь поставить вот эту галочку (смотрите скриншот) в настройках списков тренингов или уроков во вкладке "В приложении", и тогда вся красота перенесётся ещё и в Чатиум ;)
#лайфхак
Друзья, наконец-то это случилось! 🥳
Как я говорил раньше, я готовил для вас один свой интересный проект по обучению всему тому, что знаю я сам, и хочу представить его — Train IT❗️
Проект имеет формат клуба с подпиской (реккурентные платежи пока что не предусмотрены). Основная фишка моего проекта в том, что я обучаю по своей методике и рассказываю сложные вещи простым языком. Поэтому уроки в клубе длятся в среднем по 10-15 минут, и таким образом из подобных уроков покрывается вся область знаний по конкретному направлению :)
Я со своей командой задумывал этот проект для тех людей, которые хотят понять, как правильно обращаться с CSS, строить правильную структуру документа на HTML и не бояться JS, а понимать, как он работает. Всё это есть в одном из направлений клуба "Веб с нуля".
Второе направление, которое есть в клубе — это "Тильда". В этом направлении есть как и теоретические уроки, которые закрепят ваши знания об этой CMS, так и практические уроки с разными фишками и возможностями, которые не умеет делать Тильда стандартными средствами :)
🔴 Если вас интересует комплексное обучение HTML/CSS/JS, хотите применять эти навыки вне зависимости от того, с какой платформой вы работаете, то направление "Веб с нуля" для вас!
🔴 Если вы хотите познать секреты Тильды, делать ошеломительные дизайны и применять секретные фишки и возможности, которые не может делать Тильда стандартными методами, то направление "Тильда" для вас!
Конечно же в клубе есть предложение с доступом ко всей базе на два периода (на месяц и на три месяца), если вас интересует и то, и другое ;)
❗️Ссылка на проект — https://train-it.ru ❗️
Мы с командой нацелены расти как вглубь, так и вширь, и соответственно расширять в будущем направления клуба! В наших грандиозных планах открыть такие направления как C#, Figma, Excel, Таргетинг и многое многое другое!
Так же я задумал для вас интересный конкурс, об этом будет в следующем посте через несколько минут 😉
Как я говорил раньше, я готовил для вас один свой интересный проект по обучению всему тому, что знаю я сам, и хочу представить его — Train IT❗️
Проект имеет формат клуба с подпиской (реккурентные платежи пока что не предусмотрены). Основная фишка моего проекта в том, что я обучаю по своей методике и рассказываю сложные вещи простым языком. Поэтому уроки в клубе длятся в среднем по 10-15 минут, и таким образом из подобных уроков покрывается вся область знаний по конкретному направлению :)
Я со своей командой задумывал этот проект для тех людей, которые хотят понять, как правильно обращаться с CSS, строить правильную структуру документа на HTML и не бояться JS, а понимать, как он работает. Всё это есть в одном из направлений клуба "Веб с нуля".
Второе направление, которое есть в клубе — это "Тильда". В этом направлении есть как и теоретические уроки, которые закрепят ваши знания об этой CMS, так и практические уроки с разными фишками и возможностями, которые не умеет делать Тильда стандартными средствами :)
🔴 Если вас интересует комплексное обучение HTML/CSS/JS, хотите применять эти навыки вне зависимости от того, с какой платформой вы работаете, то направление "Веб с нуля" для вас!
🔴 Если вы хотите познать секреты Тильды, делать ошеломительные дизайны и применять секретные фишки и возможности, которые не может делать Тильда стандартными методами, то направление "Тильда" для вас!
Конечно же в клубе есть предложение с доступом ко всей базе на два периода (на месяц и на три месяца), если вас интересует и то, и другое ;)
❗️Ссылка на проект — https://train-it.ru ❗️
Мы с командой нацелены расти как вглубь, так и вширь, и соответственно расширять в будущем направления клуба! В наших грандиозных планах открыть такие направления как C#, Figma, Excel, Таргетинг и многое многое другое!
Так же я задумал для вас интересный конкурс, об этом будет в следующем посте через несколько минут 😉
train-it.ru
Train IT — клуб изучения востребованных направлений!
IT, Маркетинг, Дизайн — это далеко не все направления, которые мы предлагаем изучить. Короткие и практичные уроки помогут вам точечно изучить новые профессии и направления, а наши крутые кураторы подскажут и помогут вам на пути освоения новых знаний.
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Мне очень близка и интересна идея 3D-лендингов и сайтов. Я всецело разделяю креатив от @DmitrySpace по созданию таковых. Благодаря CSS-правилам, совместно с JS можно творить невообразимые вещи :) В данном случае мне безумно нравится, как вышел этот креативный…
Помните этот крутой блок? Я подарю его вам! 😉
Этот конкурс приурочен к открытию моего клуба Train IT.
Я подарю этот крутейший блок с 3д иконками соц-сетей для Геткурса 10 счастливчикам, которые выполнят условия конкурса, а именно:
❗️Самое простое: быть подписанным на мой канал "Каморка Геткурсовода" (https://t.me/closetgc) 😁
❗️Быть подписанным на мой канал проекта Train IT, где мои коллеги будут постить для вас познавательный контент мира IT и новости проекта, откуда вы почерпнёте для себя новые знания (https://t.me/train_it_official)
❗️Подтвердить своё участие в конкурсе, заполнив эту анкету — https://forms.gle/3d7TCCEEPwM7Cwx29.
Победителей я определю в Воскресенье 8 августа в 20:00 с помощью Рандомайзера.
Прокачивайте свой скилл вместе со мной, и удачи в конкурсе 😉
Этот конкурс приурочен к открытию моего клуба Train IT.
Я подарю этот крутейший блок с 3д иконками соц-сетей для Геткурса 10 счастливчикам, которые выполнят условия конкурса, а именно:
❗️Самое простое: быть подписанным на мой канал "Каморка Геткурсовода" (https://t.me/closetgc) 😁
❗️Быть подписанным на мой канал проекта Train IT, где мои коллеги будут постить для вас познавательный контент мира IT и новости проекта, откуда вы почерпнёте для себя новые знания (https://t.me/train_it_official)
❗️Подтвердить своё участие в конкурсе, заполнив эту анкету — https://forms.gle/3d7TCCEEPwM7Cwx29.
Победителей я определю в Воскресенье 8 августа в 20:00 с помощью Рандомайзера.
Прокачивайте свой скилл вместе со мной, и удачи в конкурсе 😉
train-it.ru
Train IT — клуб изучения востребованных направлений!
IT, Маркетинг, Дизайн — это далеко не все направления, которые мы предлагаем изучить. Короткие и практичные уроки помогут вам точечно изучить новые профессии и направления, а наши крутые кураторы подскажут и помогут вам на пути освоения новых знаний.
Каморка Геткурсовода 💻 | Канал Максима Елисеева pinned «Друзья, наконец-то это случилось! 🥳 Как я говорил раньше, я готовил для вас один свой интересный проект по обучению всему тому, что знаю я сам, и хочу представить его — Train IT❗️ Проект имеет формат клуба с подпиской (реккурентные платежи пока что не предусмотрены).…»
Мой выбор — мои правила! 🧐
Многим это кажется простым, но большинство всё же теряются, когда хотят изменить стили у выбранного предложения на свои собственные. И я вам в этом помогу ;)
Выбранное предложение имеет класс
#полезная_фишка
Многим это кажется простым, но большинство всё же теряются, когда хотят изменить стили у выбранного предложения на свои собственные. И я вам в этом помогу ;)
Выбранное предложение имеет класс
selected
и с помощью этого класса вы можете изменить стиль выбранных предложений. К примеру, background
меняется только с использованием директивы !important
, а все остальные стили вы можете применить так, как вам захочется (border-radius
, color
, font-size
и тд.). Исключением, возможно, является color
, к нему тоже нужно применять !important
.#полезная_фишка
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Помните этот крутой блок? Я подарю его вам! 😉 Этот конкурс приурочен к открытию моего клуба Train IT. Я подарю этот крутейший блок с 3д иконками соц-сетей для Геткурса 10 счастливчикам, которые выполнят условия конкурса, а именно: ❗️Самое простое: быть…
Друзья, всем хороших выходных 😉
Уже завтра в 19:00 я закрою анкету регистрации на конкурс, и в 20:00 объявлю 10 счастливчиков, которые получат от меня крутой блок с 3д иконками соц-сетей 😊
Этот конкурс был приурочен к празднованию открытия моего клуба Train IT, который я готовил для вас всё это время! И вот он запустился в работу 😉
🟢 Ссылка на клуб https://train-it.ru
Там я обучаю html/css/js не занудными учебниковыми-терминами и оборотами, а простым и понятным языком. Так же рассказываю о секретах Tilda и делюсь крутыми фишками и своими разработками для платформы.
Буду рад видеть вас у себя в клубе! 🥳
Уже завтра в 19:00 я закрою анкету регистрации на конкурс, и в 20:00 объявлю 10 счастливчиков, которые получат от меня крутой блок с 3д иконками соц-сетей 😊
Этот конкурс был приурочен к празднованию открытия моего клуба Train IT, который я готовил для вас всё это время! И вот он запустился в работу 😉
🟢 Ссылка на клуб https://train-it.ru
Там я обучаю html/css/js не занудными учебниковыми-терминами и оборотами, а простым и понятным языком. Так же рассказываю о секретах Tilda и делюсь крутыми фишками и своими разработками для платформы.
Буду рад видеть вас у себя в клубе! 🥳
Media is too big
VIEW IN TELEGRAM
Настало время объявлять победителей! 🥳
Видео того, как выбирались 10 победителей будет прикреплено к посту 😉
❗️Поздравляем этих 10 счастливчиков! 🥳🥳🥳
Они получат от меня крутейший блок с 3д иконками соц-сетей для Геткурса:
@Yuliya_Gostyukhina
@ElizavetaErshova45
@alesya_loskutova
@InnaAgapova
@dar_len
@elenkost
@Maekni
@Anastasia_Kazarinova
@ledorof
@manamadnail
С победителями я свяжусь в понедельник 9 августа с 13:00 до 18:00 и передам вам сам блок и инструкции 😉
Ещё раз поздравляю! 🥳🥳🥳
Видео того, как выбирались 10 победителей будет прикреплено к посту 😉
❗️Поздравляем этих 10 счастливчиков! 🥳🥳🥳
Они получат от меня крутейший блок с 3д иконками соц-сетей для Геткурса:
@Yuliya_Gostyukhina
@ElizavetaErshova45
@alesya_loskutova
@InnaAgapova
@dar_len
@elenkost
@Maekni
@Anastasia_Kazarinova
@ledorof
@manamadnail
С победителями я свяжусь в понедельник 9 августа с 13:00 до 18:00 и передам вам сам блок и инструкции 😉
Ещё раз поздравляю! 🥳🥳🥳
Мы строили, строили... 🙄
Одной из самых популярных проблем использования блока "Две колонки с произвольным контентом" является правильное обращение ко второй его составляющей колонке, чтобы её застилизовать.
И ведь действительно, селектор
Следует обращаться ко второй колонке не по дочерним элементам, а по типу этого элемента:
#полезная_фишка
Одной из самых популярных проблем использования блока "Две колонки с произвольным контентом" является правильное обращение ко второй его составляющей колонке, чтобы её застилизовать.
И ведь действительно, селектор
.builder:nth-child(2)
не даст вам нужного результата. Потому что в родительском блоке my-container
то и дело помимо <script>
добавляется ещё и <style>
. Таким образом это обращение работает неправильно.Следует обращаться ко второй колонке не по дочерним элементам, а по типу этого элемента:
.builder:nth-of-type(2)Таким селектором мы говорим что "Найди такой же второй класс билдер в потоке кода". Таким образом мы корректно обратимся как к самой второй колонке, так и дописав нужные элементы, соответственно, корректно и к этим элементам второй колонки :)
#полезная_фишка
В ряд ❗️
Сегодня мы впервые затронем такую сложную тему, как флекс-правила. Естественно, в одном посте не расскажешь весь мой мини-курс, который есть в Клубе Магии 😁 Но мы решим довольно наболевшую для многих проблему:
Есть кнопки, выполняют разные действия, как же сделать их в ряд?
Всё решается флекс-правилами. Для начала мы активируем их в самом родительском контейнере, который содержит все наши 3 кнопки. В моём случае это класс
Берите себе на вооружение!
#полезная_фишка
Сегодня мы впервые затронем такую сложную тему, как флекс-правила. Естественно, в одном посте не расскажешь весь мой мини-курс, который есть в Клубе Магии 😁 Но мы решим довольно наболевшую для многих проблему:
Есть кнопки, выполняют разные действия, как же сделать их в ряд?
Всё решается флекс-правилами. Для начала мы активируем их в самом родительском контейнере, который содержит все наши 3 кнопки. В моём случае это класс
builder
. В нём я активирую флекс сетку путём display: flex;
после чего правилом justify-content: space-around;
я создаю равные отступы между элементами, в том числе и от краёв контейнера 😉Берите себе на вооружение!
#полезная_фишка
This media is not supported in your browser
VIEW IN TELEGRAM
Ужасы нашего городка... 😅
У многих вид старого редактора вызывает ужас и боязнь что-либо в нём делать 😆 И не просто так, ведь там вполне реально накосячить больше, чем в редакторе на обычных страницах.
В этом посте рассмотрим возможность в "пару взмахов" создания 2-х колонок в старом конструкторе.
Всё очень просто. Я сделал контейнер, добавил внутрь него ещё один. Таким образом он становится уже выбранным по умолчанию для дальнейших действий. Зажав левую кнопку мыши, чтобы перетащить блок, я тащу его к краю родительского контейнера и ставлю его сбоку. Блоки сразу подразделяются структурно на колонки, и вы можете строить свою сетку дальше 😉
#лайфхак
У многих вид старого редактора вызывает ужас и боязнь что-либо в нём делать 😆 И не просто так, ведь там вполне реально накосячить больше, чем в редакторе на обычных страницах.
В этом посте рассмотрим возможность в "пару взмахов" создания 2-х колонок в старом конструкторе.
Всё очень просто. Я сделал контейнер, добавил внутрь него ещё один. Таким образом он становится уже выбранным по умолчанию для дальнейших действий. Зажав левую кнопку мыши, чтобы перетащить блок, я тащу его к краю родительского контейнера и ставлю его сбоку. Блоки сразу подразделяются структурно на колонки, и вы можете строить свою сетку дальше 😉
#лайфхак