Открыть меню    
Bootstrap 3 сетка: основы

Bootstrap 3 сетка: основы

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

Читать полностью
Подсветить строку и колонку таблицы при помощи CSS

Подсветить строку и колонку таблицы при помощи CSS

Подсветить строку таблицы при помощи CSS достаточно легко: tr:hover {background: yellow;} и задача выполнена. Подсветить колонку всегда было немного сложнее, так как нет простого HTML-элемента, который бы являлся родителем ячейки таблицы в столбце.

Читать полностью
Формы HTML5: CSS

Формы HTML5: CSS

Эта статья будет второй в серии из трех о формах HTML5. В ней будет рассмотрено стилевой оформление полей, а если точнее – псевдоклассы, позволяющие акцентировать внимание на поле при разных состояниях. Напомню, что первая статья была посвящена основам разметки, ознакомиться с ней можно - Формы HTML5: Разметка, modernizr.

Читать полностью
Less

Less

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

Читать полностью
12 малоизвестных CSS фактов

12 малоизвестных CSS фактов

CSS не слишком сложный язык. Но даже, если вы пишите CSS долгие годы, вам, вероятно, все еще попадаются ранее неизвестные особенности языка – свойства (или значения), которые вы никогда не использовали или детали спецификации, которые вы никогда не знали.

Читать полностью
Отзывчивая таблица на CSS

Отзывчивая таблица на CSS

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

demo Читать полностью
Смещенный label играет роль placeholder для элементов input и  textarea

Смещенный label играет роль placeholder для элементов input и textarea

Например, есть текстовое поле и, соответственно, в нем присутствует текст-placeholder. Когда пользователь кликает по текстовому полю область с placeholder смещается к низу (или краю) текстового поля. На мой взгляд, довольно удобная практика; Brad Frost написал об этом подробную статью.

demo Читать полностью