Archive for Marzo, 2011

08MarBordes redondeados para diferentes navegadores y CSS3

 

La CSS3 va a llegar acompañando al HTML5 y va producir innegablemente un cambio muy importante en la forma de programar los diseños en la web. Hace poco veíamos en dobleocho una interesantísima presentación de HTML5 que nos mostraba algo de lo que se avecina. Entre las diferentes aportaciones interesantes que ofrece, una de ellas es la que tiene que ver con el desarrollo de esquinas redondeadas. Las esquinas redondeadas han sido emuladas en la CSS2 mediante el uso de imágenes de fondo, incialmente con JPEG y GIF, con las limitaciones que se desprenden de su uso y poco a poco cuando la versión 6 del Internet Explorer de windows fue reduciendo cuota de usuarios fueron entrando en la baraja los PNG con transparencia.

Actualmente la CSS3 recoge un modo para generar esquinas redondeadas que no todos los navegadores han implementado aún pero que muchos han hecho mediante el uso de prefijos específicos.

En la web css3.info podéis econtrar detallada la forma en que se generan los bordes. Os muestro algunas capturas de lo que allí se cuenta:

  1.  
  2. #Example_A {
  3. height: 65px;
  4. width:160px;
  5. -moz-border-radius-bottomright: 50px;
  6. border-bottom-right-radius: 50px;
  7. }
  8.  
  9. #Example_B {
  10. height: 65px;
  11. width:160px;
  12. -moz-border-radius-bottomright: 50px 25px;
  13. border-bottom-right-radius: 50px 25px;
  14. }
  15.  
  16. #Example_C {
  17. height: 65px;
  18. width:160px;
  19. -moz-border-radius-bottomright: 25px 50px;
  20. border-bottom-right-radius: 25px 50px;
  21. }
  22.  
  23. #Example_D {
  24. height: 5em;
  25. width: 12em;
  26. -moz-border-radius: 1em 4em 1em 4em;
  27. border-radius: 1em 4em 1em 4em;
  28. }
  29.  
  30. #Example_E {
  31. height: 65px;
  32. width:160px;
  33. -moz-border-radius: 25px 10px / 10px 25px;
  34. border-radius: 25px 10px / 10px 25px;
  35. }
  36.  
  37. #Example_F {
  38. height: 70px;
  39. width: 70px;
  40. -moz-border-radius: 35px;
  41. border-radius: 35px;
  42. }
  43.  

 

Pero mi recomendación es que entréis en border-radius.com y generéis los bordes al tiempo que véis como quedan. Podréis observar que genera el código para CSS3 y el código para Gecko y Webkit. Gecko es básicamenten el motor de Firefox (en versiones anteriores a la 4  necesitarás el prefijo "–moz" para ver los bordes redondeados). Y webkit es el motor de Safari, Chrome o Konqueror. Os dejo bajo las referencias más detalladas de la wikipedia.

 

Gecko es un motor de renderizado libre escrito en C++ y originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla y la Corporación Mozilla.

WebKit es una plataforma para aplicaciones que funciona como base para el navegador web Safari, Google Chrome, Epiphany, Midori entre otros. Está basado originalmente en el motor de renderizado KHTML del navegador web del proyecto KDE, Konqueror.

 

 




 

Marzo 2011
L M X J V S D
« Ene   Abr »
 123456
78910111213
14151617181920
21222324252627
28293031