Записи, помеченные ‘css’

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Использование media queries CSS

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

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

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

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

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

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

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

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