css - Страница 19

Архив рубрики ‘css’

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

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

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

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

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

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

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

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

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

Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.
Далее... 2 Комментариев »