Sunteți pe pagina 1din 4

4.

(Reguli) CSS3
CSS3 este cel mai nou standard CSS.

Modulele CSS3 sunt urmatoarele:

Selectori
Caseta de text
Fundal si chenare
Imagini
Efecte de text
Animatii

1
Chenare (borders)
In CSS3 putem crea chenare rotunjite, casete de
text cu umbre, etc.
Proprietati utile pentru chenare:

border-radius
box-shadow
border-image

Aplicatie:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>Caseta cu colturi rotunjite.</div>
</body>
</html>

Pentru a adauga umbra unei casete de text:

2
div {
box-shadow: 10px 10px 5px #888888;
}

Pentru a adauga un chenar de tip imagine:

div {
border-image: url(chenar.png) 40 40 round;
}

Culori de fundal:

Proprietati pentru setarea fundalului:


background-size
background-origin

Aplicatie: redimensionarea unei imagini de fundal:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(brasov.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>

<p>Am adaugat o imagine de fundal.</p>


<p>Imaginea originala:
<img src="brasov.gif" width="224" height="162">

3
</p>

</body>
</html>

Efecte de text - adaugarea unei umbre:


<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
</style>