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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Создание текстового эффекта с использованием режимов наложения

  Хотя этот эффект, вероятно, не так полезен, как другие эффекты с применением режимов наложения, он достаточно интересен, чтобы мы его подробно рассмотрели. В 1999 году Michael Bierut и Nicole Trice создали оформление для Architectural League’s Beaux Arts Ball того года. Это выдающийся образец графического дизайна, который можно воссоздать с помощью режимов наложения. Для начала, разметка: 

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

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

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

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

  Анимированная мигающая неоновая вывеска с использованием CSS

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

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