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

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

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

Хотя этот эффект, вероятно, не так полезен, как другие эффекты с применением режимов наложения, он достаточно интересен, чтобы мы его подробно рассмотрели. В 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 Комментарий »
Создание всплывающих подсказок с использованием CSS

При создании веб-приложения нередко может возникнуть необходимость в предоставлении пользователям дружественных всплывающих подсказок, объясняющих особенности интерфейса. Можно сделать это, используя ссылки на отдельные страницы с текстами, разъясняющими соответствующие темы. Но тогда пользователи могут забыть, чем они занимались до перехода по таким ссылкам, что не очень дружественно. Более удачный путь — показать разъясняющий текст прямо там, где [...]
Далее... 3 Комментариев »