При разработке очередного сайта мне пришлось много повозиться с CSS, и в этом посте я хочу выложить некоторые используемые мной приёмы!

Самое простое, что может понадобиться это добавление тени к тексту, в CSS это реализуется следующим кодом:

text-shadow: 1px 1px 0px #f8f8f8;

расшифровывается это следующим образом:

text-shadow: <сдвиг по x> <сдвиг по у> <радиуc размытия> <цвет тени>

Также будет логично описать добавление тени к контейнеру:

box-shadow: 1px 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Для Firefox */

-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Для Safari и Chrome */

Здесь впринципе всё тоже самое, только добавились отдельные строчки для браузеров Firefox, Safari и Chrome т.е. так называемый кроссбраузерный код. Чтобы вывести тень внутри элемента, нужно добавить параметр inset.

Скруглить края элемента поможет следующий, опять же кроссбраузерный код:

border-radius: 0px 9px 0px 9px;

-moz-border-radius:0 9px 0px 9px;

-khtml-border-radius: 0 9px 0px 9px;

Средствами CSS можно также сделать градиент, для этого используется такой код:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00A3F7′,
endColorstr=’#ffffff’); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#00A3F7), to(#fff)); /* for webkit browsers */

background: -moz-linear-gradient(top, #00A3F7, #fff); /* for firefox 3.6+ */

background: -o-linear-gradient(top, #00A3F7, #fff); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #00A3F7, #fff); /* IE10+ */

Здесь всё просто, верхний цвет и нижний, остальные строчки дублируются для опять же для разных браузеров.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here

*