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. Дальше флексбокс-элементами считаются [...]
Годами при создании сайтов мы использовали пикселы как единицу измерения. Затем пришел Em, который заменил пиксел при построении резиновых макетов. И вот, нынче (2011), все ломанулись изучать плавающую компоновку (responsive grids), использовать проценты и гибкие макеты. Все эти методы появлялись и каждый отменял предыдущый. Я считаю, тем не менее, что правильный метод заключается в использовании [...]
Метод 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 [...]
Наверно любой верстальщик иногда анализирует код когда встречает какую либо прикольную фишку на сайтах. Иногда еще и сохраняет куски кода для последующей медитации на нем. Мне больше нравится слово тупить но оно слегка предсказывает результат ) Короче говоря, мне было интересно посмотреть как верстается и оформляется показ кода разными верстальщиками. ryanfait.com <ol class="code"> <li><input type="radio" [...]
В веб разработке мы постоянно имеем дело с блоками, «строительными кирпичами» веба. Несмотря на кажущуюся простоту этого элемента, у которого есть два принципиальных параметра, высота и ширина, выбор не является тривиальным делом. Но у нас есть золотое сечение, приблизительно 1:1.618, проверенное столетиями в архитектуре, книгоиздании, а теперь еще и в твитере. Математическая уникальность Золотая пропорция уникальна тем что если удалить из нее квадратную область то оставшийся прямоугольник опять будет иметь [...]
21 век, человек побывал на луне, сделан искусственный глаз, даже с зумом! и бля – нет простого очевидного способа вертикально выровнять элемент в CSS ) Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого: На самом деле в общем случае задача дробится на две – случай когда у [...]
Элемент target это элемент с идентификатором (ID) на который мы ссылаемся ссылкой типа – site.com/page.html#id. И псевдокласс :target как раз срабатывает при обращении к этому элементу. К примеру селектор #someid:target сработает когда мы сошлемся на этот элемент – site.com/page.html#someid. Три раза переписывал, все равно отстой ) Этот селектор можно использовать нетипичным способом. Например при обращении [...]
Как для меня так множественные фоновые картинки как возможность из CSS3 намного поинтереснее заюзанных переюзанных скругленных мать их уголков. Скругляется щас все и везде, царапаются что ли острые углы на кнопках ). Ладно. Надо было сверстать вот такой блок. Само собой данные в столбцах могут изменится как угодно, поэтому нужно чтобы вся конструкция тянулась в [...]
Очень удобная штука если вам надо сделать что то типа такого:
Как то в одной из работ встала задача сделать фон страницы градиентом, вот в таком духе: