Записи, помеченные ‘урок css3’
-
Простое анимированное горизонтальное меню с использованием 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 Комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191