layout
Flexible Box
Flexible Box Layout Module – новая модель компоновки блоков в CSS3. Все тесты я делал на Chrome Canary (20.0.1093.0), поэтому вполне могут быть несоответствия, но все похоже на правду. Html во всех примерах: <section> <div>A</div> <div>B</div> <div>C</div> </section> display Flexbox модель начинает работать с того что мы определяем элемент контейнер как flexbox. Дальше флексбокс-элементами считаются [...]
Несколько способов верстки колонок
Метод float Не знаю как его назвать, пусть будет метод float. <div class="grid"> <div class="col"></div> <div class="col"></div> </div> grid – контейнер колонок, одновременно это решение проблемы схлопывания, contain float col – колонка. *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .grid {zoom: 1;margin:0 0 0 -2.083%;list-style:none;} .grid:before,.grid:after {content: “”;display: table;} .grid:after {clear: both;} .grid>[class^="col-"]{ float: left; margin:0 0 0 [...]
Верстка форм
Верстка форм это по сути верстка многоколончатой структуры, но дело усложняется тем что в дизайнерских макетах не часто встретишь строгую сетку и пропорции форм могут меняются даже в рамках одного сайта. Задача Общую конструкцию форм условно можно разделить на две группы – вертикальные и горизонтальные, или лучше – блочные и строчные. Пример блочной формы: Рис.1 [...]
Вертикальное центрирование
21 век, человек побывал на луне, сделан искусственный глаз, даже с зумом! и бля – нет простого очевидного способа вертикально выровнять элемент в CSS ) Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого: На самом деле в общем случае задача дробится на две – случай когда у [...]