AccessGratuit
Bine ati venit! Very Happy

Daca ati ajuns la aceasta pagina este cert faptul ca nu sunteti INREGISTRAT sau CONECTAT. Puteti face asta utilizand butoanele din meniu destinare acestor actiuni!
AccessGratuit.com
www.accessgratuit.com
cheers

Forma practica in CSS

AccessGratuit :: Suport si Tutoriale :: HTML, CSS, JavaScript & PHP :: Tutoriale HTML, CSS, JavaScript & PHP

Vezi subiectul anterior Vezi subiectul urmator In jos

14062010

Mesaj 

Forma practica in CSS




Astazi am sa va arat cum sa obtineti asa ceva:

[Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine]
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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Ultima editare efectuata de catre RoCkKiD in Lun Iun 14, 2010 3:53 pm, editata de 1 ori

RoCkKiD
Membru AccessGratuit

Sex Sex: masculin
Numarul mesajelor Numarul mesajelor: 162
Credite Credite: 31135
Varsta Varsta: 21
Browser utilizat Browser utilizat:

Sus In jos

Impartaseste acest articol pe: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

Forma practica in CSS :: Comentarii

Mesaj la data de Lun Iun 14, 2010 1:11 pm Scris de Kegan

E ok, poate fi mutat la tutoriale. Wink

Sus In jos

Mesaj la data de Lun Iun 14, 2010 2:58 pm Scris de RoCkKiD

Eu din cate vad nu am permisiunea sa-l mut..

Sus In jos

Mesaj la data de Vin Iun 25, 2010 3:34 pm Scris de kiDu

Nu ai explicat bine.. nu inteleg cum Neutral

Sus In jos

Mesaj la data de Lun Iul 12, 2010 8:41 pm Scris de shot

merge la toate forumurile ?

Sus In jos

Mesaj la data de Lun Iul 12, 2010 9:00 pm Scris de RoCkKiD

Merge intr-o pagina HTML,deci continutul forumului trebuie sa accepte HTML.

Sus In jos

Mesaj la data de Mar Iul 13, 2010 9:52 am Scris de shot

aha multumesc pentru raspuns

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

AccessGratuit :: Suport si Tutoriale :: HTML, CSS, JavaScript & PHP :: Tutoriale HTML, CSS, JavaScript & PHP

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum