Bun venit pe Phpbbbonline, va rugam sa va inregistrati , multumim!
-Forumul nostru ,ofera servicii gratuite in domeniile: Metin2 , Graphic design , coding !

Dupa conectare , va rugam sa postati!

Casete text elegante

In jos

Casete text elegante

Mesaj Scris de NiKe la data de Joi Aug 11, 2011 1:32 am

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

Incepem prin a pune urmatorul cod in foaia de stil CSS:

Cod:
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:

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">

</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]

Informatie: nu sunt facute de mine !



Respecta si vei fi respectat!
-Inainte de a posta , citeste regulamentul!


avatar
NiKe
Administrator
Administrator

Mesaje Mesaje : 284
Varstă Varstă : 21

Vezi profilul utilizatorului http://gamingarea.forum.st

Sus In jos

Re: Casete text elegante

Mesaj Scris de Eus la data de Joi Aug 11, 2011 4:48 am

Bravoo alyy :X este super tare asta!!! da sa stii ca sunt mai multe modele pe google. Adica astea sunt pentru asezat in footer sau chestii, da pe google gasesti sa arate altfel. Embarassed
avatar
Eus
Moderator
Moderator

Mesaje Mesaje : 15

Vezi profilul utilizatorului

Sus In jos

Re: Casete text elegante

Mesaj Scris de erik39 la data de Joi Aug 11, 2011 10:20 am

Asa e. Am gasit cate ceva. Da tot pe forumuri gasesti dastea Laughing Smile
avatar
erik39
Profesor
Profesor

Mesaje Mesaje : 83

Vezi profilul utilizatorului

Sus In jos

Re: Casete text elegante

Mesaj Scris de NiKe la data de Joi Aug 11, 2011 10:24 am

Si ce propuneti :> ?


Respecta si vei fi respectat!
-Inainte de a posta , citeste regulamentul!


avatar
NiKe
Administrator
Administrator

Mesaje Mesaje : 284
Varstă Varstă : 21

Vezi profilul utilizatorului http://gamingarea.forum.st

Sus In jos

Re: Casete text elegante

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum