Разбираем Margin Collapsing

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

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

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

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

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

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

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

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

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

CSS: inherit, initital, unset, all

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

Красивое оформление постраничной навигации

Добрый день, уважаемые читатели! Сегодня я хочу рассказать вам, как сделать красиво оформленную кроссбраузерную постраничную навигацию для сайта. Итак, приступим.   Разметка <div class="pagination"> <div class="prev"><a href="#">Предыдущая</a></div> <!— страницы —> <div><a href="#">1</a></div> <div><a href="#">2</a></div> <!— текущая страница —> <div><a class="active"…

Необычные шрифты

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

Прозрачность в web-дизайне: да или нет?

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

Минимальный код для CSS Transition

Вероятно, вы знаете, что transition определяется в CSS следующим образом: .example { transition: background-color .5s ease-out; } Или может быть использовали длинную форму записи: .example { transition-property: background-color; transition-duration: .5s; transition-timing-function: ease-out; } В обоих случаях мы явного определяли три…