Tutorial CSS (cateva trucuri)

1. Colturi rotunjite pentru DIV-uri

De multe ori in munca de design pentru un site ne lovitm de nevoia de a avea chenare care contin liste sau informatii utile si au colturile rotunjite. Un astfel de div este construit cu ajutorul unui cod css. Chenarul este alcatuit dintr-un header, body si footer.

style.css

.round_box {
	background: #f0f0f0;
}

.round_box_top div {
	background: url(top-left.png) no-repeat top left;
}

.round_box_top {
	background: url(top-right.png) no-repeat top right;
}

.round_box_bottom div {
	background: url(bottom-left.png) no-repeat bottom left;
}

.round_box_bottom {
	background: url(bottom-right.png) no-repeat bottom right;
}

.round_box_top div, .round_box_top, .round_box_bottom div, .round_box_bottom {
	width: 100%;
	height: 10px;
	font-size: 1px;
}

.round_box_body { 
	margin: 0 10px; 
}

index.html

<div class="round_box">
	<div class="round_box_top"><div></div></div>
	<div class="round_box_body">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
	</div>
	<div class="round_box_bottom"><div></div></div>
</div>

Imaginile de care aveti nevoie le descarcati de aici. CSS-ul poate fi modificat dupa bunul plac.

2. DIV-uri transparente

Hai sa vorbim si despre DIV-uri semi-transparente. Pentru a face un div semi-transparent este nevoie sa folosim CSS-ul de mai jos in propietatile DIV-ului respectiv; 80 reprezinta procentul de transparenta, el poate fi modificat dupa bunul plac.

-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

3. Prima litera dintr-un text: speciala

Cand avem un text mai mare de afisat si dorim sa il infrumusetam, pe langa un background cu o poza, putem face ca prima litera sa fie mai mare fata de restul, exact cum erau in cartile acelea vechi unde prima litera era desenata impreuna cu anumite caractere sau facand parte dintr-un peisaj. Codul CSS este mai jos si trebuie definit in fisierul .css al paginii. Culoarea literei se poate seta dupa preferinta iar textul sa fie incadrat intr-un paragraf.

p:first-letter {
	color: #ff0000;
	font-size:xx-large
}

4. O imagine statica pe post de background

Cred ca ati vazut pe unele site-uri ca atunci cand dai de scroll in jos imaginea din background ramane fixa. Ei bine, folosind CSS-ul de mai jos puteti obtine acelasi rezultat pe pagina voastra.

body {
	background-image: url('cale/nume_imagine_background');
	background-repeat: no-repeat;
	background-attachment: fixed;
}