Transparencia en CSS más comúnmente utiliza el estándar de color RGBA, y se puede establecer colores de borde transparente de esta manera. En RGBA, se especifican los valores que van de cero a 255 para el rojo, verde y azul. A continuación, especifica un nivel de transparencia que van de uno a cero para opaco y invisible. Muchos diseñadores utilizan colores RGBA en fondos. Aplicar colores RGBA a cualquier propiedad CSS que puede tomar un color. Esta técnica es limpio y sencillo y no requiere hacks para trabajar en cualquier navegador moderno.
Instrucciones
1 Abra el archivo HTML de la página Web que contiene el contenido que va a conseguir un borde transparente. Utilice un editor de código como Notepad ++, BBEdit o jEdit. Localizar las etiquetas que rodea el contenido que desea colocar un borde transparente alrededor y tomar nota del nombre de la clase para la etiqueta. Si ve ninguno, añadir un nombre de clase de este modo:
<Div class = "myborder"> contenido ... </ div>
2 Encontrar los valores de rojo, verde y azul (RGB) para el color transparente que desea utilizar. Utilice la herramienta de la paleta de colores en cualquier programa de edición de gráficos o utilizar un sitio web que proporciona un selector de color. No es necesario el código hexadecimal.
3 Vuelve a tu archivo HTML y buscar entre las etiquetas <head> y </ head>. Encuentra ya sea un conjunto de <style> o código que se parece 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. Abra el archivo .CSS que se hace referencia en la etiqueta <link>, si tiene uno, o añadir código CSS entre las etiquetas <style> y </ style>.
4 Escriba el siguiente código CSS, en sustitución de "nombre de clase", con el nombre de clase para la etiqueta HTML y los valores de color con su propia:
.classname {border-color: RGBA (255,0,0,0.5);}
El código anterior establece el color del borde a rojo y le da una transparencia del 50 por ciento.
5 Añadir un ancho de borde de este modo:
.classname {border-color: RGBA (255,0,0,0.5); border-width: 5px;}
Cambiar el número antes de "px" a su ancho de borde deseado en píxeles. Aquí es una propiedad CSS corta a mano que combina el color y el ancho:
.classname {border: RGBA sólida 5px (255,0,0,0.5);
La propiedad abreviada requiere el "border-style", así como la anchura y el color. Use "sólida" para hacer un borde sólido. Tenga en cuenta que "sólido" no se refiere al valor de transparencia del color.
Consejos y advertencias
- Suavizar sus fronteras aún más mediante el uso de la propiedad "border-radius" en el código CSS. Esta propiedad redondea las esquinas de las fronteras.
- Aunque los navegadores modernos no requieren hacks para que las fronteras de trabajo transparente, versiones antiguas de Internet Explorer no son compatibles con RGBA. La mejor práctica es fijar un color sólido primer y el segundo color transparente. Los navegadores que pueden leer RGBA usarán el segundo color del borde. Este método no se romperá diseños mientras que da la mejor experiencia a los mejores navegadores, una práctica conocida como "mejora progresiva".