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

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

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

  • Постоянная ссылка на Создание анимированных градиентов CSS3

    Создание анимированных градиентов CSS3

    Спецификация переходов CSS3 содержит список всех свойств, которые можно анимировать. Этот список, насколько нам известно, содержит свойства, которые можно анимировать как с помощью переходов, так и анимаций ключевых кадров. Но это список именно свойств. И так как градиенты CSS3 не совсем свойства, а фактически изображения, создаваемые браузером, их нет в этом списке свойств, которые можно анимировать. [...]

    Далее... 2 Комментариев »
  • Постоянная ссылка на Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения

    Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения

    Режимы наложения, геометрия обрезки и фильтры делают многие эффекты, ранее доступные только в программе PhotoShop, создаваемыми и с помощью только CSS. Один из эффектов, который можно создать с помощью этих свойств CSS, – накладывание изображений для сравнений «до и после» или для получения других визуальных эффектов. Рассмотрим пример, в котором разместим фотографию лица Хью Джекмана над [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на В чем разница между свойством прозрачности и значением rgba?

    В чем разница между свойством прозрачности и значением rgba?

    Многие начинающие веб-разработчики и веб-дизайнеры путают значение rgba и его эквивалент hsla со свойством прозрачности, используя их взаимозаменяемо до тех пор, пока не получат не имеющий смысла видимый результат. Это можно понять, так как и свойство прозрачности, и a, часть значения rgba, относятся к одному и тому же: уровню прозрачности. Но их применение и эффект сильно отличаются:

    Далее... 3 Комментариев »
  • Постоянная ссылка на Классические типографские эффекты: цитата в автоматически добавляемых кавычках

    Классические типографские эффекты: цитата в автоматически добавляемых кавычках

    Цитаты обычно используются в статьях для привлечения внимания к определенной фразе, теме или факту. Им обычно задается более заметный шрифт большего размера, чем текст абзацев, и чаще всего они заключаются в кавычки. Элемент <blockquote> (блок цитаты) наиболее подходит для цитат. Можно применить подобную запись для класса цитаты:

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание улучшенных фонов с помощью режима наложения

    Создание улучшенных фонов с помощью режима наложения

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

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

    Создание анимированных подчеркиваний для ссылок

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

    Далее... 4 Комментариев »
  • Постоянная ссылка на Использование свойства CSS тени блока

    Использование свойства CSS тени блока

    Сегодня мы поговорим об использовании свойства CSS тени применительно к блокам. Так же, как свойство тени текста создает тень тексту, свойство тени блока создает тень всем остальным объектам. Для него даже используется подобный простой синтаксис с пятью значениями:

    Далее... 1 Комментарий »
  • Постоянная ссылка на Имитация события JavaScript “onmouseout” с помощью переходов CSS3

    Имитация события JavaScript “onmouseout” с помощью переходов CSS3

    В этом уроке мы рассмотрим интересные возможности переходов CSS3. Мы покажем, как сделать так, чтобы у элемента был переход при событии “mouseout” или “mouseleave”, т. е., при отведении указателя мыши от элемента, но не было перехода при событии “mouseover” или “mouseenter”, т. е., при наведении указателя мыши. Вот нужный код CSS:

    Далее... 1 Комментарий »
  • Постоянная ссылка на Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле

    Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле

    Большей части галерей изображений на сайтах нужно подгружать как минимум два варианта каждого изображения: уменьшенное изображение и его полноразмерную версию. У этого подхода есть свои преимущества, но и немало раздражающих недостатков. Свойство object-fit может использоваться для улучшения галерей изображений. Единственный недостаток этого способа — уменьшенные изображения будут выглядеть сжатыми в браузерах, которые не поддерживают это свойство, [...]

    Далее... 2 Комментариев »