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

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

Записи, помеченные ‘урок верстка’

  • Постоянная ссылка на Создание анимированных раздвигающихся изображений, закрывающих фон

    Создание анимированных раздвигающихся изображений, закрывающих фон

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Использование селектора only-of-type

    Использование селектора only-of-type

    Селектор :only-of-type используется для обращения к единственному элементу определенного типа, который находится в определенном окружении. В то время как селектор :only-child определяет только, является ли элемент единственным в блоке,  селектор :only-of-type проверяет, является ли элемент единственным элементом своего типа в блоке. Таким образом, если использовать следующую разметку HTML:

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

    Создание понятной и правильной таблицы HTML

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Изменяющийся при прокрутке фон на чистом 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 Комментариев »