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

Enviar por Telegram textos en HTML o Markdown

Se pueden enviar textos con formato HTML o Markdown, pero con muchas limitaciones.

La API de telegram nos indica que los Bots admiten el formato básico de los mensajes. Puede utilizar texto en negrita, cursiva, subrayado y tachado, así como enlaces en línea y código preformateado en los mensajes de sus bots. Los clientes de Telegram los renderizarán en consecuencia. Puede utilizar formato de estilo Markdown o HTML.

Las etiquetas soportadas actualmente son:

<b>bold</b>, <strong>bold</strong>
<i>italic</i>, <em>italic</em>
<u>underline</u>, <ins>underline</ins>
<s>strikethrough</s>, <strike>strikethrough</strike>, <del>strikethrough</del>
<b>bold <i>italic bold <s>italic bold strikethrough</s> <u>underline italic bold</u></i> bold</b>
<a href="http://www.example.com/">inline URL</a>
<a href="tg://user?id=123456789">inline mention of a user</a>
<code>inline fixed-width code</code>
<pre>pre-formatted fixed-width code block</pre>
<pre><code class="language-python">pre-formatted fixed-width code block written in the Python programming language</code></pre>

Este código Python envía un mensaje a un bot de telegram con etiquetas HTML soportadas actualmente por la Api.

import requests
import json
import datetime
import funciones_telegram as ft

url = "https://api.openweathermap.org/data/2.5/weather"

querystring = {"lat":"41.383745","lon":"2.046644","appid":"90eda4c96ac3f30dfa32f0b8bedf2956f9","units":"metric","lang":"38"}

headers = {
    'Cache-Control': 'no-cache'
    }

response = requests.request("GET", url, headers=headers, params=querystring)

data = json.loads(response.content)

hora_UTC = datetime.datetime.fromtimestamp(data['dt'])
amanecer = datetime.datetime.fromtimestamp(data['sys']["sunrise"])
atardecer = datetime.datetime.fromtimestamp(data['sys']["sunset"])

Latitud = str(data['coord']['lat'])
Longitud = str(data['coord']['lon'])
Nubes = data['weather'][0]['main']
Descripcion = data['weather'][0]['description']
Temperatura = str(data['main']['temp'])
Sensacion_termica = str(data['main']['feels_like'])
Temperatura_minima = str(data['main']['temp_min'])
Temperatura_maxima = str(data['main']['temp_max'])
Presion_atmosferica = str(data['main']['pressure'])
Humedad = str(data['main']['humidity'])
Visibilidad = str(data['visibility'])
Velocidad_viento = str(data['wind']['speed'])
Direccion_viento = str(data['wind']['deg'])
Abundancia_nubes = str(data['clouds']['all']) + ' %'
Hora_datos = hora_UTC.strftime('%d-%m-%Y %H:%M:%S')
Codigo_pais = data['sys']['country']
Hora_amanecer = amanecer.strftime('%H:%M:%S')
Hora_atardecer = atardecer.strftime('%H:%M:%S')
Poblacion = data['name']
Codigo_poblacion = str(data['id'])

m = '<b>Condiciones climatologicas</b>' + '\n'
m += '<b>Latitud: </b>' + Latitud + '\n'
m += '<b>Longitud: </b>' + Longitud + '\n'
m += '<b>Nubes: </b>' + Nubes + '\n'
m += '<b>Descripción: </b>' + Descripcion + '\n'
m += '<b>Temperatura: </b>' + Temperatura + '\n'
m += '<b>Sensación termica: </b>' + Sensacion_termica + '\n'
m += '<b>Temperatura minima: </b>' + Temperatura_minima + '\n'
m += '<b>Temperatura máxima: </b>' + Temperatura_maxima + '\n'
m += '<b>Presión atmosferica: </b>' + Presion_atmosferica + '\n'
m += '<b>Humedad: </b>' + Humedad + '\n'
m += '<b>Visibilidad: </b>' + Visibilidad + '\n'
m += '<b>Velocidad del viento: </b>' + Velocidad_viento + '\n'
m += '<b>Dirección del viento: </b>' + Direccion_viento + '\n'
m += '<b>Abundancia de nubes: </b>' + Abundancia_nubes + '\n'
m += '<b>Hora cálculo datos: </b>' + Hora_datos + '\n'
m += '<b>Código país: </b>' + Codigo_pais + '\n'
m += '<b>Hora amanecer: </b>' + Hora_amanecer + '\n'
m += '<b>Hora atardecer: </b>' + Hora_atardecer + '\n'
m += '<b>Población: </b>' + Poblacion + '\n'
m += '<b>Código población: </b>' + Codigo_poblacion + '\n'


ft.aviso_mensaje_html(m)

Este código llama a la Api de Open Weather Map y devuelve información meteorologica de las coordenadas enviadas.

Y la función que realiza en envío al bot de telegram:

def aviso_mensaje_html(Mensaje):
    r =requests.post('https://api.telegram.org/bot9987543:CCH0rnTYm3dEp3ryCWTMVXXkxcGemycBgxg/sendMessage',
              data={'chat_id': chat_id, 'text': Mensaje, 'parse_mode' : 'HTML'})
    print(r.text)

Para mensajes en HTML, “parse_mode” debe ser “HTML” y “Markdown” para formatos de texto en Markdown.

En la Api de telegram podrás encontrar más información de los formatos y etiquetas soportados actualmente, enlace.

Share

Genera el código HTML para tus textos curvados con esta utilidad web

 

 

Interesante herramienta web para diseñar nuestros textos de una forma muy diferente. Podremos adaptar nuestros textos a diferentes formas y moverlas en tiempo real hasta conseguir la forma que más nos guste.

Se puede personalizar el texto, el tipo de letra, el tamaño, la separación, y muchos otros parámetros. Al terminar un diseño, la aplicación generara en código HTML necesario para poder incluir nuestro trabajo en cualquier lugar de nuestra web.

 

 

 

 

Buena herramienta para ahorrar trabajo a todos los diseñadores web.

Enlace a la web:

http://csswarp.eleqtriq.com/

 

 

 

Libro para iPad - Grande, Pequeño, Astronómico y cotidiano
 

Share