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

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

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

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

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

    Накладывающийся поверх фоновых изображений слой часто используется для создания контрастного фона для текста, и раньше он был ограничен одним цветом, иногда вместе с прозрачностью. И с этим ограничением было немного скучно. Для дизайнеров режим наложения 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 Комментариев »
  • Постоянная ссылка на Создание древовидного разворачивающегося меню

    Создание древовидного разворачивающегося меню

    Древовидные меню — вертикально расположенные меню с вложенными подменю, которые становятся видны после нажатия или наведения указателя мыши на их родительские пункты меню. Древовидные меню иногда анимируют с помощью JavaScript или CSS, в этом уроке мы рассмотрим раскрывающийся вариант такого меню, созданный на чистом и простом CSS.

    Далее... 1 Комментарий »
  • Постоянная ссылка на Улучшенные рамки изображения с помощью режима наложения

    Улучшенные рамки изображения с помощью режима наложения

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Классические типографские эффекты с использованием CSS: первая строка вступления

    Классические типографские эффекты с использованием CSS: первая строка вступления

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Использование отрицающего псевдокласса CSS3

    Использование отрицающего псевдокласса CSS3

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

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

Страница 22 из 42« Первая...1020212223243040...Последняя »