Navigare rapidă

Ultimele subiecte
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
» Avatar User in Online List
Scris de Emanueltutorials Vin 9 Feb - 21:18
Cuvinte-cheie

edit  

Casete de text elegante


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]

Comentariile utilizatorilor
Vizitator
avatar
la data de Vin 22 Iul - 0:14
Vizitato Vizitator
Conectat
Sunt frumoase, merg la citate :scoate limba:
Membru dedicat
avatar
la data de Vin 22 Iul - 10:28
Paul Membru dedicat
Conectat
frumoase..ar fi frumos sa sa le pui intrun tool tip
Membru ET
avatar
la data de Vin 22 Iul - 10:30
Edy Membru ET
Conectat
Foarte frumoase,bravo.Merita puse.
Administrator
avatar
la data de Vin 22 Iul - 11:37
Zeus Administrator
Conectat
Stiu tooltip-ul la care te referi Paul, momentan lucrez la el ;)
Membru dedicat
avatar
la data de Sam 23 Iul - 23:40
Mitză Membru dedicat
Conectat
Frumos, dar sunt cam ciudate imaginile.
Membru nou
avatar
la data de Vin 12 Aug - 22:55
Kocos Membru nou
Conectat
Frumos Ma cheama Gigel si am sageata jos Bun cod
Membru ET
avatar
la data de Sam 13 Aug - 17:59
BlackStar Membru ET
Conectat
Nu imi merge miai putea spune cum pot sa fac sa arate ca si la voi pe forum unde arata unde sa scri si cum arata Boldul Code etc...??
Membru ET
avatar
la data de Sam 13 Aug - 20:45
cornelnicolae Membru ET
Conectat
Mie mi se par foarte tari casetele acestea..
Membru ET
avatar
la data de Mier 2 Noi - 22:57
GeKo Membru ET
Conectat
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] a scris:Foarte frumoase,bravo.Merita puse.
Membru ET
avatar
la data de Sam 5 Noi - 15:57
roBiino =p~ Membru ET
Conectat
Foarte bun tutorial și foarte elegant. Mulțumesc de tutorial și baftă!
Vizitator
avatar
la data de Dum 27 Noi - 19:22
Vizitato Vizitator
Conectat
Foarte frumoase
Membru ET
la data de Dum 27 Noi - 19:29
George130 Membru ET
Conectat
Sunt foarte frumoase.






Membru ET
avatar
la data de Joi 1 Dec - 13:42
Clik Membru ET
Conectat
frumoase aceste casete,bravo !