Forma practica in CSS

Scris de RoCkKiD la data de Dum Iun 13, 2010 8:46 pm

Astazi am sa va arat cum sa obtineti asa ceva:

Adica o forma destul de practica pentru a da un design dragut paginii dumneavoastra.

Codul HTML pentru o astfel de sageata este:

Cod:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title>  </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html>

Acum,va trebuii sa adaugam CSS-ul pentru sageata.
Acesta este:

Cod:: #container { background: #666; margin: auto; width: 500px; height: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; } h1 { background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8)); padding: 10px 20px; margin-left: -20px; margin-top: 0; position: relative; width: 70%; -moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; color: #454545; text-shadow: 0 1px 0 white; } .arrow { width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; top: 104%; left: 0; position: absolute; }

Daca doriti sa faceti asta intr-o pagina HTML conceputa de dumneavoastra,este simplu.
In sursa paginii adaugati urmatorul cod:

Cod:: <LINK REL=StyleSheet HREF="css.css" TYPE="text/css">

Unde va trebuii sa inlocuiti css.css cu link-ul catre documentul css.

Pentru a adauga sageata undeva in pagina,folositi primul cod care vi l-am oferit,cel HTML.
In loc de My Heading scrieti textul dorit.

Asta a fost tot!

_{Coduri originale de pe http://net.tutsplus.com}