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

• 

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

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

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

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

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

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

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

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

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

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