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

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

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

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

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

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Меню для сайта рок-группы: хаотичное расположение с использованием трансформаций CSS

    Меню для сайта рок-группы: хаотичное расположение с использованием трансформаций CSS

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

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

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Двухмерные трансформации CSS: наклон, масштабирование и сдвиг

    Двухмерные трансформации CSS: наклон, масштабирование и сдвиг

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Обзор единиц измерения CSS: углов, времени и частоты

    Обзор единиц измерения CSS: углов, времени и частоты

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Изображение Евы из ВАЛЛ-И с использованием только CSS

    Изображение Евы из ВАЛЛ-И с использованием только CSS

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание улучшенных диаграмм с помощью режимов наложения и SVG

    Создание улучшенных диаграмм с помощью режимов наложения и SVG

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Использование двухмерных трансформаций CSS: трансформация поворота

    Использование двухмерных трансформаций CSS: трансформация поворота

    Вероятно, наиболее полезная из всех трансформаций, трансформация поворота делает именно то, что можно ожидать из ее названия: поворачивает элемент. Браузер не должен догадываться об используемых единицах измерения, так что их нужно добавить в запись: радианы rad, повороты turn или градусы deg. Вот пример записи без приставок производителей, которые в этом случае и не понадобятся для большинства современных версий браузеров:

    Далее... 2 Комментариев »
  • Постоянная ссылка на Использование трансформаций CSS: вступление

    Использование трансформаций CSS: вступление

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

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

Страница 20 из 42« Первая...1018192021223040...Последняя »