16 de agosto de 2009

ago
16
2009

Tres ejemplos de bordes diferentes


CSS newbie nos muestra algunos ejemplos de las posibilidades que nos brinda la propiedad border. Jugando un poco con eso, podemos divertirnos un buen rato:

un ejemplo


<style>
.borde1 {
background: #FFFFFF url(UNA_IMAGEN) no-repeat 50% 50%;
border: 12px dashed #1B1A19;
height: 307px;
margin: 0 auto;
padding: 36px;
width: 250px;
}
.borde1 p {
color: #FFF;
margin: 10px 10px 0 0;
font: bold 36px Georgia, 'Times New Roman', Times, serif;
text-align: right;
}
</style>

<div class="borde1"><p> texto ejemplo </p></div>


Praesent mattis orci eget ligula imperdiet nec pellentesque augue pellentesque.


<style>
.borde2 {
-moz-border-radius: 8px;
background-color: CornflowerBlue;
border: 2px outset CornflowerBlue;
margin: 0 auto;
padding: 1px 10px;
text-align: center;
width: 250px;
}
.borde2 p {
border: 3px dashed AliceBlue;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
}
</style>

<div class="borde2"><p> texto ejemplo </p></div>


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


<style>
div.borde3 {
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-color: #AABBCC #AABBCC #AABBCC transparent;
border-style: solid;
border-width: 15px 15px 15px 20px;
margin: 0 auto;
padding: 0;
width: 500px;
}
div.borde3 p {
margin: 0;
padding: 5px;
text-align: right;
}
</style>
<div class="borde3"><p> texto ejemplo </p></div>



Más Post Relacionados:



No encontrastes lo que Buscabas ? GratisJuegos21

0 comentarios on "Tres ejemplos de bordes diferentes"

Agrega tu Comentario sobre el funcionamiento del Juego
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Deja tu Mensaje:

No se Permiten enlaces en los nombres, los enlaces se escriben en los comentarios:
Puedes usar

<a href="URL">NOMBRE</a>

<b>NEGRITA</b>

 

Gratis juegos21 | Copyright © 2009 | Todos los Derechos Reservados