Такие свойства в CSS, как box-shadow и text-shadow невероятно универсальны, и позволяют добавлять тени к различным элементам и тексту, а также позволяют создавать крутые, многомерные эффекты. Если вы находитесь в воодушевленных поисках новых способов применения теней на сайте, вам стоит испытать этот список самых профессиональных, плавных и инновационных способов применения эффектов box-shadow и text-shadow в проекте.
1. Рассеянная тень.
В этом туториале показывается, как задать едва различимую тень блочному элементу. В примере тень, как бы рассеяна, таким образом добавляя больше реалистичности, чем при применении свойства box-shadow.
2. Эффект text-shadow при hover’е
Самое крутое в свойстве text-shadow то, что оно может быть использовано для создания уникального 3D эффекта. В этом сниппете показывается, как создать плавный эффект тени используя text-shadow с анимированным переходом при hover’е.
3. Пунктирная тень
В этом примере, как видите, создается эффект пунктирной тени. Несомненно будет веселее отойти от применения заезженных теней и добавить немного креативности.
4. Эффект длинной тени
Согласно автору этого урока, flat дизайн уже в прошлом. Вам, возможно, понравятся эти тени, если вы любитель 3D дизайна. В примере показано, как создать иконки, кнопки и текст с добавлением длинных теней для крутого 3D эффекта.
5. Текст с длинной тенью
А в этом примере тень немного рассеяннее и длиннее, чем в примере выше.
6. Эффект параллакса
Самый инновационный урок в этом списке. Тень в примере движется согласно прокрутке страницы. То есть, когда вы скроллите страницу вниз, то эффект тени появляется над текстом. Когда скроллите вверх, эффект возникает под текстом. Неплохой эффект, который вы можете использовать в любом из ваших проектов!
Статью перевел timurziev. Оригинал на Www.cssnewbie.com доступен по ссылке.