урок верстка - Страница 21

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

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

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

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

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

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

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

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

Режимы наложения, геометрия обрезки и фильтры делают многие эффекты, ранее доступные только в программе PhotoShop, создаваемыми и с помощью только CSS. Один из эффектов, который можно создать с помощью этих свойств CSS, – накладывание изображений для сравнений «до и после» или для получения других визуальных эффектов. Рассмотрим пример, в котором разместим фотографию лица Хью Джекмана над [...]
Далее... 1 Комментарий »
В чем разница между свойством прозрачности и значением rgba?

Многие начинающие веб-разработчики и веб-дизайнеры путают значение rgba и его эквивалент hsla со свойством прозрачности, используя их взаимозаменяемо до тех пор, пока не получат не имеющий смысла видимый результат. Это можно понять, так как и свойство прозрачности, и a, часть значения rgba, относятся к одному и тому же: уровню прозрачности. Но их применение и эффект сильно отличаются:
Далее... 3 Комментариев »
Классические типографские эффекты: цитата в автоматически добавляемых кавычках

Цитаты обычно используются в статьях для привлечения внимания к определенной фразе, теме или факту. Им обычно задается более заметный шрифт большего размера, чем текст абзацев, и чаще всего они заключаются в кавычки. Элемент <blockquote> (блок цитаты) наиболее подходит для цитат. Можно применить подобную запись для класса цитаты:
Далее... 2 Комментариев »