Ух, работа и сторонние проекты поглотили меня. Но вот возвращаюсь к ведению своего канала. И у меня есть для вас один очень интересный инструмент, который лежит на просторах интернета, и делает очень красивые переходы между блоками 😎

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

Заходите, генерируйте, и пользуйтесь! Всё достаточно просто. Как только выберите цвет и сгенерируете привлекательную для вас волну, нажимаете кнопку по центру, и вам выдаётся свг, который нужно поставить в HTML-блок в Геткурсе. Советую делать такие вставки между блоками поставив HTML-блок. Если захотите по каким-то причинам использовать внутри блока в html-элементе, то вам придётся повозиться с тем, чтобы отменить некоторые позиционирования у родительских элементов 😂

#полезная_фишка

Как в книгах! 🤓

Жили-были... а точнее, всегда были заглавные буквы везде. Особенно их любили выделять в старой или художественной литературе как бы придавая атмосферы читателю. Подобное можно сотворить и на наших нынешних страницах, и делается это достаточно просто.

За определение первой буквы в тексте отвечает псевдокласс ::first-letter. Таким образом мы выберем первую букву, но что же делать дальше?

По-хорошему нам нужно сделать ещё и обтекание в тексте, чтобы на эту самую букву не наслаивался другой текст. В этом нам прекрасно поможет свойство обтекания float. Изначально в старых браузерах оно активно использовалось как свойство позиционирования, но в современном вебе используется как правило обтекания. Далее с помощью применения правил отступов немного подправить его начальную позицию.

В моём примере я поставил на текстовый блок класс article и обращаясь к элементу p я выбираю его первую букву, а затем применяю следующие правила:

.article p::first-letter {
color:#FE5F55;
font-weight: bold;
font-size: 70px;
float: left;
line-height: 60px;
padding-right: 8px;
margin-top: -3px;
}

И благодаря этому получается такой красивый эффект "Буквицы" с обтеканием текста вокруг. Можно так же навесить на эту первую букву другой, более "сказочный" шрифт. Далее фантазия зависит только от вас ☺️

#полезная_фишка

Выходим за пределы сознания формы кнопки 👀

Всегда остро стоял вопрос в визуализации и красивой анимации кнопок. Хочу поделиться с вами одним своим полезным стилем, который поможет сделать классный эффект "стрелки" на кнопке при наведении на неё.

Рецепт такой кнопки прост:
1) Возьмите блок с кнопкой или любую кнопку (шок-контент 😮 )
2) Вставьте в стили блока в "Подробные настройки" следующие стили:

.btn {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
transition: 0.5s;
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}

.btn:hover {
letter-spacing: 4px;
font-weight: 800;
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0 0);
}

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

И да, конечно же всех с пятницей! 😎

#полезная_фишка

Возвращаемся после праздников в работу 😉

На этот раз обратим свой взор на блок с картинкой. Редко я вижу чтобы его вообще хоть как-то стилизовали, но всё же это можно, и даже нужно. Потому что лично меня не стилизованный блок картинок уже практически не цепляет, хоть и взгляд невольно останавливается.

На скриншоте я показываю как можно разнообразить блок с картинкой, придав ему декоративную рамку, из которой изображение как бы "вылетело", что придаёт некий шарм самому блоку 😊

Зачастую класс блока с картинкой называется part-image, от него и будем отталкиваться. Саму картинку мы оставим не тронутой, а вот заднюю рамку со смещением повесим на псевдоэлемент. Получится примерно следующее:

.part-image {
position: relative;
z-index: 5;
}

.part-image:before {
content: '';
position: absolute;
z-index: -1;
display: block;
width: 100%;
height: 100%;
border: 10px solid #FFCA42;
transform: scale(0.95) translate(30px, 40px);
}

Как итог, мы чуть-чуть поигрались со слоями, а рамку отправили позади самого элемента задав ему z-index: -1. Приукрасили стилями как надо и сместили и чуть сузили с помощью свойства transform. Пользуйтесь ✅

#полезная_фишка

Прилипающий контент. Смотрится отлично, практичен и дружелюбен в плане UX. К тому же и делается достаточно просто.

Нужно прописать контейнеру буквально одно свойство:

position: sticky;

Но использовать его нужно грамотно и правильно. Потому что почти никто не понимает почему блок не прилипает и не ездит в след за прокруткой страницы.

Во-первых, обязательно должна присутствовать координата отступа, например top: 10px. Она будет означать что контент прилипнет при прокрутке сверху и будет отступать от края окна браузера 10px. Итого у плавающего контейнера свойства будут выглядеть примерно так:

position: sticky;
top: 10px;

И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством position: sticky должно хватать высоты, по которой как раз будет ездить внутренний блок как лифт. Лучше всего чтобы это было автоматическое расстояние основанное на растянутости вашего контента. Ну или же до определённого момента — решать вам 😉

P.S. Скрин и гифка чуть ниже)

#лайфхак #полезная_фишка

Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно 😉

В CSS стили блока с формой ставим:

.form-content .builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.part-userField {
flex: 1 0 49%;
}

.part-header, .part-button {
flex-basis: 100%;
}

И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство flex-basis: 100%;

Должно выглядеть так:

.part-header, .part-button, .вашкласс {
flex-basis: 100%;
}

#лайфхак #полезная_фишка

Поблочный скролл страницы

Модный эффект применяемый на современных страницах чтобы порционно показывать информацию пользователю дабы избежать каши. Я тоже люблю такую подачу информации, и решил поделиться с вами, как можно сделать поблочный скролл на Геткурсе 😏

Сперва давайте разместим наши блоки на странице, заверстаем их как надо с вашим дизайном, и потом применим этот эффект. Кстати, вы можете не растягивать ваши блоки на 100vh высоты экрана, скрипт сделает это за вас. Но чтобы избежать эффекта начального "масштабирования" при загрузке контента на сайте, всё же можно сделать блокам высоту 100vh (делается это с помощью обложки в блоке, если там не предусматривается обложка то можно её и не ставить вовсе).

Для начала нам нужно подгрузить несколько скриптов и стилей для плагина, который будет манипулировать страницей при скролле. Данные теги нужно поставить в Настройки страницы, перейти в Расширенные настройки -> Показать дополнительные настройки и вставить в "Теги в разделе HEAD":

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>

После этого не забудьте сохранить и опубликовать страницу. Далее, нам нужно присвоить классы нашим блокам, назовём их scroll-block-1, scroll-block-2 и scroll-block-3 соответственно (см. на скриншоте). Не обязательно так называть, но эти классы в дальнейшем нам понадобятся для перечисления в скрипте, вы так же можете поставить и свои. Ну и остаётся только поставить следующий скрипт в конец страницы в JS блок:

$(document).ready(function() {
  // Здесь указать классы блоков, которые есть на странице
  var sections = $(".scroll-block-1, .scroll-block-2, .scroll-block-3");

  sections.wrap("<div class='section'></div>");
  $(".section").wrapAll("<div id='fullpage'></div>");
  
  window.page = $('#fullpage').fullpage({
    css3: true,
    scrollBar: true,
  });
});

В переменной sections указываем те самые классы блоков, которые мы разметили в редакторе. Именно они и будут листаться в полноэкранном поблочном режиме. Рекомендую на такой странице размечать все блоки, иначе прокрутка может повести себя неадекватно 🏃

P.S. На последок: для более углублённого эффекта скроллинга страницы без правого скролл-бара, можете скрыть его поставив CSS блок на страницу и прописав там body { overflow: hidden !important; }
P.S.S.: Учтите что это свойство нужно прописывать в самый последний момент на странице, когда вы всё сделаете, и пролистать редактор наверх, чтобы если что закомментровать его, т.к. он скроет скролл даже в редакторе 😂

#полезная_фишка

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

Постов в канале уже великое множество, и возможно кто-то ищет какое-то решение и ждёт подходящего поста. Каждый свой пост я подписываю хештегами:

#полезная_фишка — это разработка/решение для улучшения функциональности и визуального стиля Геткурса

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

Не стесняйтесь делать поиск по этим хештегам просто кликнув на них. Возможно то решение или улучшение которое вы ищите, уже публиковалось в канале. А может вы найдете для себя что-то интересненькое и примените у себя на проекте 😊