UT_2_1 - Estilos avanzados CSS3

Unidad de Trabajo: CSS3

Bordes

Esquinas Redondeadas

  • Propiedad: border-radius

    • 1 parámetro: Aplica a todas las esquinas.

    • 2 parámetros: top-left + bottom-right y top-right + bottom-left.

    • 3 parámetros: top-left, top-right, bottom-left, bottom-right.

    • 4 parámetros: Orden de agujas del reloj.

Código Ejemplo

div {
border: 2px solid;
border-radius: 25px;
}

Esquinas Irregulares

  • Permite diferenciar el radio horizontal y vertical usando una barra /.

  • Ejemplo: border-radius: 25% / 50%.

Esquinas Específicas

  • Se puede aplicar radio a esquinas individuales:

    • border-top-left-radius

    • border-top-right-radius

    • border-bottom-left-radius

    • border-bottom-right-radius

Sombras

Textos

  • Propiedad: text-shadow

    • Sintaxis básica: text-shadow: posx posy size color;

Cajas

  • Propiedad: box-shadow

    • Variantes con color, tamaño y dirección.

Fondos CSS

Fondos Múltiples

  • Sintaxis: background-image: imagen1, imagen2,...

  • Se apilan en orden inverso.

Imágenes con Gradientes

  • La propiedad background-image también acepta gradientes.

Gradientes

  • Tipos:

    • Lineales: linear-gradient()

    • Radiales: radial-gradient()

    • Cónicos: conic-gradient()

Fuentes CSS

Google Fonts

  • Proporciona tipografías gratuitas y fáciles de usar.

  • Incluye las fuentes en HTML o CSS mediante <link> o @import.

@font-face

  • Permite cargar fuentes directamente desde el servidor.

Transformaciones CSS

Propiedad Transform

  • Sintaxis: transform: funcion1 funcion2...

  • Funciones disponibles:

    • translate (traslación)

    • scale (escalado)

    • rotate (rotación)

    • skew (deformación)

Ejecución de Transformaciones

  • Varias transformaciones se pueden combinar separándolas por espacios.

Transiciones CSS

Propiedades

  • transition-property, transition-duration, transition-timing-function, transition-delay.

Animaciones CSS

@keyframes

  • Define los fotogramas clave para anime.

  • Estructura:

@keyframes nombre { from { propiedades iniciales; } to { propiedades finales; } }

Ejercicios

  1. Ejercicio diseño web con bordes y estilos originales.

  2. Crear composiciones utilizando sombras y fondos.

  3. Incorporar diferentes fuentes en una web.

  4. Implementar transformaciones en elementos interactivos.