Forma practica in CSS
Pagina 1 din 1 • Impartiti •
Forma practica in CSS
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:
Acum,va trebuii sa adaugam CSS-ul pentru sageata.
Acesta este:
Daca doriti sa faceti asta intr-o pagina HTML conceputa de dumneavoastra,este simplu.
In sursa paginii adaugati urmatorul cod:
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

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>
<!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
<![endif]-->
</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
Ultima editare efectuata de catre RoCkKiD in Lun Iun 14, 2010 1:53 am, editata de 1 ori

RoCkKiD- Membru AccessGratuit
Sex: 
Numarul mesajelor: 121
Credite: 95235
Varsta: 23
Re: Forma practica in CSS
E ok, poate fi mutat la tutoriale. 

Kegan- Membru AccessGratuit
Sex: 
Numarul mesajelor: 905
Credite: 100417
Varsta: 61
Re: Forma practica in CSS
Eu din cate vad nu am permisiunea sa-l mut..

RoCkKiD- Membru AccessGratuit
Sex: 
Numarul mesajelor: 121
Credite: 95235
Varsta: 23
Re: Forma practica in CSS
Merge intr-o pagina HTML,deci continutul forumului trebuie sa accepte HTML.

RoCkKiD- Membru AccessGratuit
Sex: 
Numarul mesajelor: 121
Credite: 95235
Varsta: 23
Subiecte similare» CSS - Prescurtare cod pentru a schimba forma unui text
» Script pentru a afisa titlul si descrierea unui site in forma animata
» Script pentru a afisa titlul si descrierea unui site in forma animata
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum




» Primii pasi in HTML si WWW: Uneltele necesare crearii si testarii unui document HTML
» Cum sa creezi o carte de vizita folosind M.O. Publisher?
» Prezentare Ruddpack!
» Cerere Parteneriat EvoGame.ro
» Substituire expeditor pe Internet
» Handball-ul
» Ce antivirus folositi
» Cum te intelegi cu cel mai bun prieten al tau ?
» Muzica preferata