Навигация

Партнеры

ArtGrafica - АртГрафика - скачай счастье :) » Статьи по дизайну » WEB дизайн » CSS 34. Необычные рассуждения дизайнера

Комментариев: 0
 (голосов: 1)

CSS 34. Необычные рассуждения дизайнера


Калитка в мой сад
Простая таблица стилей приводит к впечатляющим визуальным эффектам


Фотограф-энтузиаст Патрик Лауке предпочитает делать фотографии самостоятельно, а
не пользоваться готовыми. Не стала исключением и «Калитка в мой сад», присланная на сайт Zen Garden. Лауке использовал фотографию в качестве великолепного фонового изображения.
Кроме фотографирования, Лауке питает пристрастие к концепции побочного дизайна
(incidental design), которую еще называют искусством находок (found art) использованию случайных предметов в произведениях искусства. В данном случае Лауке отсканировал ржавые железки, валявшиеся рядом с помещением, где он трудится. Они внесли свой вклад в создание ощущения увядания, которым проникнута работа.

Важность фона

Хотя и образы, и типография «Калитки в мой сад» играют роль в создании мрачноватого, меланхоличного настроя, но прежде всего этим эффектом дизайн обязан использованию фоновой графики. Конечно, то же самое можно сказать о многих работах на сайте Zen Garden, но именно эта наиболее отчетливо иллюстрирует важность позиционирования фона и его поведения при прокрутке для создания неординарного внешнего вида.
Основной эффект достигается довольно просто и виден в разных браузерах. Лауке привязал фоновое изображение к элементу body и зафиксировал его.
Находящаяся справа область контента прокручивается на фоне неподвижной картинки. Работа с изображениями -это краеугольный камень дизайна на основе CSS.
Важно понимать, какие в вашем распоряжении есть свойства и как они влияют на внешний вид стилизуемых элементов.

Свойства фона в CSS

У фона есть шесть свойств, включая стенографическое свойство background. Все они перечислены в табл. 1 вместе с необходимыми пояснениями. Добавление фонового
изображения и задание цвета фона
Для задания в таблице стилей фонового изображения служит свойство background-image, в значении которого проставляется URL, указывающий на местоположение картинки. URL задается либо относительно CSS-файла на том же сервере, либо абсо-
лютно - и тогда может указывать на другой сервер:
background-image: url(images/my.jpg);
Чтобы задать цвет фона, применяется свойство background-color. Значение цвета может задаваться в шестнадцатеричном виде, в сокращенной шестнадцатеричной записи, в виде RGB или одного из поддерживаемых символических названий:
background-color: black;
Можно также воспользоваться стенографическим свойством background, чтобы сразу задать и цвет, и изображение, и ряд других свойств. Именно так поступил Лауке:

body {
background: #000 url(background.png)
-ЗОрх Орх no-repeat fixed;
}


Свойство background-color может также принимать значение t r a n s p a r e n t , и это активно используется в «Калитке в мой сад». В этом случае сквозь фон элемента проступает то, что находится под ним. В данной работе прозрачность часто используется для отображения ссылок, например:

а {
c o l o r : #eee;
text-decoration: none;


Способы присоединения фоновых изображений

Свойство background-attachment может принимать значения s c r o l l или fixed. По умолчанию предполагается значение s c r o l l , то есть фоновое изображение прокручивается вместе с контентом. Задав значение fixed, можно добиться эффекта, который был нужен Лауке: изображение остается на месте, а прокручивается
только контент (рис. 2). Именно таким образом Лауке присоединил фотографию к элементу body:

body {
ckground: #000 url (background.png) -3Qpl
Opx no-repeat fixed
JJOU;
ba<
Opx


Позиционирование фоновых изображений

Свойство b a c k g r o u n d - p o s i t ion управляет местоположением фонового изображения относительно родительского элемента. Его значение можно задавать
в виде процента, длины или ключевого слова. Значение может состоять из двух позиций. Если заданы обе, то первая определяет положение по горизонтали, а
вторая - по вертикали:

b a c k g r o u n d - p o s i t i o n : Юрх 20рх;


Если задана только одна позиция, то она считается горизонтальной, тогда как вертикальная предполагается равной 50% или c e n t e r . Приведенное выше
объявление говорит, что изображение нужно сместить на 10 пикселей по горизонтали и на 20 пикселей по вертикали. Лауке в «Калитке в мой сад» тоже указал
положение в пикселях:

body {
background: #000 url(background.png) -ЗОрх Орх
no-repeat fixed;


Обратите внимание на отрицательное значение - 3 Орх. Это допускается и означает, что изображение должно быть смещено на 30 пикселей влево, а не вправо, как
было бы в случае положительного значения. Задание в качестве позиции значения 0 располагает изображение по вертикали вровень с верхним полем объемлющего элемента, в данном случае body. Рисунки 3 и 4 показывают, как выглядит изображение относительно окна браузера без смещения и с отрицательным
смещением.

Управление повтором изображения

В «голом» HTML нельзя управлять способом повтора фонового изображения, по умолчанию оно повторяется вдоль обеих осей. CSS же позволяет контролировать это более точно с помощью свойства background-repeat.
Это свойство может принимать такие значения:
r e p e a t - х (повторять только вдоль горизонтальной оси), r e p e a t - у (повторять только вдоль вертикальной оси), n o - r e p e a t (вообще не повторять) и r e p e a t (повторять вдоль обеих осей, это режим по умолчанию). Лауке указал в тенографическом свойстве background значение n o - r e p e a t :

body {
background: #000 url(background.png) -ЗОрх Орх
• no-repeat fixed;


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

Варианты верстки

Чтобы получить контейнер шириной 300 пикселей, сдвинутый влево от области просмотра на 470 пикселей, Лауке задал для элемента body отступ 470 рх:

body {
padding: 0 0 0 470рх;


Напомним, что в стенографических свойствах padding и margin порядок задания отступов в разных направлениях такой: t o p , r i g h t , bottom, l e f t . Все значения, кроме левого отступа, здесь равны 0 (заметьте, что в этом случае Лауке не указал никакой единицы измерения).
К этому контейнеру применен стиль, описывающий фоновое изображение, цвет и ширину:

•container {
background: #000 url(bottom_corner.png) norepeat
bottom right;
color: inherit;
width: ЗООрх;
}


С помощью расширения Web Developer для браузеров Mozilla и Firefox вы можете включить показ внешних контуров элементов, а также увидеть информацию об имени класса и идентификаторе для каждого элемента. На рис. 6 показано, как применяются стили для всех элементов внутри раздела # c o n t a i n e r .

Дополнительные стилистические эффекты

В работе «Калитка в мой сад» таблица стилей не содержит почти никаких трюков, поэтому Лауке пришлось решать непростой вопрос об управлении меню
и размещении сопровождающего его изображения цветка. Не так-то легко было заставить различные браузеры одинаково показывать окруженное рамкой меню.
Собственно меню не вызывало особых сложностей. Лауке создал контейнер для элемента с идентификатором # l i n k L i s t и присоединил к каждому элементу
навигации фоновое изображение; в совокупности они и образуют рамку. Но разместить цветок таким образом, чтобы он выступал за рамку и располагался поверх фона, оказалось потруднее.

#liiikList2>#lselect {
background: url(flower.png) no-repeat top
left;
margin-left: -65px;
padding-left: 80px;
min-height: 150px;
}


Решение, основанное на применении селектора дочерних элементов, работает в браузерах Mozilla, Opera и Safari. Чтобы получить приемлемый результат в
Internet Explorer, Науке воспользовался одним из дополнительных div, имеющихся в разметке, и абсолютно позиционировал изображение цветка:

#extraDivl {position: absolute;
top: 165px;
left: 142px;
background: url("flower.png") no-repeat top
left;
width: 115px;
height: 150px;
}


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

селектор # l i n k L i s t 2 > # l s e l e c t :
body>#extraDivl {
display: none;
}


Voila! И цветок, и меню видимы и ведут себя так же, как в современных браузерах.
Отличный стиль, простая таблица Ясно, что своим изяществом «Калитка в мой сад» обя-
зана, прежде всего, уникальным образам, типографии и продуманному размещению элементов. Хотя на первый взгляд дизайн кажется сложным, на самом деле
для достижения большинства эффектов используется довольно простая таблица стилей. Чтобы обеспечить совместимость, пришлось применить всего один
обходной маневр.




34



css background repeat


css background norepeat


Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 19
Гостей: 13
Пользователи: - отсутствуют
Роботы: Yandex Bot, Google Bot, Google Bot, crawl Bot, Yahoo Bot, MSN Bot

20-ка посетителей: tabathaob4, Patriotvhg, KentPr, Travismn, SRChoquetteTob, asuhfr, AgnesAccony, BrantRug, ChristooM, ptencikcxz, Achmedmus, ptencikzia, charlenead1, tonyayd3, StevenCacle, Jameschupe, Vigosig, robertaji60, valeriaep18, Sergeivinter56


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги