Доступная верстка

2021-12-18 08:28:00 CSS анимация

Перед использованием анимации посложнее стоит поговорить про css transition

По сути это возможность менять свойства css плавно и в течении некоторого времени.

Например запись

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

говорит нам следующее:
1) выбираем с каким свойством будем работать - transition-property
2) указываем продолжительность анимации transition-duration
3) пишем функцию поведения для анимации transition-timing-function
4) задаем задержку для нее transition-delay

#csstricks Открыть/Комментировать

2021-12-17 09:21:54 Вспомним о flex-box

Полезно использовать сокращенный вид записи для flex элемента.

flex-grow | flex-shrink | flex-basis

flex: 1 1 10%;

flex-grow - сколько свободного пространства занимает элемент (число ставим, от 0 и выше)

flex-shrink - если контент выходит за пределы родителя это свойство помогает определить степень сжатия. Значение 0 - не сжимать, больше 0 - сжимать

flex-basis - базовый размер флекс элемента вдоль основной оси (auto, 0, единицы измерения - px, rem/em/% ...)


Помимо сокращения записи 3 свойств можно сделать гибкие настройки элементов.

#shorts Открыть/Комментировать

2021-12-16 07:28:59 Абзац через css для текста

Если в тексте нам необходимо сделать отступ в строке, как абзац в статьях, книгах, чуть больше обычного, или сильно больше, как это сделать ?
Использовать вставку пробела через html (   ) или добавлять элемент какой-нибудь пустой... Или ?

Есть интересное свойство text-indent , задав значение ему в пикселях, rem/em , процентах мы получим желаемый эффект.

text-indent: 5em

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

text-indent: 5em each-line - задаст отступ всем строкам после принудительного использования Enter или тега br

text-indent: 5em hanging - задаст отступ всем строкам, КРОМЕ первой

#csstrics Открыть/Комментировать

2021-12-15 09:46:11 Как вычисляется line-height - межстрочный интервал ?

Когда мы копируем стили из фигмы или фотошоп или других прог можно увидеть разные записи line-height:

1) в процентах (120%, 100%)

2) дробные числа (1.2, 1)

3) как размер шрифта (12px, 10px)

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

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

line-height / font-size - получим число дробное, если нужны проценты , то умножаем на 100% Открыть/Комментировать

2021-12-14 10:43:37 Предположим, у нас есть текст, и его необходимо расположить в несколько колонок, как в газете/журнале.
Как это сделать? Можно подойти разными способами, один из свежих - это использовать свойство css columns:

column-count - кол-во столбцов
column-gap - зазор между столбцами
column-rule-style - стиль правила между столбцами
column-rule-width - ширина правила между столбцами
column-rule-color - цвет правила между столбцами
column-rule - сокращенным свойством правил выше
column-span - указывает, сколько столбцов должен охватывать элемент
column-width - оптимальная ширина столбцов.

Попробовать можно здесь: https://codepen.io/salexvl/pen/vYeggpj

p.s.обратите внимание на префиксы для кроссбраузерности. Как вы расставляете их у себя в проектах ? Открыть/Комментировать

2021-12-13 08:39:08 А вы знали, что тексту можно задать не только однотонный цвет, но и градиент ?)

Например, у нас есть спан или параграф (даже див подойдет или что-то подходящее еще) и к нему применить такой стиль, как на скрине: Открыть/Комментировать

2021-12-11 07:47:54 #2 Приоритет свойств в css

1) лучше всего придерживаться варианта обращения к классу элемента
2) через id (в css обращение через значок #) лучше не применять стили css , он больше предназначен для js
3) обращение через селектор по приоритету выше обращения через класс. Стоит помнить это и не злоупотреблять
4) обращения через nth-child , nth-of-type по весу больше обращения через классы
5) использование инлайновых стилей, т.е.прямо в коде html , будет перебивать все вышеупомянутые обращения. Лучше этого совсем избегать
6) а если записать !important - перебьет его вес все [ .text {width: 20rem !important} ] - максимально этого надо избегать...

Конечно, если сам верстаешь и делаешь хорошо, то можно все сделать как надо !) Но разбираясь в чужом коде или при работе со стилями от cms - порой не обойтись без пунктов 5 и 6. Поэтому:

Будьте теми, кто пишет код красиво, так, чтобы другому не было стыдно смотреть в него и работать с ним!) Открыть/Комментировать

2021-12-11 07:47:10 #1 Приоритет свойств в css

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

.text {width: 20rem}

а ниже {или выше} по тексту css сделать обращение к селектору этого элемента

p {width: 15rem}

то как бы нам не хотелось, обращение к селектору перезапишет значение , которое задается при обращении к классу.

Есть некоторые особенности приоритета свойств css, про которые стоит помнить (смотри следующий пост) Открыть/Комментировать

2021-12-09 09:31:07 Функция calc() в css

Отличный инструмент, дающий возможность рассчитать значения свойств CSS во время их определения. В качестве параметра, т.е.в скобках, можно записывать математические выражения +, -, *, /

Часто можно увидеть реализацию для вычисления ширины

width: calc(100% - 50px)

т.е. элемент будет иметь ширину 100% родителя за вычетом 50px

Где еще можно заметить ее использование? Честно говоря, где угодно (где это уместно конечно же): размер шрифта, иногда высота блока, отступы, анимация и т.д.

Необходимо помнить, что функция calc() работает только с числовыми свойствами. Соединять строки

-> content: calc("I" + "am") - нельзя, будет ошибка

-> делить на 0 нельзя, будет ошибка

-> в медиазапросах она тоже не будет работать
@media(max-width: calc(22em - 10px))

Удобный инструмент, если начать им пользоваться ) Открыть/Комментировать

2021-12-07 09:22:54 #7 Осталось вспомнить про vmin / vmax

Если вспомнить vw/vh - то они берут процент от области экрана, например:
для экрана 1366px 10vw = 136.6px (т.е.10%)

Задавался вопрос - а в чем отличие от процентов? Процент (%) высчитывается от родителя, а vw - от размера браузера (viewport).

vmin - это процентная величина от ширины или высоты области просмотра. Но интересно то, что выбирается наименьшая величина.
Это как ? Например, вы держите телефон в вертикальном положении, ширина экрана для браузера - 414px , высота будет 1000+px . Получается, если зададим (например) кнопке ширину в 60vmin получится при таком раскладе ее ширина 60% от 414px (сколько это получится ? ). А когда я переверну телефон в горизонтальное положение размер будет высчитываться уже от высоты viewport (который будет 414px )

vmax - то же самое, только берется большее значение. Открыть/Комментировать