Posts Tagged ‘css3’

Peppy: selectores CSS3 con Javascript ultrarápido

Wednesday, November 5th, 2008

[Vía Ajaxian]

Jops… Anieto lo ha publicado hace poco y yo convencido de que había hablado de esto hace tiempo. Si, lo había hecho, pero se me quedó como Draf! lo publico ahora.

En ocasiones incluímos en nuestras web algún framework Javascript solamente para poder usar los selectores DOM de elementos CSS3 que éstos nos ofrecen para trabajar con ese lenguaje. Cuando hago eso siempre pienso que estoy matando moscas a cañonazos.

Para arreglar esto James Donaghue ha publicado, en versión Beta, un motor para hacer estas selecciones que se caracteríza por dedicarse solamente a eso y hacerlo muy rápidamente y a través de un JS con 10kb:

Para demostrarlo nos ofrece este test, aunque ciertamente en su propio test Sizzle, un sistema similar diseñado por John Resig, parece que va a la par o más rápido… y encima en solo 4Kb.

De utilidad pública – Enlaces (II)

Sunday, November 2nd, 2008

Hay cosas sobre las que me gustaría hacer un post, pero no siempre es posible. Esta semana entre Fundamentos Web y que al volver me he encontrado una pila de presupuestos pendientes con el plus de un viaje inesperado a Valencia mañana… complicado escribir pero os dejo unos cuantos enlaces que creo que pueden interesaros:

Google Dance
Parece que se ha producido el típico baile de Google en posiciones y pagerank. A mi, por ahora, me dejan igual. Lo cuenta Vseo y a Max Glasser le parecen bromas de Halloween.

Drupal mejor CMS open source 2008
Todo el mundo tiene sus Oscars y los CMS no van a ser menos. El galardón que se que está convirtiendo en referencia es el que organiza Packt Publishing y en esta edición y por segunda vez consecutiva vuelve a ganar Drupal, seguido de Joomla y DotNetNuke. Creo, de todas formas, que se trata de un concurso de popularidad y no un premio concedido por la calidad del CMS.

No disfrutaremos de Opera Mini en Iphone
Lo comentan en Barrapunto. Y que queréis que os diga, me jode profundamente y mi opinión personal sobre Apple sigue bajando puntos; luego todos nos metemos con Microsoft. Una muy mala noticia, pero… podremos usarla si crackeamos el iPhone?

Google chatea con los webmasters… y caen algunos mitos SEO
En Telendro hacen un genial resumen de lo dicho escrito en el chat que Google mantuvo con webmasters el pasado 22 de octubre. Se trataron temas como el contenido duplicado, altas masivas en directorios, perjuicios de usar herramientas como Google Analytics… muchos mitos desmitificados

Free Site Validator
Roger Johanson (456bereastreet) nos recomienda esta estupenda herramienta para validar sitios enteros contra la W3C; herramienta que además nos informa de links rotos.

CSS3 RGBa: modelo de color con transparencias en CSS
Andy Clarke nos enseña a través de un screencast cómo usaremos los colores con CSS3. Para los interesados, la “a” hace referencia al canal Alpha, es decir, transparencia! Ya sabéis, la web del futuro.

Modelos de negocio en Internet
Javier Martín vuelve a hacer uno de sus posts de lujo. En este caso expone y explica cuales son los modelos de negocio más imporantes a la hora de hacer proyectos en Internet.

CSS3, los fondos y bordes del futuro

Thursday, September 11th, 2008

El grupo de trabajo encargado del estandar CSS publican un nuevo borrador de trabajo relativo a los bordes y fondos (backgrounds and borders) CSS3.

Algunos aspectos muy novedosos respecto a los fondos (background)

Vamos a poder poner varias imágenes de fondo en nuestras cajas, puediendo especificar, para cada una de ella, propiedades distintas. Así...

CSS:
  1. background-image: url(flower.png), url(ball.png), url(grass.png);
  2. background-position: center center, 20% 80%, top left;
  3. background-origin: border-box, content-box;

Me gusta también la propiedad "Background-origin", que nos permitirá decidir desde qué punto de nuestra caja se sitúa el fondo, los posibles valores serán:

  • padding-box: posición numérica o porcentual desde el padding de la caja
  • border-box: posición numérica o porcentual desde el borde de la caja
  • content-box: posición numérica o porcentual desde el contenido de la caja

Sombras en las cajas
La propiedad "box-shadow" aplicará una o varias sombras a nuestra caja. Se utilizan cuatro valores numérico:

El primero define el eje horizontal de la sombra, un valor positivo lo aplicaría al lado derecho de la caja, si es negativo lo aplica en el lado izquierdo.

El segundo define el eje vertical donde los valores positivos o negativos aplicarían la sombra arriba o abajo de la caja respectivamente.

El tercer valor hace referencia al difuminado de la caja (blur)

El cuarto valor es el que menos consigo entender, se denomina "spread radius", pero soy incapaz de traducirlo.

CSS:
  1. span {border: thin solid; box-shadow: 0.2em 0.2em #CCC}

Se vería así:

Por último, si a en la propiedad box-shadow especificamos el valor "inset" (es posible que cambie a "inner") las sombras se aplicarán al interior de la caja.

box-shadow.png

Creo que este tipo de cosas nos darán bastante más juego al diseñar nuestras futuras web ¿No os parece?

Actualización: gracias a Omega y Matías sabemos que el Spread radius hace referenica al grado de dispersión o dureza de la sombra.

Sombras en Firefox 3.1

Tuesday, September 2nd, 2008

Se acaba de anunciar que Geckgo 1.9.1, en el que se basa Firefox 3.1, soportará 3 nuevas propiedades CSS3:

  • -moz-box-shadow: dibuja sombras sobre una caja (ej.: -moz-box-shadow: 10px 10px 5px #888, 10px 10px 30px rgba(0,0,0,0.4); )
  • text-shadow: pone sombra a un texto (ej.: 0 0 24px blue, 0 0 4px blue, 1px 1px 2px #333; )
  • -moz-column-rule: permite dibujar una línea de separación entre columnas (en el caso de que estemos usando los columns de css3). Su sintaxis es la misma que la de la propiedad border de css2 (ancho,tipo,color)

Por cierto, en esta página se pueden ver, si usas Safari u Opera, como quedan estas propiedades relacionadas con las sombras.

Sobre Internet Explorer 8 y CSS

Wednesday, March 12th, 2008

Como desarrollador web y maquetador una de las cosas que me interesa cuando sale un nuevo navegador es su implementación de las CSS. Investigando un poquito sobre qué hará IE8 me he llevado unas cuantas sorpresas bastante gratas:

  • Soporta contenido generado (generated content): esto es algo fundamental. Casi todos los maquetadores lo solemos poner como lo primero en nuestras listas de deseos.
  • Texto vertical!
  • Tablas "inline"
  • Selectores avanzados: parece que empieza a medio funcionar el E[attr=val]. Este es la ostia... llevo esperándolo media vida, por fin podremos poner un estilo diferente a un elemento en función del valor de un atributo. El ejemplo más claro, diferenciar un enlace con "_self" de uno con "_blank"

Algunas referencias

Disponible Alpha 2 de Grand Paradiso (aka Firefox 3)

Thursday, February 8th, 2007

Ya se puede descargar la versión Alpha 2 de Firefox 3. No espereis grandes novedades y tened en cuenta que está en versión Alpha.

A nivel de interaz prácticamente ninguna novedad, lógico en este tipo de versiones. Tengo la intención hacer algunas pruebas sobre todo relativas a su soporte para CSS 3 aunque una primera prueba sobre su soporte de los nuevos selectores muestra alguna mejora.

Estos son los resultados con el test de selectores de css3.info:

  • Firefox 3: de 43 selectores 32 ok, 4 con bugs y 7 no soportados
  • Firefox 2: de 43 selectores 26 ok, 10 con bugs y 7 no sportados

Es decir, han arreglado 6 bugs relativos a los selectores, todos ellos relativos a la selección de elementos por sus valores en atributos:

  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]

Si quereis probadlo, bajo vuestra responsabilidad, aquí os dejo los enlaces.