Archivo para Agosto, 2010

Selectores de CSS Parte 3

23 de Agosto de 2010

Avanzar hacia el futuro del CSS

Usted puede pensar que es un poco pronto para estar pensando en CSS 3. Después de todo, aún no es una norma reconocida, y de hecho sólo hay unos pocos documentos en un estado público acerca de este nuevo nivel. Pero aún así, Mozilla y Firefox han comenzado los selectores CSS para que los diseñadores Web los puedan utilizar. Si usted comienza a aprender el CSS 3, estará por delante de la curva cuando otros navegadores empiecen a apoyarlos.

CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:

A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.

a[href^="ftp:"] { … }

Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.

a[href$=".a2sistemas"] { … }

Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.

Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.

img[src*="photos"] { … }

Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.

CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.

* Root pseudo-clase representa el elemento raíz del documento (en HTML 4 este es <html>). Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.

:root { … }

* El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.

p:last-child { … }

* El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.

:target { … }

* Pseudo-clase le permite seleccionar los elementos que no están representados por el argumento. Tenga cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:

img:not([alt]) { border: thick solid yellow; }

CSS 3 Combinar hermanos
Este selector le permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 usted escribiría:

h3 ~ blockquote

Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.

Otros 3 selectores CSS
Hay muchos más nuevos selectores CSS 3, pero no son compatibles con los navegadores hasta ahora. Cuando lo sean, van a agregar funcionalidad a las formas (como para poner de relieve los elementos comprobados, los elementos desactivados, y los elementos de forma que no han sido tocados por el lector), agregaran la capacidad de seleccionar los elementos en los que el único niño del padre o cuando no tienen hijos, o si desea seleccionar todas las filas de otra tabla, el selector de n-ésimo niño le permitirá alternar las filas que se seleccione.

Selectores CSS Parte2

6 de Agosto de 2010

Selectores CSS 2 Amplíe estilos

Los selectores CSS 2 son una extensión de selectores CSS 1, pero, como era de esperar, agregan más opciones y funciones para la mezcla. Estos selectores son compatibles con los navegadores modernos, así que no hay ningún motivo para empezar a utilizarlos para hacer sus hojas de estilo más específicas y directas.

CSS 2 Selector universal

Un selector universal es exactamente lo que suena: un selector que selecciona universalmente. En otras palabras, si usa el selector universal coincidirá con el nombre de cualquier tipo de elemento en el documento. Está escrito como una estrella:

*

Usted puede utilizar el selector universal en cualquier lugar que usaría un nombre de elemento. Así, por ejemplo, si quería igualar cualquier elemento secundario en una blockquote, debería escribir:

blockquote * { … }

Selectores de atributos CSS 2

Con CSS 2 ahora puede seleccionar los elementos que tienen atributos específicos. También puede coincidir en el valor del atributo. Por ejemplo, si desea establecer un estilo en todas las etiquetas de anclaje que tienen el atributo href (y no coinciden en las etiquetas de anclaje que no lo hacen, como anclas con nombre), debería escribir:

a[href] { … }

Si quería igualar sólo en los vínculos anclas que apuntaban a un sitio específico, usted debe anotar lo siguiente. Tenga en cuenta que esto debe ser una coincidencia exacta, los enlaces que apuntaban a sub-páginas dentro del href que figuran no coinciden.

a[href="http://webdesign.about.com/"] { … }

También puede hacer búsquedas parciales en los valores de atributo:

[att~=value]
Cuando el valor del atributo es una lista separada por espacios de valores, uno de los cuales es un partido.

span[style~="boxTop"]

Encaja en <span style=”boxRed boxTop”>

[att|=value]
Cuando el valor del atributo es una lista de palabras separadas por guión, el comienzo de lo que es un partido. Esto se utiliza principalmente para que coincida con el idioma sub-códigos:

*[lang|=en]

Encaja en nosotros y en-es-es.

Nueva CSS 2 pseudo-elementos y pseudo-clases

CSS 2 trae una serie de nuevos pseudo-elementos y clases.

:first-child
El primer niño pseudo-clase coincide con el primer elemento secundario de otro elemento, no importa lo que es. Si se define con un elemento por ejemplo, p: first-child,  buscará cada <p> que es un primer hijo, e ignorará los otros.

:hover and :focus
Activa la pseudo-clase a partir de CSS 1. El pase el ratón entra en vigor cuando esté el ratón sobre el elemento en cuestión, y el foco cuando el elemento tiene el foco del navegador.

:active
Si bien esta pseudo-clase existía en CSS 1, ahora se aplica a todos los elementos, no sólo enlaces. Asimismo, ya no es mutuamente excluyente con otras pseudo-clases. Por ejemplo, un elemento puede ser a la vez :active y :visited

:lang
Esta pseudo-clase especifica cómo el lenguaje humano del elemento está determinado, por lo que puede hacer coincidir un elemento basado en su lenguaje.

:first-line
Similar a :first-child pseudo-clase, pero este pseudo-elemento se aplica a la primera línea de texto en el elemento.

:first-letter
Este pseudo-elemento le permite seleccionar la primera letra de un elemento para crear la tapa desplegable o estilos iniciales.

:before and :after
Estas te permiten insertar contenido generado en el documento antes o después del elemento en cuestión.

CSS 2 Niño y selectores de hermanos

CSS 1 le ha permitido seleccionar los elementos que eran descendientes de un elemento más, pero con CSS 2 ahora se puede especificar que sólo desea hijos directos seleccionados, o simplemente quiere elementos que son hermanos (tienen el mismo padre) el uno del otro.

Selectores Niño

Un selector de hijo se escribe con un signo de mayor que (>). Para hacer coincidir todos los elementos p que son hijos de un elemento div podría escribir:

div ] p { … }

También puede combinar selectores de hijos de los selectores de descendientes. Por ejemplo, para que coincida con todas las etiquetas p que son descendientes de un elemento de la lista de menores por órdenes de que es descendiente de un div, usted escribiría:

div ol]li p { … }

Selectores de hermanos

Los hermanos adyacentes son elementos que están uno al lado del otro y al mismo nivel en la estructura del documento. Ellos tienen el mismo padre y estaría justo al lado el uno al otro en el documento. Por ejemplo, si se desea con el estilo de todos los elementos h2 que siguen inmediatamente un elemento h1 (pero que no tienen otro elemento, como AP por medio), usted escribiría:

h1 + h2 { … }

Como con los selectores niños, usted puede combinar otros selectores. Por ejemplo, para que coincida con todos los párrafos que siguen un h2 con una clase especial, usted escribiría:

h2.special + p { … }

Usar CSS 2 selectores

Con la descripción y uso de selectores CSS 2 hará que sus hojas de estilo sean más potentes. Se puede sincronizar elementos más directos y específicos Los selectores CSS 2 son una parte importante del CSS.

Selectores CSS Parte1

3 de Agosto de 2010

Los fundamentos del CSS Selectores 1

Básico 1 CSS Selectores

El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:

h1 { color: red; }

CSS Selectores de Clase 1

En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo  sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:

h1.red { color: red; }

CSS Selectores de ID 1

Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:

#myredh1 { color: red; }

CSS 1 Pseudo-clases

En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:

a: link
Define un enlace no visitado.

a: visited
Define un vínculo visitado.

a: active
Define un vínculo activo.

: first-line
Define la primera línea de como es el formato en el lienzo.

: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.

Selectores CSS 1 descendiente o selectores contextuales

Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:

h1 { color: red; }
h1 em { text-decoration: underline; }

También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:

div * q { border: thin solid blue; }

Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.

Colores corporativos

1 de Agosto de 2010

Vamos a echar un vistazo a las paletas de colores de algunas empresas bien conocidas. Lo que es interesante es que muchas de estas gamas de colores se basan en paletas de colores muy monocromáticas con un solo acento de color. Esto puede ser una forma muy efectiva para resaltar elementos. Y como pueden ver, en las páginas de Apple y Adobe, se utilizan colores muy neutros como el gris o el negro como base principal de su gama de colores lo hace que los colores de las imágenes de su producto destaquen.
A continuación vamos a ver alguna de esas paletas.

Paleta Facebook

facebook

Colores:

  • # 3b5998
  • # 8b9dc3
  • # F7f7f7
  • # Dfe3ee

Descripción:

Paleta de color monocromático azul. La paleta de Facebook tiene un color de base muy popular de color azul y crea una paleta a su alrededor. Casi todos los colores en la página son de un color azul, incluso los grises del fondo tienen algún tinte azul.

Paleta MySpace

mySpace

Colores:

  • # 2358b8
  • # 82aad3
  • # 313246
  • # c9d0d6

Descripción:

Paleta de colores monocromáticos en azul. MySpace utiliza una paleta de color bastante oscuro en sus colores, pero todos se centran en el color azul. El fondo de la mayor parte de la página es de color blanco, que hace que el azul oscuro destaque más.

Paleta Youtube

youtube

Colores:

  • # D02525
  • # 595757
  • # 0033cc
  • # Ebebeb

Descripción:

Una combinación de colores bicromática utilizando dos de 3 colores triádicos – rojo y azul. YouTube se basa en la década de rojo y negro del mismo logotipo para ofrecer una imagen de marca  en la página. Pero también hay una gran cantidad de azul en todas partes.

Paleta Flickr

flirk

Colores:

  • # 0063dc
  • # Ff0084
  • # 999999

Descripción:

Flickr utiliza colores análogos, rosa y azul en su paleta para el logotipo. El gris es muy neutro y sirve para mostrar tanto el contenido de las páginas como el logotipo.

Paleta Adobe

adobe

Colores:

  • # Ff0000
  • # 343434
  • # 454545
  • # E9e9e9

Descripción:

La paleta de colores de Adobe es bastante llana – gris oscuro y rojo como acentuado. Los grises oscuros son muy neutrales y esta paleta funciona bien para resaltar los productos que tienen sus propios colores.

Paleta Apple

apple

Colores:

  • # 979797
  • # 666666
  • # Eeeeee
  • # 000000
  • # 0088cc

Descripción:

Apple apuesta por los grises neutros, negros y blancos para destacar la mayor parte de su página. Además, los grises monocromáticos hacen que los colores de los productos de Apple se destaquen aún más.

Paleta Microsoft

microsoft

Colores:

  • # 5ca5d8
  • # 013655
  • # F0f8fc
  • # 4e7dc2
  • # 007734

Descripción:

Microsoft tiene una paleta de azules y las utiliza para acentuar y poner relieve. Se trata de una paleta muy monocromática. Casi no hay blanco en la página, y lo blanco que hay se utiliza para hacer la navegación más fácil de leer.