Agrega Triangulo Con CSS3 A Un Div De Tu Blogger

Un sutil característica de CSS que se ha utilizado para hacer algo interesante son los bordes CSS y asi utilizarlo para crear puros triángulos CSS. Estos triángulos tienen la ventaja de ser extremadamente ligeros (sin utilizaruna imagen ) y escalable para arrancar.

 El siguiente agrega un triángulo basado en CSS a un DIV para producir una mirada burbuja de diálogo que se puede ser utilizar para mostrar comentarios, citas, etc Cada flecha se agrega a la DIV sin margen de benefic por medio del contenido generado por CSS . El resultado son DIVs regulares inyectados con CSS  con mejoras progresivas que se ejecutan bien en los navegadores menos capaces.

Puedes agregar estos a tu blog de blogger y darle ese estilo especial y particular a tus comentarios,citas o mensajes etc.

He aqui algunos de los ejemplos de este truco CSS3.

This is a test

This is a test

This is a test

This is a test

Como implementar estas barras con flecha en distintas direcciones a tu blog de blogger.

1.Entra a la interface de blogger
2.Ve a Plantilla>>Editar Html
3.Busca el siguente codigo ]]></b:skin> 
4.Copia y pega el codigo de abajo despues de ]]></b:skin>

<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

</style>

5.Luego busca tu editor de html y pega el siguiente codigo donde deseas poner la barra con la flecha en la direccion que escogas.

<div class="uparrowdiv">
This is a test
</div>

<div class="downarrowdiv">
This is a test
</div>

<div class="leftarrowdiv">
This is a test
</div>

<div class="rightarrowdiv">
This is a test
</div>

Nota: para escojer barra segun la flecha.Una ves escojas la barra que deseas anades el mensaje que desees en donde dice This is a test y listo disfrutaras de una barra con mensajes y estilo.Puedes personalizar tu barra combiamdo tamano,color y direccion de la flecha.

Por Julio Enrique
uparrowdiv= Barra de flecha hacia arriba
downarrowdiv=Barra Flecha hacia abajo
leftarrowdiv=Brra Flecha hacia la Izquierda
rightarrowdiv=Barra Flecha hacia la Derecha

Read More