box-shadow и text-shadow в CSS3

В обоих случаях всегда код строится так:

...-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия>  <цвет>;

inset - выворачивает тень, направляя ее внутрь блока. У text-shadow такого свойства нет и это единственное различие между ними. Цвет является не обязательным параметром по умолчанию идет черный.

По умолчанию тень стремится сверху слева и вниз направо. Для изменения стороны можно применять знак минуса:

box-shadow:-8px -8px 20px #ff0000;

Исходный код блоков на скрине выше:

    box-shadow:inset 8px 8px 20px #ff0000;
    
    
    text-shadow:5px 5px 5px #333;

Чем выше радиус размытия, тем тень светлее и прозрачнее, а если уменьшить радиус в половину, от исходного выше, тогда получим скрин ниже. Как видно, тень приобрела более насыщенный тон и более не стремится слиться с фоном сайта!



Применяем еще одно удивительное свойство: border-radius и получаем уже совсем другой дизайн!