Sass цвета: используем функции помощники

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

Slide Up или Slide Down без jQuery, используя только CSS

Раньше, чтобы сделать анимацию нам бы потребовалась какая-нибудь библиотека, например jQuery, сегодня у нас есть CSS. В целом, и про него тоже можно забыть, потому что существует такое решение как Animate.css. В этой записи я покажу как сделать методы slideDown() и slideUp() из jQuery с помощью обычного CSS (не используя библиотеки и сторонние методы).
Читать далее…

Как добавить кавычки в CSS для псевдоклассов (::before/::after)

В последнее врем в разработке стали часто использоваться псевдоклассны ::before и ::after. Я, сам лично, часто использую их как помощников для дополнительного оформлению элементов на странице. 
Читать далее…

Варианты урезания строк в CSS/JavaScript

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

Как исправить горизонтальный скролл на сайте

Верстальщики во время разработки сайта как правила сталкиваются с проблемой горизонтального скролла. В чем проблема? Откуда он появился? И как это исправить? Именно об этой и пойдет речь в этой записи. 
Читать далее…

Почему мой CSS не отображается корректно?

Во время разработки сайта вы должны учитывать огромное количество правил. Во время создания веб-страниц важно всегда помнить о DOCTYPE, так как именно он говорить браузеру о версии HTML. 
Читать далее…

:checked псевдокласс — что это такое и как им пользоваться ?

:checked — это псевдокласс, который используется для определения состояния radio(<input type="radio">), checkbox (<input type="checkbox">) или option (<option> в <select></select>). Например, если вы поставили галочку в checkbox поле, то :checkbox поможет определить это. Ниже я покажу несколько примеров использования этого псевдокласса.
Читать далее…

Старые записи »