Публикации с тегом "CSS3"

Блок с закругленными углами на CSS3

1 ноября 2011. Автор: Joker-jar

Еще один полезный CSS-стиль третьей версии — border-radius, позволяющий закруглить углы у блока. Браузеры-лидеры последних версий поддерживают данный стиль, Internet Explorer потихоньку подтягивается и в 9 версии также научился закруглять углы.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .round-corners {border-radius: 20px;}
    </style>
  </head>
  <body>
    <div class="box round-corners"></div>
  </body> 
</html>
border-radius CSS CSS3 HTML
Читать полностью | 0 комментариев

Создание блока с тенью на CSS3

29 октября 2011. Автор: Joker-jar

Один из уроков на сайте был посвящен созданию блока с тенью. В нем предлагалось отрисовать и сверстать тень. С приходом CSS3 веб-дизайнеру стали доступны многие интересные стили, в частности, box-shadow, который позволяет создать тень для блока. В данный момент этот стиль поддерживается всеми современными популярными браузерами.

Пример использования стиля box-shadow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .shadow {box-shadow: 5px 5px 10px #777;}
    </style>
  </head>
  <body>
    <div class="box shadow"></div>
  </body> 
</html>
box-shadow CSS CSS3 HTML
Читать полностью | 1 комментарий
 

Свежее

Популярное

Обсуждаемое