Lenguaje CSS - CSS en español

`,g.querySelector(`.title`).textContent=a,g.querySelector(`.subtitle`).textContent=c??r,f.insertAdjacentElement(`beforeend`,g),g.animate(b,75)},d=a=>a.toLowerCase().normalize(`NFD`).replace(/[\u0300-\u036f]/g,r),e=async(a,b=r,c=s)=>{const e=await fetch(`${b}/api/contents.json`).then(a=>a.json());return new t((f,g)=>{const h=e.filter(b=>{const c=b.type===`category`,e=d(b.title).includes(a)||d(b?.subtitle||r)?.includes(a)||d(b?.tags||r)?.includes(a);return !c&&e}).slice(n,c).map(a=>({title:a.title,subtitle:a?.subtitle||r,icon:`/assets/icons/logos.svg#${a.topic.replace(`javascript`,`js`)}`,url:b+ a.url}));return f(h)})},f=async(a,b=s)=>{const c=await fetch(`/api/youtube.json`).then(a=>a.json());return new t((e,f)=>{const g=c.filter(b=>d(b.title).includes(a)).slice(n,b).map(a=>({title:a.title,subtitle:q,icon:`https://img.youtube.com/vi/${a.id}/default.jpg`,url:`https://youtu.be/${a.id}`}));return e(g)})},g=15,h=new URL(location.href).origin,i=[`https://lenguajehtml.com`,`https://lenguajecss.com`,`https://lenguajejs.com`,`https://terminaldelinux.com`].filter(a=>a!==h);i.length<4&&i.unshift(r);const j=async()=>{const a=document.querySelector(u),b=document.querySelector(p),h=d(a.value),j=h.length>3;if(b.innerHTML=r,!j)return;const k=document.querySelector(`dialog.search .loading`);k.classList.add(`loading`,v);const l=structuredClone(i).map(a=>e(h,a));l.push(f(h));const m=(await t.all(l)).flat(o/n).slice(n,g);k.classList.remove(v),k.classList.add(w),setTimeout(()=>k.classList.remove(w),x),m.forEach(a=>c(a))},k=document.querySelector(y),l=()=>{if(document.querySelectorAll(`dialog.search`).length>n)return;const b=document.createElement(`dialog`);b.innerHTML=`

`,b.addEventListener(z,()=>{document.body.classList.remove(A),b.close(),b.remove(),k.blur()});const c=a=>{const d=b.getBoundingClientRect();(a.clientXd.right||a.clientYd.bottom)&&(document.body.removeEventListener(B,c),b.dispatchEvent(new Event(z)))};setTimeout(()=>document.body.addEventListener(B,c),x),b.classList.add(`search`),b.querySelector(`input.query`).focus(),document.body.append(b),b.showModal(),document.body.classList.add(A),document.querySelector(u).addEventListener(`input`,a(j,400))};addEventListener(`keydown`,a=>{const {key:b,ctrlKey:c}=a;b.toLowerCase()===`k`&&c&&(a.preventDefault(),l(),document.querySelector(u).focus())});const m=document.querySelector(y);m.addEventListener(`focus`,l)

1 Nociones básicas

Antes de comenzar en el mundo de CSS, necesitamos aprender una base para saber desenvolvernos, los puntos clave iniciales, como medir tamaños, que unidades utilizar y variables para almacenar información.

3 temas · 12 posts

Requisitos:

2 Color y fondos

Una parte fundamental de CSS es conocer los métodos para establecer colores, como crear gradientes o utilizar imágenes de fondo. También como mezclarlos, combinarlos o hacer cosas increíbles.

3 temas · 20 posts

Colores CSS

01 Códigos de colores 02 La función RGB() 03 El formato hexadecimal 04 La función HSL() 05 La función color-mix() 06 Colores relativos MID 07 La función HWB() MID 08 La función LAB() y OKLAB() PRO 09 La función LCH() y OKLCH() PRO 10 Espacios de color PRO

Imágenes y fondos

01 La propiedad background 02 Fondos y gradientes múltiples 03 Visibilidad de elementos 04 La función image-set() MID 05 Objetos en CSS MID 06 Procesamiento de imágenes MID

Gradientes o degradados

01 ¿Qué son los gradientes? 02 Gradientes lineales 03 Gradientes radiales MID 04 Gradientes cónicos MID

3 Modelo de cajas

La parte fundamental para comprender como renderiza y dibuja los elementos web en un navegador es el modelo de cajas. Márgenes, rellenos, bordes y algunos conceptos más son una parte fundamental de CSS.

2 temas · 11 posts

Modelo de cajas

01 ¿Qué es el modelo de cajas? 02 Dimensiones en CSS 03 Desbordamiento (Overflow) 04 La propiedad box-sizing 05 Márgenes y rellenos 06 Propiedades lógicas CSS PRO

Bordes CSS

01 Bordes CSS 02 Esquinas redondeadas 03 Corner shape: Forma de esquinas 04 Bordes con imágenes PRO 05 Bordes con gradientes PRO

4 Lógica CSS

Hace mucho tiempo que CSS dejó de ser simplemente un lenguaje de estilos y colores. Hoy en día hay que conocer la compatibilidad de los navegadores, realizar cálculos complejos e incluso usar lógica como condicionales o funciones.

3 temas · 17 posts

Compatibilidad

01 Navegadores web 02 Niveles de CSS MID 03 Compatibilidad y soporte 04 La regla @supports MID

Cálculos CSS

01 Funciones matemáticas CSS 02 Calculos matemáticos en CSS 03 Máximos y mínimos en CSS MID 04 Redondeos y módulos en CSS MID 05 Funciones trigonométricas CSS PRO 06 Funciones exponenciales CSS PRO 07 Lista de funciones CSS

Lógica CSS

01 ¿CSS es programación? 02 Condicionales if() en CSS MID 03 La regla @function en CSS MID 04 La función random() MID 05 La funcion attr() MID 06 Tipos de datos en CSS MID

5 Selectores CSS

Uno de los puntos clave de CSS (y de Javascript) es saber buscar elementos en el HTML. Esto, se suele hacer mediante CSS, utilizando selectores, pseudoclases y pseudoelementos, o incluso, utilizando nesting.

4 temas · 22 posts

Selectores CSS

01 Selectores básicos 02 Selectores de atributos PRO 03 Combinadores MID 04 Combinadores lógicos MID 05 Combinador :is() y :where() PRO 06 Combinador o selector :not() PRO 07 Combinador o selector :has() PRO

Pseudoclases CSS

01 ¿Qué son las pseudoclases? 02 Pseudoclases de interacción 03 Pseudoclases de ubicación 04 Pseudoclases de idioma PRO 05 Pseudoclases de estructura MID 06 Pseudoclases de formularios PRO 07 Pseudoclases de estado PRO

Pseudoelementos CSS

01 Pseudoelementos: ¿Qué son? MID 02 Contenido generado en CSS MID 03 Pseudoelementos tipográficos PRO 04 Pseudoelementos de resaltado PRO

Calidad de código

01 Minificar CSS 02 StyleLint: Linter CSS MID 03 CSS Nesting nativo MID 04 Metodologías CSS PRO

6 Tipografías

Una de las partes fundamentales de CSS es el uso de tipografías. Una web puede cambiar completamente si utilizar correctamente una o varias tipografías. Además, hay que saber cargarlas y optimizarlas.

2 temas · 14 posts

Fuentes y tipografías

01 ¿Qué son las tipografías? 02 Bases de fuentes y tipografías 03 Decoraciones de texto 04 Ajuste y balance de textos MID 05 Contorno en tipografías MID 06 Textos con degradados MID 07 Textos y alineaciones MID 08 Ajustes en tipografías PRO

Cargar tipografías

01 Tipografías con Google Fonts 02 Tipografías con Fontsource 03 La regla @font-face MID 04 Modo de carga de tipografías MID 05 Fuentes variables CSS MID 06 Características personalizadas PRO

7 Layouts

Probablemente, una de las partes más importantes de CSS es la de crear layouts o avanzadas interfaces de usuario. Mediante flex o grid es una tarea sencilla pero se debe tener un buen dominio de CSS.

4 temas · 20 posts

Maquetación

01 La propiedad display 02 Alinear y centrar con CSS 03 La propiedad display multi-keyword MID 04 Multi-columnas CSS MID

Flex CSS

01 Guía de Introducción a Flex 02 Alinear y centrar con Flex CSS MID 03 Elementos flexibles en CSS PRO

Grid CSS

01 Guía de Introducción a Grid 02 Alinear y centrar con Grid CSS MID 03 Grid por áreas 04 CSS Decoration Gaps 05 Celdas irregulares en Grid PRO 06 Líneas con nombre en Grid PRO 07 Colocación automática en Grid MID

Posicionamiento CSS

01 La propiedad position 02 Posicionamiento relativo MID 03 Posicionamiento absoluto MID 04 Posicionamiento fijo MID 05 Posicionamiento «sticky» MID 06 CSS Anchor Position MID

8 Interfaz de Usuario

Si necesitamos dar estilo a ciertos elementos de la interfaz de usuario de nuestro navegador, como barras de desplazamiento, cursor del ratón, tablas, listas o contadores, en este capítulo te lo explicamos.

2 temas · 8 posts

Interacciones

01 Contornos 02 Cursor del ratón 03 Barras de desplazamiento 04 Scroll suave (Smooth Scroll) 05 CSS Snap Scroll PRO

Representación de datos

01 Tablas CSS 02 Listas CSS 03 Contadores CSS MID

9 Efectos

Todos los diseños mejoran si incluímos llamativos y atractivos efectos. Sombras, filtros, modos de fusión, máscaras o recortes pueden permitirnos hacer todo tipo de diseños maravillosos.

3 temas · 12 posts

Sombras

01 Sombras CSS en textos 02 Sombras CSS en cajas 03 Sombras idénticas CSS MID 04 Pixel art con CSS PRO

Efectos

01 Filtros CSS 02 Modos de fusión CSS MID

Máscaras y recortes

01 Formas básicas MID 02 La propiedad clip-path MID 03 La propiedad float PRO 04 La propiedad shape-outside PRO 05 La función shape() PRO 06 Máscaras en CSS PRO

10 Responsive

El responsive web design es la forma de crear diseños o layouts que se adapten o respondan a diferentes tamaños de pantalla o dispositivo. Aquí encontrarás todo tipo de facilidades para este tema.

1 tema · 8 posts

Responsive Web Design

01 ¿Qué es Responsive Design? 02 Bases del Responsive Design 03 CSS Media Queries MID 04 CSS Media Features MID 05 CSS Container Queries MID 06 Preferencias de usuario MID 07 Medios impresos PRO 08 Medios paginados PRO

11 Transformaciones y dibujos

Aunque suele mantenerse al margen de los layouts, las transformaciones, tanto 2D como 3D, suelen ser muy útiles para conseguir impresionantes resultados o animaciones llamativas. Además, también es la base para dibujar con CSS.