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

• 

  Верстка столбцами в стиле социального интернет-сервиса 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 Комментарий »
• 

  Создание галереи из четырех изображений

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

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

  Красивые таблицы с помощью шрифтов формата OpenType

  По умолчанию информация в ячейках таблиц HTML выглядит однообразно и неинтересно. Шрифты формата OpenType и код CSS3 могут использоваться для придания этой информации большей разборчивости и визуальной привлекательности шрифту при использовании цифр в таблице.

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

  Создание изогнутых теней элементов HTML

  В этом уроке мы расскажем, как создать видимость приподнятой тени на изогнутом фоне с помощью 32-битного изображения в формате png, созданного в программе Photoshop. Следующий код CSS можно применить к любому элементу HTML, имеющему дочерние элементы. В нашем примере это элемент статьи: 

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