Czysto i przejrzyście wykończone elementy strony internetowej niekoniecznie muszą być skomplikowane w wykonaniu. Przedstawiam estetyczną ramkę wykonaną za pomocą CSS3, bez użycia grafiki.
Tradycyjnie są dwa rodzaje wiadomości ;) Dobrą jest, że poniższe rozwiązanie działa w Firefoxie, Chromie, Safari i Operze. Natomiast złą wiadomością, że nie działa pod IE7/IE8 (a to niespodzianka!).
HTML
<![CDATA[<div class="curved_corners">
<div class="font_titles">Tytuł</div>
<div class="font_text">Treść.</div>
</div>
]]>
CSS
<![CDATA[<style type="text/css">
body {
background-color: #e8e8e8;
}
.font_titles {
font-family:arial;
font-size:28px;
font-weight:bold;
color:#2b3b4e;
}
.font_text {
font-family:arial;
font-size:12px;
color:#2b3b4e;
}
.curved_corners
{
text-align:justify;
margin-left: 70px;
border:2px solid #BBBBBB;
padding:30px 30px;
background:#FFFFFF;
width:300px;
height:180px;
border-radius:20px;
-moz-border-radius:20px; /* Firefox 3.6 and earlier */
/* Creating the shadows */
box-shadow: 2px 2px 15px #888888;
-moz-box-shadow: 2px 2px 15px #888888;
-webkit-box-shadow: 2px 2px 15px #888888;
}
.spacer {
margin-top:15px;
}
</style>
]]>
Download:
link (plik *.html)
Źródło:
http://www.techheadz.co.uk/208.html
0 komentarze:
Prześlij komentarz