Ir al contenido principal

Equivalencia entre pts, px, em y porcentaje

Pts Px Em Porcentaje
6 pt 8 px 0.5 em 50%
7 pt 9 px 0.55 em 55%
7.5 pt 10 px 0.625 em 62.5%
8 pt 11 px 0.7 em 70%
9 pt 12 px 0.75 em 75%
10 pt 13 px 0.8 em 80%
10.5 pt 14 px 0.875 em 87.5%
11 pt 15 px 0.95 em 95%
12 pt 16 px 1 em 100%
13 pt 17 px 1.05 em 105%
13.5 pt 18 px 1.125 em 112.5%
14 pt 19 px 1.2 em 120%
14.5 pt 20 px 1.25 em 125%
15 pt 21 px 1.3 em 130%
16 pt 22 px 1.4 em 140%
17 pt 23 px 1.45 em 145%
18 pt 24 px 1.5 em 150%
19 pt 25 px 1.55 em 155%
20 pt 26 px 1.6em 160%
22 pt 29 px 1.8em 180%
24 pt 32 px 2em 200%

Comentarios

Entradas populares de este blog

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web. Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece. El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3. El resultado sería el siguiente: Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga. A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias. HTML <div class="efectos"> <img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad"> <img src="directorio/imagen-02.jpg" class="destello destello-01"> <img src="directorio/imagen-03.jpg" class=

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:

Curso HTML 5: Introducción

¿Qué es HTML5? HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar. El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores. Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico , y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web . Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades. En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML : De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un signifi