CSS Sticky Notas para texto o códigos

aqui el titulo de tu nota.
tu texto.
aqui texto
texto.
texto
—Att disemucho.net tu texto

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

Esto pegs en un html o texto

smiley

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

smiley

<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>

Este es el head en jimdo

Asi insertas un widget html para pone códigos en jimdo

Escribir comentario

Comentarios: 7
  • #1

    La mochila Arhuaca.com (miércoles, 03 octubre 2012 15:31)

    Excelentes aplicaciones, muchas felicidades!

  • #2

    djlsasuke12-2012-hd (miércoles, 03 octubre 2012 21:45)

    Me Gusta mucho tu Web :D

  • #3

    palomopublicidad (domingo, 25 noviembre 2012 12:02)

    Saludos, una pregunta: mi texto en la pagina es blancho y al insertar el codigo de la nota se pierde el texto por lo mismo, hay alguna forma de cambiar el color de texto de l anota únicamente? Gracias y felicidades por tu pagina.

  • #4

    GloriaV (lunes, 25 agosto 2014 08:36)

    Último, para todo el mundo

    Flash en fondo
    http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/con-flash/

    El código para instalar flash como fondo (antes de texto, dentro de texto... según su gusto) con tamaño y posición:
    <p align="center"><embed style="POSITION: absolute; WIDTH: 260px; HEIGHT: 260px; LEFT: 550px" height="240" type="application/x-shockwave-flash" width="200" src="http://www.msieflash.com/xx/27/we119.swf" wmode="transparent" allowscriptaccess="never" /></p>

    Para instalar como imagen - http://compraventabrindisytododo.jimdo.com/imagenes-flash/

    Con amor, de corazón y alma. GloriaV

  • #5

    biocarn (viernes, 12 septiembre 2014 11:35)

    Muchas gracias.

  • #6

    todo-para-tu-gta-san-andreas (domingo, 08 marzo 2015 13:06)

    :] ESTAN CHIDOS XD

  • #7

    buy_tadalafil (martes, 17 enero 2017 05:35)

    Hello!