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

Дизайн-журнал №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, в котором вместо стандартного подсвечивания выбранного пункта размываются неактивные пункты, оставляя выбранный пункт четким. Если перестараться с размытием, то меню может выглядеть странно и нечитабельно, но ситуацию спасает то, что когда указатель мыши находится не на меню, все меню в фокусе, так что [...]

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

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

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

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

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS

    Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS

    Фирменный стиль социального интернет-сервиса Pinterest включает вертикальные столбцы собранных заметок. Pinterest использует для создания такой верстки JavaScript, но в этом уроке мы рассмотрим, как воссоздать подобную верстку только с помощью CSS. Мы создадим свое решение, используя новаторские работы Kushagra Agarwal и выдающиеся иллюстрации Claire Hummel. 

    Далее... Нет комментариев »
  • Постоянная ссылка на Проявляющиеся фотографии Polaroid с использованием переходов CSS

    Проявляющиеся фотографии Polaroid с использованием переходов CSS

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

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

Страница 1 из 29123451020...Последняя »