Персональный блог Мэдисон

Background и несколько фоновых картинок в CSS3

Shizuku — Wed, 16 Mar 2011 01:49:54 GMT

Background - это свойство, с помощью которого можно задать фон элемента. Фон может быть цветным или даже содержащим изображения. В этой статье я расскажу о всех возможностях этого свойства и покажу одну хитрость, с помощью которой фоном одного объекта можно сделать сразу несколько изображений. $CUT$

Любой человек, когда-либо открывавший учебник по HTML, знает о свойствах, которые задают фон элемента:






bgcolor="green" background="fon.jpg" >


Текст текст текст.

bgcolor - цвет фона страницы
background - адрес картинки, которая служит орнаментом страницы

В CSS они объединены в одно общее свойство - background.






  background-color: green;

  background-image: url('fon.jpg');






Текст текст текст.

Чтобы протестировать это свойство, "не отходя от кассы", попробуем применить его на простом блоке

div {
background: none;
}

Итак, познакомьтесь, это ↑ наш

div {
background-color: orange;
}

Так уже немного веселее, правда? Цвет можно задавать разными способами: наименованием (orange), шестизнаком HEX (#ff8c00) или кодом RGB (255,165,0). К наименованиям прибегают редко, поскольку в разных браузерах разным наименованиям иногда соответствуют немного разные цвета. Чаще всего цвет обозначают шестизнаком.

div {
background-color: orange;
background-color: #ff8c00;
background-color: rgb(255,165,0)
}

Все эти три значения обозначают один и тот же оранжевый цвет. С цветом разобрались. Теперь мы хотим добавить добавить какое-нибудь фоновое изображение. Например, вот такое:

http://i071.radikal.ru/1103/55/cb65d8f6468b.png →

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

div {
background-color: orange;
background-image:url('http://i071.radikal.ru/1103/55/cb65d8f6468b.png');
}

Теперь наш див не только оранжевый, но еще и полосатый.
"Легкотня! - скажете Вы. - То же самое можно было сделать при помощи bgcolor и background без CSS!"
Верно. Поэтому мы рассмотрим более сложный случай, в котором мы не сможем обойтись одним HTMLом. Допустим, мы хотим поместить на задний фон вот такое пятно:

http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png →

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png')
}

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

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: repeat-x;
}

Или только по вертикали.

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: repeat-y;
}

А может, лучше оставить одно единственное пятно?

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
}

Да, одного пятна достаточно, но слева оно только мешается. Давайте лучше передвинем его в центр.

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
background-position: center center;
}

А может, лучше в правый нижний угол?

div {
background-color: orange;
background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
background-repeat: no-repeat;
background-position: bottom right;
}

Принцип понятен? Примеры можно продолжать до бесконечности. Чтобы Вам потом не снились эти оранжевые прямоугольники, с примерами я закончу и запишу все возможные значения свойста background ниже:


background-color: red; - красный цвет наименованием

background-color: #ff0000; - красный цвет HEX кодом

background-color: rgb(255,0,0); - красный цвет RGB

background-color: transparent; - прозрачный цвет



background-image: url('http://site.com/image.jpg'); - адрес фоновой картинки (кавычки можно заменить двойными или опустить)

background-image: none; - отсутствие фонового изображения



background-repeat: repeat; - прокручивать фон по горизонтали и вертикали

background-repeat: repeat-x; - прокручивать фон только по горизонтали

background-repeat: repeat-y; - прокручивать фон только по вертикали

background-repeat: no-repeat; - не прокручивать фон



background-position: 40% 70%; - картинка находится на 40% от левого края экрана и на 70% от верхнего края экрана

background-position: 200px 500px; - картинка находится на 200 пикселов правее левого края экрана и на 500 пикселов ниже верхнего края экрана

background-position: left top; - левый верхний угол экрана

background-position: left center; - левый бок экрана

background-position: left bottom; - левый нижний угол экрана

background-position: right top; - правый верхний угол экрана

background-position: right center; - правый бок экрана

background-position: right bottom; - правый нижний угол экрана

background-position: center top; - вверху в центре

background-position: center center; - самый центр экрана

background-position: center bottom; - внизу в центре



background-attachment: fixed; - во время прокрутки страницы фоновое изображение стоит на месте

background-attachment: scroll; - во время прокрутки страницы фоновое изображение едет вместе с содержимым

Это все возможные значения. Только, чтобы не расписывать их на множество строк, как в нашем варианте:


 div {
 background-color: orange; 
 background-image: url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png');
 background-repeat: no-repeat;
 background-position: bottom right;
 }
 
Их для удобства обычно утрамбовывают в более компактную версию:


background: orange url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png') no-repeat bottom right;


Да, прямо так нагло сгребают в одну строчку и валят.
На этом описание можно закончить, но перед этим я хочу показать Вам фишку, о которой писала во введении - о том, как закрепить за одним объектом сразу несколько фоновых изображений. Предупреждаю сразу: работать это будет не у всех, посколько не все браузеры поддерживают CSS3. Поэтому то, что я сейчас покажу, можно применять вспомогательно, но ни в коем случае не полагаться на это стопроцентно.
Вспомним последний раз наш оранжевый прямоугольник. До сих пор мы размещали в нем либо полоски, либо пятна. А что если мы хотим и то и другое? В CCS3 можно накладывать неограниченное количество изображений, просто разделяя свойства background запятой.

 div {
 background:
 url('http://s41.radikal.ru/i093/1103/8e/43cf100cde05.png') bottom right no-repeat,
 url('http://i071.radikal.ru/1103/55/cb65d8f6468b.png');
 }
 
Видим полоски? А пятно в правом нижнем углу тоже видим? Если видим только пятно - у нас эксплорер. В остальных браузерах последних версий видно и полоски, и пятно. Обратите внимание на одну нелогичную деталь: изображение, которое идет в списке первым - накладывается поверх того, что идет вслед за ним. Это довольно странно, поскольку следующая настройка обычно перекрывает предыдущую. Здесь же все наоборот. Сначала мы указываем адрес пятна, а потом адрес полосок.
Скажем "до свидания" нашему многострадальному диву и теперь рассмотрим пример посложнее, где нам нужно включить несколько разных изображений и рассовать их по разным сторонам страницы. Возьмем к примеру известный шаблон "Хоббит" от Arcsin. Откройте оригинальную версию шаблона, чтобы иметь ее перед глазами. Фон состоит из следующих фрагментов:


bg.jpg
основной фон
повторяется по горизонатали и вертикали


bgcontainer.jpg
 центральный фон для текста
накладывается поверх основного и повторяется по вертикали


top.jpg
 "шапка", фон для логотипа сайта и меню
накладывается поверх основного и центрального и не повторяется


bgfooter.gif
 "футер", рамка, замыкающая страницу
накладывается поверх основного и центрального и не повторяется

Помня о нелогичности порядка фоновых изображений, мы начнем перечисление с тех, которые находятся поверх других: bgfooter.gif (футер) и top.jpg (шапка), только после них bgcontainer.jpg (центр) и самым последним - bg.jpg (основной фон). В коде это выглядит так:

body { background:

url('img/bgfooter.gif') bottom center no-repeat,

url('img/top.jpg') top center no-repeat,

url('img/bgcontainer.jpg') top center repeat-y,

url('img/bg.jpg');

}


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

');return false;" class="thumb" width="200">
Internet Explorer
');return false;" class="thumb" width="200">
Остальные браузеры



Фильтры содержимого элементов
Shizuku — Mon, 15 Nov 2010 20:49:59 GMT
Если вы помните, два предыдущих поста были посвящены фильтрам, которые зависели от элементов страницы и их параметров. А здесь мы рассмотрим фильтры, которые зависят от содержимого элементов. Думаю, они запомнятся вам даже легче, чем предыдущие$CUT$.
has(element) - передаст элементы, содаржащие внутри себя заданные элементы

Пример: 
Вася - дурак!


$('p:has(b)').css('color','red'); — выделит красным параграф, в котором содержится жирный шрифт, то есть тег 

contains(текст) - передает элементы, содержащие заданный набор символов

Пример: 
Вася - дурак!


$('p:contains("дурак")').css('color','red'); — выделит красным параграф, содержащий слово "дурак".

parent и empty — передадут все полные и пустые элементы
...



$('p:parent').css('color','red'); - выделит красным первый параграф, поскольку он не пустой

$('p:empty').css('color','blue'); - выделит синим второй параграф, поскольку он пустой
Вообще-то фильтр parent должен распространяться на элементы, содержащие внутри себя другие элементы, однако обычный текст почему-то тоже считается за элемент. Поэтому, грубо говоря, parent вернет все не пустые элементы страницы.

visible и hidden — передаст все видимые и невидимые элементы

$('p:visible').css('color','red'); — окрасит в красный все видимые параграфы на странице

$('p:hidden').css('color','blue'); — окрасит в синий все невидимые параграфы на странице

В последнем случае эффекта мы не заметим. Почему? Потому что параграфы то невидимые! хД Но будьте уверены, они стали синими!

Вот такие дела. Совсем несложно, правда?


Фильтры элементов
Shizuku — Sat, 13 Nov 2010 03:29:12 GMT
Фильтры элементов предназначены для фильтрации (я кэп хД) нужных элементов на HTML страницах. Ими пользуются редко, поскольку выгоднее обращаться к элементам по их id и class параметрам. Однако для обращения к элементам удаленной страницы (где мы сами не можем расставить айди и классы) фильтры могут оказаться очень полезными, если не сказать, незаменимыми$CUT$.
eq(#) — передает элемент с нужным порядковым номером

p:eq(5) — обращается к шестому параграфу страницы. Почему к шестому, а не к пятому? Потому что отсчет идет с нуля. То есть, если вы захотите выделить шестой от начала страницы параграф красным цветом, то код будет выглядеть так:
$('p:eq(5)').css('color','red');

lt(#) и gt(#) — передадут все аналогичные элементы до и после элемента с заданным порядковым номером

$('p:lt(5)').css('color','red'); — окрасит первый, второй, третий, четвертый и пятый параграфы красным цветом

$('p:gt(5)').css('color','blue'); — окрасит седьмой, восьмой, девятый и т.д. параграфы синим цветом

first и last — передадут первый и последний элементы страницы

$('p:first').css('color','red'); — окрасит самый первый параграф на странице в красный цвет

$('p:last').css('color','blue'); — окрасит самый последний параграф на странице в синий цвет

even и odd — вернет все четные и нечетные элементы страницы

$('p:even').css('color','red'); — окрасит первый, третий, пятый, седьмой и все нечетные параграфы в красный

$('p:odd').css('color','blue'); — окрасит второй, четвертый, шестой, восьмой и все четные параграфы в синий

Поскольку отсчет ведется с нуля (а 0 в jQuery считается четным числом), то четный и нечетный фильтр как бы поменялись местами О_о Но на практике вы быстро разберетесь и исправите фильтр под свои нужды. Его удобно использовать для оформления лент комментариев. Они такие полосатые получаются)

not(element) — обратится ко всем элементам страницы, кроме заданного

$('*:not(p)').css('color','red'); — окрасить все элементы страницы красным цветом, кроме параграфов

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

header — обратится ко всем заголовкам страницы: h1, h2, h3, h4, h5, h6

$('*:header').css('color','red'); — окрасит заголовки всех размеров на странице в красный цвет

Оно вам надо? По-моему, лишнее. Это для тех, кому лень писать 12 символов, чтобы перечислить все заголовки хД

animated — обращение ко всем динамическим элементам страницы

$('*:animated').css('color','red'); — окрасит красным все динамические (то есть двигающиеся, анимированные элементы страницы). В общем, если на каких-то элементах страницы применены двигательные функции вроде слайда, то они окрасятся.
Для того, чтобы опробовать фильтры в деле, я сконструировала небольшой практический тестер. Отфильтрованные элементы будут выделены красным.


Параграф первый с порядковым номером 0
Параграф второй с порядковым номером 1
Параграф третий с порядковым номером 2
Заголовок H3
Параграф четвертый с порядковым номером 3
Параграф пятый с порядковым номером 4
Параграф шестой с порядковым номером 5
Анимированная фигнюшка ^^




 параграф №2

 параграфы до №3

 параграфы после №2

 первый параграф

 последний параграф

 четные параграфы

 нечетные параграфы

 не заголовок

 только заголовок

 только анимация





Элементы
Shizuku — Fri, 29 Oct 2010 18:56:09 GMT
Я начала пользоваться jQuery сравнительно недавно, поэтому в памяти свежи ее основы. Здесь я буду выкладывать небольшие наводки для новичков на максимально упрощенном языке. Я еще сама являюсь в этом новичком, поэтому буду учиться вместе с вами.$CUT$
Для изучения jQuery вам необходимо знать HTML и хотя бы немного ориентироваться в JavaScript, поскольку jQuery сама по себе является библиотекой JavaScript. Также будет полезно знание CSS, поскольку оттуда позаимствованы многие обозначения.
Итак, чтобы получить доступ к функциям из библиотеки, сперва нужно подключить ее к HTML документу. Для этого в HTML коде странице прописываем путь к библиотеке, например:

	bg.jpg основной фон повторяется по горизонатали и вертикали
	bgcontainer.jpg центральный фон для текста накладывается поверх основного и повторяется по вертикали
	top.jpg "шапка", фон для логотипа сайта и меню накладывается поверх основного и центрального и не повторяется
	bgfooter.gif "футер", рамка, замыкающая страницу накладывается поверх основного и центрального и не повторяется