AccessGratuit
Bine ati venit! Very Happy

Daca ati ajuns la aceasta pagina inseamna ca nu sunteti INREGISTRAT sau CONECTAT pe forumul AccessGratuit. Puteti face asta utilizand butoanele din meniu destinare acestor actiuni!
Forma practica in CSS Garfie10
AccessGratuit.com
www.accessgratuit.com
cheers

Alăturați-vă forumului, este rapid și ușor

AccessGratuit
Bine ati venit! Very Happy

Daca ati ajuns la aceasta pagina inseamna ca nu sunteti INREGISTRAT sau CONECTAT pe forumul AccessGratuit. Puteti face asta utilizand butoanele din meniu destinare acestor actiuni!
Forma practica in CSS Garfie10
AccessGratuit.com
www.accessgratuit.com
cheers
AccessGratuit
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

In jos
RoCkKiD
RoCkKiD
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 121
<b>Varsta</b> Varsta : 35

Forma practica in CSS Empty Forma practica in CSS

Lun Iun 14, 2010 7:46 am
Astazi am sa va arat cum sa obtineti asa ceva:

Forma practica in CSS Examplehe
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 12:53 pm, editata de 1 ori
Louk
Louk
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 910
<b>Varsta</b> Varsta : 73

Forma practica in CSS Empty Re: Forma practica in CSS

Lun Iun 14, 2010 10:11 am
E ok, poate fi mutat la tutoriale. Wink
RoCkKiD
RoCkKiD
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 121
<b>Varsta</b> Varsta : 35

Forma practica in CSS Empty Re: Forma practica in CSS

Lun Iun 14, 2010 11:58 am
Eu din cate vad nu am permisiunea sa-l mut..
kiDu
kiDu
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 12
<b>Varsta</b> Varsta : 32
http://www.green.forumer.ro

Forma practica in CSS Empty Re: Forma practica in CSS

Vin Iun 25, 2010 12:34 pm
Nu ai explicat bine.. nu inteleg cum Neutral
shot
shot
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 42
<b>Varsta</b> Varsta : 31
http://www.aboutyou.forumz.ro

Forma practica in CSS Empty Re: Forma practica in CSS

Lun Iul 12, 2010 5:41 pm
merge la toate forumurile ?
RoCkKiD
RoCkKiD
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 121
<b>Varsta</b> Varsta : 35

Forma practica in CSS Empty Re: Forma practica in CSS

Lun Iul 12, 2010 6:00 pm
Merge intr-o pagina HTML,deci continutul forumului trebuie sa accepte HTML.
shot
shot
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 42
<b>Varsta</b> Varsta : 31
http://www.aboutyou.forumz.ro

Forma practica in CSS Empty Re: Forma practica in CSS

Mar Iul 13, 2010 6:52 am
aha multumesc pentru raspuns
Albey
Albey
Membru AccessGratuit
<b>Sex</b> Sex : masculin
<b>Numarul mesajelor</b> Numarul mesajelor : 101
<b>Varsta</b> Varsta : 30
http://www.Zone-PGL.tk

Forma practica in CSS Empty Re: Forma practica in CSS

Vin Mar 18, 2011 5:57 am
da,la mine merge
Continut sponsorizat

Forma practica in CSS Empty Re: Forma practica in CSS

Sus
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum