Исключительно главное о веб дизайне. » marckup / Статьи о веб дизайне, верстке, photoshop,illustrator, javascript. Wed, 19 May 2010 17:55:14 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Несколько примеров использования CSS3. /css3-neskolko-primerov/ /css3-neskolko-primerov/#comments Sat, 03 Oct 2009 22:25:33 +0000 mironov /?p=95 Border-radius.

Очень важная и нужная штука. Сколько существует способов сделать закругленные углы у блока? Сотни. Манипуляции с кучей картинок, JavaScript и прочие сложности ни к чему. CSS3 предлагает нам просто прописывать ‘border-radius’ и нужных нам блоков, а о закруглении позаботится браузер.
Да, этот способ не кроссбраузерный и старые добрые пользователи IE увидят обычные не закругленные уголки. Но этот способ закругления гораздо лучше, чем се остальные. Причин тому несколько:

  • Чистота кода (отсутствие лишних HTML элементов).
  • Нынче стало очень модно держать в чистоте свою HTML страницу. Это всегда хорошо – документ становится прост в дальнейшем использовании. При ошибке загрузки CSS файла сайт останется понятным и читабельным.

  • Увеличится скорость загрузки сраницы.
  • Скорость всегда выше, когда не нужно грузить лишние картинки и JavaScript.

  • Разработка становится проще!
  • Сверстать резиновый блок с закругленными уголками и картинкой в фоновом изображении будет гораздо проще, использую CSS3. Кстати, CSS3 может скруглять углы у чего угодно, даже у картинок, да и радиус скруглени можно задавать любой.

    Как использовать?

    Вот пример использования свойства border-radius:

    <div style=" background-color: #EBE9E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
    width: 382px" >
    Border Radius - это здорово!
    </div>

    -moz-border-radius: 5px; – это для браузеров Mozilla,
    -webkit-border-radius: 5px; – a это для Safari и Google Chrome.
    А вот как это выглядит:

    Border Radius – это здорово!

    Text-shadow

    Очень красивая и незаменимая в дизайне вещь. Хороший пример использования этого CSS3 свойства ожно найти на сайте wordpress.org в навигации.
    CSS3 text-shadow
    А вот и сам CSS код этой навигации:

    color:#999999;
    font-family:"Lucida Grande",Tahoma,"Bitstream Vera Sans",Arial,sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow:1px 1px 1px #333333;

    Как видите, в использовании это свойство очень просто, а результат отменный.

    @font-face

    Этот параметр позволяет присваивать тексту сайта любой шрифт, и не обязательно, чтобы он был установлен у пользователя. Вам просто нужно указать путь к файлу шрифта на вашем сервере (или любом другом) и шрифт отобразится на сайте.
    Применяется это примерно так:
    Сначала нужно указать путь к шрифту:

    1
    2
    
    @font-face { 	font-family: Helvetica; 	src: url('Helvetica.otf'); } 
    @font-face { 	font-family: Helvetica; 	font-weight: bold; 	src: url('Helvetica-Bold.otf'); }

    А потом использовать его с любыми классами и идентификаторами:

    h3 { font-family: Delicious, sans-serif; }

    Multiple backgrounds

    Это свойство исполнило мою давнюю мечту — возможность присвоения блоку сразу нескольних фоновых изображений. Теперь, по стандартам CSS3 можно просто прописать такое:

    1
    2
    3
    4
    5
    
    background: 
    url(gradient-top.gif) top left no-repeat, 
    url(gradient_fresco.jpg)  top 11px no-repeat, 
    url(gradient-bottom.gif) bottom left no-repeat, 
    url(gradient-middle.gif) left repeat-y;

    И у объекта, которому вы присвоите эти свойства, появятся сразу четыре фоновых изображения.

    Следует не забывать, что CSS3 не поддерживается старыми браузерами, но все продвинутые веб разработчики уже рекомендуют его использовать.

    ]]>
    /css3-neskolko-primerov/feed/ 0