Сегодня у меня первый рабочий день (и параллельно я заболела), но делаю таки новый пост с #уверстка 👍

Достаточно давно меня спросили, как сделать так, чтобы при увеличении контента в попап и появлении полоски перемотки контент не смещался куда не надо. Почему-то в тот момент я ответила:"Не знаю, не помню". Исправляемс 🤨

На данный момент есть несколько вариантов размещения и поведения полосы перемотки:
— расположение поверх контента. в таком случае при переполнении контейнера полоса просто появляется сверху, но выглядит это достаточно некрасиво
— в отдельной области. ХОБА ПОЯВИЛАСЬ и сместила контент

Исправить ситуацию можно с помощью свойства scrollbar-gutter: stable; В таком случае в блоке/попап будет сразу предусмотрена область под перемотку и контент никуда при ее появлении не уедет.

Ознакомиться с примером можно по этой ссылке {он, кстати, совмещен с прошлой темой уверстки}.


p.s. разобраться с тем, куда для попап писать это свойство вам придется самостоятельно. моя цель — рассказать про свойство и показать пример выполнения ☺️.

лайк поставить не забудь 🐱🐱🐱🐱

Когда делала прошлые модификации задумалась, что прием с маской для объектов на тильде вообще не делают {потому что никто не я 🤣} и сделала новый выпуск уверстки.

Рассмотрим одно из самых простых в применении свойств: mask-image. Его плюс в простоте применения {вам не нужно открывать SVG в VS Code и познавать азы разметки}, а также возможности указать размер для маски. Минус в том, что без префикса -webkit оно работать не будет {ознакомиться с поддержкой тут}

Для того, чтобы обрезать какой-либо объект нужно:
❌ Задать ему класс
❌ Залить нарисованную форму в формате SVG на тильду
❌ Вставить стили с этой страницы или забрать их ниже
❌ Заменить название класса, а также поставить ссылку на свое изображение

/*Для слайдера внутри Zero*/
.slider--mask .t-slds__main {
-webkit-mask-image: url(https://static.tildacdn.com/tild3966-3836-4362-b362-393130313861/flower.svg);
-webkit-mask-size: 100% 100%;
}
/*Для простого элемента внутри Zero*/
.classname .tn-atom {
-webkit-mask-image: url(https://static.tildacdn.com/tild3966-3836-4362-b362-393130313861/flower.svg);
-webkit-mask-size: 100% 100%;
}

Важно! Сделать маску из сложного SVG объекта нельзя. Для этого нужно другое свойство.

Отдельно можно развлекаться, если написать это и превратить маску в паттерн. Анимировать пока нельзя, ибо поддержка значения у transition появится только в следующем году 🥲

-webkit-mask-size: 50%;
-webkit-mask-repeat: round;

#уверстка

Вы опять не ждали, а это пост с уверсткой 🤩

Довольно часто меня спрашивали, как прижать элемент к правому краю на нужное количество пикселей, сохранив при этом выравнивание по гридам из-за автоскейла. Начнем с того, что тильда весьма глупое интернет-создание и когда вы даже по window-контейнеру выравниваете элемент по правому краю — тильда сама считает позицию и задает ее свойством left {гениально ящитаю нет}. Можно изощряться с функцией calc (left: calc(100% - ширина элемента в пикселях - расстояние от правого края в пикселях)!important), но нахрена, если можно проще 😃.

.класс_элемента {
  right: 20px;
  margin-left: auto;
} 

Эту фишку со внешними отступами не используют даже многие разработчики, так что вы теперь избранные. Лайки 🐶 {я не нашла смайл с лайкой 🫥}, огонечки, единороги приветствуются.

#уверстка

⌨️ Раз уж пошла такая пьянка с фичами для тильды, а не эффектами, то давайте рассмотрим вторую нужную вещь — 100vh высоты блока.

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

Было 900px высоты, а стало 1440px (Расширение экрана до 1920px). Хватит терпеть это безнравственное оскорбление наших чувств!

Нам нужна вот эта сложная конструкция ибо специфичность селекторов не позволяет обратиться напрямую к элементу {поставьте под постом кучу единорогов и в следующей уверстке я расскажу что делать, если не помогает даже important}. Цифры 537025463 меняем на числа из ID своего блока.

.t-rec#rec537025463 .t396 [data-artboard-recid="537025463"] {
  height: 100vh!important;
  min-height: 450px;
  max-height: 1200px;
}

Обратите внимание, что мы указываем минимальную высоту, чтобы в альбомной ориентации блок не стал излишне-узким. Максимальную для таких извращенцев как я, которые любят перевернуть экран вертикально {типигал программер}. А также помним, что при использовании кода лучше не располагать объекты внизу блока, либо задаем их позицию вручную с помощью прошлого поста #уверстка {margin-top спасет нас}.

Не забываем про бананы 🍌 и единорогов 🦄 (мне будет приятно, если вы пройдете по тегу и поставите лайк на старый пост тоже).

😎 Контроль высоты элемента внутри блока со 100vh

В прошлом выпуске уверстки я рассказала, как сделать блок на 100% высоты вьюпорта. Сразу появляется вопрос: как контролировать элементы в таком блоке. Ведь размеры и позиции других элементов тильда продолжит высчитывать сама. В настройках мы можем указать высоту и позиции элемента в процентах. Если вам привычно верстать макет так, то это нормально. Но если я задумала макет с отступами 20px — я хочу видеть именно 20px, а не подстраивать весь макет под проценты 😑

Нет проблемы растянуть элемент на 100% высоты вьюпорта и отнять оступы сверху и снизу. 40px — это сумма двух отступов {если вам морально проще, то можете дважды отнять по 20px}. Обратите внимание, что в таком случае нужно сместить элемент от верхней границы на 20px.

.класс_элемента {
   height: calc(100vh - 40px);
}

Если при этом вам нужно железно прибить элемент к какой-то из сторон, то пользуйтесь хаком с отступами из позапрошлого поста. Для left и top достаточно переназначить значения вместе с модификатором !important {кстати, пробел между значением и свойством является плохим тоном}.

Пример использования функции calc() есть на сайте хлорофилла. В нем я ограничила ширину контента от 1660px, используя вычисления. Можно было просто сделать еще один брейкпоинт, но нам с простыми решениями не по пути 👋

Напоминаю, что буду благодарна вашим реакциям 🦄. Если у вас есть идея для следующего поста вы можете оставить ее в комментариях или написать мне в личку.

#уверстка

Прошлый выпуск уверстки почти не набрал реакций из-за своей специфичности, поэтому новый выпуск решила сделать визуальным, а не функциональным


На одном из последних проектов у нас были очень брутальные кнопки с обводкой, которую нужно было как-то анимировать {моя душа замахнулась на полноценный анимированный border, но на данный момент это почти не сделать}.

Я чисто-случайно задала в инспекторе радиус прямоугольной кнопке и заметила, что появилось движение бордера, которое хотела сделать. Фишка простая — при добавлении border-radius уменьшается площадь кнопки и браузеру нужно перестроить стандартный border.

Делаем по классике: бахнуть класс кнопке, вставить стили, не забыть перекрыть все что нужно модификатором !important {будь он не ладен}.

.button--true .tn-atom {
border-width: 1.5px!important;
transition: all 0.4s ease-in;
}
.button--true:hover .tn-atom {
border-radius: 50px!important;
}

Рекомендую установить толщину обводки больше, чем 1px (я написала 1.5px). А также не ставить время меньше, чем 0.3s.

1.5px — толщина обводки
all 0.4s ease-in — настройки анимации, где 0.4s - время, а ease-in - функция скорости
50px — радиус кнопки при наведении

По традиции любые трешанутые смайлы в реакциях приветствуются 😏

#уверстка

Новый пост уверстки, который вы не просили :D Сегодня я расскажу о свойстве text-decoration.

На последнем стриме я правила позицию и толщину стандартной обводки под текстом, что ввело в небольшой шок моего коллегу, который применяет свойство text-decoration лишь в одном варианте — чтобы убрать ненавистную обводку у ссылок в начале создания сайта {есть у меня к нему некоторые вопросики, конечно}.

Красивый пример смотрим тут (наведите на ссылки) →


А теперь поехали свойства смотреть:

🔘Тип подчеркивания

text-decoration: underline; — привычное подчеркивание одной линией
text-decoration: overline; — подчеркивание над текстом
text-decoration: linethrough; — зачеркнутый текст


🔘Вид подчеркивания

text-decoration: underline solid; — обычная линия снизу {можно не писать solid}
text-decoration: underline dotted; — точки снизу
text-decoration: underline dashed; — пунктир снизу
text-decoration: underline double; — двойная линия
text-decoration: underline wavy; — волна

Важное примечание: вместо underline можно написать overline, т.е. выбрать другой тип подчеркивания. А также сделать микс, добавив к underline overline {underline overline dotted}.


🔘Толщина линии

text-decoration-thickness: 2px;

Можно сократить и написать так: text-decoration: underline 2px;


🔘Цвет линии

text-decoration-color: #FFFFFF;

Из всего семейства свойств для обводки transition есть только у данного свойства. А значит для эффекта появления обводки можно изначально сделать линию в цвет фона, а при наведении на текст — перекрасить её:

.classElem .tn-atom {
    text-decoration: underline 2px #FFFFFF;
    transition: all 0.2s;
}

.classElem:hover .tn-atom {
    text-decoration: underline 2px #000000;
}

🔘Отодвинуть линию от текста

text-underline-offset: 5px; {чисто интуитивно говорю ундерлайн :D}


Надеюсь, пост окажется вам полезным (а мне очень хочется рассказать еще про text-emphasis). Если да, то привычно ставим единорогов 🦄 Ибо мне немного обидно, что прошлые посты не набрали реакций, хоть и полезные 🏃‍♂️

#уверстка

Спустя почти две недели трудов таки выкатываю #10 выпуск уверстки ✨



Изначально, уверстка задумывалась как небольшие посты, в которые можно вместить и инструкцию, и код решения. Но для юбилейного выпуска я сделала что-то более сложное. Как обещала — делюсь решением аккордеона в Zero (его можно убдеть в этом проекте и на моем сайте-портфолио).


Есть два способа встроить аккордеон в Zero:
— вставить стандартный аккордеон внутрь шейпа или в блок с кодом (основной минус в том, что данная конструкция ломается при использовании автоскейла и мы получаем ебейшую сильную вложенность)
— написать аккордеон самостоятельно (уменьшаем вложенность, не привязаны к свойствам блока, частично решаем проблему автоскейла)

90% модификаций выбирают накалякать первое решение 🙂. Но я не ищу легких путей — поэтому сделала аккордеон с помощью стандартного тега <details>.


Код забирать тут ⇒
Codepen {для удобной работы} ⇒


Решение предусматривает полную кастомизацию: размер шрифта для всех разрешений, размер плюсика ❤️ (можно заменить на стрелку), цвет заголовка при наведении и так далее. Сразу оговорюсь, что это не полноценная модификация с генерацией кода. Всё соответствует изначальной задумке уверстки. После создания аккордеона вы можете снести мою подпись в начале кодов потому что сделали все сами 😏.

Чтобы у вас не было сложностей в работе я записала небольшую инструкцию по работе с решением.


Минусы:
1. Нужно работать с кодом
2. На данный момент тег <details> не анимирован при открытии, но это обещают поправить уже в следующем черновике CSS.


Традиционно настойчиво прошу ставить реакции на пост, потому что делюсь всем бесплатно. Но в честь юбилейного поста открыла сбор, на который вы можете кинуть пакетик корма котам 😛. Это поможет мне продолжить собирать идеи и делать новые посты #уверстка ❤️

Задонить на корм в благодарность ⇒

Кстати, меня ни разу не спросил никто: “А что такое уверстка вообще?”. Выпустила первый пост и все такие “Окей, уверстка так уверстка”. Что вы себе позволяете? :D

Один очень умный человек углядел на странице прошлой уверстки, что я использую какую-то конструкцию с уникальными стилями для Firefox 🦊


Рано или поздно сталкиваешься с тем, что сайт на тильде именно в этом браузере выглядит не так, как хотелось бы: не тот межстрочный интервал, смещение элемента на определенной ширине устройства и так далее. Это не вина самого браузера (все новые фичи в нём появляются быстрее всего) в 80% случаев. Особым соком будет клиент {и его потрясающие друзья}, которые пользуются именно браузером Firefox. Тут не только волосы дыбом встанут, еще и корвалол в аптечке кончится.


И поможет нам такая конструкция (пишем в стили):

@-moz-document url-prefix() {
     /*Внутрь пишем всё, что надо*/
}

Важное уточнение в том, что данный финт работает не во всех версиях браузеров поэтому 100% гарантии, что клиент не увидит баг — нет. В таком случае не забывайте уточнить версию браузера у клиента, не стесняйтесь просить обновить браузер (и это совершенно нормальная просьба, потому что в эпоху постоянных обновлений мы не можем по своему желанию пользоваться Internet Explorer). Использовать можно так же и для других конструкторов. Второй способ уже несколько сложнее и требует написание скрипта {маякните мне, если он тоже нужен 😌}.


Традиционно ставим реакции под пост, если рубрика #уверстка вам по-прежнему интересна, оставляем комментарии, советуем меня товарищам 🤗. Если данный выпуск оказался для вас полезен, то вы можете подарить моим котэвичам пакетик корма — нам будет очень приятно ❤️❤️.


Через пару часиков в канале будет важный опрос и мне будет приятно, если вы заглянете.

Сегодня я начинаю день с самого короткого выпуска уверстки {но это не точно}, ибо мне надо рассказать полезную вещь, которую многие не знают 😏

Когда мы хотим задать элементу внутренние отступы (пусть будет слева) — можем использовать два варианта записи:
[1] padding-left: 20px;
[2] padding: 0 0 0 20px;

Вторую запись проще всего можно запомнить так: сверху, справа, снизу, слева. Если еще проще, то просто двигаемся по часовой стрелке. Долгое время я забывала об этом и писала отдельное свойство для каждой стороны, что не всегда исправлялось при компиляции проекта 😬

Но когда нам нужны разные скругления углов, то чаще все пишут так (кто-то вовсе не знает, что можно скруглять углы по-разному):
border-top-left-radius: 20px;
border-bottom-right-radius: 10px;

Кажется, слишком много слов в одном свойстве, правда? Долгое время свойство border не имело сокращенной записи, но скажем спасибо ребятам, топящих за развитие css.

Потому что сейчас мы можем писать следующим образом:
.класс_элемента {
border-radius: 0 0 0 20px;
overflow: hidden!important;
}

Думаю, вы уже поняли зачем я рассказала в начале про padding и как не писать кучу свойств вместо одной строчки. Зачем мы пишем overflow в значении hidden? Чтобы контуры объекта на тильде действительно обрезались. Обратите внимание, что в некоторых случаях нужно после класса элемента добавить .tn-atom, чтобы работать не с самим элементом, а с его внутрянкой.


Уже привычно буду рада вашим реакциям под постом — это поддерживает мой дух и желание делать полезные посты дальше ❣️ Оставляйте комментарии катягдеканал и советуйте меня знакомым. Если вы хотите поддержать меня копеечкой и сказать "Спасибо" за какое-то решение, то это можно сделать по этой ссылке: кинуть на общак.

Похожее:
➡️ прием со свойством border-radius и обводкой

#уверстка

Ко мне пришли много новеньких и хочется сделать пост с навигацией, а также кратким обзором на тему того, о чем я вообще вещаю 😎

Моему блогу чуть больше года и это не типичный блог дизайнера, который просто делится своим опытом и полезными советами для новичков {потому что я знаю, что мне самой еще стоит поучиться у моей аудитории и больше ощущаю себя разработчиком}. Тут я пишу о своих переживаниях, развитии в профессии, делюсь ссылками на полезные сервисы и запустила крутую рубрику с мини-решениями для тильды и не только.

Здесь можно пробежаться по тегам: #работа #халявное #стрим #катяучится #ссылки #уверстка #переверстка #личное

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

На данный момент я работаю над платными крутыми решениями для тильды (не типикал решения как у всех), переписываю полностью программу оптимизации сайтов на тильде, делаю закрытый канал по развитию блога и консультации по нестандартной вёрстке на тильде. А еще я, иногда, веду стримы, на которых делаю реальные проекты и очень хочу развить это направление чуть дальше. Будем знакомы, если не знакомы 😃

🙂 🔡🔡🔡🔡🔡🔡🔡🔡🔡

За последнее время в канале появилось много новых постов и соответственно тегов. Я решила навести порядок в канале и организовать удобную навигацию.

#личное (жизнь, переживания, нытьё, семья, мысли)
#скотики (немного о жизни наших пятерых усатых 👊👊)
#работа (о проектах, кейсы, отзывы, переделки)

#уверстка (небольшие быстрые решения)
#переверстка (переделка стандартных блоков на тильде)
#халявное (решения для тильды)
#ссылки (полезные ссылки, подборки постов, агрегаторы и так далее)
#стрим (записи стримов, которые не находятся в открытом доступе)

#косметикос (посты про косметику от косметического задрота 😎)
#дайджест (обзоры нового в CSS, обнов тильды) {я обязательно продолжу этот тег как смогу}
#референсы (подборки интересных сайтов) {тоже продолжим, как сможем}
#бренныйфриланс (как продвигается мой фриланс честно и без мотивационных речей)