Шпаргалка представляет собой сервис, с помощью которого можно быстро получить информацию из различных спецификаций (HTML, CSS, SVG, XPath). В данной версии были добавлены новые HTML5 элементы. CSS3 пока нет.

Шпаргалка доступна как веб-сервис, а также в виде андроид приложения.

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

<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

Теперь чтобы переопределить какое-либо свойство для IE6, нужно добавить в селектор #ie6.

#wrap { … } /* Общее правило */ 
#ie6 #wrap { … } /* Правило для IE6 */

UPD: Т.к. народ реагирует не совсем адекватно, внесу ясность. Я не призываю вас везде использовать данное решение. Сам я как использовал отдельные таблицы стилей так и буду. Это всего лишь еще один возможный вариант применения условных комментариев.

И это не удивительно. Новые возможности делают процесс разработки намного проще и быстрее. Конечно использовать новые свойства в коммерческих проектах ещё рано, но поэкспериментировать и использовать некоторые из них, например на своём блоге, вы можете уже сейчас. На данный момент наибольшая поддержка CSS3 присутствует в Safari/Chrome и Firefox, однако пишут, что в новой версии Opera 10.50 также будут реализованы некоторые возможности.

Я тоже не остался в стороне и немного освежил внешний вид блога, добавив следующее…

Скруглённые уголки

Все элементы на блоге с такими уголками реализованы с помощью свойства border-radius. Непосредственно само свойство пока нигде не поддерживается, но в некоторых браузерах есть соответствующие проприетарные свойства.

border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari/Chrome */

Тени

Для создания тени у блоков используется свойство box-shadow. Ситуация с поддержкой этого свойства аналогична предыдущему.

box-shadow:1px 1px 1px #000;
-moz-box-shadow:1px 1px 1px #000;
-webkit-box-shadow:1px 1px 1px #000;

Первое и второе значения задают смещения соответственно по оси X и Y. Третье значение определяет радиус размытия тени.

Тень у текста создаётся с помощью свойства text-shadow.

text-shadow:1px 1px 1px #000;

Градиенты

В некоторых блоках я использовал градиентный фон.

background:-moz-linear-gradient(-90deg,#000,#fff);
background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));

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

Итог

Всё это лишь краткое описание нескольких свойств, которые использовал я. Кроме этого есть множество других, не менее интересных возможностей. Советую почитать соответствующие статьи например на Smashing Magazine или CSS3.info.

Удачи!

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

Избавиться от вышеописанного неудобства отчасти можно, используя редко используемое значение overline свойства text-decoration.

Демо

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

Если вы знаете аналогичные простые примеры, повышающие юзабилити, напишите о них в комментариях.

Периодически мне для вёрстки попадаются макеты в навигации у которых присутствуют перекрывающиеся по краям кнопки. Часто таким образом выделяют пункт меню открытой в данный момент страницы. У некоторых это вызывает некоторые трудности в реализации. В связи с этим выкладываю простой пример с подобным эффектом.

• Демо
• Cкачать

В качестве навигации используем список:

<ul>
    <li><a href="" title="">О нас</a></li>
    <li><a href="" title="">Новости</a></li>
    <li class="active"><span>Услуги</span></li>
    <li><a href="" title="">Портфолио</a></li>
    <li><a href="" title="">Контакты</a></li>
</ul>

Перекрывание кнопок осуществляется засчёт отрицательных внешних отступов, а позиционирование активного пункта поверх остальных с помощью z-index.

ul{
    list-style-type:none;
    font-size:0.9em;
    color:#fff;
    height:50px;
    width:505px;
    margin:0 auto
}
ul li{
    float:left;
    border-right:solid 1px #fff;
    position:relative;
    z-index:5;
    background:#96B1D4 url(images/lc.gif) no-repeat -5px top;
    text-align:center
}
ul li.active{
    z-index:10;
    background:#9A2D7F url(images/lc.gif) no-repeat left -5px;
    border:none;
    margin:0 -9px 0 -10px;
    top:-10px
}
ul li a{
    float:left;
    display:block;
    padding:10px 0;
    background:url(images/rc.gif) no-repeat 95px top;
    text-decoration:none;
    color:#fff;
    width:100px
}
ul li span{
    float:left;
    display:block;
    padding:15px 0;
    position:relative;
    background:url(images/rc.gif) no-repeat 109px -5px;
    width:119px
}

Как видите ключевыми свойствами в примере являются margin и z-index применяемые к элементам li, остальные можно в той или иной степени менять по своему усмотрению.

• Демо
• Cкачать