Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Архив рубрики ‘css’

  • Постоянная ссылка на Изменяющийся при прокрутке фон на чистом CSS

    Изменяющийся при прокрутке фон на чистом CSS

    При создании презентаций часто используется способ, который мы назвали фоном, изменяющимся при прокрутке: при прокрутке страницы изображения на фоне скрываются и появляются. Этот способ хорош тем, что в нем содержимое сосредотачивается в нескольких броских изображениях и коротких текстах. Однако, этот эффект часто создается с помощью загрузки сложной программной платформы JavaScript и плагина, что, как будет показано [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Эффектов изысканных паспарту для изображения с использованием CSS

    Эффектов изысканных паспарту для изображения с использованием CSS

    При создании эффектов обрамления большинство дизайнеров выбирают один из двух вариантов: или рисуют рамку полностью в программе Photoshop, или создают много вложенных друг в друга блоков HTML, которым задают стили с помощью кода CSS. В этом уроке мы не будем детально объяснять, как создать эффекты сложных рамок с помощью свойства рамки изображения, а расскажем о более утонченном [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание простого адаптивного тянущегося меню

    Создание простого адаптивного тянущегося меню

    Очень часто горизонтальным меню нужно растягиваться при изменении размера окна браузера. Хотя для создания такой верстки можно использовать flexbox, и в этом есть свои преимущества, есть и другой, часто упускаемый из вида способ, который даже несколько более универсален и сработает в гораздо большем количестве версий браузеров, особенно старых.

    Далее... 1 Комментарий »
  • Постоянная ссылка на Анимированные внутренние подписи на фоне изображений с применением фильтров

    Анимированные внутренние подписи на фоне изображений с применением фильтров

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание сброса для кода CSS

    Создание сброса для кода CSS

    У каждого браузера неизбежно есть небольшая разница в значениях по умолчанию для разных элементов. Например, у браузера Internet Explorer значение внешнего отступа тега bodyпо умолчанию отличается на 1 пиксель от значений других браузеров. Браузер Firefox создаст промежуток между верхом страницы и элементом заголовка, если элемент заголовка расположен первым на странице, что соответствует спецификации W3C, а [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

    Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

    Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования [...]

    Далее... 2 Комментариев »
  • Постоянная ссылка на Горизонтальное меню с размытием неактивных пунктов на CSS

    Горизонтальное меню с размытием неактивных пунктов на CSS

    Мы решили создать интересное меню без использования наборов изображений, с помощью только CSS, в котором вместо стандартного подсвечивания выбранного пункта размываются неактивные пункты, оставляя выбранный пункт четким. Если перестараться с размытием, то меню может выглядеть странно и нечитабельно, но ситуацию спасает то, что когда указатель мыши находится не на меню, все меню в фокусе, так что [...]

    Далее... 9 Комментариев »
  • Постоянная ссылка на Использование единиц измерения vw и vh в создании современных сайтов

    Использование единиц измерения vw и vh в создании современных сайтов

    Некоторые свойства и значения свойств CSS обделены вниманием разработчиков или потому, что они не достаточно привлекательны, или потому, что их области применения на первый взгляд не очевидны. Хорошим примером последней ситуации являются единицы измерения vw, vh, vmax и vmin, которые уже давно являются частью спецификации CSS3, но не так уж давно поддерживаются современными версиями браузеров.

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание тени текста CSS

    Создание тени текста CSS

    Свойство тени текста может быть применено к любому текстовому элементу, но обычно не должно применяться к абзацам текста, лучше оставить это свойство для основных заголовков и меню. Мы изучим синтаксис, пример и некоторые распространенные ошибки при использовании этого свойства, для интересного и необычного использования этого свойства обратитесь к уроку «Создание горизонтального меню с размытием неактивных [...]

    Далее... 1 Комментарий »