Programación y Ejemplos

Entradas

Ejemplo para añadir un contorno a un texto en CSS

Añadir un contorno a un texto puede realzar su apariencia y mejorar su legibilidad, especialmente en fondos complejos. En este artículo, te mostraremos cómo hacerlo de manera sencilla utilizando CSS. ¿Qué es el contorno de texto? El contorno de texto se refiere a un borde que se aplica alrededor de las letras. Puede ayudar a que el texto destaque y sea más atractivo visualmente. Sin embargo, CSS no proporciona una propiedad directa para agregar un contorno a un texto, por lo que usaremos una combinación de propiedades para lograr el efecto deseado. Método 1: Usar text-shadow Una de las formas más comunes de crear un contorno es mediante la propiedad text-shadow . Esta propiedad se utiliza para añadir sombras al texto, pero también se puede manipular para simular un contorno. A continuación, te mostramos cómo hacerlo: Ejemplo de código html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name ...

Sigue leyendo »

Ejemplo para cambiar el cursor al pasar sobre un elemento en CSS

El cursor del mouse es una parte fundamental de la experiencia del usuario en la web. Cambiar el estilo del cursor al pasar sobre un elemento puede proporcionar pistas visuales que mejoran la interacción y la usabilidad de tu sitio. En este artículo, aprenderemos a cambiar el cursor al pasar sobre un elemento usando CSS. ¿Por Qué Cambiar el Cursor? Cambiar el cursor puede ayudar a indicar que un elemento es interactivo, como un botón o un enlace. También puede mejorar la estética general de tu sitio web y hacer que la navegación sea más intuitiva para los usuarios. Por ejemplo, al cambiar el cursor a una mano al pasar sobre un botón, le dices al usuario que puede hacer clic en él. Tipos de Cursores en CSS CSS proporciona varios tipos de cursores que puedes utilizar. Algunos de los más comunes son: default : El cursor por defecto. pointer : Un cursor de mano, ideal para elementos clicables. text : Un cursor de texto que indica que el texto se puede seleccionar. move : Un cursor que indi...

Sigue leyendo »

Ejemplo para aplicar fuentes de Google Fonts en CSS

La tipografía es un aspecto fundamental del diseño web. Una buena elección de fuentes puede mejorar la legibilidad y la estética de tu sitio. Google Fonts es una herramienta gratuita que ofrece una amplia variedad de fuentes para utilizar en tus proyectos. En este artículo, te enseñaremos cómo aplicar fuentes de Google Fonts en CSS, paso a paso. Paso 1: Elegir una fuente en Google Fonts Visita Google Fonts. Navega por la biblioteca de fuentes y elige la que desees utilizar. Por ejemplo, seleccionemos Roboto . Haz clic en el botón de “+” (más) junto a la fuente para seleccionarla. En la parte inferior derecha, se abrirá un panel que muestra las fuentes seleccionadas. Haz clic en él para ver más detalles. Paso 2: Obtener el enlace de la fuente En el panel de la fuente, encontrarás un cuadro que contiene el código para incluir la fuente en tu sitio. Copia la línea de código que comienza con <link> . Por ejemplo: html < link href = "https://fonts.googleapis.com/css2?family=...

Sigue leyendo »

Ejemplo para usar media queries para cambiar estilos según el dispositivo

En el desarrollo web actual, es fundamental asegurarse de que nuestro sitio se vea bien en cualquier dispositivo, ya sea un teléfono móvil, una tablet o una computadora de escritorio. Esto se logra mediante media queries en CSS, que nos permiten cambiar los estilos de nuestra página web dependiendo del ancho de la pantalla del usuario. ¿Qué Son las Media Queries? Las media queries son reglas de CSS que permiten aplicar diferentes estilos en función de ciertas condiciones, como el tamaño de la pantalla, la orientación del dispositivo (vertical u horizontal), o la resolución. Son esenciales para lograr un diseño responsive , adaptado a diferentes tamaños de dispositivos. Con las media queries, podemos especificar que ciertos estilos solo se apliquen cuando la pantalla del usuario cumpla ciertas condiciones. Sintaxis Básica de Media Queries La sintaxis de una media query en CSS es simple. Aquí tienes un ejemplo básico: css @media (condition) { /* Estilos aplicados si se cumple la c...

Sigue leyendo »

Ejemplo para hacer una imagen circular en CSS

Crear una imagen circular en CSS es una de las tareas más simples pero efectivas para hacer que las imágenes se vean más atractivas. Este efecto es especialmente útil para avatares o fotos de perfil en sitios web. Aquí te muestro cómo hacerlo en solo unos pocos pasos. Paso 1: Configura el HTML Primero, necesitamos una imagen a la que le daremos forma circular. En este ejemplo, usaremos una estructura HTML simple: html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Imagen Circular en CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "imagen-circular" > < img src = "avatar.jpg" alt = "Foto de Perfil" > </ div > ...

Sigue leyendo »

Ejemplo para crear un tooltip con CSS

Los tooltips son mensajes emergentes que aparecen cuando el usuario pasa el cursor sobre un elemento. Son útiles para proporcionar información adicional sin sobrecargar la interfaz. En este artículo, aprenderás cómo crear un tooltip simple usando solo HTML y CSS, sin necesidad de JavaScript. Paso 1: Estructura HTML Primero, crearemos la estructura HTML básica. Usaremos un span como el elemento que activará el tooltip y un div como contenedor del texto del tooltip. html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de Tooltip con CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "tooltip-container" > < span class = "tooltip-trigger...

Sigue leyendo »

Ejemplo para usar variables CSS para personalizar colores

En CSS, las variables te permiten almacenar valores reutilizables, lo que facilita mucho el manejo de colores en un proyecto. Las variables CSS también se conocen como "propiedades personalizadas" y son especialmente útiles para gestionar colores en un sitio web, ya que permiten hacer ajustes de diseño sin tener que cambiar cada color manualmente. ¿Qué son las variables CSS? Las variables CSS son valores que puedes definir una sola vez y reutilizar en cualquier lugar de tu hoja de estilos. Se crean con un prefijo doble guion ( -- ) y pueden ser utilizadas en todo el documento o en secciones específicas. Paso 1: Definir Variables de Color Para definir variables CSS para colores, añade el código dentro de un selector :root (representa el elemento raíz del documento) para que tus variables estén disponibles globalmente en toda la página. css :root { --color-primario : #3498db ; --color-secundario : #2ecc71 ; --color-fondo : #f5f5f5 ; --color-texto : #333333 ; } En este...

Sigue leyendo »