AcasaAcasa  CalendarCalendar  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  

Distribuiţi | 
 

 [CSS]Casete de text elegante

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Admin
Administrator
Administrator
avatar

Mesaje : 194

Credite : 582

Reputatie : 0

Data de inscriere : 15/08/2011

Varsta : 21

Localizare : Navodari

Hobby : CS, Afara.. Fete..

Arma Preferata : Ak-47


MesajSubiect: [CSS]Casete de text elegante   Joi Aug 18, 2011 4:07 am

Cu acest cod puteti pune textul intr-un chenar elegant.

Incepem prin a pune urmatorul cod in foaia de stil CSS:
Cod:
.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent;
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 10px;
}
In pagina HTML vom marca casetele cu atributul xarrowdiv,unde x este directia sagetii,putem folosi up,down,left sau right.
Cod:
<div class="uparrowdiv">
Ma cheama Gigel si am sageata sus
</div>

<div class="downarrowdiv">
Ma cheama Gigel si am sageata jos
</div>

<div class="leftarrowdiv">
Ma cheama Gigel si am sageata in stanga
</div>

<div class="rightarrowdiv">
Ma cheama Gigel si am sageata in dreapta
</div>

Demo => [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Sus In jos
Vezi profilul utilizatorului http://cstrike-zone.wikiforum.ro
 

[CSS]Casete de text elegante

Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Tutoriale :: Tutoriale ForumGratuit-
Forumgratuit.ro | ©phpBB | Forum gratuit de suport | Semnaleaza un abuz | Creeaza-ti un blog
@ Parteneri