Fuentes y texto 04/08-11

Las sombras a veces no son lo mejor

Esta serie de vídeos fueron muy cortos sin embargo, sirvieron de mucho para darle estilo no sólo al texto sino también a los contenedores en la hoja de estilos. Las propiedades usadas fueron las siguientes:

• text-decoration → Permite modificar la decoración de un texto tal como el subrayado y tachado. Las más destacables son las siguientes:
• text-spacing → Modifica el espaciado entre letras.
• word-spacing → Modifica el espaciado entre palabras.
• text-indent → Modifica el indentado.
• text-align → Modifica la alineación del texto, derecha, centro o izquierda.
• text-shadow → Añade una sombra al texto y tiene 5 parámetros: el primero modifica la posición del texto izquierda - derecha, el segundo arriba - abajo, el tercero la distancia de la sombra, el cuarto el difuminado de la sombra y el quinto el color.
• box-shadow → Añade una sombra a un contenedor y tiene 5 parámetros: el primero modifica la posición del texto izquierda - derecha, el segundo arriba - abajo, el tercero la distancia de la sombra, el cuarto el difuminado de la sombra y el quinto el color.

Código

Published: By: Juan José González - 3/22/2018

Cambiar a un IDE 04/07

Welcome to the club, pal

Es momento de cambiar a un IDE y el elegido es WebStorm.

¿Por qué?

Bueno, además de que tengo una licencia gratis realmente me gusta muchísimo el software de todo el equipo de JetBrains.

Published: By: Juan José González - 3/22/2018

Tamaño de fuente, estilo y familias 04/06

Published: By: Juan José González - 3/21/2018

Largo máximo e imagen de fondo 04/05

La verdad es que lo que ha pasado con este vídeo no me ha quedado del todo claro, e incluso me siento bastante confundido acerca de... Creo que le daré un segundo vistazo y procederé a darle la atención que merece.

Vaya, parece que ha sido mucho más fácil de lo que pensé. En el vídeo se nos explica como crear una pequeña grilla para algunos artículos ficticios con imágenes que hemos creado:

Los que callan los perritos

A principio habíamos agregado las imágenes de la forma tradicional, con la etiqueta <img src="algunaImagen"/> pero esto causa algunos problemas justo cuando queremos manipular las imágenes para que se vean de una forma más estética. Para ser más específicos esto causa problemas de estiramiento y para solucionar este tipo de problemas utilizamos un trucazo método que nos brinda el instructor y este es:

Colocar la imagen dentro de una etiqueta <div></div> justo de este modo:

<div style=background-img(algunaImagen.jpg)></div>

Creamos una clase en la cuál ponerle las propiedades indicadas para el manejo correcto de la imagen y en el CSS correspondiente añadimos las siguientes propiedades:

• background-size: cover → Indica que la imagen será la portada de la etiqueta div, lo que hará que automáticamente cubra todo el espacio disponible.
• background-position: center → Indica que la imagen estará centrada y desde ahí intentará abarcar todo el espacio en vez de iniciar desde una esquina y duplicarse para abarcar todo el espacio. 

Parece que a CSS no le gustan estas 2 instrucciones y sobreescribe estas propiedades más adelante por lo que se nos insta a utilizar la etiqueta que evita esto, es decir !important:

El tamaño si importa

Para tener un resultado final:

Elon nos dominará a todos

Código

Published: By: Juan José González - 3/20/2018

Segmentación de ID, márgenes y bordes 04/04

Lo primero que aprendí en esta entrada fue a implementar una fuente personalizada desde el CSS para así poder usarla en toda el código HTML, esto se hace mediante el servicio de Google Fonts que nos ofrece un gran catálogo además de claro, darnos todas las facilidades para importarlo a nuestra hoja de estilos. 

Otra vez Google facilitando nuestras vidas

La importación se hace en la cabecera de la hoja de estilos y para disponer de ella utilizamos la misma especificación que nos brinda la misma página, es decir:

font-family: 'Roboto Condensed', sans-serif;

También se nos presentó una forma de hacer que una regla sea absoluta y no pueda ser sobreescrita por otra más adelante, esto se logra utilizando la etiqueta:

!important

Justo después de haber indicado una regla de la siguiente manera:

Esto sí que es importante

Por último se nos hizo notar las bondades que ofrecen los ID y como estos nos pueden ayudar establecer estilos en múltiples secciones de nuestro código, estos ID se especifican justo al momento de crear un elemento en el código y después de acceden desde nuestro archivo CSS de la siguiente manera:

El único bottom que conozco es Fondo de Bikini

Código

Published: By: Juan José González - 3/19/2018