Скругленные углы используя CSS3 (multiple backgrounds и border-radius).

Posted on Декабрь 7, 2007
Filed Under border-radius, multiple backgrounds, css3, rounded corners, css | 13 Comments

Скругленные углы используя CSS3

Для экспериментов взял приведенный выше макетик. Тестировал в Safari для Windows так как этот браузер понимает multiple background и border-radius.

HTML разметка.

<div class="block">
текст
</div>

Эта разметка используеться для обоих примеров.

Multiple backgrounds для скругления углов.

Изображения, которые используем

градиентный фон блока
градиентный фон
верхний правый угол
верхний правый угол
нижний левый угол
нижний левый угол

Непосредственно css

.block{
background-color:#4ea5ff;
background-image: url(bg-b-l.gif), url(bg-t-r.gif), url(bg-gr.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: bottom left, right top, bottom left;
padding:20px;
margin:20px;
color:#ffffff;
}

Нужно заметить, что в background-image изображение, которое прописано первым, будет в самом верхнем “слое”, остальные будут ложиться под него, в том порядке, в котором прописаны. Градиентный фон, мы прописали самым последним, т.к. он должен быть в самом нижнем “слое”.

Порядок значений в background-repeat и background-position соответствует порядку в background-image, т.е. для изображения url(bg-gr.gif) соответствует repeat-x и bottom left. Значения разделяются запятыми.

Пример.

Border-radius для скругления углов.

Изображения, которые используем

Из изображений нам потребуется только градиентный фон из предыдущего примера.

Непосредственно css

.block{
background:#4ea5ff url(bg-gr.gif) repeat-x bottom left;
padding:20px;
margin:20px;
color:#ffffff;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
}

Так как border-radius в том виде, в котором он написан выше, пока не поддерживаться, в реальном примере я заменил это свойство на -webkit-border-radius.

Пример.

Верстаем оглавление из книги.

Posted on Декабрь 4, 2007
Filed Under table of contents, definition lists, css, html | 7 Comments

Оглавление книги

В последнее время видел в сети несколько вариантов вёрстки подобных макетов и решил представить свой вариант.

Html разметка

Для html разметки используем definition lists:

<dl class="table-of-content">
<dt><span>Закладка фундамента</span></dt>
<dd>21</dd>
<dt><span>Модель визуального форматирования</span></dt>
<dd>42</dd>
<dt><span>Фоновые изображения и замена изображений</span></dt>
<dd>65</dd>
<dt><span>Стилизация гипер ссылок</span></dt>
<dd>91</dd>
<dt><span>Стилизация списков и создание панелей навигации</span></dt>
<dd>107</dd>
<dt><span>Стилизация форм и табличных данных</span></dt>
<dd>131</dd>
<dt><span>Верстка страницы</span></dt>
<dd>151</dd>
<dt><span>Трюки и фильтры</span></dt>
<dd>173</dd>
<dt><span>Поиск и устранение ошибок</span></dt>
<dd>187</dd>
</dl>

Оглавление взято из “Мастерская CSS. Профессиональное применение Web-стандартов“, первой книги, которая попалась под руку. :)

Для чего нужен этот <span> внутри <dt>? Далее это станет ясно.

CSS

Теперь начнём писать стили:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
}
.table-of-content dd{
float:right;
position:relative;
top:-1.286em;
margin-bottom:-1em;
}

<dd> мы сдвигаем вправо и поднимаем на высоту одной строки вверх. результат.

Следующим шагом мы создаем вертикальные линии используя background-image + изображение . Чтобы перекрыть эти линии используем background-color для <span> (только для этого мы его и ввели) и <dd>. В результате таблица стилей выглядит так:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
padding-right:8em;
background: url(dotted.gif) repeat-x left bottom;
margin-bottom:.4em;
}
.table-of-content dt span{
background-color:#ffffff;
padding-right:.4em;
position:relative;
top:.1em;
}
.table-of-content dd{
position:relative;
top:-1.286em;
margin-bottom:-1em;
float:right;
background-color:#ffffff;
padding-left:.4em;
}

Конечный результат.

CSS media types или различные стили для различных медиа носителей

Posted on Октябрь 31, 2007
Filed Under media types, css | 4 Comments

Что такое CSS media types

Большинство людей знают, что CSS делает HTML страницы более симпатичными на экране. Однако, CSS позволяет определять отображение (воспроизведение) страницы и в менее традиционной обстановке. Например, вы можете использовать CSS для того, чтобы рассказать screenreader’у о том, как читать страницу, или вы можете использовать CSS, чтобы телефон не загружал фоновое изображение 1000×1000px фотографического качества.

Короче говоря, используя CSS media types можно задать разные CSS таблицы для различных устройств.

Какие CSS media types существуют?

CSS2 в настоящее время определяет 10 медиа типов:

All
стили будут применятся для всех устройств
Aural
синтезаторы речи
Braille
тактильные дисплеи Брайля
Embossed
для принтеров, использующих рельефную азбуку Брайля
Handheld
ниши телефоны и другие карманные девайсы
Print
для всеми любимых принтеров
Projection
презентации, демонстрируемые с помощью проекторов
Screen
для цветных дисплеев высокого разрешения, таких как экраны наших
настольных ПК и ноутов.
Tty
устройства с выводом символов фиксированных размеров (старые  LCD
мониторы, терминалы, старые карманные устройства).
tv
для цветных дисплеев низкого разрешения разрешения, ограниченной
прокруткой и возможностью воспроизведения звука.

Я думаю из всей этой экзотики можно запомнить только All,Handheld,Print и Screen.

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

Есть два способа указать тип носителя: в  HTML и в CSS.

В HTML

Чтобы определить медиа тип в HTML, вы можете использовать media=”" атрибут в ссылке на ваш CSS файл:

<link rel="stylesheet" media="screen, print" href="stylesheet.css" />

Как видите, можно определить несколько медиа типов, разделяя их запятой.

Если вы хотите определить различные CSS для различных типов носителей, вам придется разделить их в разные файлы CSS.

В CSS

Обертывая (части) ваш CSS в @media {} конструкцию, вы можете определить мадиа тип для этой части вашего CSS:

@media screen {
body {color:#f00;}
}
@media print {
body {color:#000;}
}

Кроме того, можно указывать тип носителя при импорте стилей, но это не работает в Internet Explorer:

@import url("print.css") print;

Media types в будущем: CSS3

CSS3 добавляет некоторые интересные вещи по media types, которые переименованы в media querie. А media querie состоит из типа и функциональности носителя, таких, как ширина, высота, соотношение или цвет. Например, вы можете задать не только “экран с высоким разрешение”, но и “экран с высоким разрешением и не менее 800px в ширину”. Это дает гораздо более широкий спектр вариантов.

Вольный перевод оригинала.

Колонки одинаковой высоты.

Posted on Октябрь 19, 2007
Filed Under columns, expression, equal height, ie7, ie6, css | 13 Comments

имитация таблицы

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

Основа трёх колонок

Исходный HTML:

<div class="equal">
<div id="row" class="row">
<div class="one">
<h2>Контейнер</h2>
<p>...обычный параграф...</p>
</div>
<div class="two">
<h2>Другой контейнер</h2>
<p>...обычный параграф...</p>
<p>...другой обычный параграф...</p>
</div>
<div class="three">
<p>...отцентрированный по вертикали параграф...</p>
</div>
</div>
</div>

С помощью CSS сделаем так, чтобы этот набор блоков отображался как таблица:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}

посмотреть.

Естественно это не работает в Internet Explorer.

Необходимо также заметить, что даже браузеры, поддерживающие CSS table, имеют
некоторые различия и ошибки в обработке CSS table.

Немного украсим нашу таблицу:

.equal {
margin:0 auto;
border-spacing:10px;
width:600px;
text-align: left;
}
.row div {
background-color:#f7f8f9;
border: solid 1px #bbb ;
padding-bottom: 30px ;
width:185px;
}
.row div h2 {
margin:0 0 0.5em 0;
padding:0.5em 10px;
font-size:120%;
color:#333;
}
.row div p {
font-size: 100%;
margin:0.5em 0;
padding: 0 10px;
}

посмотреть.

Основа 3 колонок для IE

Создадим отдельные стили для IE, так как эти браузеры не умею работать с табличной моделью CSS:

.equal {
padding: 10px;
width: 580px;
}
.row {
margin-top: 10px;
height: 1%;
}
.row div {
float:left;
position: relative;
overflow-x:hidden;
}
.row .two {
margin-left:10px;
}
.row .three {
margin-left: 10px;
margin-right: -9px;
}

посмотреть.

Для добавления этих стилей используем условные комментарии.

Костыли для одинаковой высоты в IE6

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

Следующее выражение считывает высоту родительского блока, в банном случае .row (это и будет высота самой высокой колонки).

* html .row div {height: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? parseFloat(this.parentNode.offsetHeight)-33) :(parseFloat(this.parentNode.offsetHeight)-1));}

посмотреть.

Если посмотреть внимательно, то можно заметить, что высота не совсем одинаковая. Разница составляет 1px. Это сделано для того, чтобы при изменении размера шрифта в меньшую сторону, высота пересчитывалась относительно самой высокой колонки.

Если изначально знать какая колонка будет являться самой высокой, то можно высчитывать высоту оставшихся исходя из нее, но так как мы делаем универсальный метод то приходиться прибежать к такому “просчету”.

В приведенном выше выражении “-1” это тот пиксел, который нам позволит оставить одну самую высокую колонку, а “-33” рассчитывается по формуле: padding-bottom: 30px + border-top-width: 1px + border-bottom-width: 1px + 1px “разница для самой высокой” = -33

При неправильной формуле есть шанс “повесить” наш любимый браузер.

Костыли для одинаковой высоты в IE7

К сожалению IE7 также не поддерживает CSS в той мере, в которой нам необходимо, но при этом исправлено много багов, которые были в IE6. Для IE7 используем min-height и тотже 1px для соблюдения условия “самая высокая колонка”.

html>body .row div {min-height: expression( parseFloat(this.parentNode.offsetHeight)-33);}

посмотреть.

Здесь можно было и не использовать хак, так как более старые версии браузера не поддерживают свойство min-height.

Симуляция таблицы

С помощью данной таблицы стилей можно без проблем отображать блоки, как при “табличной верстке”.

посмотреть.

Почему используем CSS таблицы

Может возникнуть вопрос : “Если мы можем использовать CSS table, почему мы не можем использовать HTML table вместо этого? HTML table работают во всех браузерах.“

Да, они работаю.

Однако, таблицы в CSS это не таблицы – они разработаны, только чтобы быть
похожими на таблицы. Таблицы в CSS могут использоваться всякий раз, где и когда мы хотим визуально имитировать таблицу, в отличие от таблиц в HTML, которые должны использоваться только для табличные данных.

Вольный перевод оригинала.

Что происходит в браузерах при Quirks Mode

Posted on Октябрь 7, 2007
Filed Under doctype, quirks mode, browsers, bug, css, html | 4 Comments

Quirks Mode - это режим работы таких браузеров, как Internet Explorer (IE), Firefox и Opera. В принципе, Quirks Mode (также называемый режимом совместимости) означает, что относительно современный браузер преднамеренно имитирует многие ошибки в старых браузерах, в частности IE 4 и IE 5.

Цель Quirks Mode состоит в том, чтобы старые страницы показывать в современных браузерах так, как это и планировал автор (с учетом особенностей работы старых браузеров). Дополнительную информацию о Quirks Mode можно найти на сайте QuirksMode.org.

Нет никакой авторитетной спецификации того, что происходит при Quirks Mode.Этот режим, по сути, намеренное нарушение спецификаций HTML и CSS.

Если у Вас есть страница, которая, как Вам кажется, работает хорошо, но при этом отсутствует doctype-декларация (требуемая спецификациями HTML), Вы не можете просто вставить doctype. Причина в том, что декларация заставляет браузер работать в Standards Mode, что противоположно Quirks Mode. Это может означать что угодно. Я видел, когда добавляли doctype-декларацию, и все содержимое страницы исчезало. Чаще всего, расположение меняется довольно неожиданно. Но для Вас это может быть не так, если Вы знаете о том, что может случиться при Quirks Mode. Перед добавлением doctype-декларации, Вы должны проверить и HTML и CSS код на соответствие синтаксису, используя валидаторы. Во многих случаях этого может быть не достаточно, так как страница, возможно создавалась, полагаясь на вещи, которые будут “работать” только при Quirks Mode. Таким образом, после добавления doctype-декларации, Вы должны проверить страницу, по крайней мере, на IE 7 и Firefox 2 при Standards Mode. Если страница отображается некорректно, то для определения проблемы может быть полезен следующий список.

Создавая новую страницу, Вы не обязаны знать о Quirks Mode и не должны всегда думать об этом. Просто пишите согласно спецификациям HTML и CSS; это включает использование doctype-декларации, которая переводит современные браузеры в Standards Mode. Но если Вы решите использовать некоторые особенности, которые работают только при Quirks Mode, типа height=”100%” для элемента, Вы должны проверить список для других возможных значений.

Хотя и не все браузеры показывают эти особенности, в Quirks Mode браузеры ведут себя следующим образом :

Вольный перевод оригинала.

Как создать стили только для IE

Posted on Сентябрь 25, 2007
Filed Under ie7, ie5, ie5.5, сonditional сomments, ie, ie6, browsers, css | 3 Comments

Всем известно что браузеры IE некоректно работают с CSS. Мало того, у них у всех разные ошибки, ошибки которые сть в одной версии, отсутствуют в другой. Для создание стилей IE есть несколько методов: условные комментарии (Conditional Comments) и css хаки. Лично я отдаю предпочтение условным комментария.

Различные таблици стилей, для различных версий IE:

только IE 7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE-7-SPECIFIC.css" />
<![endif]-->
только IE 6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->
только IE 5
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->
только IE 5.5
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->
IE 6 и ниже
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->
ниже IE 6
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-LOWER-SPECIFIC.css" />
<![endif]-->

Почему следует использовать условные коментарии?

Вольный перевод оригинала.

Также есть статьи:

Генерирование заголовков для таблицы

Posted on Сентябрь 23, 2007
Filed Under table, caption, generated content, css | 2 Comments

Исходный HTML код таблицы:<table summary="Значение атрибута summary" title="Значение атрибута title">
<tr>
<td>Пример </td>
<td>Таблицы</td>
</tr>
</table>

CSS:table[summary]:after {
content: "Таблица " counter(table) ": " attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}

Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который и будет считать номер таблицы на странице. Следующим шагом задаем display: table-caption; для нашего сгенерированного контента, чтобы он отображался как заголовок.

caption-side: top; определяет положение заголовка относительно таблицы.

Думаю что использовать это повсеместно не имеет смысла,так как это поддерживаться не всеми браузерами, но как какая то “фитча”, для пользователей например opera, это использовать можно).

пример
источник

Генерируем нумерацию заголовков используя CSS

Posted on Сентябрь 19, 2007
Filed Under generated content, :before, css, html | 3 Comments

automatic-counters.gif

Этот способ работает только в адекватных браузерах, которые понимают как минимум :before и поддерживают генерацию контента средствами CSS

Итак, имеем следующий HTML:<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>

Начнем работать над стилями. Первое,что сделаем, объявим счётчики для заголовков:h1 {
counter-increment: h1;
}
h2{
counter-increment: h2
}

Счётчики объявлены, теперь их надо как то выводить на страницу:h1:before {
content: counter(h1) ". "
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
Для заголовка первого уровня выводим счётчик, который для него объявили, а для заголовка второго уровня выводим так сказать родной счётчик и счётчик заголовков первого уровня. пример

Последнее что нам осталось сделать - обнулят счётчик второго уровня:h1 {
counter-reset: h2 0;
}

Окончательный вид таблици стилей:h1 {
counter-increment: h1;
counter-reset: h2 0;
}
h1:before {
content: counter(h1) ". "
}
h2{
counter-increment: h2
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
пример

Создание меню с помощью CSS

Posted on Сентябрь 15, 2007
Filed Under menu, image replacement, ie, bug, css, html | Leave a Comment

Создаем меню

исходный HTML:<ul class="menu">
<li><a class="home" href="#"></a></li>
<li><a class="blog" href="#"></a></li>
<li><a class="autor" href="#"></a></li>
</ul>

Изображения кнопок в двух состояних:

Для того,чтобы избежать моргания изображений, связаное с загрузкой изображения, обьеденим два состояния кнопки в один файл:

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

Read more

Шпаргалки по CSS

Posted on Сентябрь 10, 2007
Filed Under шпаргалки, css | Leave a Comment

http://www.utoronto.ca/ian/books/extras/css1-sheet-7nov2000.pdf - автор Ian Graham.
свойства и их значения
селекторы
поддержка браузерами (устарело)
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/ - Шпаргалки по CSS от ILoveJackDaniels.
свойства
селекторы
блочная модель
синтаксис
еденицы измерения значений
типы носителя
http://www.gosquared.com/dtquidicity/archives/33 - автор dtquidcity.
свойства
селекторы
блочная модель
синтаксис
еденицы измерения значений
типы носителя
http://www.spectrum-research.com/V2/projects_css_reference.asp - автор Spectrum Research.
свойства и их значения
еденицы измерения значений
http://www.veign.com/downloads/guides/qrg0007.pdf - автор Veign.
свойства и их значения
селекторы
еденицы измерения значений
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm - автор Brett Merkey.
свойства
селекторы
блочная модель
синтаксис
каскад
http://www.lazycat.org/webdesign/cssref.php - автор Matt Robinson.
свойства и их значения
селекторы
синтаксис
еденицы измерения значений
типы носителя
http://meyerweb.com/eric/css/references/css1ref.html - Ondtne руководство по CSS от Eric Meyer. (часть 1)
удобная навигация по спецификации (css1)
http://meyerweb.com/eric/css/references/css2ref.html - Ondtne руководство по CSS от Eric Meyer. (часть 2)
удобная навигация по спецификации (css2)

еще много шпаргалок

keep looking »