media queries

Media Queries de CSS3 y el diseño adaptativo

Una de las principales ventajas que nos brinda CSS3 es el uso de Media Queries. Este componente nos permite definir una clase CSS dependiendo del tamaño del visor de nuestra página. Como ya os habréis percatado, se utilizan en el diseño adaptativo de páginas web, Responsive Web Design y es súper útil. Puesto que nos vamos a asegurar que nuestra página web se vea perfectamente en todos los posibles visores, o al menos, los más populares. Por ejemplo, podemos definir una clase para el body tal que así: body { background-color: red; } Ahora usaremos una Media Querie para decir que si el ancho de la pantalla es de 500 pixels, ponga el color de fondo negro y el texto en blanco, […]

Fuentes para uso comercial gratuitas

En Internet existen miles de web donde podemos encontrar fuentes para nuestro ordenador o para usar en una web. Pero ojo, si usamos una fuente no estándar en una web, sólo se verá en las computadoras donde esté instalada dicha fuente extraña. Para evitar esto existes algunas técnicas. Por ejemplo usar la funcionalidad de Google para usar tipos de letras no instaladas en nuestro ordenador. Otra opción es “incrustar” la fuente en nuestra Web. La gran ventaja que nos ofrece FontsQuirrel es el poder descargar los ficheros correspondientes para poder hacer esta función. Ejemplo: Nos descargamos la letra CHUNKFIVE. Ente los archivos que se nos descargan estarán tres uno .eot, otro .ttf y otro .svg. El ttf es el que […]

Crear botones CSS con Button Maker

Button Maker es una página que nos permite crear un botón mediante una serie de propiedades CSS. En esta web podemos determinar el tamaño, el tamaño de la letra, el tipo de fuente y el angulo de los bordes, del enlace que hará de botón. Todo esto nos permitirá tener un elegante botón de enlace. El gran handicap de esta técnica es que no es compatible con ningunos de los Explorer que están actualmente en le mercado, esperemos que el nuevo IE9 corriga este gran problema de incompatibilidad. Visto en downloadsquad

Menú Css y Ajax

No se si os habrá pasado en alguna ocasión que intentáis poner un menú ajax pero al final lo dejáis por imposible porque suelen ser demasiado poco flexibles. Os quiero enseñar uno que me ha gustado mucho por su sencillez a la hora de ser usado. Este menú de stunicholls lo podéis ver en su web. Lo mejor de todo es que ha sido testado para IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) y Safari (iPod Touch). El código Javascript: [jscript] /* Credits: Stu Nicholls */ /* URL: http://www.stunicholls.com/menu/pro_dropdown_2/stuHover.js */ stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) { […]

CSS Compresor

En otra ocasión ya os hablé de un optimizador de CSS, pues hoy me gustaría presentaros otro. En este caso se trata de CSS Compresor. Este comprime más que Clean CSS, citado en la otra ocasión. De todas maneras, y es una opinión personal, me gusta más Clean CSS, ya que la optimización que realiza es más legible que la de CSS Compresor. ¿Y vosotros? ¿Usáis alguna herramienta de este estilo para aligerar un poco vuestra web? ¿Cuál es vuestra preferencia?

CSS en Internet explorer

¿Aun sigues utilizando Internet Explorer 6? Pues ya es hora de ir cambiando… recibo un correo de Javier a la lista de correo del Laboratorio de Software Libre de la Universidad de Córdoba con algunas de las diferencias a la hora de interpretar nuestro CSS con algún explorador normal y con IE6. Homenaje a los sufridos desarrolladores web. Ver imagen a mayor tamaño.

RMSforms: Framework CSS para formularios

En el blog de Andrés Nieto descubro RMSforms, un framework CSS sencillo y escueto especializado en formularios. <fieldset> <legend></legend> <ul class=”form [modifier]”> <li><label class=”[label modifier]”></label><input/></li> </ul> …. </fieldset>; El framework, como casi todos los frameworks CSS, se basa en la inclusión de modificaciones en el atributo class de los elementos de nuestro formulario. En este ejemplo, nos muestra un listado de <input /> que mediante una serie de modificadores nos permitirá estilizar nuestros formularios. Modificadores Al estar especializado en formularios, sus opciones son muy limitadas. Los modificadores necesarios para estructurar nuestros formularios son: vvv ??? Vertical <li>, Vertical <label>, Vertical form fields hvv ??? Horizontal <li>, Vertical <label>, Vertical form fields hii ??? Horizontal <li>, Inline <label>, Inline form fields […]

Las 3 formas más seguras de publicar emails en la web

Poner email en texto plano en una página puede llegar a ser un verdadero problema, ya que hay bots que escanean nuestras páginas buscándolas y almacenándolas junto a otras para posteriormente usarlas para enviar SPAM a esas cuentas. Evitar esto no siempre es sencillo, ya que muchos pueden permitirse el lujo de eliminar los emails, otros necesitan ponerlos visibles al público. Por eso, los desarrolladores encuentran formas ingeniosas para sortear este obstáculo. ¿Pero cuanto de efectivo tiene cada una de las formas posibles? Como vemos en la imagen, técnicas como construir la dirección con Javascript o introducir comentarios entre los tags no solucionan el problema aunque lo minimizan. Según las pruebas que Tillate.com realizó hace ya más de 1 año, […]