Уроки дизайна и вёрстки

Отличия в верстке между Mozilla и Opera

Pavel — Sun, 05 Apr 2009 04:25:34 +0000

Никогда не любил оперу. Проблемы у меня с ней ещё с моего первого проекта. Там не смог заставить выпадающее меню быть поверх остальных частей сайта. С тех пор просто её игнорировал, пока не увидел статистику предпочтений рунета по использованию браузеров. Оказалось, что Opera имеет долю в 15%. Круто. С замиранием сердца посмотрел на мои текущие шаблоны верстки... В трехколоночном тянущемся div'ном дизайне, контентная часть занимала не всю предоставленную ей ширину. Вообще, я проверяю верстку только в трех браузерах: IE6, IE7 и Mozilla. Считал, что если в этой тройке всё отображается правильно, то за остальные браузеры можно не беспокоиться. Обломись... Пришлось искать отдельное решение для оперы. Итак, рассмотрим его на примере двухколоночного резинового дизайна.

и стили

#sidebar{float:left;width:250px;}
#content {margin-left:250px;}

Это стандартное решение, которое есть во всех учебниках по CSS. Левый отступ в контентной части нужен, якобы, для того, чтобы в него поместилась левая плавающая колонка. При этом оказалось, что во всех браузерах, кроме оперы это решение работает. А в опере левый отступ помещается между левой колонкой и содержимым, уменьшая таким образом ширину контента на ширину левой колонки.
Решение простое. Уберем левый отступ и протестируем верстку во всех браузерах. Работает!!!! Даже в IE!!! Как, в таком случае, живут эти учебники по CSS?
Может я где-то ошибся и вылезут баги в дальнейшем? Буду благодарен за комментарии.
Моя последняя, на сегодняшний день, верстка с применением этого шаблона и с моим исправлением здесь: naturecards.ru

Float:left и трехколоночный дизайн на флоатах

Pavel — Fri, 03 Apr 2009 04:22:47 +0000

Целый час убил на поиск решения. Ситуация: трехколоночный дизайн на флоатах. Если в центральной части применить к любому блоку свойство float:left, то этот блок начнет отображаться ниже всего содержимого левого блока.

Решение оказалось на удивление простым. Нужно в центральном контейнере прописать свойство overflow:hidden. И всё!

Как добавить два фоновых рисунка к одному сайту

Pavel — Fri, 01 Feb 2008 12:13:59 +0000

Хотя в спецификациях CSS2 это детально оговорено, но и сейчас есть способ использовать два изображения в качестве фона. Итак, что делать, если мы хотим иметь два изображения в качестве фона — например, одно повторяющееся и одно отдельно стоящее?

На самом деле, решение простое . Зададим фоновый рисунок для двух вложенных элементов: body и html

html {

 background-image: url(background-repeatx.jpg);

 background-repeat: repeat-x;

 background-color: #d2d7e4;}

body {

 font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;

 color: #000000;

 background-image: url(recipes.gif);

 background-repeat: no-repeat;

 background-position: 98% 2%;

 margin: 0;

 padding: 46px 0 0 0;
}

Двойные кавычки для цитат

Pavel — Fri, 25 Jan 2008 15:57:15 +0000

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

1. HTML исходный текст

Начнем с самого тэга blockquote и текста внутри негоt.

<blockquote>Привет, я двойная кавычка...blockquote>

2. Опишем blockquote

Опишем тэг blockquote следующим образом:

blockquote {  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;

width: 300px;

background: url(images/close-quote.gif) no-repeat right bottom;

padding-left: 18px;

text-indent: -18px;

}

Этот CSS код выведет картинку close-quote.gif в правом нижнем углу блока. Свойства padding-left и text-indent сформируют обратный отступ в -18px. Это будет выглядеть примерно так:

3. первая буква в blockquote

Теперь добавим левый отступ в 18px первой букве блока blockquote. Это выровнят текст по левому краю. А теперь выведем картинку open-quote.gif в левом верхнем углу. Обратите внимание, что я изменил стиль первой буквы. Так она выглядит интересней.

blockquote:first-letter {  background: url(images/open-quote.gif) no-repeat left top;

padding-left: 18px;

font: italic 1.4em Georgia, "Times New Roman", Times, serif;

}

Можно задать всему блоку свойство float:left, чтобы основной текст обтекал цитату справа.

Улучшаем CSS меню

Pavel — Thu, 24 Jan 2008 14:15:39 +0000

В этом уроке я покажу вам, как можно извратиться над дизайном меню и как потом собрать всё вместе с помощью CSS. Многие наверняка знают как запрограммировать плоский список(ul li) в горизонтальное или вертикальное меню.Выведем это знание на новый уровень — создадим улучшенное меню используя свойство CSS position.

Обзор

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

HTML код

Если вы разобрались с графикой — приступим к программированию. Начнем с ненумерованного списка

обратите внимание на id="menu" присвоенное

уникальное имя класса каждой ссылке

пустой тэг (чтобы использовать эффект mouseover)

<ul id="menu">

  <li><a href="#" class="home">Home <span>span>a>li>

  <li><a href="#" class="about">About <span>span>a>li>

  <li><a href="#" class="rss">RSS <span>span>a>li>
ul>

#menu

Установите menu в no padding, no margin, и no list-style. Установите width и height равными размерам картинки menu-bg.jpg. Выберите её в качестве background image. Ключевой момент: установите свойство position в relative.

#menu {

  list-style: none;

  padding: 0;

  margin: 0;

  width: 774px;

  height: 210px;

  background: url(images/menu-bg.jpg) no-repeat;

  position: relative;
}

#menu span

Установите элемент span в display:none (по умолчанию он невидим). Установите position:absolute, чтобы мы могли точно спозиционировать GIF картинку.

#menu span {

  display: none;

  position: absolute;
}

#menu a

Ключевой момент здесь свойство text-indent . Мы устанавливаем text-indent свойство в отрицатльное значение (-900%), так чтобы текст был спрятан.

#menu a {

  display: block;

  text-indent: -900%;

  position: absolute;

  outline: none;
}

#menu a:hover

Когда мы наводим мышку на меню, мы хотим сдвинуть фоновую картинку с верха на низ.

#menu a:hover {

  background-position: left bottom;
}

#menu a:hover span

Когда мы наводим мышку на ссылку, мы хотим изменить свойства элемента span на display:block.

#menu a:hover span {

  display: block;
}

#menu .home

Определите ширину, высоту и фоновую картинку. Т.к. на предыдущем шаге мы уже установили все элементы в postition:absolute , осталось определить где будет находиться кнопка .home установив её свойства left и top.

#menu .home {

  width: 144px;

  height: 58px;

  background: url(images/home.gif) no-repeat;

  left: 96px;

  top: 73px;
}

#menu .home span

А здесь мы определяем свойства width, height, background, и position тэга span элемента .home (GIF картинка при наведении мыши)

#menu .home span {

  width: 86px;

  height: 14px;

  background: url(images/home-over.gif) no-repeat;

  left: 28px;

  top: -20px;
}

#menu .about

Скопируйте правила элемента .home и переименуйте их в .about. Теперь просто измените значения свойств width, height, background, left и top.

#menu .about {

  width: 131px;

  height: 51px;

  background: url(images/about.gif) no-repeat;

  left: 338px;

  top: 97px;

}

#menu .about span {

  width: 40px;

  height: 12px;

  background: url(images/about-over.gif) no-repeat;

  left: 44px;

  top: 54px;
}

#menu .rss

Повторите этот шаг для .rss

#menu .rss {

  width: 112px;

  height: 47px;

  background: url(images/rss.gif) no-repeat;

  left: 588px;

  top: 94px;

}

#menu .rss span {

  width: 92px;

  height: 20px;

  background: url(images/rss-over.gif) no-repeat;

  left: 26px;

  top: -20px;
}

Код полностью:

#menu {

  list-style: none;

  padding: 0;

  margin: 0;

  width: 774px;

  height: 210px;

  background: url(images/menu-bg.jpg) no-repeat;

  position: relative;

}

#menu span {

  display: none;

  position: absolute;

}

#menu a {

  display: block;

  text-indent: -900%;

  position: absolute;

  outline: none;

}

#menu a:hover {

  background-position: left bottom;

}

#menu a:hover span {

  display: block;

}#menu .home {

  width: 144px;

  height: 58px;

  background: url(images/home.gif) no-repeat;

  left: 96px;

  top: 73px;

}

#menu .home span {

  width: 86px;

  height: 14px;

  background: url(images/home-over.gif) no-repeat;

  left: 28px;

  top: -20px;

}

#menu .about {

  width: 131px;

  height: 51px;

  background: url(images/about.gif) no-repeat;

  left: 338px;

  top: 97px;

}

#menu .about span {

  width: 40px;

  height: 12px;

  background: url(images/about-over.gif) no-repeat;

  left: 44px;

  top: 54px;

}

#menu .rss {

  width: 112px;

  height: 47px;

  background: url(images/rss.gif) no-repeat;

  left: 588px;

  top: 94px;

}

#menu .rss span {

  width: 92px;

  height: 20px;

  background: url(images/rss-over.gif) no-repeat;

  left: 26px;

  top: -20px;
}

Готово

Вот и всё! Посмотреть готовое меню ожно здесь: CSS menu.

Обратите внимание: в IE6 есть баг. hover эффект не отображается правильно. Исправить можно используя Javascript чтобы заставить элемент отображаться в виде блока при наведении на него мыши.

Оригинал статьи читайте здесь.

Нужен Web 2.0 логотип? Запросто!

Pavel — Wed, 23 Jan 2008 14:02:57 +0000

На этом примере я покажу как создать отличный Web 2.0 логотип с помощью Photoshop за пару минут.

1 шаг. Создаём пустой документ

Ширина: 400px

Высота: 100px

Фон: белый

2 шаг. Выберите Инструмент Текст(Т). Для примера я буду использовать текст «CSS Lessons», хотя вы можете использовать любой другой.

Выберите следующие установки:

Написали? Прежде чем двигаться дальше, растеризуйте текстовый слой. (Правая кнопка по слою и в выпадающем меню «Растеризация слоя»)

3 шаг. Добавим серую окантовку к тексту. Для этого добавим эффекты к слою по образцу:

4 шаг. Теперь выберите ваш текст удерживая Ctrl и кликнув на слое текста. Далее, используя Инструмент Овальная область, выделите часть текста по образцу. Только убедитесь, что в левом верхнем углу выбран режим «Пересечь с выделением».

Заполните выделенную область цветом f749d8.

5 шаг. Теперь займемся второй половинкой текста. Используйте настройки из шага 2, только измените цвет текста на 2296c5. Напишите второе слово сразу за первым. Оно должно быть в отдельном слое. Если понадобится — спозиционируйте его относительно первого слова используя Перемещение(V).

6 шаг. Скопируйте эффекты слоя с первым текстом в слой второго текста. Для этого кликните правой кнопкой мыши по слою источнику и выберите Копировать Эффекты. Затем правой кнопкой мыши по слою приёмнику и Вставить Эффекты.

7 шаг. Растеризуйте слой. Далее , используя технику из шага 4, выделите часть текста.

Закрасьте выделение цветом 30acde.

Всё! Логотип готов. На темном фоне он также неплохо выглядит.

Начало

Pavel — Tue, 22 Jan 2008 06:55:12 +0000

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