верстка - Страница 18

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

Создание эффекта выцветшей фотографии с использованием CSS

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

Хотя этот эффект, вероятно, не так полезен, как другие эффекты с применением режимов наложения, он достаточно интересен, чтобы мы его подробно рассмотрели. В 1999 году Michael Bierut и Nicole Trice создали оформление для Architectural League’s Beaux Arts Ball того года. Это выдающийся образец графического дизайна, который можно воссоздать с помощью режимов наложения. Для начала, разметка:
Далее... 1 Комментарий »
Создание простых радиальных градиентов с использованием CSS

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

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

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

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

В этом уроке мы рассмотрим создание выпадающего меню на чистом CSS. Этот способ основан на применении элемента HTML флажка и интересном использовании классов и селекторов CSS без единой строки JavaScript. Демонстрацию работы этого способа и весь нужный код можно увидеть ниже. Также можно скачать полный исходный код по ссылке в конце урока.
Далее... 6 Комментариев »
Использование ключевых идей анимации: предварительные и заключительные события

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

В этом уроке мы покажем еще один вариант применения довольно известного способа создания объемного текста, вероятно, придуманного Mark Otto, дизайнером социальной сети Twitter, наша версия произошла от примера, созданного Trent Walton. Это не настоящий трехмерный текст, для которого понадобились бы трехмерные трансформации CSS и графическая библиотека WebGL, а имитация.
Далее... 1 Комментарий »