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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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