CSS Sticky Notas para texto o códigos

 Este es otro truco divertido usando: before y: after CSS pseudo-clases que se ha utilizado en el css de este código..

Si queremos llamar la atención del público o visitantes  es una opción muy buena ya que  parecen  trozos pegajosos de notas y en el puedes agregar códigos o mensajes al visitantes.

La técnica es simple. Para agregar una esto solo debes seguir los pasos a continuación.

Primero este código lo colocas en un código html o widget.

O también para agregar códigos lo puedes agregar insertando el elemento texto, y dando en donde dice html ahí pegas los códigos

Mira el tutorial aquí.

 Ya sabes los mejores trucos jimdo en disemucho.net

Ejemplo CSS Sticky Notas para texto o códigos

<p class="sticky taped" style="width: 250px; color:#F00;"> <strong>aqui el titulo de tu nota</strong>.<br /> <br /> tu texto.<br /> <br /> aqui texto<br /> <br /> texto.<br /> <br /> texto<br /> <br /> —Att disemucho.net tu texto<br /> </p>

Si desea cambiar el color de texto de la letra lo cambia aqui : color:#F00;

mira aqui una paleta de colores.

Esto pegas en el head de tu web

<style type="text/css"> /*<![CDATA[*/ .sticky { position: relative; background-color: #F4F39E; border-color: #DEE184; text-align: center; margin: 2.5em 0px; padding: 1.5em 1em; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); box-shadow: 0px 1px 3px rgba(0,0,0,0.25); font-family: Chalkboard, 'Comic Sans'; } .sticky.taped:after { display: block; content: ' '; position: absolute; width: 110px; height: 30px; top: -21px; left: 30%; border: 1px solid #fff; background: rgba(254, 254, 254, .6); -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1); box-shadow: 0px 0 3px rgba(0,0,0,0.1); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } /*]]>*/ </style>