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

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

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

  • Постоянная ссылка на Создание простых масок CSS: изображения в фигурных рамках

    Создание простых масок CSS: изображения в фигурных рамках

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

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

    Создание ссылок со значками социальных сетей с использованием только CSS

    Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS   и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.

    Далее... 2 Комментариев »
  • Постоянная ссылка на Фоновые изображения в стиле поп-арт с помощью SVG и режимов наложения

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

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

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

    Создание простых масок CSS изображения с закругленными краями

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание закругления рамки

    Создание закругления рамки

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание почтовых марок из изображений с использованием свойства изображения рамки

    Создание почтовых марок из изображений с использованием свойства изображения рамки

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

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

    Создание блока с наклонной нижней рамкой

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

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

    Анимированные галереи изображений с использованием CSS3: эффекты плавного появления и прокрутки

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

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

    Эффекты гравитации, растягивания и сжатия с использованием анимаций CSS

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

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

Страница 4 из 37« Первая...23456102030...Последняя »