- RoCkKiDMembru AccessGratuit
- Sex :
Numarul mesajelor : 121
Varsta : 35
Forma practica in CSS
Lun Iun 14, 2010 7:46 am
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:
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">
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
- LoukMembru AccessGratuit
- Sex :
Numarul mesajelor : 910
Varsta : 73
Re: Forma practica in CSS
Lun Iun 14, 2010 10:11 am
E ok, poate fi mutat la tutoriale.
- RoCkKiDMembru AccessGratuit
- Sex :
Numarul mesajelor : 121
Varsta : 35
Re: Forma practica in CSS
Lun Iun 14, 2010 11:58 am
Eu din cate vad nu am permisiunea sa-l mut..
- RoCkKiDMembru AccessGratuit
- Sex :
Numarul mesajelor : 121
Varsta : 35
Re: Forma practica in CSS
Lun Iul 12, 2010 6:00 pm
Merge intr-o pagina HTML,deci continutul forumului trebuie sa accepte HTML.
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum
|
|