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

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

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

  • Постоянная ссылка на Горизонтальное меню с размытием неактивных пунктов на CSS

    Горизонтальное меню с размытием неактивных пунктов на CSS

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

    Далее... 9 Комментариев »
  • Постоянная ссылка на Использование единиц измерения vw и vh в создании современных сайтов

    Использование единиц измерения vw и vh в создании современных сайтов

    Некоторые свойства и значения свойств CSS обделены вниманием разработчиков или потому, что они не достаточно привлекательны, или потому, что их области применения на первый взгляд не очевидны. Хорошим примером последней ситуации являются единицы измерения vw, vh, vmax и vmin, которые уже давно являются частью спецификации CSS3, но не так уж давно поддерживаются современными версиями браузеров.

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание тени текста CSS

    Создание тени текста CSS

    Свойство тени текста может быть применено к любому текстовому элементу, но обычно не должно применяться к абзацам текста, лучше оставить это свойство для основных заголовков и меню. Мы изучим синтаксис, пример и некоторые распространенные ошибки при использовании этого свойства, для интересного и необычного использования этого свойства обратитесь к уроку «Создание горизонтального меню с размытием неактивных [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS

    Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS

    Фирменный стиль социального интернет-сервиса Pinterest включает вертикальные столбцы собранных заметок. Pinterest использует для создания такой верстки JavaScript, но в этом уроке мы рассмотрим, как воссоздать подобную верстку только с помощью CSS. Мы создадим свое решение, используя новаторские работы Kushagra Agarwal и выдающиеся иллюстрации Claire Hummel. 

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

    Проявляющиеся фотографии Polaroid с использованием переходов CSS

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

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

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание анимации фильтров изображений CSS

    Создание анимации фильтров изображений CSS

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

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

    Создание простой «мощеной» верстки с использованием Flexbox

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

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

    Создание прокручивающейся таблицы товаров

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

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