CSS3 – то, чего мы ждали

 

CSS - всем хорошо знакомый язык, применяемый для скинирования сайтов.  CSS3 содержит множество новых функций, экономящих время и упрощающих написание стилей. К сожалению, пока его воспринимают лишь самые современные броузеры, об IE и речи нет, правда, обещают, что девятой версии все будет работать, но это далекая перспектива. Давайте, перейдем прямо к делу, я попробую показать несколько техник CSS3.

Сегодня мы познакомимся со следующими функциями:

  • Округленные углы
  • Индивидуальные округленные углы
  • Тени
  • Изменение размера 
  1. Округленные углы

    Наверно все помнят, сколько времени уходило, чтобы создать конейнер с округленными углами, применяли или Java Script, или 3DV-технику.
    Сдесь же вспомню 3DV-технику. Срезались начало, средняя часть и конец контейнера, средняя часть повторялась и наконец получали округленный контейнер. Довольно просто, но лишняя трата времени.
    Перейдем непосредственно к примеру CSS3. Функция округленных углов называется "border radius".
    В первую очередь создайте контейнер, задайте любой фоновый цвет и сделайте рамку любого цвета.

    .round_example {
    background:#FFF;
    border:1px solid #000;
    }
    Теперь настало время округлить
    Для этого нужны лишь три строки кода.

    .round_example {
    background:#FFF;
    border:1px solid #000;
    border-radius:10px; /* For Opera*/
    -moz-border-radius:10px; /*For FireFox*/
    -webkit-border-radius:10px; /* Form Safari And Chrome*/
    }
    Как видим, перед  border-radius-ом добавлены два префикса "-moz-" и "-webkit-". Префикс "-webkit-"  позволяет border-radius-у работать в Сафари Гугл Хроме. "-moz-" - переменная лисички, Опера же довольствуется лишь border-radius-ом. border-radius нуждается в указании пикселей, чем больший пиксель будет указан, тем больше округлится угол. Насколько знаю, предела нет. Вам доверяю экспериментировать.

    Теперь перейдем к более вкусному отрезку
  2. Индивидуальные округленные углы

    CSS3 опять проявляет заботу и позволяет для каждого угла задавать индивидуальные значения, как всегда, и это очень просто.
    Код, предназначенный для Сафари и Хрома, выглядит следующим образом:
    -webkit-border-top-left-radius: 55px;
    -webkit-border-top-right-radius: 80px;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 100px;
    Лисичка(FireFox)

    -moz-border-radius-topleft: 55px;
    -moz-border-radius-topright: 80px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 100px;
    Опера:

    border-top-left-radius: 55px;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 100px;
    Конечный код:

    /*     Form Safari And Chrome Start       */
    -webkit-border-top-left-radius: 55px;
    -webkit-border-top-right-radius: 80px;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 100px;
    /* Form Safari And Chrome End */
    /* For FireFox Start */
    -moz-border-radius-topleft: 55px;
    -moz-border-radius-topright: 80px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 100px;
    /* For FireFox End */
    /* For Opera Start */
    border-top-left-radius: 55px;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 100px;
    /* For Opera End */
    Всеми «любимый» интернет эксплорер, как обычно, отдыхает после тяжелого трудового дня.

  3. Прозрачность (opacity) так, как к лицу CSS3

    Раньше, чтобы прозрачность работала во всех броузерах, требовалось несколько строк кода. CSS3 помогло и в этом. Уже все современные броузеры воспринимают 1 переменную! Хочу представить "opacity" (ударение на «opa») .

    А это код:
.opacity {
background:#000;
opacity:0.1;
}

В нашем случае прозрачность снизилась до 10%-ов.

Тени


Наверно все намучались при реализации теней. Сперва вырезаем из psd, сохраняем в виде картинки, затем div-у сажаем бекграундом. Кажется спаслись, все это сможем уже с помощью CSS3.

На нашем примере объясню значения пикселей:

  • Первый - это горизонтальное расстояние между контейнером и тенью
  • Второй - вертикальное расстояние между контейнером и тенью
  • Третий - масштаб самой тени (в нашем случае - 10 пикселей).
  • Четвертый же - цвет тени.

    Код выглядит так:

-moz-box-shadow:0px 0px 10px #333333;
-webkit-box-shadow:0px 0px 10px #333333;
-o-box-shadow:0px 0px 10px #333333;

Как уже знаем,  "-moz-" - для лисички,  "-webkit-" - для Сафари и Хрома,  "-o-" - в данном случае для Оперы.

Проведите эксперименты, меняйте пикселы. 

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

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

Гиорги хацаквадзе
Банк Республика