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

Для экспериментов взял приведенный выше макетик. Тестировал в 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;
}
Нужно заметить, что в […]

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

В последнее время видел в сети несколько вариантов вёрстки подобных макетов и решил представить свой вариант.
Html разметка
Для html разметки используем definition lists:
<dl class=”table-of-content”>
<dt><span>Закладка фундамента</span></dt>
<dd>21</dd>
<dt><span>Модель визуального форматирования</span></dt>
<dd>42</dd>
[…]

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

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

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

Итак, задача сделать разметку в 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 […]

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

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

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

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

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

Исходный 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; инициализирует счётчик, который […]

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

Этот способ работает только в адекватных браузерах, которые понимают как минимум :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) ” “;
}
Для заголовка первого уровня […]

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

Создаем меню
исходный 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);
}
пример

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

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.
свойства и их […]

keep looking »