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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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