En este dia te traigo un tutorial muy sencillo sobre como añadir una esquina doblada a un elemento en la pagina de tu sitio o blog.Este efecto de doblado de una esquina es logrado usando el codigo de CSS3 sin utilizar ninguna imagen.Este atractivo efecto trabaja en la mayoria de los navegadores de internet y esta diseñado para ser compatible con la apariencia de tu pagina.
Estare mostrandole ejemplos recreado el estilo de notas,puedes utilizarlo para darle forma y color a tus citas a la hora de escribir un articulo.
Ejemplos:
Agua
Agua
Agua
Agua
Agua
Sigue los siguientes pasos para implementarlo en tu blog de blogger.
1.Entra en tu cuenta de blogger
2.Busca donde dice Plantilla luego selecciona donde dice Editar Html
3.Busca la siguiente etiqueta </b:skin>
4.Copia y pega el codigo de abajo antes de la etiqueta </b:skin>
.note {
position:relative;
width:480px;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
background:#97C02F;
overflow:hidden;
}
.note:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
border-style:solid;
border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
background:#658E15; /* For Opera when also applying a border-radius */
display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note.yellow {background:#F7F41B;}
.note.yellow:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}
/* Version De Esquinas Redondas
* Todos los navegadores modernos pueden producir estos efectos con un simple pseudo-elemento.
* Sin Embargo todos tienen un bugs (principalmente con el border-radius) que lo hace un poco tricky.
* Lo que puedo decir este es el unico metodo por el momento.
* No puedes usar este metodo para un efecto simple debido a que Opera 11 solamente mostrara fondo
* atraves de fondo transparente si hay un border-radius aplicado.
*/
.note.rounded {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.note.rounded:before {
border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
-webkit-border-bottom-left-radius:5px;
-moz-border-radius:0 0 0 5px;
border-radius:0 0 0 5px;
}
.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}
position:relative;
width:480px;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
background:#97C02F;
overflow:hidden;
}
.note:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
border-style:solid;
border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
background:#658E15; /* For Opera when also applying a border-radius */
display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note.yellow {background:#F7F41B;}
.note.yellow:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}
/* Version De Esquinas Redondas
* Todos los navegadores modernos pueden producir estos efectos con un simple pseudo-elemento.
* Sin Embargo todos tienen un bugs (principalmente con el border-radius) que lo hace un poco tricky.
* Lo que puedo decir este es el unico metodo por el momento.
* No puedes usar este metodo para un efecto simple debido a que Opera 11 solamente mostrara fondo
* atraves de fondo transparente si hay un border-radius aplicado.
*/
.note.rounded {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.note.rounded:before {
border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
-webkit-border-bottom-left-radius:5px;
-moz-border-radius:0 0 0 5px;
border-radius:0 0 0 5px;
}
.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}
Nota:Pudes Añadir o cambiar colores de fondo o del texto de estas notas de arriba segun tu gusto.Por defecto el color es verde.
5.Guarda la plantilla y luego cuando vayas a escribir un articulo o entrada en tu blog y lo vas a integrar dentro de este cambia en el editor de entradas de Redactar a Html y incluye cualquiera de las siguientes diviciones.
<div class='note'>Agua</div>
<div class='note red'>Agua</div>
<div class='note blue'>Agua</div>
<div class='note taupe'>Agua</div>
<div class='note yellow'>Agua</div>
Nota:Puedes escojer que color mostrar a tu gusto y añadir texto a tu gusto sustituyendo la palabra Agua
<div class='note red'>Agua</div>
<div class='note blue'>Agua</div>
<div class='note taupe'>Agua</div>
<div class='note yellow'>Agua</div>
Nota:Puedes escojer que color mostrar a tu gusto y añadir texto a tu gusto sustituyendo la palabra Agua
Ahora tu y los visitantes disfrutaran de las Notas o Citas en tu articulo con lindo diseño y atractivo.
0 comentarios:
Publicar un comentario