CSS: Esquinas redondeadas y sin imágenes (todos los navegadores)

Ésta es una cuestión muy hablada y discutida en foros y blogs. Existen infinidad de formas de poner bordes redondeados a elementos como las capas, aunque algunas no funcionan en todos los navegadores (no son Cross-browser) o no son óptimas (utilizan imágenes o demasiados div). Por eso quiero mostrar la que me ha parecido la más conveniente de todas las que habitan en la web.

Lo que tenemos que hacer es añadir el estilo siguiente a nuestra hoja CSS. Como vemos, en él se llama a varias propiedades, propias de cada navegador para conseguir que funcione en todos:

.redondeado {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari y Chrome */
-khtml-border-radius: 20px; /* Konkeror, ... */
border-radius: 20px; /* Opera 10.50, IE y CSS3 */
}

Además, se referencia a un script llamado border-radius.htc , que da soporte a los navegadores IE, en sus versiones 6, 7 y 8. Debemos descargarlo de http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc y guardardo en la misma ruta donde están nuestras páginas (no donde está el archivo CSS).

Bonus Track

También podemos añadir sombra al elemento y que funcione en todos los navegadores de esta forma:

  -moz-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  -khtml-box-shadow: rgba(0,0,0,0.2) 0px 4px 2px;
  box-shadow: rgba(0,0,0,0.2) 1px 4px 10px;

Las propiedades por orden son: color, posición horizontal de la sombra, posición vertical de la sombra, distancia de desenfoque. Más información aquí: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspf

 

Fuentes

• http://graphicmaniacs.com/note/cross-browser-border-radius-solution-with-example/
• http://code.google.com/p/curved-corner/
• http://www.w3schools.com/cssref/css3_pr_box-shadow.aspf
• http://jonraasch.com/blog/css-rounded-corners-in-all-browsers 

Espero que os sirva.

Qué estilo CSS está afectando a una etiqueta o elemento HTML: Firebug (extensión de Firefox).

Hay proyectos web que por su envergadura pueden ser bastante complicados de modificar o depurar. Esto también es así si hablamos de estilos, puesto que podemos encontrarnos con varios archivos CSS, herencia, etc.

Os voy a hablar de una herramienta que nos va a ayudar enormemente y que nos permitirá ahorrarnos bastante tiempo probando y buscando entre hojas de estilo. Esa herramienta realmente es una extensión para Mozilla Firefox que se llama Firebug y es muy conocida en el mundo de la programación web. Podéis encontrar información e instalarla en la siguiente URL:

http://getfirebug.com

Las funcionalidades de esta aplicación son muy amplias. Como se describe en dicha web, aparte de inspeccionar y modificar el estilo de una página web, nos permite depurar JavaScript, analizar por ejemplo el tamaño y tiempo de carga de distintos elementos como imánges, etc.

Pero quizás la más útil en general sea la inspección de estilos CSS. Veamos un ejemplo:

Primero abrimos la página en cuestión con Firefox (yo he escogido http://www.linuxfoundation.org/) y pulsamos en el icono siguiente:

A continuación seleccionamos el elemento a inspeccionar. Se mostrará un rectángulo azul indicando el elemento seleccionado:

Abajo nos aparecerán dos paneles. En el de la izquierda se mostrará el código html simplificado (mostrando solo las etiquetas sin el contenido) a excepción del elemento seleccionado, del que se mostrará todo su código.

En el panel de la derecha está lo que más nos interesa, que son los estilos aplicados al elemento seleccionado. Como vemos, nos indica claramente los atributos aplicados según el estilo y también los parámetros aplicados que son heredados.

Los parámetros tachados significan que están redefinidos en algún estilo hijo. A la derecha, en azul, aparece la hoja de estilo y la línea donde se encuentra cada estilo.

Como podréis comprobar, se trata de una herramienta que en cuanto la utilicemos un par de veces se convertirá en imprescindible.

Técnicas CSS. Parte 1

Éste es el primero de una serie de post dedicados a CSS, es decir hojas de estilos.

Técnica 1. Pequeña indicación.

Consiste en que al pasar el ratón sobre la palabra coloreada muestra un mensaje:

<style type="text/css">
a:hover {
  background:#ffffff;
  text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {
  display:none;
  padding:2px 3px;
  margin-left:8px;
  width:130px;
}
a.tooltip:hover span{
 display:inline;
 position:absolute;
 background:#ffffff;
 border:1px solid #cccccc;
 color:#6c6c6c;
 }
 </style>
 
 
 Mi <a class="tooltip" href="#">consejo<span>No fume</span></a>.

Técnica 2. Elegir el color del texto seleccionado

El siguiente código nos va a permitir indicar el color de selección del texto mediante un valor hexadecimal.

::selection {
  background: #ffb7b7; /* Safari */
}

::-moz-selection {
  background: #ffb7b7; /* Firefox */
}

 

Fuentes:

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques