Crear notas adhesivas con HTML y CSS

CSS dispone de increíbles posibilidades para el diseño de los proyectos en HTML, casi cualquier cosa es posible.

Con CSS puedes convertir una lista en unas bonitas notas adhesivas muy llamativas, simulando las notas reales en papel. Al pasar el cursor del ratón por una de las notas, esta, creará un efecto de zoom.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Notas adhesivas</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" type="text/css">
    </head>


    <body>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #1</h2>
                    <p>Buscar cursos gratuitos de tecnologías para Inteligencia Artificial</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #2</h2>
                    <p>Compar el pan para el pinic de mañana</p>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #3</h2>
                    <p>Comprobar el funcionamiento correcto del calentador de agua</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #4</h2>
                    <p>Comprobar funcionamiento aplicación medición temperaturas</p>
                    </a>
                </li>
            </ul>
        </div>

    </body>

</html>

Código CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: arial, sans-serif;
    font-size: 100%;
    margin: 3em;
    background: #666;
    color: #fff;
}

h2,
p {
    font-size: 100%;
    font-weight: normal;
}

ul,
li {
    list-style: none;
}

ul {
    overflow: hidden;
    padding: 3em;
}


/* Parametros de la nota, medidas, color, etc. */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
}

ul li {
    margin: 1em;
    float: left;
}

ul li h2 {
    font-size: 140%;
    font-weight: bold;
    padding-bottom: 10px;
}

ul li p {
    font-family: "Reenie Beanie", arial, sans-serif;
    font-size: 280%;
}


/* Añade el sombreado */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    /* Firefox */
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}


/* Inclinar las notas */

ul li a {
    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
}


/* Inclinar notas al azar */

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
}

ul li:nth-child(5n) a {
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    top: -10px;
}


/* Añadir trancisión y colores suaves */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
}

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #cfc;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #ccf;
}


/* Zoom en las notas al pasar por encima */

ul li a:hover,
ul li a:focus {
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position: relative;
    z-index: 5;
}
Ejemplo etiquetas adhesivas

Share

Añade un menú animado y colorido en tu pagina Web, en CSS

Es posible crear un menú animado muy vistoso para tu pagina web con un sencillo código CSS.

CSS nos permite dar formato a las paginas web, convertirlas en algo mucho más atractivo que lo que nos da el soso html. Es increíble la cantidad de posibilidades que nos ofrece CSS para crear un atractivo, colorido y dinámico menú.

Este ejemplo de menú esta diseñado para contener 5 elementos, pero fácilmente puede ser modificado, si necesitas un número de elementos mayor o menor.

Código de ejemplo html:

<nav>
    <a href="#">Inicio</a>
    <a href="#">Blog</a>
    <a href="#">Sitemap</a>
    <a href="#">Portafolio</a>
    <a href="#">Contact0</a>
    <div class="animation start-home"></div>
</nav>

Código CSS:

nav {
    margin: 27px auto 0;
    position: relative;
    width: 590px;
    height: 50px;
    background-color: #34495e;
    border-radius: 8px;
    font-size: 0;
    margin-top: 200px;
}

nav a {
    line-height: 50px;
    height: 100%;
    font-size: 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all .5s ease 0s;
    border-radius: 8px;
}

a:nth-child(1) {
    width: 100px;
}

a:nth-child(2) {
    width: 110px;
}

a:nth-child(3) {
    width: 100px;
}

a:nth-child(4) {
    width: 160px;
}

a:nth-child(5) {
    width: 120px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
    width: 100px;
    left: 0;
    background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
    width: 110px;
    left: 100px;
    background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
    width: 100px;
    left: 210px;
    background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
    width: 160px;
    left: 310px;
    background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
    width: 120px;
    left: 470px;
    background-color: #e67e22;
}

body {
    font-size: 12px;
    font-family: sans-serif;
    background: #2c3e50;
}

span {
    color: #2BD6B4;
}

Da un aspecto elegante a tu menú con este llamativo ejemplo en CSS.

Share

Consigue un llamativo efecto en tus textos con CSS

Es increíble la cantidad de posibilidades que nos ofrece CSS para diseñar una pagina web, las posibilidades son casi infinitas, la imaginación es el único limite.

Con unas simples lineas en CSS podemos crear un llamativo rotulo tipo comic e incluirlo fácilmente en cualquier parte de una pagina web.

Código CSS

body {
  background-color: #fc3153;
  text-align: center;
}

h1 {
  font-size: 144pt;
  font-family: 'Luckiest Guy';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:   0px -6px 0 #212121,  
                 0px -6px 0 #212121,
                 0px  6px 0 #212121,
                 0px  6px 0 #212121,
                -6px  0px 0 #212121,  
                 6px  0px 0 #212121,
                -6px  0px 0 #212121,
                 6px  0px 0 #212121,
                -6px -6px 0 #212121,  
                 6px -6px 0 #212121,
                -6px  6px 0 #212121,
                 6px  6px 0 #212121,
                -6px  18px 0 #212121,
                 0px  18px 0 #212121,
                 6px  18px 0 #212121,
                 0 19px 1px rgba(0,0,0,.1),
                 0 0 6px rgba(0,0,0,.1),
                 0 6px 3px rgba(0,0,0,.3),
                 0 12px 6px rgba(0,0,0,.2),
                 0 18px 18px rgba(0,0,0,.25),
                 0 24px 24px rgba(0,0,0,.2),
                 0 36px 36px rgba(0,0,0,.15);
}

De una forma realmente sencilla puedes tener tus titulares con un diseño personalizado.

Prueba tus diseños desde aquí.

Share