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



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

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.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share