Метка: CSS3

Обзор свойства line-height в CSS-стилях

С помощью свойства line-height в CSS устанавливается величина пространства между строками. В блочных элементах свойство влияет на минимальную высоту строк внутри элемента. Для встроенных элементов это свойство влияет на высоту, которая используется для вычисления высоты коробки (блока) строки. Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).   Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента....

Разбираем свойство display в CSS

Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block, inline и none. Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.     Прежде чем мы поговорим о свойстве display, мы должны упомянуть...

Расширенные селекторы CSS, о которых нужно знать

С помощью CSS можно создавать поистине потрясающие сайты. А правильный подход к использованию стилей позволяет реализовать практически любые идеи в веб-дизайне. И одним из главных моментов здесь является эффективное использование селекторов. С помощью селекторов можно придать уникальные стили даже самым «отдаленным» элементам в DOM. Но иногда бывает так, что обычные селекторы не подходят для решения этой задачи. Например, когда код, и соответственно элементы DOM, генерируется динамически. К счастью для верстальщиков, доступ к некоторым динамическим селекторам...

Использование различных свойств размера шрифта в CSS-стилях

В CSS есть масса различных свойств, которые позволяют влиять на размер шрифта. Кроме этого разнообразия, у данных свойств фактическая величина их значения часто вычисляется браузерами по-разному. Все это обусловлено исторически и по мере развития технологий. Одни свойства устаревают, а другие появляются и становятся популярными. Например, сегодня некоторые свойства уже считаются устаревшими (ex, pt, pc и др.), а другие наоборот становятся все более популярными (vh, vw, vmin и vmax). Последние свойства завоевали любовь веб-дизайнеров благодаря своей...

Какие элементы можно (и нужно) размещать в футере сайта

Разработка оптимального футера (подвала, нижней части, нижнего колонтитула) сайта не всегда находится в списке приоритетов веб-дизайнера. Учитывая то, что футер находится в самом низу веб-страницы, легко предположить, что большинство посетителей сайта его почти не замечают, и поэтому не все разработчики уделяют ему достаточно внимания. Хотя футер, на самом деле, является очень важной частью любого сайта. По данным специального исследования, около 70% посетителей могут прокручивать сайт до футера, а примерно 25% посетителей всегда будут прокручивать сайт...

Ускоряем свой CSS

Вы когда-нибудь думали о размере файлов CSS-стилей на своем сайте? Ведь если эти файлы имеют большой вес, это негативно скажется на загрузке (отрисовке) страницы. Хотя CSS-файлы сайта в основном весят не много, они очень важны в момент загрузки сайта в браузере. Поскольку браузер блокирует отображение страницы до полной загрузки CSS, эти файлы должны быть максимально легкими. В сегодняшней статье мы рассмотрим несколько советов, которые помогут вам уменьшить размер CSS-файлов, а также ускорить рендеринг страниц сайта....

Лучшие практические рекомендации по веб-дизайну

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

Советы по оптимизации мобильного веб-дизайна

В последние годы мобильный трафик значительно вырос и эта тенденция сохраняется. Поэтому важно уделять особое внимание оптимизации своих проектов под мобильные устройства. В этой статье мы рассмотрим практические советы по оптимизации веб-дизайна под мобильные устройства.     №1: Использование нескольких изображений в сочетании с медиа-запросами Надеемся, что вы уже знакомы с медиа-запросами. Для мобильного дизайна медиа-запросы являются почти основополагающими. В настоящее время проблема с медиа-запросами заключается в том, что многие дизайнеры и разработчики создают сайты...

Псевдоклассы в CSS – минимальный набор знаний

Псевдокласс в CSS стилях – это ключевое слово, которое при добавлении к селектору определяет его особое состояние. К примеру, псевдокласс :focus позволяет применять особые CSS-стили для элементов, которые находятся в фокусе (например, можно подсвечивать фокусное поле ввода формы цветом, отличным от других используемых цветов формы).   Синтаксис: селектор:псевдокласс { свойство: значение; } пример .content:hover { background-color: #06a79d; }     Основные псевдоклассы CSS: :active – придает стиль активной ссылке :checked – используется для элементов (например, checkbox и radio), когда они отмечены...

Социальный проект — сайт-визитка каждой школе Житомира

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

Использование Flexbox в CSS3 для адаптивного дизайна

В этой статье хотим более детально остановиться на использовании flexbox в CSS3, в качестве одного из продвинутых способов достижения адаптивности на сайте. При создании CSS сложность макетов была не такой, какой она бывает в наши дни. Раньше макеты были с фиксированной шириной и небольшими вариациями расположения блоков, а сегодня макеты сайтов могут приобретать практически любые очертания. Все это заставляет разработчиков придумывать хаки для CSS, чтобы контент отображался более-менее правильно.   Flexbox (гибкие коробки) – это...

Основные способы вертикального выравнивания элементов в CSS

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

Основные трюки CSS стилей для начинающих вебмастеров

Бывают ситуации при веб-разработке, когда требуются быстрые решения и наиболее простым выходом будет использование простых, но эффективных CSS-трюков. Некоторые трюки настолько простые, что веб-дизайнеры о них и не задумываются и используют их в автоматическом режиме. А для использования некоторых CSS-трюков приходится немного «погуглить», чтобы убедиться, что тот, или иной способ используется верно. Мы решили собрать основные способы программирования CSS в одном месте. Поэтому, в этом посте вы найдете наиболее часто используемые решения при работе со...

Скошенные края блоков с помощью CSS-масок и трансформаций

С помощью угловатых, скошенных краев у различных html-элементов (картинок, блоков, целых секций) можно придать уникальный вид любой веб-странице. В этой статье мы рассмотрим практические примеры того, как легко можно добавить скошенные края любому html-элементу с помощью простых методик CSS-масок и CSS-трансформаций.     Чтобы создать углы для краев элементов с помощью CSS трансформаций обычно приходится «перекашивать» родительский элемент, а затем «отвязывать» дочерний элемент, но такой метод имеет ряд лишних ограничений. А что делать, если нужно...

Ознакомление с CSS-анимацией (animation)

В прошлой статье мы делали краткий обзор CSS-переходов, а в этом посте проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-анимации. Эти два новых свойства в CSS3 позволяют создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Также, в сегодняшнем посте, рассмотрим практический пример применения свойства animation в CSS.   Анимация в CSS3 уже сегодня используется практически всеми современными веб-дизайнерами, несмотря на более высокие стандарты и требования к браузерам. Поскольку эти новшества...