"Activa Tu Web"

Entradas

Mostrando entradas de julio, 2023

Bootstrap 5

- julio 25, 2023

Componentes Bootstrap 5 ACCESO A BOOTSTRAP 5 https://getbootstrap.esdocu.com/docs/5.1/getting-started/introduction/ <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <title>Componentes básicos Boot

CSS Sprites

- julio 05, 2023

Css Sprites y Botón animado <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Css animation - Sprite</title> </head> <body> <style> .ciudad{ margin: 0 auto; width: 844px; height: 339px; background: url("jpg.jpg"); position: relative; animation: fondoanimado 5s linear infinite; } @keyframes fondoanimado { 0% { background-position: 0px; } 100% { background-position: -844px; } } .corriendo{ margin: 0 auto; height: 168px; width: 128px; position: absolute; left: 40%; bottom: 15px; background: url("corriendo.fw.png");

CSS Sprites

- julio 04, 2023

TRABAJANDO CON SPRITES en Css En CSS, los sprites son una técnica utilizada para combinar múltiples imágenes en una sola imagen y luego mostrar partes específicas de esa imagen en diferentes elementos de la página web. Esta técnica se utiliza principalmente para mejorar el rendimiento al reducir la cantidad de solicitudes al servidor para cargar múltiples imágenes individuales. Los sprites se crean al combinar varias imágenes en una sola imagen grande, donde cada imagen individual se coloca en una posición específica dentro de esa imagen. Por lo general, estas imágenes individuales se agrupan en una cuadrícula, una al lado de la otra o una encima de la otra. Luego, en lugar de utilizar múltiples imágenes separadas para diferentes elementos de la página, se utiliza la imagen sprite como fondo de los elementos y se ajusta la posición del fondo para mostrar solo la parte deseada de la imagen sprite. La técnica de sprites en CSS ofrece varios beneficios, como: 1. Reducción de solicitudes