|
CSS vodiči
|
CSS koda za postavitev diva v obliki oblačka nad božičkom, ki je v div vsavljen, kot slika za ozadje. Oblaček za besedilo je v celoti narejen s CSS kodo; od zaobljenih robov do spodnje kljukice. Oblaček je primeren za božička, ljudi, dizajn, meni, forum, galerijo, ...
Primer
| HTML in CSS koda |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{background:#ffdddd;}
/* širina in višina; slika božička v ozadju */
.oblacek1 {float: left; width: 368px; height: 360px;
background: url(bozicek.png) 12% 94% no-repeat;}
/* urejanje besedila */
.oblacek h1, .oblacek p {margin: 0 10px; letter-spacing:1px;}
.oblacek h1 {font-size:2em; color:#2fcd15; text-align: center;}
.oblacek p {padding-bottom:0.5em; color:#eee; text-align: center;}
.oblacek {background: transparent; margin:1em;}
/* spodnja kljukica */
.oblacek em {display:block; width:0; height:0; color:#d8d8ee;
overflow:hidden; border-top:12px solid #fff; border-left:12px dotted transparent;
border-right:12px dotted transparent; margin-left:50px;}
.oblacek span {display:block; width:0; height:0; color:#fff; overflow:hidden;
border-top:10px solid #d70000; border-left:10px dotted transparent;
border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}
/* oblaček; ozadje in obroba */
.oblacek2 {display:block; background:#d70000; border:3px solid #fff;
-moz-border-radius: 10px; -webkit-border-radius: 10px;}
</style>
</head><body>
<div class="oblacek1">
<div class="oblacek">
<div class="oblacek2">
<h1>Vesel božič</h1>
<h1>in</h1>
<h1>srečno novo leto</h1>
<p>vam želi</p>
<p>Moje-Mesto.com</p></div><em></em><span></span></div>
</div>
</body></html>
|
Oblaček za besedilo lahko uporabite, kot del dizajna v menijih in galerijah. Lahko ga uporabite v forumih oz. v drugih komunikacijskih kanalih, kot oblaček z besedilom, ki kaže na avatar uporabnika. Možnosti je veliko, le odločiti se morate za eno.
|
