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

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

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

С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 код

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