Сети для людей / Network for people

Июль 18, 2008

10 стильных шрифтовых сочетаний при помощи CSS

Filed under: CSS, Линкодром — vladbuk @ 9:12 дп

Собственно ссылка на статью: 10 Examples of Beautiful CSS Typography and how they did it…

Выбираем понравившийся пример и используем указанный ниже код.

Реклама

Апрель 2, 2008

Простейшая рамка для фото при помощи CSS

Filed under: CSS — vladbuk @ 3:53 пп

Краткость — сестра таланта, это слышали все. Но использование примитивных элементов для оформления вебстраниц явно не в моде. Флэш, видео и вообще медиа контент заполняет вебсайты под завязку… А вот как меняет внешний вид фотографии простая рамка, созданная при помощи каскадных стилей.

Исходное фото

Весна опять пришла

<img height="204" width="250" alt="Весна опять пришла"
src="vladbukhanets200701lz8.jpg" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, «Courier New», courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Добавляем класс .frame

<img height="204" width="250" alt="Весна опять пришла"
src="vladbukhanets200701lz8.jpg" class="frame"/>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, «Courier New», courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }Описание класса:

.frame {
background: #fff;
border-right: #cccccc 1px solid; 
border-bottom: #bebebe 1px solid";
padding-right: 5px; 
padding-left: 5px; 
padding-bottom: 5px; 
padding-top: 5px; 
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, «Courier New», courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

И вот как выглядит эта фотка после такого элементарного стилевого оформления:

Весна опять пришла

Все гениальное просто 🙂

 

Создайте бесплатный сайт или блог на WordPress.com.