Метка: HTML5

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

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

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

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

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

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

Как добавить кликабельные телефонные номера на сайт

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

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

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

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

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

Гамбургер-меню для адаптивных сайтов: использовать или нет?

Адаптивный дизайн — это инновационное решение для правильного отображения сайта на экранах с разным разрешением. Но самый спорный вопрос в адаптивном дизайне – это решить, как должно выглядеть меню. В этом посте мы поговорим о 3 вариантах навигационного меню для адаптивного сайта. Концепция адаптивного дизайна зарождалась как тренд, но сейчас стала просто необходимостью. Разработка Итана Маркотта попросту перевернула мир веб-дизайна еще в 2013 году. Именно это привело к кардинальным изменениям в навигации и интерфейсе и...

Специальные символы HTML

Если вам нужно вставлять в свои публикации специальные символы, которых нет на клавиатуре, вы можете использовать объекты HTML, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). В языке HTML есть много предопределенных спецсимволов. Чтобы вставить определенный символ в исходный код страницы, нужно использовать соответствующий HTML-код. Например, самый популярный HTML-код — это неразрывный пробел. Чтобы его вставить в исходный код, используйте     Некоторые спецсимволы можно просто копировать и вставлять. Чтобы HTML-объекты правильно...

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

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

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

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

Шпаргалка по jQuery для начинающих

Мы решили собрать всю основную информацию по jQuery (такую как работа с ядром, атрибутами, селекторами; манипуляция с DOM, события, эффекты, AJAX и др.) для начинающих в одном месте. Надеемся, что данная шпаргалка будет полезна всем программистам, вне зависимости от их уровня и опыта. (данная страница будет обновляться по мере наполнения информацией)   Ядро: Функции jQuery, Данные объекта, Данные, Взаимодействие Атрибуты: Attr, Значение, Класс, HTML, Текст   Селекторы: Основные, Иерархия, Основной фильтр, Форма, Атрибуты, Фильтр контента,...

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

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

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

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

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

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

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

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