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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Далее... 2 Комментариев »
• 

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

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

  Далее... 9 Комментариев »
• 

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

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

  Далее... 2 Комментариев »
• 

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

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

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