css

¿Qué es? ¿Para qué sirve?

Sirve para dotar de presentación y aspecto de estilo a una página web.
Podemos definir como queremos que se muestre las diferentes partes del documento
html.
Esto permite que el mismo contenido puede visualizarse de diferentes aspectos
aplicando distintos estilos.
La presentación de una pagina web queda controlada de una forma independiente a
través de css. Permitiendo tener por un lado los estilos y por otro el contenido.
Características:
- No es un lenguaje de programación, es un lenguaje de estilo.
- Es un lenguaje descriptivo.
El desarrollo web comprende múltiples áreas conocimiento:
- Análisis, diseño (gráfico y maquetación), programación, sistemas
(servidores, BD), integración (testing).
Lenguajes o tecnologías que hay en torno a los desarrollos web:
- html, css, base de datos (MySQL, SQL Server, Oracle), servidores, lenguajes
de programación del lado del cliente (JavaScript), como del servidor (php).
Podemos alcanzar el mismo objetivo usando distintos lenguajes html, css p JavaScript.
¿Por qué se entremezclan unos con otros?
se considero que entremezclar lenguajes entre sí, era una buena opción para
solucionar problemas html. Así es posible embeber css en html o JavaScript en
html, etc.
¿Dónde está la frontera entre cada lenguaje?
Es difícil determinar una frontera ya que se embebe entre sí.
¿Por qué tantas formas para hacer una cosa?
- La manera de pensar fue cambiando determinando que era mejor hacerlo de
otra forma, pero se sigan permitiendo que ciertas etiquetas funcionen para
evitar que ciertas páginas web dejen de funcionar.
- Independencia de tecnologías, a pesar de que se “entremezcla” entre si
- Motivos de desarrollo y estándares, distintos estándares permiten hacer las
cosas de diferentes maneras
Css en app web:
Aplicaciones extendidas en css es en dotar de un aspecto atractivo a las apps web
donde destaca Gestores de contenido CMS: es un software que se instala en el
servidor y sirve para publicar contenidos en una página web (de manera sencilla).
Funciones que tienen las apps:
- Gestionar páginas web como tiendas correo, foros, portales de contenido, etc.
- Las apps web suele tener una parte para la gestión de contenido, y otra parte
llamada plantillas o template que se encarga de controlar el aspecto. Los
template actúa como una piel sobre los contenidos.
Loa template en la actualidad no solo permiten cambiar el aspecto de un mismo
contenido sino permitir la personalización de la presentación de las paginas web.
Las tecnologías se combinan entre ellas de diferentes maneras.
DW siempre intervendrá html y css.

Modelo de caja
Son los navegadores lo que interpretan el código y luego visualizan en la pantalla la
página web.
html se podría presentar de diferentes formas la información en la pantalla. ¿Qué
hacen los navegadores? Estos actúan en base a unas reglas predefinidas donde
consideran que cada elemento html se considera que esta delimitado por un
rectángulo o caja invisibles. De ahí se habla del modelo de caja de la web.
Cada caja puede ser de tipo block “a lo ancho” o bien tipo inline “elemento dentro
de una linea”.
- Block ocupa todo el ancho del navegador haciendo el elemento siguiente se
coloque por debajo de él.
- Inline considera un elemento dentro de una línea. Si las cajas continuas son
del mismo tipo se mantienen en la misma línea.
Cada caja se coloca dentro de la pantalla, una caja debajo de otra.
Importante: Pueden ver varias cajas dentro de otra, siendo la caja interior la de
menor rango y jerarquía

Estilos por defecto:

Los navegadores muestran los elementos (contenido) con un estilo definidos por
defecto. No todos los navegadores actúan igual, cada uno tiene una forma diferente de
mostrar el contenido de una web. Como consejo no obsesionarse con detalles.
Nota: es difícil tratar de conseguir la misma visualización de una página web en
los distintos navegadores.
¿Como se aplica el estilo en los elementos? El navegador actúa aplicando estilos
desde los niveles más exteriores hacia los niveles más interiores.
Los estilos se pueden aplicar de 3 formas posibles:
Estilos en línea  en el elemento <etiqueta>. Se usa el atributo style
Estilos internos  en la parte de la cabecera <head>
Estilos externo  archivo css donde están todos los estilos de la página.
Efectos del navegador, una declaración en externa puede ser sobrescrita por la
interna. Y esta a su vez por una de línea. (css se sobrescribe varias veces).
Declaración en línea > declaración interna > declaración externa.

Capítulo 4. Selectores
En numerosas ocasiones no queremos que todas las etiquetas de un tipo tengan el
mismo estilo, para eso sirven los selectores aplicar estilos distintos a una etiqueta o
aun parte de la web.
Estilo compacto // que todas las propiedades se escriban en una sola línea.

1. id  identificamos la parte del documento a la que queremos aplicar

esos estilos, identificando con el atributo id=”nombreIdentificador” la parte
de la que queremos aplicar esos estilos. Se aplica:
- Nos permite darle un nombre especifico a una parte de un documento html
- Este debe ser único (no puede ver en una misma página el mismo nombre id)
- Se debe darle un nombre a etiquetas muy concretas de una web. Como
también puede darse a etiquetas que definen la estructura web
(header,nav,section, article, aside, footer.)
- Elementos que actúan como contenedores (div), como para diferenciar partes
estructurales.
#identificador {
}
Continuar con la Pag. 54

2. Class para aplicar estilos a diferentes lugares de una página web.

Identificamos la parte del documento a la que queremos aplicar estilos
. identificador {
}

herencia
característica que permite definir estilos en clases padres que se van transmitiendo
hacia las subclases hijas.

Definir clase que solo sean aplicables a etiquetas especificas

Podemos definir que una clase sea aplicable a una etiqueta especifica.
Etiqueta.nameClass{
}
Ahora el estilo nameClass solo se aplicará a una etiqueta especifica.
Estos nos permiten nos permite usar el mismo nombre de la clase y obtener distintos
efectos según en que etiqueta aplicaremos la clase

Definir subestilos dentro de una clase

Podemos definir que determinadas cajas (interior) dentro de otra principal (exterior),
tengan estilos diferentes.
etiqueta.identificadorClase etiquetaInterna{
}
Podemos crear clases padres que agrupen las características comunes, y definir en
clases hijas las características especificas

Conceptos de herencia css

Los elementos de rango inferior heredan las propiedades CSS de elementos de rango
superior. ejemplo: <body>.
De modo que un estilo aplicado en body será heredado por el resto de las etiquetas
html como también a selectores id y class.
Importante: sin embargo, no todas las propiedades se heredan, como lo son los
márgenes. ¿Por qué unas si y otras no? En la especificación css se encuentra que
cuando se define ciertas propiedades se establece un atributo llamado inherit.
Indicando si la propiedad se hereda o no.
Las propiedades por defecto del elemento <a> sobrescriben a las propiedades que
hubiéramos definido en el contenedor donde se encuentra <a>

Referencia con cualquier atributo

CSS3 introdujo la posibilidad de referenciar estilos mediante cualquier atributo (parametro)
de elementos html.

Como selectores de atributos tenemos:

- [nombreAtributo]  Seleccionamos todos los elementos que tengan como atributo

nombreDelAtributo independiente de su valor.
- elemento[nombreAtributo]^=”valor”  selecciona a los elementos con ese atributo
y que su valor comienzo por la cadena de texto indicada “valor”

selectores avanzados css

1. selectores especiales
 especifican la relación de los elementos:
 2. selectores Pseudoclases
 identificadores especiales que se pueden seleccionar y que además van
precedidos de dos -puntos “:”.
2.1. :first-child
2.2. :last-child
2.3. :only-child
2.4. :nth-child (numero)
2.5. :not (tipo elemnto 2)
2.6. ::first-letter
2.7. ::first-line
2.8. ::after
2.9. ::before
2.10. ::selection  cuando el usuario haga una selección de un elemento “P”,
aquello seleccionado se le aplique el estilo definido utilizando la pseudoclase.
3. Selector universal * afecta a todos los elementos dentro de una página web.
Suele usarse para eliminar los márgenes o espacios realizado por el navegador. Y
sobrescribe los estilos por defecto.
Continuar con la pag 78.

Cascada:
Podemos ver lo como una cascada de
forma que el navegador va recorriendo
la cascada hasta llegar al nivel mas bajo
posible.
Elementos de rango inferior heredan
las propiedades de los elementos de
rango superior.

la mayoría de navegadores permite que el usuario modifique estilos definidos por el autor de
la página.

es recomendable no confiar en los estilos por defecto cuando crean las páginas web.

ya que la mayoría de navegadores permiten cambiarse a través de la configuración del

navegador.

Origen, importancia y especificidad

existen 3 tipos de estilos de css:

1. predefinidos por el navegador

2. creador de la pagina
 3. el usuario cuando usa la configuración del navegador.

Cuando se tiene que varias reglas css le aplican estilo a la misma etiqueta de un elemento,
pues se genera conflicto o colisión de estilos. css permite darle una solución con la cascada.

Ejemplo del conflicto:

body{color:red;} p{color:green;} #destacado{color:silver;}

cascada  determina todas las reglas que son aplicadas a un elemento y que entran en
conflicto.

pues le asignan un número. siendo a la regla de estilo que tenga el mayor número.

1. Cuando más directa o próxima este la regla al elemento que está evaluando se aplica
primero y termina el proceso de cascada.

se coloca antes. por estar directamente define al elemento <p class=”valor”;

2. se ordenan en base al origen línea, interna, externa. Si la proximidad de las reglas tiene
el mismo nivel.
3. Se dividen en decl. Importantes e decl. Normales.
sí dos declaraciones son iguales y una lleva el !important y la otra no, prevalece la que
lleva !important.

!important --> hace que esa declaración prevalezca sobre otra igual que no tenga la palabra
!important.

nota--> !important solo debe usarse en casos concretos osea que resulte extremadamente
necesario, entonces se recomienda no usarlo en el código.

Cuando encontramos a mas de una regla que defina directamente a un elemento (lo cual no lo
puede resolver la cascada) se aplica la especificidad.

La regla que tenga mayor especificidad será la que se mostrara en la página.

Notas:

- Una web bien construida debe presidir del uso de los estilos en línea.
- Debemos trabajar colocando las declaraciones generales en primer lugar y las más
específicas a continuación.  facilita el análisis y la compresión del css.
- No se recomienda el uso de ¡important en el código, salvo en casos concretos.

Colores
- RGB  rango 0 a 225.
 También se pueden representar por porcentaje % siendo %0 a 0 y el 100% a 225.
 Los valores del % deben ir separado por un punto. Ejem: 15.6%
 para calcular un valor numero a un valor en %. 15*(100/225). Donde 15 es el valor
número y el resultado es el valor del %:
- código hexadecimales  notación basada en códigos hexadecimales.
  Sistemas de codigos se basa en el alfabeta hexadecimal de 16 simbolos. 0 1 2 3 4 5
6 7 8 9 A B C D E F.
 un código en base hexadecimal se transa lada a numeración decimal utilizando
potencias. 1B0DE equivalente 1x16^4 + 11x16^3 + 0x16^2 + 13*16^1 + 14x16^0
 el código se expresa usando # seguido de los 6 simbolos.
 Se expresa 00 como limite inferior y 225 como limite superior.

Notación RBGA  esta notación incorpora un parámetro “Alpha” que indica el grado de
transparencia que se le aplicara al color. 0.0 minina y 1.0 maxima.

 0.0  totalmente transparente y 1.0 transparencia totalmente opaco.

- Notación HSL el sistema HSL es una rueda de colores con 3 parámetros.
 El primer parámetro Angulo representa un color: en la rueda
1.1. El Angulo 0 o 360 grados representa al rojo RED, el de 120 grados al verde
GREEN y el Angulo 240 al azul BLUE.
 El segundo es la saturación se presenta en porcentaje:
1.1. Representa la cantidad del color frente a sombra gris El 100% representa el
color completo, mientras que el 0% supone nada de color. Todo color sin
saturación 0% es una sombra gris.
 El tercer parámetro representa el brillo y también en porcentaje:
1.1. El 0% genera el color negro y el color mas claro representa la incidencia de la
luz sobre el color. 100% que muestra un color blanco.
HSL(anguloDeGiroColor, SombraGrisSaturacion, cantidadAzulBrillo);

Notación HSLA  esta notación incorpora un parámetro “Alpha” que indica el grado de
transparencia que se le aplicara al color. 0.0 minina y 1.0 maxima.

 0.0  totalmente transparente y 1.0 transparencia totalmente opaco.

Nota: al añadir transparencia el efecto obtenido depende del color de fondo que tengamos.

Height y width son aplicable a la mayoría de los elementos, pero no a algunos como es el
<spam>.

El valor auto le indicamos al navegador que se adapte automáticamente el valor del height
para que no se salga de el.

Si queremos pasar el % a px, 100%x (90/100);

Cajas y modelo de borde  si no se define el style en el borde de un elemento, no se

mostrará el borde en el. Borde: 1px red; en ves de border: 1px solid red;

Notaciones abreviadas  básica para diferentes propiedades que usan los 4 lados de las cajas,
css su sintaxis: propiedad:top rigth bottom left;

Importante: los navegadores permiten que los valores (subpropiedades) puedan expresarse en
cualquier orden. Borde:red 16px solid;

1. Borde: es el perímetro que engloba el contenido y el posible relleno. Entre el borde y

el contenido.
 2. Padding: es el espacio entre el contenido y el borde del elemento.
3. Margin: espacio transparente entre el borde de los elementos y el borde de las otras
cajas adyacentes.

Notas:

- La referencia para establecer un margen vertical es el borde de las cajas y no el limite

del margen de las cajas adyacentes.
- Mientras que los márgenes horizontales si se suman.

Cuando anulamos el comportamiento que por defecto introducen los navegadores, se

denomina “reseteo”.

Validación de css con W3c Validator  basta con introducir la url para que el contenido de la
pagina sea sometido a análisis y aparezca los resultados del mismo. Si la pagina cumple los
estándares de css, se ingresan los logo de validación W3c.

Importante: importante no es superar la validación, lo importante es que la web funcione y

se vea correctamente.

Unidades de medida (UM): se dividen en 2 grupos:

UM relativas  son aquellas que determinan un tamaño en función a otro tamaño.

UM absolutas  determinan el tamaño de algo de manera concreta, especifica. Destaca el px.

Una pantalla se divide en miles de puntos visibles llamados pixeles px

Las pantallas suelen tener una resolución expresada en pixeles. El tamaño real del pixel puede
variar entre dispositivo.

Unidades de medidas relativas: permiten la adaptación flexible a diferentes tamaños de

pantalla de los dispositivos.

em  en relación al tamaño del texto que se este usando. txt = 12px; pues un em=12px, 2
em =24px,.. etc. continuar pág. 130.

Margin Padding:

Padding  aplicar un relleno a un elemento. Su valor se puede expresar en porcentaje %

respecto al ancho del elemento que lo contiene, px. Su valor no admite valores negativos.

Margin  permite fijar un margen de un elemento en elementos adyacentes. Su puede

expresar en %, px. Su valor admite negativos (este negativo solaparía a los elementos
adyacentes), pero no es recomendable su uso.

Nota: cuando existe superposición se debe establecer que elementos deben estar encima y
que deben quedar abajo. margin=auto;

Elemen  tipo block =! width especifico, el margen que se aplica el navegador es cero.
Pero si se aplica un width definido, el navegador estable un margen tanto izq como der iguales.
Apreciándose el elemento centrado.

Fondo css  el fondo corresponde al borde, padding y el espacio del contenido.

bc  si la imagen es opaca ocultara el fondo. Se define con una url, donde el contenido de la
ruta de la imagen puede escribirse entre comillas. Incluso se pueden poner varias de ellas.

b-repeit  define si una imagen de fondo de tamaño inferior al disponible se debe repetir.
h(repeat-x) o v(repeat-y).

propiedades relacionadas con el fondo:

b-position  establece la posición de una imagen de fondo. Se usa la medida del ancho, alto
del disponible menos el ancho, alto de la imagen. b-position: 10% 10%;

bestablece el comportamiento de la imagen.

es importante gestionar el posicionamiento de los elementos, ya que de lo contrario se

situarían unos debajo de otros.

position  permite el posicionamiento de los elementos como su comportamiento. Posible

valores:

absolute: permite que un elemento cambie su comportamiento respecto a un elemento

contenedor (padre) posicionado (absolute, relative).

top, left, bottom, rigth  nos permite el desplazamiento de la posición de un elemento.

si se encuentra dentro de un contendor padre. El origen de coordenadas se establece en la

parte superior izquierda del contendor que tenga una position establecida. absolute, relative,
pero distinto de static.

display // podemos indicarle al nevegador que cierto elemento se comporte como inline o
block.

display: // establecemos el tipo de caja que el navegador usara para visualizar el elemento.

inline  solo ocupan el esapcio del contenido y se van colocando de tras de otro (tienen que
ser de tipo inline tambien).

block  ocupa todo el espacio de largo de la pantalla.

inline-block  se crea una caja, pero se comporta como un elemento inline.

float // posicionamiento flotante. Esta porpiedad se utiliza con elementos que tengan un
ancho definido

none  el elemento no es flotante

left  todos los elementos flotantes se desplazan desde la izquierda (lo rodearan por la
derecha).

right  todos los elementos flotantes se desplazarán desde la derecha (lo rodearán por la
izquierda).

Clear usando la propiedad clear definimos que un elemento y los elementos posteriores
dejen de envolverse.
left  hace que el parrafo deje de envolverse siempre y cuando el float=left;

both  el parrafo se muestra por debajo del elemento(imagen) no importa si se flota= left,
right.

right  hace que el párrafo deje de envolverse siempre y cuando el float=right;

¿Qué envuelve a un elemento flotante? Lo que envuelve a un elemento flotante es el texto

de los elementos que vengan a continuación de él y un ancho suficiente para que se pueda
apreciar el efecto de envolver sino pasa a la siguiente línea.

La anchura total asociado a un elemento se obtiene como la suma de (margin+ border+

padding + width) del lado horizontal. Continuar 177 pág.

Eficiencia y Velocidad de carga: la carga de una imagen conlleva una petición al servidor, este
nos responde mostrando la pagina en el navegador. Esto consume tiempo y mas si son varias
imágenes.

Sprtite nos permite agrupar un conjunto de imágenes de diferentes tamaños para asi solo se
carge una vez.

Visibility: crea un efecto similar display:none; , pero en este caso el elemento permanece
ocupando su espacio, así este no se muestre.

Cuando una caja se encuentra dentro de otra puede ocurrir que la caja interna pueda tener
mayor dimensión que la caja que la contiene. A esto se le llama desbordamiento.
overflow: con esta propiedad le indicamos al navegador como debe actuar cuando se
produzca desbordamiento. Valores o values: visible, hidden (solo se muestra lo que está
dentro de la caja),.

line-height: establece la separación entre líneas cuando se muestra un texto.

tipografia

fuente  letra. Existe muchos tipos de fuentes:

font-family  sirve para indicar el tipo de fuente (letra) o los tipos de fuente que deben
usarse. esta propiedad debemos considerar ciertos aspectos:

1- Lista propiedades  podemos definir varias posibles fuentes respecto a la fuente a

emplearse en la web.
2- Fuentes concretas o familia tipograficas  fuente que se empleara en la web y todas
sus variantes (se usaran comillas siempre que el nombre tenga espacio).
3- Familia genérica  sirve para poder usar una fuente lo mas parecida posible a la
fuente buscada en el sistema usuario (mecanismo de seguridad).
 Serif  Times, sans-serif  Arial, monospace  Courier, cursive  Zapfino,
fantasy  Comic Sans MS.

Normalmente primero familias tipográficas y en último lugar las Familias genérica (usarse en
caso no Esten disponibles las familias tipográficas).

font-variant Pone una fuente en modo especial, ósea la letra se convierte en un tamaño
inferior de la normal o ya sea font-transform.
 - small-caps  se convierte en texto condensado.

Propiedad Font shortand  podemos declarar abreviaciones de diferentes propiedades

relacionados con la fuente.

selectorElemento {Valor-font-styleOpcional Valor-font-variantOpcional Valor-font-

weightOpcional ValorFont-sizeObligatorio/ValorLine-heightOpcional valoresListaPrioridad-
font-family }

@font-face ( permite especificar un nombre y una localización (url) de un archivo con la

fuente que se desea usar en una pagina web. 2 parámetro:

- el nombre de la fuente (letra)

- la ruta donde se localiza el archivo que contiene la fuente.

@font-face { font-family: "Bitstream Vera Serif Bold"; src:

url(https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf);}

Nota: para garantizar que la mayoría de navegadores debemos especificar las rutas de los
archivos fuentes de distintos formatos.

@font-face { font-family: Sansat; src: url('Sansation_Light.woff'), url('Sansation_Light.ttf'),

url('Sansation_Light.eot') ; }

FUENTES GRATUITAS QUE PUEDE ENCONTRAR POR INTERNET

CONVERTIDORES DE FUENTES ONLINE

Nota: es recomendable que cada fuente tenga 4 archivos.

Pseudoclases para link el uso de pseudoclases para dotar de estilos a los links.

- :link  estilos para link que no han sido pinchados por el usuario.
- :visited  “” que han sido pinchados por el usuario.
- :focus  elementos que este seleccionado por el puntero del ratón o el tabulador.
- :hover  estilos a los elementos que el usuario pasa el ratón por encima de el.
- :active  estilos específicos a link <a> y a botones <botton> en el momento que son
pulsados.

Nota: al momento de aplicar estas pseudoclases es importante ordenarlos. LVHA, focus

suele usarse antes que hover.

Outline Crea un control similar a border, con la diferencia que no ocupa espacio.

List-sttyle-type Establece el símbolo (viñetas) a mostrar precediendo a los elementos de una

lista.

- Circle  circulo no rellenado, square  cuadrito rellenado, lower-roman  # en

romanos minúsculas, upper-roman  # en romanos mayúsculas, lower-alpha 
letras minúsculas, upper-alpha  letras mayúsculas. Mayor info. Pág. 233.

List-style-position  permite controlar la posición de las viñetas. Mayor info. Pág. 233
List-style-image  podemos definir una imagen en lugar de la viñeta de entre las lista.
url(ubicación_de_la_imagen). no se recomienda su uso. Mayor infor. Pag. 234.

PROPIEDAD SHORTAND LIST-STYLE  otras propiedades para aplicar estilo a las listas.

selectorElemento {Valor-list-style-type valor-list-style-position valor-list-style-image } estas

propiedades se pueden dar en distintos orden.

En internet podemos encontrar un buen de códigos css , se recomienda usar algo que ya esta
disponible que hacerlo desde cero.

RESPONSIVE DESING
La solución para una correcta visualización de una pagina web:

 Diseño responsivo  ofrecer un diseño adecuado para cada tipo de dispositivo

que se va a visualizar la página (ofreciendo diferentes reglas “css” según el
dispositivo).
 Utilizar diferentes dominios para el acceso con dispositivos pequeños y
dispositivos grandes. (para dispositivos de pantalla medianas o grandes).
https://www.webpro.com/
Mientras que http://webpro.mobi/ Destinada a tablets, smartphones y similares.

Cursor css:

Podemos modificar el icono del puntero cuando el puntero del ratón se sitúa sobre una
superficie.

Nota: es habitual usarlo con la pseudoclase hover para cambiar el puntero cuando el usuario
se posicione en un lugar de la web, como también a un elemento sin usar el hover.

Filtros:
No todos los navegadores respondes igual, e incluso algunos incorporan características propias
que no se encuentran en el estándar. Es por ello que se debe realizar pruebas en distintos
browsers (como en sus diferentes versiones, claro no todas).

Por eso debes enfocarse en que la paginas web se visualicen bien en los principales browsers
(versiones modernas).

max-width  define el ancho máximo de un elemento.

Min-width  define la anchura minina de un elemento

max-height

min-height 
prefijos:

son un tipo de filtros que permiten que una serie de reglas css se apliquen específicamente a
un grupo de navegadores, pero no a los demás.

Con las repeticiones de las mismas reglas con diferentes prefijos o sintaxis buscamos lograr
que la visualización sea correcta.

Buen uso y mal uso de prefijos:

- se deben utilizar prefijos cuando sean realmente necesario, así que solo céntrate en
escribir la estándar junto con la salvaguarda olvidando así de distintas sintaxis para
versiones anteriores.

Tarea:
Busca en alguna página web o blog de internet una técnica de filtrado
basada en prefijos para el navegador que estés utilizando. Aplícala y
explica su utilidad
Columnas:
columna-count Define numero de columnas con que se debe mostrar el contenido dentro
de un elemento.

column-gap  sirve para definir un espacio de separación entre columnas(en algunos

navegadores es necesario el uso de prefijos específicos de navegador).

Columna-rule:4px solid #000;  determina el ancho, el estilo y el color de la línea que separa
las columnas del contenido.

Esquinas redondeadas:

Border-radius  permite redondear las esquinas de la caja con facilidad.

Un parámetro indica el radio del círculo, mientras que 2 (radio horiz y radio vertical).

Box-shadow  permite dar sombra y efectos 3D en las cajas contenedoras, cuenta con 5
parámetros:
 Dist_horiz dist_vert blur spread color

Desplazamientos positivos hacia la derecha para el horizontal y hacia abajo para la vertical.

“” negativos hacia la izquierda “” y hacia arriba “”.

Blur  crea un efecto de difuminación y brillo.

Spread  crea un efecto de la sombra haciéndola mas grande que la caja.

Color  color de la sombra, rgba, hsla, #.

Importante: si queremos que la sombra se muestre interno, debemos usar inset antes que los
5 parámetros.

DEGRADADO EN CSS: permite que un color se vaya degradando progresivamente hasta

convertirse en otro.

Degradado lineales  es una imagen que genera css, a través de la función llamada linear-
gradient de la propiedad bg-image.

Background-image: linear-gradient(deg o to right, color1, color2).  se puede agregar mas de

2 colores en el degradado.

Importante: no es un fondo de pantalla, se crea una imagen que se adapta a todo el espacio
del contenedor.

Nota: cuando el degradado es negativo va en sentido antihorario y cunado es positivo horario.

Degradado radiales 

también se utiliza gabkground-image: radial-gradient

border-image  facilita el uso de imágenes para crear bordes personalizados.

transform: permite generar efectos gráficos, donde permite rotar, escalar, sesgar, trasladar
elementos.

FUNCION:

- rotate(valor)  su valor es una unidad angular.

- scale(valor)  donde X escale horizontal y Y escale vertical. Siendo su valor numero
entero o decimal.
- Skew(valor) establece un sesgado del elemento tanto vertical como horizontal. Su
valor es una unidad angular. Ejemplo: -10deg, 10deg.
- translate() X translación horizontal y Y translación vertical siendo ambas unidades de
medidas admitiendo porcentaje %.

Transition  es un efecto de cambio progresivo el cual tiene un estado de inicio y un

estado final de un elemento. Cada estado tiene propiedades, este empieza cuando
utilizamos la pseudoclases :hover, solo se realiza una vez (o hasta que el usuario vuelva a
poner el cursor encima del elemento). Debemos tener en cuenta:

- las propiedades que vamos a cambiar durante la animación. Para ello las
determinamos con transition-property todas las que cambiaran.
 transition-duration  especifica cuanto tiene que ser la duración de la transición
en segundo “s”, milisegundos “ms”. Estas propiedades pueden requerir el uso de
prefijos.

Importante: los tiempos que se especifiquen por comas, se asociaran por cada propiedad
en el orden especificado transition-property.

 transition-delay  cuanto tiempo debe ser retardado y que empiece la transición.

“s ”, “ms” importante.
  transition-timing-function 

Mozilla Developer Network.

Animaciones:
Es un efecto dinámico que cambia las propiedades de un elemento en el tiempo, pudiendo
tener varios estados intermedios. Estado inicial (form) y estado final (to).

@keyframes Regla que especifica el código de animaciones. Que va ser aplicada a un

elemento seleccionado mediante las reglas css (id, class, etiqueta,etc).

Importante  animación no tiene por qué implicar movimiento, Animación implica cambio de
propiedades. Estas propiedades pueden requerir el uso de prefijos específicos.

Si se desea aplicar más de una animación, se especifica los nombres separados por comas.

Animation-duration  determina cuanto durara la animación en “s” o “ms”. Si se aplican

varias animaciones, las duraciones estará separa por comas, en el orden de la animation-
name.

ANIMATION-ITERATION-COUNT  # de veces que se repetirá la animación. # > 0, infinite

determina que la animación se repita infinito. Si se desean aplicar varias animaciones, se
especificarán sus repeticiones separadas por comas.

ANIMATION-DIRECTION  indicamos como se va a ejecutar la animación. Sus valores:

- alternate Comienza hacia adelante y luego hacia atrás. Dependiendo ANIMATION-

ITERATION-COUNT
 - alternate-reverse  comienza hacia atrás y luego va hacia adelante. Dependiendo
ANIMATION-ITERATION-COUNT.

ANIMATION-DELAY  Indica cuanto debe retardarse el inicio de la animación en “s” o

“ms”.
animation-timing-function 

ANIMATION-FILL-MODE cómo debe comenzar y cómo debe quedar un elemento que tiene
una animación. Sus valores:

Forwards  el elemento quedará en el estado final de la animación.

Both  combina las 2 opciones anteriores.

Continuar pág. 307

FLEBOX  sistema de elementos flexibles que se adaptan y se colocan automáticamente.

Siempre deben estar contenidos (hijos ) en un contenedor (padre) para poder aplicar diseño
los elementos flebox.

Actúan sobre el eje principal (ep): el ep correrá a largo de la fila de izquierda a derecha. Los
elementos flebox.

flex-direction: row o row-reverse o column o columna-reverse.

1. justify-content : a línea los ítems que se encuentran (ep). sus valores:

 flex-start  ítems al principio del (ep).
 flex-end  items al final del (ep).
  space-between  distribuye los ítems dejando el mismo espacio entre ellos.
 space-anound  distribuye los ítems dejando a ambos lados de cada uno.
2. aling-content  trata los contenedores flex multilíneas. Servirá para alinear cada una
de las líneas.
 flex-start  ítems al principio del (ep).
 flex-end  items al final del (ep).
 space-between  distribuye los ítems desde el inicio hasta el final.
 space-anound  distribuye los ítems dejando a ambos lados de cada uno.
 strictch  estira los ítems para que ocupen de forma equitativa todo el espacio.

Actúan sobre el eje secundario (es): el es correrá desde el borde superior de la página hasta el
final (según dirección del bloque).

1. align-items  alineamiento de ítems en el contendor flebox en el eje (es) sobre la

línea actual.