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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Создание полноэкранного фонового изображения с использованием CSS

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

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

  Создание меню в ромбовидной сетке с использованием CSS

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

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

  Создание наклонного меню с использованием только CSS

  Дизайнеры постоянно создают макеты сайтов с наклонными меню, потому что такие меню «выглядят по-другому». Для понимания, что главным требованием к пользовательскому интерфейсу является четкость и ясность, требуется время. Это не означает, что меню на сайте должны быть однообразными и скучными: при использовании обычного горизонтального меню остается много возможностей. Нас заинтересовала возможность создания пунктов меню в [...]

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

  Создание анимированных градиентов CSS3

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

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