Responsive menu
CSS: Responsive menu

Добрый день, уважаемые читатели! Мне часто пишут отзывы типа: «Больше! Еще больше статей по адаптивной верстке!». Так вот, сегодня будет именно такая статья. И сегодня мы разберем, как сделать несложное адаптивное меню. Перед тем, как приступить, рекомендую прочитать статью по…

Вес
Хак с весом селекторов CSS

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

css
CSS: CamelCase – отстой!

Если ваш код чистый, понятный и последовательный, то вам не о чем беспокоиться. Но есть один очень противоречивый метод написания кода – camel case. И если вы его используете – эта статья для вас.     Синтаксис CSS использует дефисы…

129-css-font-sizes
Интересное поведение em для font-size в Internet Explorer 9+

Добрый день, уважаемые читатели! Сегодня я хочу рассказать вам об одной интересной особенности поведения em значений для font-size в IE9+. Недавно я правил баг на одном из сайтов, связанный с тем, что размер шрифта у псевдоэлемента :before был в IE9+…

css
Разбираем Margin Collapsing

Добрый день, уважаемые читатели! Понимание, как происходит collapsing (схлопывание) margin-ов в CSS, может сделать жизнь web-разработчику намного легче. Давайте посмотрим, как работает схлопывание margin-ов в CSS.   Горизонтальный и вертикальный Margin Collapsing Горизонтальные margin-ы никогда не схлопываются. А вот с вертикальными…

adaptive-design
Адаптивная верстка: анимация

Доброго времени суток, уважаемые читатели! Взглянув на результат работы в статьях: Начинаем осваивать адаптивную верстку и Адаптивная верстка: media queries, я решил, что стоит немного украсить переходы между разрешениями шаблона. Сейчас мы наблюдаем очень резкое перестроение фотографий при изменении окна браузера: страница….

adaptive-design
Адаптивная верстка: media queries

Добрый день, уважаемые читатели! Сегодня я бы хотел продолжить обсуждение адаптивной верстки. В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус: На небольших экранах изображения будут слишком мелкими.   Как решить проблему?…

adaptive-design
Начинаем осваивать адаптивную верстку

Здравствуйте, уважаемые читатели! Наконец-то я решил начать освоение адаптивной верстки. Сегодняшняя статья будет небольшим введением в новое направление развития web-дизайна.   Итак, что такое адаптивная верстка? Википедия говорит: «Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение…

selection
Псевдо-эдемент ::selection

Псевдо-элемент ::selection появился в HTML5. ::selection определяет стиль подсветки выбранного текста. Для того, чтобы данный псевдо-элемент был кроссбраузерным, необходимо определить его следующим образом: ::-moz-selection { color: white; background: hotpink; } ::selection { color: white; background: hotpink; } Все браузеры, кроме…

css_29_9_13_mini
CSS: inherit, initital, unset, all

Добрый день! Сегодня я расскажу о четырех интересных ключевых словах CSS. Начнем!   Ключевое слово: inherit Сразу рассмотри пример: span { font-size: inherit; } В результате элемент span будет наследовать свойство font-size от родительского элемента. Если у родительского элемента не…