css - Страница 20

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

Фоновые изображения в стиле поп-арт с помощью SVG и режимов наложения

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

Большинство веб-дизайнеров используют свойство закругления рамки для закругления кнопок меню, блоков и подобного. С помощью творческого подхода можно еще применить это свойство к изображениям для создания эффекта простой маски. Для начала давайте возьмем изображение и применим к нему обычную рамку с помощью задания класса.
Далее... 1 Комментарий »
Создание закругления рамки

Свойство закругления рамки основывается на базовом свойстве рамки и превращает углы любого элемента в четверти эллипса. Значением этого свойства может быть любая единица измерения длинны CSS. Обратите внимание, современные версии всех браузеров поддерживают свойство закругления рамки без приставок производителей, которые нужны только очень старым версиям браузеров.
Далее... 2 Комментариев »
Создание почтовых марок из изображений с использованием свойства изображения рамки

В этом уроке мы покажем, как создать почтовую рамку из изображения, используя свойство изображения рамки. Если хотите узнать об этом свойстве больше, можете почитать о его технических подробностях. Зачем это может понадобиться? Обычно на конверте наклеена более чем одна марка. Если нам нужно изобразить это на веб-странице, у нас есть два варианта: переделать изображения в почтовые марки [...]
Далее... 1 Комментарий »
Создание блока с наклонной нижней рамкой

Сегодня поговорим о том, как создать наклонную нижнюю рамку, подобную показанной ниже. Этот урок можно считать посвященным новому взгляду на верстку веб-сайтов: долгое время мы полагались на сетки из трех столбцов и углы в 90 градусов. Но применив воображение, мы можем создать намного больше.
Далее... 2 Комментариев »
Анимированные галереи изображений с использованием CSS3: эффекты плавного появления и прокрутки

Галереи изображений, которые мы рассмотрим, основаны на простой галерее изображений и блоке с относительным позиционированием и абсолютно спозионированных изображениях в нем. Оба примера, эффекты плавного появления и прокрутки, используют простую разметку. Просто наведите указатель мыши на изображения, чтобы увидеть эффекты.
Далее... 1 Комментарий »
Эффекты гравитации, растягивания и сжатия с использованием анимаций CSS

Значения свойств ease-in и ease-out , используемые для улучшения анимации движения, могут быть также названы трением и инерцией, результатами гравитации. Гравитацию еще можно рассматривать как настроение: тяжелое, пугающее и скучное или легкое, привлекательное и игривое. Создавая такие типы движения с помощью CSS, можно оживить сайт привлекательным движением.
Далее... 2 Комментариев »
Меню для сайта рок-группы: хаотичное расположение с использованием трансформаций CSS

У большинства веб-сайтов строгая прямоугольная структура. А отличающиеся сайты обычно перегружены изображениями, что требует много работы в программе Photoshop. Но с помощью CSS можно создать непрямоугольный дизайн веб-сайта вообще без использования изображений.
Далее... 1 Комментарий »
Готовимся к приходу осени: создание падающих листьев с использованием CSS

Следом за жарким летом придет ветреная осень, так что уже сейчас пора учиться создавать анимацию CSS3 падающих листьев. Изображения листьев в формате PNG с прозрачными областями и 16 битным цветом, чтобы сократить размер файла, анимируются с помощью последовательности ключевых кадров CSS. Еще использованы трехмерные трансформаций CSS, чтобы поворачивать листья во время падения.
Далее... 1 Комментарий »