Стильные рамки (блоки).Юлия_Гурбер

Стильные рамки (блоки) Недавно заинтересовалась CSS (Cascading Style Sheets) — каскадные таблицы стилей. Можно ли, не будучи веб-дизайнером, научиться разбираться в этом сложном наборе параметров? Для чего? Ну, хотя бы для того, чтобы с помощью языка CSS создавать блоки (рамочки), где будут размещаться текст, картинки или что нашей душе угодно. Поэкспериментировала с кодами и получила вот такие стильные, лёгкие блоки. Под каждым стоит его код. Можно менять размер (атрибут width: 650px), цвет фона, обводок, чтобы получить разные по цветовому исполнению блоки. Обозначение цвета: #ABEDF7, просто оставляем решётку #, убираем ABEDF7, и ставим свой цвет.

Здесь будет ваш текст Ваша подпись

<center><div style="#shed_left; padding: 20px; width: 650px; background: #C3FEAA; border-radius: 12px; box-shadow: 4px 4px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #66CC00; padding:10px; background: #FBFFAC; border-radius: 12px; boxShadow 11: width: 80%; max-width:; margin: 0em auto; padding: 1em; box-shadow: 0 4px 4px #575555 inset;"><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></div></center>

[more= Смотрим дальше ]

Здесь будет ваш текст Ваша подпись

<center><div style="border: 3px solid #00C3EE; padding:10px; width: 655px; background: #ABEDF7; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #00C3EE; padding:10px; width: px; background: #ABEDF7; border-radius: 12px; box-shadow: inset 5px 6px 3px rgba(227,249,252,0.4), 3px 3px 4px rgba(0,0,0,0.6); "><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></div></center>

Здесь будет ваш текст Ваша подпись

<center><div style="border: 5px solid #CC66CC; padding: 10px; width: 650px; background: #CCFFCC; border-radius: 12px; margin: 1em auto; padding: 1em; border-radius: 10px; box-shadow: inset rgba(0,0,0,.7) 0 -6px 12px, inset rgba(252,255,255,.7) 0 6px 12px, rgba(0,0,0,.8) 0 5px 10px -5px;"><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст<br /> </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></center>

Здесь будет ваш текст Ваша подпись

<center><div style=" padding:10px; width: 650px; background: #F3D8D1;box-shadow: 0 0 10px #0000ff;box-shadow: 0 0 12px #0000ff, 0 0 14px #ff0000 inset; "><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></center>

Подготовила Ю. Гурбер[/more]