Cómo utilizar un borde transparente en CSS

Escrito por sara williams | Traducido por georgina velázquez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo utilizar un borde transparente en CSS
Utiliza el código RGBA color en CSS para formar bordes transparentes. (Comstock Images/Comstock/Getty Images)

La transparencia en CSS más comúnmente utiliza el estándar de color RGBA, y puedes definir colores transparentes de borde de esta manera. En RGBA, se especifican los valores que van de 0 a 255 para el rojo, verde y azul. A continuación, especificas un nivel de transparencia que va desde uno para opaco y cero para invisible. Muchos diseñadores utilizan colores RGBA en los fondos. Aplica colores RGBA a cualquier propiedad CSS que puede tomar un color. Esta técnica es limpia y sencilla y no requiere hacks para trabajar en cualquier navegador moderno.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML de la página web que contiene el contenido al que aplicarás un borde transparente. Utiliza un editor de código como Notepad++, BBEdit o jEdit. Busca las etiquetas que rodean el contenido en el que deseas colocar un borde transparente y toma nota del nombre de la clase para la etiqueta. Si no ves ninguno, añade un nombre de clase de esta manera:

    <div class="myborder">Content…</div>

  2. 2

    Encuentra los valores rojo, verde y azul (RGB) para el color transparente que deseas utilizar. Utiliza la herramienta de la paleta de colores en cualquier programa de edición de gráficos o usa un sitio web que proporcione un selector de color. No es necesario el código hexadecimal.

  3. 3

    Vuelve a tu archivo HTML y busca entre las etiquetas <head> y </ head>. Busca cualquier conjunto de etiquetas <style> o código que se parezca a esto:

    <link rel="stylesheet" href="style.css" type="text/css" />

    El código anterior es sólo un ejemplo, el uso de la etiqueta <link> varía. Abre el archivo. CSS hace referencia en la etiqueta <link>, si tienes uno, o añade un código CSS entre las etiquetas <style> y </ style>.

  4. 4

    Escribe el siguiente código CSS, reemplazando "classname" con el nombre de la clase para la etiqueta HTML y los valores de color con la tuya:

    .classname {border-color: rgba(255,0,0,0.5);}

    El código anterior establece el color de borde a rojo y da una transparencia del 50 por ciento.

  5. 5

    Añade un ancho de borde de este modo:

    .classname {border-color: rgba(255,0,0,0.5); border-width: 5px;}

    Cambia el número antes de "px" a tu ancho de borde deseado en píxeles. Aquí hay una propiedad abreviada CSS que combina el color y anchura:

    .classname {border: 5px solid rgba(255,0,0,0.5);

    La propiedad corta requiere el "borde de estilo", así como la anchura y el color. Usa "solid" para hacer un borde sólido. Ten en cuenta que "solid" no se refiere al valor de la transparencia del color.

Consejos y advertencias

  • Suaviza tus bordes aún más mediante el uso de la propiedad "border-radius" en el código CSS. Esta propiedad redondea las esquinas de los bordes.
  • Aunque los navegadores modernos no requieren hacks para hacer funcionar bordes transparentes, las versiones anteriores de Internet Explorer no son compatibles con RGBA. La mejor práctica es establecer un color sólido primero y el segundo color transparente. Los navegadores que pueden leer RGBA utilizarán el color del borde segundo. Este método no rompe esquemas al dar la mejor experiencia a los mejores buscadores, una práctica conocida como "mejora progresiva".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles