При разработке очередного сайта мне пришлось много повозиться с 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+ */
Здесь всё просто, верхний цвет и нижний, остальные строчки дублируются для опять же для разных браузеров.