Funciones de las propiedades CSS más usadas

Color

• https://colorhunt.co/
   
  Font-family

• https://fonts.google.com/
   
  Transition

• https://www.w3schools.com/css/css3_transitions.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

• https://css-tricks.com/almanac/properties/t/transition/
   
  Animation

• https://www.w3schools.com/css/css3_animations.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

• https://css-tricks.com/almanac/properties/a/animation/

Yo agregaría:

Text.aling - Para centrar el texto (center, right, left, etc.)
list-style: none - Para quitar o modificar el símbolo de las viñetas en una lista
cursor: pointer - Para que el cursor aparezca para seleccionar.
background-size: cover - Modificar el tamaño del fondo, que sea de toda la pagina sin repetir.

Les dejo los links para que los copien más fácilmente.

Transition:
https://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/

Animation:
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS
https://css-tricks.com/almanac/properties/a/animation/

Adjunto los links con el material sugerido para que accedan facilmente:
Transition:
https://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/
Animation:
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS
https://css-tricks.com/almanac/properties/a/animation/

Transiciones
https://css-tricks.com/almanac/properties/t/transition/
https://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Animaciones
https://css-tricks.com/almanac/properties/a/animation/
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

👋¡Hola! aquí los enlaces de la documentación de transition y animation
📌Transition
https://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/

📌Animation
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://css-tricks.com/almanac/properties/a/animation/

Espero los ayude, ya que del post no se puede acceder a los enlaces😎

Adjunto los links con el material sugerido para que accedan facilmente:
Transition:
https://www.w3schools.com/css/css3_transitions.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/
Animation:
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS
https://css-tricks.com/almanac/properties/a/animation/

Les dejo un link de un CSS CheatSheet interactiva
https://htmlcheatsheet.com/css/

Es necesario recordar que la propiedad box-sizing recibe el valor de border-box, quedaria de la siguiente manera.
box-sizing:border-box;

Comparto en versión editable para el que quiera hacer resúmenes:

Width: Define el ancho de un elemento.
Por ejemplo→ width: 20px;
Height: Define el alto de un elemento.
Por ejemplo → height: 20px;

Background: Puede definir el color de fondo o la url de fondo de un elemento.
Por ejemplo→ background: url(“puppy.png”);

Background-color: Define el color de fondo de un elemento.
background-color: red;

**Color: **Define el color de nuestros textos.

Estos colores los podemos escribir de 3 formas en CSS:

• **Sistema hexadecimal: **Donde blanco se define como #FFFFFF y negro como #000000. Una página que me gusta mucho para sacar colores en hexadecimal es: https://colorhunt.com/.

• Con los** nombres de los colores**, por ejemplo: black, red, green.

• **RGB: **Donde la R significa Red, G significa Green y B significa Blue; por lo que escribimos rgb(red, green, blue) y cada uno de ellos es un valor de 0 a 255 que describe la intensidad de ese color. Por ejemplo, para denotar el color verde, escribimos: rgb(0, 255, 0).
  También a estos valores se les puede agregar una opacidad (transparencia) que va de 0 a 1, por ejemplo: rgba(0, 255, 0, 0.5) lo que quiere decir que el color verde lo queremos con una transparencia del 50%.

Border: Define el tamaño, estilo y color del borde de un elemento, por ejemplo:
border: 2px solid yellow;

Border-radius: Define qué tan redondeado quiero mi elemento,
Por ejemplo→ border-radius: 20px;
Margin: Define el margen de un elemento.
Por ejemplo→ margin: 2px;
Lo que quiere decir que mi elemento tendrá márgenes en todos sus lados de 2px.

Si por ejemplo quiero que mi elemento tenga margen superior de 2px, margen inferior de 4px, margen derecha de 3px y margen izquierda de 5px, lo escribiría de la siguiente forma:
margin: 2px 3px 4px 5px;
El primer valor es el margen superior y siempre va en sentido de las manecillas del reloj.

Ahora, si sólo quiero que mi elemento tenga una margen a la derecha de 10px, escribiría:
margin-right: 10px;
Y para los demás valores sería:
margin-top: 10px;
Para el margen superior.
margin-bottom: 10px;
Para la margen inferior.
margin-left: 10px;
Para la margen izquierda.

Padding: Define la distancia del borde de un elemento hasta su contenido.
Por ejemplo:
padding 2px;
Lo que quiere decir que mi elemento tendrá un “margen interno” en todos sus lados de 2px.

Si por ejemplo quiero que mi elemento tenga padding superior de 2px, padding inferior de 4px, padding a la derecha de 3px y un padding a la izquierda de 5px, lo escribiría de la siguiente forma:
padding: 2px 3px 4px 5px;
El primer valor es la padding superior y siempre va en sentido de las manecillas del reloj al igual que con las márgenes.

Ahora, si sólo quiero que mi elemento tenga un padding a la derecha de 10px, escribiría:
padding-right: 10px;

Y para los demás valores sería:
padding-top: 10px;
Para la margen superior.
padding-bottom: 10px;
Para la margen inferior
padding-left: 10px;
Para la margen izquierda

**Font-size: **Define el tamaño de la fuente.
Por ejemplo→font-size: 20px;

Font-family: Define la familia tipográfica de la fuente.
Por ejemplo→ font-family: ‘Roboto’, sans-serif;
Una página de fuentes que me gusta mucho es: https://fonts.google.com

Opacity: Determina la transparencia del elemento. Tiene valores entre 0 y 1, que pueden verse como un porcentaje.
Por ejemplo, si quiero que mi elemento se vea con una transparencia del 50%, escribiría:
opacity: 0.5;

Outline: Un término algo desconocido es el esquema de los elementos HTML. Un esquema es una línea (por defecto de color azúl) que se dibuja alrededor de los elementos que hace que “se destaquen”.
Lo anterior sucede mucho en elementos como los <input>s y los <button>s. Si no queremos ver esa línea, lo que hacemos es:
outline: none;

Aunque también podemos decirle que tenga determinado estilo, color, tamaño, entre otras.

Por ejemplo:
outline-style: solid;
outline-color: red;
outline-width: 5px;

**Box-Sizing: **Cuando trabajamos con paddings, por ejemplo, veremos que el tamaño de nuestro elemento crece. Es decir, si tengo:
div { background: pink; width: 20px; height: 20px; }

Y luego le agrego un padding de 20 px, veré en el navegador que mi div ya no tiene un ancho y un alto de 20px sino de 40px cada uno. Lo que quiere decir que el padding hizo que creciera mi elemento. Sin embargo, si yo no quiero que el padding afecte los 20px originales, le agrego la propiedad box-sizing para que el tamaño total del elemento incluya el padding también y no se vea afectado por él.

**Transition: **Las transiciones CSS le permiten cambiar los valores de las propiedades sin problemas durante una duración determinada.

Debemos tener presente que una transición NO es una animación. Una transición va de un punto A a un punto B sin interrupciones o saltos en medio.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:
https://www.w3schools.com/css/css3_transitions.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://css-tricks.com/almanac/properties/t/transition/

Animation: Esta propiedad permite que animemos nuestros elementos.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:

https://www.w3schools.com/css/css3_animations.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://css-tricks.com/almanac/properties/a/animation/

https://i.emezeta.com/weblog/html5-cheatsheet/html5-cheatsheet-2019.pdf
https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf
Estos recursos te muestran muchas etiquetas de html, ycss respectivamente.

Dejo página en español que me esta ayudando bastante a entender todo sobre CSS: https://lenguajecss.com

Ese de transition y animation son muy utiles , no los habia visto en el curso definitivo de html y css 😎

Si bien el sistema hexadecimal es el modo más utilizado en el mundo del desarrollo web, el sistema hsl es mucho más fácil de utilizar, ya que tenemos un control más intuitivo de los colores y sus distintas variaciones.

Más detalles en :

• https://ya.co.ve/ls4
• https://www.w3schools.com/colors/colors_hsl.asp
• https://developer.mozilla.org/es/docs/Web/CSS/color

Recuerden que tenemos nuevos cursos para explicar esto más a detalle

• Curso definitivo de HTML y CSS
• Curso de CSS Grid Layout
• Curso de Diseño Web con CSS Grid y Flexbox
• Curso de Animaciones con CSS
• Curso Práctico de Maquetación y Animaciones con CSS
• Transformaciones y Transiciones en CSS
  Por su puesto hay mucho más pero por aquí es por donde todos comenzamos.

Buena informacion , pero seria mas util si dejaran los links fuera de la imagen para poder acceder mas facil a ellos.

Seria bueno que los links se pudieran copiar, tanto esta lección como la anterior son imágenes y no se pueden copiar los links.

Les comparto una librería de animaciones en CSS que uso muchísimo:

animate.css

Es rápida y muy fácil de usar

Estaria cool un curso de animaciones con CSS aqui en Platzi 😎

En el ejemplo del texto “Y luego le agrego un padding de 20px, veré en el navegador que mi div ya no tiene un ancho y un alto de 20px, sino de 40px cada uno” Ese ancho y alto no deberían se de 60px? ya que no se especificó una dirección de padding y este se agrega tanto arriba y abajo como hacia los dos lados.

Qué les parece esto, super básico:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animacion</title>
</head>
<style>
    .example {
        width: 500px;
        height: 400px;
        background: #ffffdd;
        animation-name: example;
        animation-duration: 10s;
    }
    
    @keyframes example {
        0% {
            background: #cbeaed;
        }
        25% {
            background: #d3de32;
        }
        50% {
            background: #006a71;
        }
        100% {
            background: #ffffdd;
        }
    }
</style>

<body>
    <div class="example">

    </div>
</body>

</html>```

La documentación es muy buena pero si no se aplican los conceptos no se entenderá cuál es su uso real.

Aquí hay más sobre CSS: https://www.w3schools.com/css/default.asp

El outilne es como un border adicional que envuelve al border original.
Aquí hay un button:

El border de este button es:

  border: 5px solid blue;

Y el outline es:

  outline: 3px solid green;

El outline es el borde verde y el border es el borde azul.
Espero que les ayudado esto 😄

A lo que le dediqué una buena cantidad de tiempo fue la transición. Así que me vi en la obligación de crear un mini proyecto aplicando la mayoría de lo que hay en la documentación. 😄

h1, h2, h3{
    margin: 30px;
    text-align: center;
    font-size: 30px;
}

div{
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    display: block;
    border-width: 0px;
    border-style: solid;
}

#moreLenght{
    background-color: #A5FECB;
    width: 70px;
    height: 70px;
    transition: width 2s;    
}
#moreLenght:hover{
    width: 400px;
}

#bigSize{
    background-color:#20BDFF;
    width: 70px;
    height: 70px;
    transition: width 2s, height 2s;
}
#bigSize:hover{
    width: 180px;
    height: 180px;
}

#rotate{
    background-color:#5433FF;
    width: 70px;
    height: 70px;
    transition: width 2s, height 2s, transform 2s;
}
#rotate:hover{
    width: 180px;
    height: 180px;
    transform: rotate(180deg);
}```

Siempre pensé que la transición entraba dentro de la categoría de “animaciones”. Siempre se aprende algo nuevo, gracias platzi.

Y los videos explicando 😦 , me gusta la documentación pero ojala vinieran acompañadas de ejemplos

Creo que faltó aclarar que el OUTLINE no afecta el width ni el height, es decir las medidas finales del elemento y que si el Outline es de un color sólido se va a sobreponer a los elementos adyacentes si no hay suficiente margen. Más detalles en: https://www.w3schools.com/css/css_outline.asp

Con todo respeto, deberían abarcar estos temas tan importantes en el contenido y no mandarnos a ver links tras links, también observo que no profundizan mucho el cada contenido… se queda bastantes flojos en ejemplos…

CSS es más extenso de lo que pensaba

Al momento de desarrollar un producto, tengan cuidado con usar tipografías que no tengas derechos libre.
Puedes terminar pagando las licencias tipográficas, como helvetica, etc.
Les recomiendo la tipografí de IBM, nerd fonts, consola fonts, etc. Fonts open source

a mi me cuesta aprender las definiciones, pero con este resumen queda bien entendido los conceptos, además de que son descripciones cortas.

la propiedad outline es muy util si quieres dar estilos personalizados con border-radius a los botones o inputs 😄

https://www.w3schools.com/css/css3_animations.asp
Las animaciones son súper útilesssss!

Es poco practico que a los enlaces no se les pueda hacer clic.

En la propiedad box-sizing ¿a que se refiere que el padding no afecte el tamaño original? Es decir, esta propiedad tiene dos posibles valores: border-box y content-box; donde la primera permite tomar en cuenta borde, relleno(padding o margen interno) y contenido de la caja en el tamaño del elemento(caja/box) y content-box lo que hace es eliminar el valor que representa al contenido (width). La explicación que se da de afectación del elemento por el padding no me queda clara del todo. Gracias de antemano a los que puedan opinar.

Gracias a Dios por MDN, comparto más documentación que siempre es útil tener a la mano.
https://developer.mozilla.org/en-US/docs/Web/CSS

Siempre es bueno tenerlo a la mano y practicar mucho.

para los que quieran, este curso es excelente para animaciones web!
https://platzi.com/cursos/animaciones-web/

La implementación de animaciones o transiciones con css han sido supremamente simples, genial !!

muy buena información, siempre es de utilidad para la consulta.

Ahora recueren que hay un curso de animación con css 😄

Hola! tengo una pregunta, el outline, por más que resalte un elemento, no estaría incluido en el box-model verdad?

Con compartir un buen PDF sobre el tema se salteaban estas tres clases. 😦

Documentación😣
Soy más fan de lo practico

Siempre hay que tomarse un tiempo de leer un poco de documentación cada día

Mucho texto

awasome!!!

Que bien explicado está

Excelente

Exelente resumen

Muy buena documentación.

lenguaje css

La propiedad animation es muy interesante y se pueden hacer cosas muy geniales con ella, les dejo el link de un vídeo de Leonidas Esteban donde explica como usarla, es muy interesante y pueden ver el repositorio del proyecto https://www.youtube.com/watch?v=2SMCZBBNjGg

Recomiendo la pagina https://www.w3schools.com/ para documentarse sobre HTML y CSS, hay muchos ejercicios y las explicaciónes son amigables y faciles de entender.

Encantado con este contenido!

Muchísimas gracias por este valioso aporte.

MUY BUEN APORTE MUCHAS GRACIAS

se agradece todo el material brindado

Para establecer un valor de border o padding distinto al resto se puede hacer algo como.

.elemento {
            margin: 20px;
            margin-bottom: 10px;
            padding: 20px;
            padding-left: 10px;
            /* propiedad: valor general */
            /* propiedad-sentido: valor especifico */

        }

Con esta clase al fin entendí lo de los colores con el rgba y del margin y el padding 🙃🙃🙃

w3school tiene toda una seccion de retos para que puedan practicar las lecciones ahi. Aqui les dejo los ejercicios. Son BUENISIMOS

https://www.w3schools.com/css/exercise.asp?filename=exercise_selectors1

⚡️Ir al resumen del curso

⚡️Ir al resumen del curso

Buenos aportes.

No conocía Outline y me cambió la vida.

Podemos expresar el Outline en una sola linea, tal como el border.

outline: 4px solid red;

Me encanto las nuevas herramientas de color tambien, que yo no conocía. Facilita mucho la elección de paleta de colores.

Excelente informacion!

Informacion muy util!

ERROR: en el ejemplo de background con url dentro del paréntesis comienza la ruta con un punto y coma. Eso a mi parecer daría error a no ser que el nombre de la imagen empezara con punto y coma, qué dicen?
background: url(’;puppy.png’😉;.

buen aporte el de transiciones y animaciones

Bua, amigos informcen bien sobre las animaciones y transiciones son super importantes

Funciones que aprendi y no sabia que exitian: opacidad:

tampoco sabi que extian funciones como

visibility:
que es muy diferente a display

Sigamos!

A practicar transitions y animations :3

Gracias por este gran aporte!!!

interesante la propiedad box-sizing: border-box;

Muchas gracias por el resumen de estas propiedades, mas adelante explicaran como hacer uso del transition y el animation? Gracias

excelente

Wao, lo último de animaciones está genial!

Gracias!

Interesante lista de propiedades, a practicarlas todas!

muy buen resumen gracias!!! me toco leer con detalle pero muy didactico…

El outline no me quedo tan claro

Lofi de fondo

Excelente Resumen!!

Que buenas funcionalidades que hay, son bastantes y muy llamativas!! me encanta 😃

wow no tenia idea que eso se podia hacer con CSS - animaciones y transiciones me refiero.
Buen aporte

Excelente…!

Muchas gracias por la lectura.

Excelente Informacion

Muchas gracias por la información, que bueno saber lo de las animaciones o:

Gracias querida profesora Estefany Aguilar.

Está buena la información, pero me esperaba algo más dinámico que esto, alguna infografía o capturas.

Muy buenos los ejemplos:
https://www.w3schools.com/css/css3_transitions.asp
https://www.w3schools.com/css/css3_animations.asp

Curiosamente muchos de los frontend developer conocen estas cosas y aun que son buenos es recomendable tener las bases o almenos comprenderlas

Gracias

excelente

Con el border-radius pasa lo mismo se hace en orden de las manecillas del reloj para cada esquina de un cuadrado