JMiur [E]

Esta es una forma original de colocar papelitos con notas en una entrada cualquiera empleando sólo CSS3 así que en Internet Explorer el resultado es limitado ya que usa algunas propeidades que ese navegador aún no interpreta; de todo modos, el HTML es un simple DIV con una clase definida como notes.
<div id="notes">
  <div>
    <p> el titulo </p>
    <span> ... el contenido ... </span>
  </div>
</div>
Y ahora el estilo que es lo fundamental y que podemos adaptar a gusto porque las posibilidades son muchas:
<style>
#notes { /* el ancho de la nota */
  width: 200px;
}
#notes div { /* el div interior con el contenido */
  background: #FFEA6F url(UNA_IMAGEN) no-repeat 5px 10px;
  min-height: 200px;
  position: relative;
  box-shadow: 3px 3px 5px #FFB;
  border-radius:4px 0 0 4px;
}
#notes div p { /* el título */
  color: #85BF20;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 28px;
  height: 65px;
  overflow: hidden;
  padding: 20px 0 0 85px;
  text-shadow: 2px 2px 1px #000;
}
#notes div span { /* el texto con el contenido */
  color: #000;
  display: block;
  font-size: 12px;
  line-height: 1.3em;
  padding: 0 10px 10px;
  text-align: center;
}
/* y esta es la cinta con que pegamos la notita  */
#notes div::before {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 100, 0, 0.5);
  content: ' ';
  display: block;
  position: absolute;
  left: 80px;
  top: -15px;
  width: 60px;
  height: 30px;
  z-index: 2;
  box-shadow: 0 0 5px #404951;
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
}
</style>

mis notas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Nam fringilla dictum iaculis. Suspendisse nec nisl urna. Vivamus placerat sollicitudin congue.

Fusce nec magna iaculis odio pretium suscipit nec porttitor ante. Praesent mollis; est in auctor iaculis; lorem dolor sodales lectus, a faucibus sem elit sit amet dui.

Ut eget velit ut odio convallis ultricies. Cras eu sem quis justo interdum ultrices a et enim.


REFERENCIAS:accidental hacker

11 comentarios:

Unknown  

Me encantó!
Buen lunes, mejor semana :P

Responder
Gem@  

¡¡Qué chulada!!

Responder
JMiur  

Está lindo ¿no? :-D

Responder
ミ๖βʘX̆ミ  

thank tutorial

Responder
Matías Aravena  

Está genial!

Saludos JMiur.

Responder
HoracioNakama  

Te pregunto: habrá forma de dejarlo fijo en la parte baja de la ventana? Así queda como una noticia.

Responder
JMiur  

¿De la ventana del navegador? No sé exactamente que quieres hacer, se puede fijar con fiixed, agregando esto por ejemplo:

#notes {
.......
bottom: 0;
position: fixed;
z-index: 1000;
}

usando left top right y bottom lo ubicas en determinada posicion y permanecerá fijo.

Responder
Vero Rodriguez  

hoLA!!que parte de los estilos deberia cambiar si quiero que quede como en el margen. como si estuviera fuera de la entrada? o en el medio? porque asi queda a un costado. gracias!!

Responder
JMiur  

Hay que verlo en el contexto de tu página.

Responder
Vero Rodriguez  

hola!!
me queda a un costado como puedo centrar la nota en el medio de una entrada?

Responder
JMiur  

No sé cuál es tu ejemplo concreto. Si el ID llamado #notes posee una propiedad width como en este ejemplo, basta agregarle margen para que se centre:

#notes {
margin: 0 auto;
width: 200px;
}

Responder

¿Quiere dejar un comentario?

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

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