JMiur [E]

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>

9 comentarios:

Graciela  

sabes lo que me gusta eso de 'jugar'...me viene de 10 JM :) besos

Responder
Ariane  

eu devo estar com algum problema, por que últimamente fico exultante com estas dicas, com a beleza e simplicidade destes 'truques'. Vou te confessar aqui baixinho, acho mesmo que estou é apaixonada por CSS :D Depois de horas lendo na internet, ainda me deito e fico pensando em códigos, em coisas que eu poderia ter feito. Será que é caso de procurar um médico?! :O
Obrigada por mais esta dica amigo, abraços! ;)

Responder
Espineli  

No sé cómo te lo montas je, je... pero siempre nos estás sorprendiendo con nuevos retos :D
Salu2!!

Responder
JMiur  

Graciela, Espineli: A jugar se ha dicho :D

Ariane: Cuando consigas un médico, avísame. Creo que todos los necesitamos aunque me temo que se trata de algo incurable :$

Responder
Romer Riera  

Muy buen dato.
Jorge, fijate de lo que te hablaba, vos aquí tenéis una entrada dividida en tres cuerpos y cada sección es indiferente de la otra y de paso dividida por un barra. ¿Como se logra esto?. disculpame si me salí del tema y mis disculpas a los comentaristas de esta entrada.

Responder
Romer Riera  

Seguimiento

Responder
JMiur  

Romer Riera:
Es todo el mismo post. Los párafos son etiquesta DIV (podrían ser etiquetas P). Es lo que se agrega cuando los formateas por ejemplo, para justificarlos. En el código HTML verás ese código; la línea esa de separación es un borde extra en ese DIV:
<div style="border-top: 1px solid #456; padding-top 20px;" >

o un DIV o párrafo vacio:
<div style="border-top: 1px solid #456; height: 10px;"></div>

Responder
Quitz  

Para que luego digan que el diseño web es solo código :D
Menuda imaginación tienes, JMiur. El segundo es el que más me gusta. Lástima que el -moz-border-radius aún no sea estándar, quitaría de usar mucho más código e imágenes.

Responder
JMiur  

Si, Quitz, es una lástima. Se dice que será parte del CSS3 pero, IE no lo tiene implementado por ahora así que, siempre habrá que recurrir a códigos engorrosos :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR