Посты с тегом "css"

Почему я не использую препроцессоры

Когда я говорю кому либо что я не использую CSS препроцессоры я получаю в ответ странное выражение лица, само собой от людей который мне могут себе представить как можно писать CSS без, например, Sass. Ну и само собой мне приходиться снова и снова защищать свою позицию и обьяснять почему. Кто то понимает, кто то нет, большинство нет. Или не хотят. Сейчас я попробую сделать это еще раз.

...

Модульный CSS и селекторы атрибутов

Несколько месяцев назад мне попалась статья Гарри Робертса в которой он представил интересную концепцию работы с сопряженными классами в CSS. В этой статье он предложил использовать символы [ ] для группировки классов для того чтобы быстро распознать их смысл при беглом просмотре. Он приводит данный пример, утверждая что в таком виде декларация стилей становится более "распознавабельной":

...

Основы работы с SVG

SVG это формат векторной графики, буквально означающий Масштабируемая Векторная Графика. Собственно это то с чем вы работаете в Иллюстраторе. SVG использовать в вебе довольно просто но тем не менее есть куча того что необходимо знать.   ...

Странный button

Речь пойдет о верстке кнопок. Когда верстаются кнопки обычно делается несколько модификаций, в том числе модификаций размера. Меня сейчас интересуют изменения отступов при изменении размера шрифта кнопки. Так это делается в бутстрапе:   ...

Radial Gradient

Как-то не часто сталкивался с необходимостью делать радиальный градиент средствами css.   ...

Проблемы с элементами форм

Еще до рождения спецификации CSS level 2 элементы форм уже работали во всех основных браузерах.   ...

Пример верстки на flexbox

До использования флексбокс модели еще далеко но интересно попробовать как она решает типовые проблемы.   ...

Flexbox

Flexible Box Layout Module – новая модель компоновки блоков в CSS3.   ...

Text Rendering

Свойство text-rendering определяет как браузеру оптимизировать рендеринг текста.   ...

Clip

Свойство clip – определяет фрагмент элемента который мы хотим сделать видимым, а остальное брезать.   ...

Flexbox (April 2012)

Flexible Box Layout Module – новая модель компоновки блоков в CSS3.   ...

Размерности в CSS, стиль 2011

Годами при создании сайтов мы использовали пикселы как единицу измерения. Затем пришел Em, который заменил пиксел при построении резиновых макетов. И вот, нынче (2011), все ломанулись изучать плавающую компоновку (responsive grids), использовать проценты и гибкие макеты.   ...

Несколько способов верстки колонок

Не знаю как его назвать, пусть будет метод float.   ...

Верстка форм

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

Оформление кода

Наверно любой верстальщик иногда анализирует код когда встречает какую либо прикольную фишку на сайтах.   ...

Вертикальное центрирование

21 век, человек побывал на луне, сделан искусственный глаз, даже с зумом! и бля – нет простого очевидного способа вертикально выровнять элемент в CSS )   ...

Золотая спираль

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

Множественный фон

Как для меня так множественные фоновые картинки как возможность из CSS3 намного поинтереснее заюзанных переюзанных скругленных мать их уголков. Скругляется щас все и везде, царапаются что ли острые углы на кнопках ). Ладно.   ...

Border image

Очень удобная штука если вам надо сделать что то типа такого:   ...

Псевдоселектор :target

Элемент target это элемент с идентификатором (ID) на который мы ссылаемся ссылкой типа – site.com/page.html#id. И псевдокласс :target как раз срабатывает при обращении к этому элементу. К примеру селектор #someid:target сработает когда мы сошлемся на этот элемент – site.com/page.html#someid.   ...