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

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

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

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

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

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Использование media queries CSS

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Обзор единиц измерения 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 Комментариев »
  • Постоянная ссылка на Простое анимированное горизонтальное меню с использованием HTML5 и CSS

    Простое анимированное горизонтальное меню с использованием HTML5 и CSS

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

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

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

    Нас заинтересовала демонстрация трехмерных очков с использованием режимов наложения CSS, созданная Bennett Feely. Вдохновившись его творением, мы решили создать свой вариант, используя настоящую стереоскопическую фотографию.

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