antliahpalace

[antliahpalace]

Recorta figura de una imagen rápidamente en png

El formato .png es algo que vamos a amar y a odiar a partes iguales toda la vida.

Sobre todo cuando hablamos de recortar figuras en la imagen porque nos parecen bonitas y queremos guardarlas como recurso o porque simplemente las queremos utilizar en ese momento. Y siento mucho deciros que NO hay una forma milagrosa de que nos quede exactamente cómo queremos sin mucho esfuerzo.

Yo, personalmente, recomiendo que si tienes tiempo, utilices la herramienta pluma de Photoshop y tengas paciencia hasta que lo consigas. Sin embargo, si tienes mucha prisa por recortar algo, a mí esta página me ha servido de mucho:

www.remove.bg

Ahora, no pidas milagros. Recorta decentemente la imagen pero no es el mismo acabado que obtendrías que si lo hicieras tú mism@. Además, si confunde mucho, es posible que no te detecte lo que buscas y se vaya a otro elemento de la imagen. De todos modos, yo lo dejo por aquí

[antliahpalace]

Propiedades básicas del HTML/CSS:

Estos fueron mis apuntes de un tutorial que vi en Glintz cuando seguía vivo :(. A mí me sirvió muchísimo así que lo comparto. No sé de quién era el tutorial pero te debo la vida.

- height: Es el alto del elemento que estamos tratando, la caja. El valor se da normalmente en píxeles (px). Ejemplo: 300px. También se puede dar en % pero yo no lo utilizo, la verdad. De aquí tenemos:

max-height: la altura máxima del elemento

min-heigh: altura mínima

- width: Ancho del elemento. Usa los mismos valores que el anterior (px ó %). Tenemos:

max-width: señala el ancho máximo

min-width: señala  el ancho mínimo

- color: Establece el color del texto al que modifica. Se puede usar de distintas formas:

Para colores básicos, se puede usar el nombre directamente como White, black, orange… Hay una lista de colores completa.

RGB:  se divide en tres grupos de números que combinados crean un color Ejemplo: color: rgb(61, 70, 112); 

El más común es el que está formado primero por un asterisco # y seis o tres números. Ejemplo: color: #FFF = #FFFFFF

- margin: Establece el valor del margen de la mayoría de los elementos. Se puede utilizar así:

Forma general: margin: 10px; que se aplica a top (arriba) right (derecha) bottom (abajo) y a left (izquierda).

Forma general especifica: margin: 10px 20px 30px 40px; que se aplica en el orden : top, right, bottom y left.

Forma específica:  margin-top: 10px margin-right: 20px margin-bottom: 30px y margin-left: 40px; 

- background: Establecerá el color o imagen que del fondo del elemento.

background-image: seguido de url('link de la imagen'). Para colocar un fondo transparente se debe colocar background-color: transparent;.

background-color: Los fondos de colores siguen la misma norma del color.

 - border: Establece los valores de los bordes (tamaño, color y forma) de un elemento. Ejemplo: border: 5px solid #000; los px señala el ancho de dicho borde, solid es el tipo de borde que poseerá, existen cuatro clásicos: solid, double, dotted y dashed.

Para utilizar un borde en específico solo debes usar -top -left -right -left y luego se señala el color (que puede formularse de las tres formas ya señaladas anteriormente). Ejemplo: border-left: 5px dashed #FFF - padding: Este es un poco más complicado de entender pero en resumen sería el espacio entre el borde y el relleno del elemento. Hay que acostumbrarse un poco antes de pillarlo del todo. Yo lo uso con px. Ejemplo: padding: 2px; - text-align: Alineación  del texto. Son las mismas que en Word: left (hacia la izquierda), right (hacia la derecha), center (centrado), justify (justificado). - font-weight Grosor de la letra en la que se emplea. Se puede usar de distintas formas:

numéricos 100, 200, 300, 400, 500, 600, 700, 800, 900 

bold y bolder pone el texto "negrita"

lighter y normal ponen el texto normal o mas delgadas.

- display: Tipo de caja de un elemento. Esta también es complicada así que hay que prácticar para aprender. Tenemos las principales:

inline que convierte el elemento en una "linea" 

block que convierte el elemento en un "bloque" 

none que quita cualquier propiedad display que le afecte

inline-block que crea elementos de bloque y en línea de forma simultánea

- letter-spacing: Es el espacio entre las letras. Ejemplo: letter-spacing: 10px; - line-height: Establece el valor de espacio entre los renglones de un texto.  Se puede utilizar de distintas formas:00px ;00%; 00em. Ejemplo: line-height: 20px - overflow: Establece lo sucedido tras terminar es espacio de un elemento. Ya sea por ancho o alto. Si el contenido de un elemento (caja) sobrepasa su espacio puede suceder lo siguiente: 

hidden: para cortar el contenido cuando pasa los límites establecidos. 

scroll: que haya siempre un scroll (barra) tanto si se utiliza como si no. 

auto: si se pasan los límites establecidos, aparecerá un scroll horizontal o vertical automáticamente.

- text-transform: Transforma el texto. Tenemos:

uppercase convierte las letras en mayúsculas. 

capitalize pone en mayúscula solo la primera letra de cada palabra. 

lowercase todas las letras son puestas en minúscula.

none hace como si nada hubiese pasado, dejando el texto en su forma original.

- outline: Borde extra a casi todos los elementos. Se maneja igual que la propiedad de border.

- position: Posiciona los elementos. Tenemos:

 normal (inherit)

relativa (relative)

 absoluta (absolute)

 fija (fixed)

-  font-family: Establece la fuente del texto. -  font-size: Señala el tamaño de la letra (px o em). Ejemplo: font-size: 12 px -  text-decoration: Decoración que se añade al texto:

underline

overline 

line-through 

blink