Новый пост уверстки, который вы не просили :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, обнов тильды) {я обязательно продолжу этот тег как смогу}
#референсы (подборки интересных сайтов) {тоже продолжим, как сможем}
#бренныйфриланс (как продвигается мой фриланс честно и без мотивационных речей)