4 CSS техники, которые вы должны знать

В этом уроке мы познакомимся с некоторыми CSS техниками, которые, может быть, пригодятся вам в оформлении сайта.

1. Закругленные углы без использования изображений.

Однако большим недостатком этого метода является то, что он работает только в браузерах Firefox и Safari. 

Поэтому, если в этом блоке вы видите квадратные углы, скачайте и установите браузер Firefox.

СSS код


div.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:10px;
border:3px solid #f3ddac;
background: #fff3d8;
}

HTML код



Пример


Здесь ваш текст

2. Имитация рамок у изображения.

Пример первый. В этом примере изображение просто обведено рамкой толщиной 1px, и задан серый фон, таким образом создается иллюзия двойной рамки.

CSS код

img.demo1 {
padding:2px;
border:1px solid #ababab;
background:#dcdcdc;
}

HTML код


Пример изображения с двойной рамкой

Пример второй. Иллюзия тени изображения.

CSS код

img.demo3 {
padding:0 2px 2px 0;
border:0;
border-right:2px solid #eee;
border-bottom:2px solid #eee;
background:#d1d1d1;
}

HTML код


Пример изображения с имитацией тени

3. Блок-ссылка.

Блок ссылка В этом блоке вы можете описать ссылку.

CSS код

a.blocklink {
display:block;
width:160px;
background:#f0f0f0;
color:#999;
font-family:corbel, verdana, sans-serif;
padding:4px;
text-decoration:none;
font-weight:normal;
font-size:0.72em;
border:1px solid #dadada;
}
a.blocklink strong {
font-family:georgia, helvetica, sans-serif;
display:block;
color:#656565;
font-weight:bold;
font-size:1em;
margin:0 0 3px 0;
font-style:italic;
}
a.blocklink:hover {
background:#dcdcdc;
color:#303030;
border:1px solid #adadad;
}
a.blocklink:hover strong {
color:#cb0000;
}

HTML код


Link Block Heading
This is the text contained within the link block... It has no real meaning. It's just here to make it look pretty...

4. Полупрозрачный фон и непрозрачный текст

 

Это пример с прозрачным текстом, который помещен в прозрачный блок

 

 

А это его непрозрачная версия

СSS код


.transparent {
 padding:10px;
 color:#000;
 background:#cb0000;
 height:200px;
 width:250px;
 opacity: 0.4;
 filter:alpha(opacity=40);
 -moz-opacity:0.4;
 -khtml-opacity: 0.4;
}

HTML код


Здесь ваш текст

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.eight7teen.com
Перевел: Сергей Патин
Урок создан: 17 Марта 2009
Просмотров: 35380
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^