DEV Community: Jorge Muñoz

🚀 Creando Animaciones Interactivas con CSS y HTML ✨

Jorge Muñoz — Thu, 09 Jan 2025 17:45:00 +0000

Hoy quiero compartir con ustedes un proyecto divertido que desarrollé utilizando HTML y CSS puro para crear un efecto interactivo animado y lleno de color en texto.

💡 ¿Qué hace este código? He diseñado un efecto en el que cada letra de un nombre cambia de color y revela una animación al pasar el mouse. Es un enfoque visual que combina creatividad y tecnología, perfecto para interfaces modernas o elementos destacados en sitios web.

📌 Características del código:

Totalmente basado en HTML y CSS (sin JavaScript 🟢).
Uso de variables CSS (--color, --font-size, etc.) para garantizar una personalización rápida.
Animaciones fluidas y efectos visuales gracias a hover y transition.

👨‍💻 Aquí tienes una vista previa del código:

HTML

<div class="name">
    <div class="jlmunozfdev" data-text="J">
        <span>J</span>
    </div>
    <div class="jlmunozfdev" data-text="L">
        <span>L</span>
    </div>
    <div class="jlmunozfdev" data-text="M">
        <span>M</span>
    </div>
    <div class="jlmunozfdev" data-text="U">
        <span>U</span>
    </div>
    <div class="jlmunozfdev" data-text="N">
        <span>N</span>
    </div>
    <div class="jlmunozfdev" data-text="O">
        <span>O</span>
    </div>
    <div class="jlmunozfdev" data-text="Z">
        <span>Z</span>
    </div>
    <div class="jlmunozfdev" data-text="F">
        <span>F</span>
    </div>
    <div class="jlmunozfdev" data-text="D">
        <span>D</span>
    </div>
    <div class="jlmunozfdev" data-text="E">
        <span>E</span>
    </div>
    <div class="jlmunozfdev" data-text="V">
        <span>V</span>
    </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

:root {
    --size: 120px;
    --font-size: 4rem;
}

body {
    box-sizing: border-box;
    --background: #240046;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--background);
    font-family: "Poppins", sans-serif;
}
.name {
    position: relative;
    display: flex;
}
.name .jlmunozfdev {
    position: relative;
    cursor: pointer;
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    --color: #c879ff;
}

.name .jlmunozfdev:nth-child(2) {
    --color: #c879ff;
}

.name .jlmunozfdev:nth-child(3) {
    --color: #f26419;
}

.name .jlmunozfdev:nth-child(4) {
    --color: #f26419;
}

.name .jlmunozfdev:nth-child(5) {
    --color: #80ed99;
}

.name .jlmunozfdev:nth-child(6) {
    --color: #80ed99;
}

.name .jlmunozfdev:nth-child(7) {
    --color: #e3f2fd;
}

.name .jlmunozfdev:nth-child(8) {
    --color: #e3f2fd;
}

.name .jlmunozfdev:nth-child(9) {
    --color: #ffd300;
}

.name .jlmunozfdev:nth-child(10) {
    --color: #ffd300;
}

.name .jlmunozfdev:nth-child(11) {
    --color: #ffd300;
}

.name .jlmunozfdev span {
    font-size: var(--font-size);
    font-weight: 700;
    -webkit-text-stroke: 2px var(--color);
    color: transparent;
    transition: 0.5s;
}

.name .jlmunozfdev:hover span {
    opacity: 0;
}

.name .jlmunozfdev::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: var(--font-size);
    height: 0;
    font-weight: 700;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    text-align: center;
    line-height: var(--size);
    color: var(--color);
}

.name .jlmunozfdev:hover::before {
    height: 100%;
    filter: drop-shadow(0 0 2rem var(--color));
}

Código del Proyecto

📚 Aprendizajes: Este proyecto refuerza cómo CSS avanzado puede transformar la experiencia visual y hacer más interactivos los elementos de una página web.

¡Un ejemplo perfecto de cómo pequeños detalles marcan la diferencia!

Django vs Django REST Framework: ¿Cuál es la diferencia? 🤔

Jorge Muñoz — Wed, 22 May 2024 14:30:53 +0000

En el mundo del desarrollo web, a menudo escuchamos sobre Django y Django REST Framework (DRF). Aunque están relacionados, cumplen propósitos diferentes. Aquí te explico sus diferencias:

🔹 Django: Es un framework de alto nivel para desarrollar aplicaciones web rápidamente con Python. Proporciona todas las herramientas necesarias para construir aplicaciones completas, incluyendo un ORM potente, un sistema de administración listo para usar y una estructura robusta para manejar solicitudes HTTP.

🔹 Django REST Framework: Es una extensión de Django, diseñada específicamente para construir APIs RESTful. Facilita la creación de APIs flexibles y robustas con funcionalidades como serialización de datos, autenticación, y manejo de permisos.

Principales Diferencias:

Propósito: Django está enfocado en aplicaciones web completas, mientras que DRF se centra en crear APIs.
Componentes: Django incluye herramientas integradas para el desarrollo web, DRF extiende estas herramientas para facilitar el desarrollo de APIs.
Uso: Utilizas Django para aplicaciones web tradicionales y DRF cuando necesitas crear un backend que provea datos a través de una API.

Si estás desarrollando una aplicación web completa, Django es tu mejor aliado. Pero si necesitas una API potente y flexible, entonces Django REST Framework es la elección ideal.

La Función Lambda en Python: Simplificando Tu Código

Jorge Muñoz — Tue, 14 May 2024 07:23:57 +0000

En Python, las funciones lambda son una herramienta poderosa para crear funciones anónimas de manera concisa y eficiente. A continuación, te explicamos qué son y cómo puedes utilizarlas en tus proyectos.

¿Qué es una Función Lambda?

Una función lambda en Python es una pequeña función anónima definida con la palabra clave lambda. Estas funciones pueden tener cualquier número de argumentos, pero solo una expresión. La sintaxis básica es:

lambda argumentos: expresión

Características Clave

Anónima: No requiere un nombre como las funciones normales definidas con def.
Concisa: Se define en una sola línea de código.
Temporal: Generalmente se utiliza en contextos donde se necesita una función pequeña y simple de manera rápida.

Ejemplos de Uso

Uso Básico: Crear una función lambda que sume dos números:

suma = lambda x, y: x + y
print(suma(2, 3))  # Salida: 5

Ordenar una Lista de Tuplas: Utilizar lambda como clave para la función sort:

lista = [(1, 2), (3, 1), (5, 0)]
lista.sort(key=lambda x: x[1])
print(lista)  # Salida: [(5, 0), (3, 1), (1, 2)]

Filtrar Elementos de una Lista: Utilizar lambda con la función filter:

numeros = [1, 2, 3, 4, 5, 6]
pares = list(filter(lambda x: x % 2 == 0, numeros))
print(pares)  # Salida: [2, 4, 6]

Cuándo Usar Funciones Lambda

Las funciones lambda son ideales para operaciones simples y cortas que se utilizan una sola vez, como argumentos para funciones de orden superior (map, filter, sorted). Sin embargo, para operaciones más complejas, es mejor definir una función con def para mejorar la legibilidad y el mantenimiento del código.

——

Espero que esta pequeña guía te ayude a comprender y utilizar las funciones lambda en Python de manera efectiva.

¡Feliz codificación!