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

• 

  Создание галереи из четырех изображений

  Нам захотелось создать и рассказать Вам о создании небольшой галереи изображений: четыре изображения, собранные в квадрат, каждое из которых увеличивается при нажатии, с появлением подписи.

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

  Красивые таблицы с помощью шрифтов формата OpenType

  По умолчанию информация в ячейках таблиц HTML выглядит однообразно и неинтересно. Шрифты формата OpenType и код CSS3 могут использоваться для придания этой информации большей разборчивости и визуальной привлекательности шрифту при использовании цифр в таблице.

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

  Создание изогнутых теней элементов HTML

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

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

  Создание улучшенных адаптивных галерей изображений с использованием Flexbox

  Одна из самых распространенных проблем в адаптивном веб-дизайне — проблема «висячей строки». Легко расположить элементы примерно одинакового размера в одну строку, когда на это хватает места:

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

  Создание черно-белых изображений из цветных с использованием CSS

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

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

  Создание изогнутых теней с использованием только CSS

  Ранее мы рассказали, как создать изогнутую тень элементу HTML с помощью изображения тени в формате PNG, созданного в программе PhotoShop. Но нужно ли использовать программу для создания теней, если в CSS есть свойство тени блока? В этом уроке мы рассмотрим, можно ли создать изогнутые тени, используя только это свойство.

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

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

  Используя сочетание анимаций CSS, SVG и режимов наложения, можно создать эффект накатывания для изображений или другого содержимого всего за пять шагов. Этим мы и займемся в этом уроке.

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

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

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

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

  Создание эффекта выцветшей фотографии с использованием CSS

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

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