Записи, помеченные ‘верстка’
-
Анимированные галереи изображений с использованием 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 Комментариев » -
Обзор единиц измерения CSS: углов, времени и частоты
Сегодняшний урок CSS будет интересен тем, кто хочет глубже изучить свойства единиц измерения CSS. На самом деле с их помощью можно сделать намного больше, чем кажется на первый взгляд. К примеру, кроме линейных единиц измерения, с помощью CSS можно задавать углы и изменения, связанные со временем. И ниже речь пойдет именно об этом.
Далее... 2 Комментариев » -
Изображение Евы из ВАЛЛ-И с использованием только CSS
Вдохновившись произведениями искусства, созданными с помощью CSS, мы решили создать что-то подобное сами: изображение Евы, героини анимационного фильма ВАЛЛ-И студии Pixar. Разметка здесь довольно простая: используется один блок с относительным позиционированием, в котором находятся несколько блоков с абсолютным позиционированием, которые создают изображение Евы и которые согласно свойству отображения CSS, располагаются относительно содержащего их родительского блока. [...]
Далее... 2 Комментариев » -
Создание улучшенных диаграмм с помощью режимов наложения и SVG
Интересное применение режимов наложение — улучшение внешнего вида диаграмм и графиков. Сегодня мы испробуем этот метод на живом примере, который известен каждому. Мы возьмем классическую диаграмму Эйлера — Венна, иллюстрирующую принцип «быстро, дешево, качественно».
Далее... 2 Комментариев » -
Использование двухмерных трансформаций CSS: трансформация поворота
Вероятно, наиболее полезная из всех трансформаций, трансформация поворота делает именно то, что можно ожидать из ее названия: поворачивает элемент. Браузер не должен догадываться об используемых единицах измерения, так что их нужно добавить в запись: радианы rad, повороты turn или градусы deg. Вот пример записи без приставок производителей, которые в этом случае и не понадобятся для большинства современных версий браузеров:
Далее... 2 Комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191