Метка: CSS3

Как создать простые кнопки с помощью CSS3

В сегодняшнем уроке мы на практике сделаем несколько классных, но простых, кнопок с помощью CSS3 стилей. Вы можете их использовать для красивого оформления пользовательского интерфейса своих проектов. Итак, приступим…   Шаг №1 – HTML код (каркас) Каркасный HTML-код очень простой, мы создадим 3 тега ссылки (<a>) с классом button, и, поскольку мы будем использовать три разных цветовых стиля, присвоим каждой ссылке свой класс для цвета. <html> <body> <div id="buttons"> <a href="#" class="button green">кнопка 1</a> <a...

9 онлайн платформ, на которых можно быстро поделиться кодом

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

Пример использования функции calc() для изменения размера шрифта в CSS

Ранее мы делали краткий обзор функции calc() в CSS. Сегодня мы хотим рассмотреть небольшой практический пример, который даст решение для плавного масштабирования размера шрифта в зависимости от размера экрана. Если ранее подобные задачи решались с помощью jQuery, то с появлением функции calc(), это можно сделать с помощью чистого CSS. Функция calc() позволяет делать простые математические вычисления прямо в CSS. А это позволяет легче создавать адаптивные макеты сайтов. Давайте рассмотрим один небольшой практический подход, который позволит...

Ознакомление с функцией calc() в CSS

Функция calc() в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами: сложение (+), вычитание (—), умножение (*) и деление (/). С помощью функции calc() вы можете рассчитать значения свойств CSS прямо во время их определения.     Пример синтаксиса функции calc() /* свойство: calc(математическое действие); */ width: calc(100% - 35px);   Математическое действие, которое можно выполнить для выражения,...

Основные виды 3D-трансформаций в CSS

Когда появились CSS-трансформации, с элементами стало возможным проводить разные преобразования: их можно смещать, поворачивать, наклонять, сдавливать и растягивать. А с помощью 3D-преобразований в CSS стали возможными еще более невероятные вещи. Они дают возможность разработчикам добавить новое измерение на свои сайты. Поначалу трехмерные трансформации могут показаться немного ошеломляющими, особенно если учесть, что HTML-холст (экран монитора) – это 2D-пространство. Но если вы представите себе, что ваш сайт имеет и глубину (вглубь экрана, или выступая из экрана), тогда...

Обзор свойства 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. К тому же практически каждый второй старый сайт содержит вирусы, что вредит не только имиджу школы, но и посетителям таких сайтов. Информация на сайтах размещается часто хаотично, долго не обновляется и вызывает сомнения. Поэтому мы решили изменить эту ситуацию и...