18 примеров которые можно создать с помощью тени на CSS3

10 644 любопытных

Сейчас с помощью CSS3 можно создать очень много забавных вещей, которые нельзя было сделать без использования скриптов. Но в настоящее время всё по другому. Сегодня мы с Вами рассмотрим несколько примеров того, как дизайнеры играются с тенью на CSS3, и выходит у них это очень даже хорошо. они создают разные полезные элементы, которые будут очень полезны новичкам и профессионалам. Так что не пропускайте эту подборку.

Спасибо огромное http://www.hongkiat.com и рекомендую к просмотру:

Кнопки с тенью на CSS3

See the Pen <a href="http://codepen.io/soulwire/pen/bKens/">Squishy Toggle Buttons</a> by Justin Windle (<a href="http://codepen.io/soulwire">@soulwire</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Длинная тень для текста на сайте

See the Pen <a href="http://codepen.io/roikles/pen/xbydH/">Long Shadow Gradient Mixin</a> by roikles (<a href="http://codepen.io/roikles">@roikles</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Flat тень на CSS3для разных объектов на Вашем сайте

See the Pen <a href="http://codepen.io/hugo/pen/xzjGB/">Shade — Shadow Mixin</a> by Hugo Darby-Brown (<a href="http://codepen.io/hugo">@hugo</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Разнообразная CSS3 тень для блоков на сайте

See the Pen <a href="http://codepen.io/jcorpus/pen/xbExKL/">Shadow</a> by Julio Corpus (<a href="http://codepen.io/jcorpus">@jcorpus</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Бильярдные шары на CSS3

See the Pen <a href="http://codepen.io/Abderrahmane-TJ/pen/ewrDJ/">one element, multiple shadows</a> by Abderrahmane-TJ (<a href="http://codepen.io/Abderrahmane-TJ">@Abderrahmane-TJ</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Цифра 257 в 3D

See the Pen <a href="http://codepen.io/creme/pen/lGDuK/">257</a> by creme (<a href="http://codepen.io/creme">@creme</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Иконка от Apple Store с тенью на CSS3

See the Pen <a href="http://codepen.io/joshbader/pen/xbrBrN/">Apple Store Icon</a> by Josh Bader (<a href="http://codepen.io/joshbader">@joshbader</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Тень градиент для призрачных кнопок на CSS3

See the Pen <a href="http://codepen.io/akwright/pen/raBdOO/">Gradient Ghost Buttons</a> by Alex (<a href="http://codepen.io/akwright">@akwright</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Пиксельный Бэтмен с использованием тени на CSS3

Холодное пиво

Перей ти

3d текст с использованием тени на CSS3

See the Pen <a href="http://codepen.io/zitrusfrisch/pen/wvcxy/">3D-Text with Text-Shadow</a> by Daniel Riemer (<a href="http://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимационная тень для текста

See the Pen <a href="http://codepen.io/carpenumidium/pen/hHjEJ/">[webkit] Animated «text-shadow» pattern</a> by carpe numidium (<a href="http://codepen.io/carpenumidium">@carpenumidium</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Интересная тень для большого текста на сайте

See the Pen <a href="http://codepen.io/chriseisenbraun/pen/upmDB/">CSS Text Shadow</a> by Chris Eisenbraun (<a href="http://codepen.io/chriseisenbraun">@chriseisenbraun</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Крутая тень для слоёв

See the Pen <a href="http://codepen.io/snhasani/pen/FoeBK/">Nar Sang</a> by Naser Hassani (<a href="http://codepen.io/snhasani">@snhasani</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимационный счётчик с использованием тени на CSS

See the Pen <a href="http://codepen.io/martingrand/pen/pqxtc/">seconds counter</a> by Martin Grand (<a href="http://codepen.io/martingrand">@martingrand</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимационный пиксельный паттерн

See the Pen <a href="http://codepen.io/yoksel/pen/vmEdI/">Just playing with ShadowPainter</a> by yoksel (<a href="http://codepen.io/yoksel">@yoksel</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимационный цветные круги, которые смешиваются

See the Pen <a href="http://codepen.io/jaicab/pen/xicaj/">Mixing colors with box-shadow</a> by Jaime Caballero (<a href="http://codepen.io/jaicab">@jaicab</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Радужные круги на CSS3

See the Pen <a href="http://codepen.io/colin/pen/elmIy/">Rainbow Circle</a> by Colin McClure (<a href="http://codepen.io/colin">@colin</a>) on <a href="http://codepen.io">CodePen</a>.<br />

#Похожее:

генератор случайных палитр.

10 мощных инструментов для подбора цвета

Анимированные фоны для сайта на CSS и JavaScript

Анимированные фоны для сайта на CSS и JavaScript

Эффекты при наведении

Крутые эффекты для сайта, которые реагируют на движение курсора на JS и CSS

gradient text

Как сделать градиент для текста на чистом CSS

10 CSS-фильтров для изображений с примерами кода

Интерактивные элементы

Вам и не снилось, что можно сейчас сделать на чистых CSS и HTML (С примерами)

Тень для элементов на сайте на чистом CSS и совершенно бесплатно

Крутые кнопки и формы для сайта на CSS

10 ретро игр, которые работают на HTML, JS и CSS

Scroll Up