Page 123 - Сила CSS3 Освой новейший стандарт

Усложнение фона • 123

background: url(images/paperlines.gif) #FBFBF9;
background: url(images/thumbtack.png) 50% 5px no-repeat,
url(images/stains1.png) 90% -20px no-repeat,
url(images/stains2.png) 30% 8% no-repeat,
url(images/stains3.png) 20% 50% no-repeat,
url(images/stains4.png) 40% 60% no-repeat,
url(images/paperlines.gif) #FBFBF9;
-moz-background-size: auto, auto, auto, auto, auto,
auto 1.6em;
-webkit-background-size: auto, auto, auto, auto, auto,
auto 1.6em;
background-size: auto, auto, auto, auto, auto,
auto 1.6em;
}

экСперименты С изоБражениями на рамках

В особенностях свойства border-image не так легко разобраться, и я не собираюсь это
отрицать. Если даже после выполнения предыдущих упражнений вы все еще чувствуете
себя неуверенно, я настоятельно рекомендую вам ознакомиться со следующими сетевыми
инструментами, предназначенными специально для оформления рамок:
• border-image-generator автора Kevin Decker (http://border-image.com) позволяет за-
гружать любые изображения, для того чтобы посмотреть, как они будут выглядеть
в качестве рамки элемента. Вы можете настроить по своему вкусу нарезку изображения,
ширину всех отрезков рамки и способ повторения рисунка, одновременно отслеживая
все изменения на экране;
• Grokking CSS3 border-image автора Nora Brown (http://www.norabrowndesign.com/
css-experiments/border-image-anim.html) предлагает пять стандартных изображений
и несколько значений border-image — вы просто выбираете любое сочетание и смо-
трите, как такой вариант выглядит на экране.
Возможность на лету поменять значения и проверить, как это отразится на визуальном пред-
ставлении, — один из лучших способов разобраться в хитростях той или иной функции CSS.

Теперь можно встроить само изображение рамки: стандартное свойство border-
image предназначено для Chrome и Opera, а варианты с префиксами — для Firefox
и Safari:
#paper {
float: left;
margin: 40px;
padding: 3.2em 1.6em 1.6em 1.6em;
border-width: 0 0 0 50px;
-moz-border-image: url(images/edge.png) 0 0 0 50 round;
-webkit-border-image: url(images/edge.png) 0 0 0 50
¬ round;
border-image: url(images/edge.png) 0 0 0 50 round;

www.trk.kg