В этом уроке мы познакомимся с некоторыми 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 код Здесь ваш текст