Ya hemos visto a grandes rasgos como estructurar nuestra página, como se crean y se definen los selectores en nuestra web e incluso como poder estilizar parte de estos con el uso de las pseudoclases tipo :hover, :before, etc. El siguiente paso son las propiedades que podemos aplicar a estos selectores, es decir, los atributos propios de la CSS para editar estos selectores y darles el aspecto gráfico que deseemos.

Para hacerlo seguiremos un poco un modelo basado en:

• Propiedades que afectarán a la visualización general de capas (posicionamiento y visualización):
  top, bottom, left, right, position, float, clear
  display, overflow, visibility, clip, white-space,z-index
• Propiedades de una capa (tamaños, márgenes, relleno, bordes, perfiles y fondos):
  height, width, max-height, max-width, min-height, min-width
  margin, margin-top, margin-left, margin-bottom, margin-right
  padding, padding-bottom, padding-left, padding-right, padding-top
  border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width
  outline, outline-color, outline-style, outline-width
  background, background-attachment, background-color, background-image, background-position, background-repeat
• Propiedades de listas:
  list-style, list-style-image, list-style-position, list-style-type
• Propiedades de textos (tipografía y textos):
  color, font, font-family, font-size, font-style, font-variant, font-weight, letter-spacing
  direction, line-height, text-align, text-decoration, text-indent, text-transform, unicode-bidi, word-spacing
• Propiedades de tablas:
  border-collapse, border-spacing, caption-side, empty-cells, table-layout, vertical-align
• Cajón desastre (todas esas propiedades menos conocidas y útiles en casos muy puntuales):
  azimuth, content, counter-increment, counter-reset, quotes, cue, cue-after, cue-before, elevation, orphans, page-break-after, page-break-before, page-break-inside, pause, pause-after, pause-before, pitch, pitch-range, play-during, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, voice-family, volume, widows
• Otras (propiedades de CSS 3)

Nota: Una recomendación que os hago si os interesa este post es guardaros especialmente esta página, pués a medida que vayan apareciendo los diferentes capítulos referentes a cada una de estas propiedades, iré modificando y enlazando cada una de las propiedades con su definición.

Aunque antes de esto creo necesario hacer un pequeño apunte sobre las unidades que podremos utilizar para definir los valores numéricos de algunos de estas propiedades ya sea de longitudes y tamaños o bién de colores, y que ya explicaremos mejor como usar cuando entremos de lleno en cada una de las propiedades que las utilizan:

Longitudes relativas

• px: Píxeles (relativo al dispositivo)
• em: Tamaño de la fuente actual
• ex: Alto del caracter ‘x’

Longitudes absoluta

• in: Pulgadas (1pulgada = 2.54 cm)
• cm: Centímetros
• mm: Milímetros
• pt: Puntos (1pt = 1/72pulgadas)
• pc: Picas (1pica = 12 puntos)
• %: porcentaje

Colores

• #RRGGBB: Color RGB(6 Valores hexadecimales)
• #RGB: Notación simplificada (#RGB = #RRGGBB)
• rgb(R,G,B): Color RGB (3 valores de 0 a 255)
• rgb(R%,G%,B%): Color RGB (3 valores porcentuales de r, g y b)

Farm es una marca de moda  afincada en Rio de Janeiro. Definen su ropa como moda destinada a la mujer femenina con estilo, inquietudes, con estudios universitarios, bien informada, preparada para enfrentarse a la sociedad que la rodea y frecuentadora de esos locales con glamour de la ciudad.

La web basa su imagen en continuas referencias a iconos muy juveniles (tablas de surf, patinadores,…)  de mucha dinámica y movimiento, rodeada de elementos florales y vegetales, de mucho color y naturalidad y todo acompañado de pequeñas animaciones para crear una especie de planeta propio en el que el público al que va dirigida su marca se sienta cómodo y a gusto.

Enlace: Farmrio.com.br

Buen tutorial (en inglés) para conseguir diversas cosas para un mismo proyecto. Desde la creación de la textura del papel, creación de pestañas con sombra y el resto de proceso para conseguir un primer diseño de calidad en Photoshop.

[ Ver tutorial ]

Fotógrafo austriaco nacido en 1955, Josef Hoflehner basa su trabajo en unas imágenes prácticamente minimalistas con elementos nunca humanos y con un juego de composición y contrastes en blanco y negro magistrales. Fotografías de partes del mundo como el Yemen o Islandia pasando por la espectacular Nueva York o Japón, imágenes captadas tras largas exposiciones de una belleza excepcional y que nos muestran un mundo en calma total.

Un portfolio para disfrutar tranquilamente con cada una de sus instantáneas.

Enlace: Josefhoflehner.com

De momento sabemos bien poca cosa a parte del nombre (LaComuna.tv), pero el proyecto seguro será interesante solo sabiendo que lo integran buena parte de los trabajadores que hasta hace poco realizaban Mobuzz.

Ayer por la mañana Twitter iba llenito, así que parece que la curiosidad empieza a picarnos un poco. Espero que no nos hagan esperar demasiado.

P.D. ¿e Iria Gallardo?

(Click en la imagen para ampliar y ver el resto de imágenes)

Divertida manera de explicar que la Nikon S60 es capaz de reconocer hasta 12 rostros para una misma instantánea.

Agencia: Euro RSCG (Singapore)
Director creativo: Victor Ng
Director de arte: Lee Hsueh Ling
Copy: Victor Ng, Stephen Kyriakou
Fotógrafo: Jeremy Wong

Vía: I Believe in Adv

No se hasta que punto es acertada una web de este tipo para una agencia de comunicación (Grupo Antón, comunicación) ya que no inspira la seriedad y por tanto la confianza que quizás estamos acostumbrados, pero por otra parte, es un soplo de aire fresco ver que sigue quedando gente con ganas de arriesgar metiendonos en medio de un cómic de superhéroes para venderse como empresa.

Espero equivocarme, pero creo que iniciativas de este tipo no tienen muy buena acogida entre las empresas que pueden solicitar sus servicios.

[ Web de los Comunicadores ]

Joan Charmant es un pequeño genio del fotomontaje. En su portafolio podemos ver prueba de ello e incluso poder conocer las imágenes de partida originales que combinadas nos dan como resultado los geniales fotomontajes.

Sobre el autor decir que es un ingeniero de software que empezó a realizar estos fotomontajes en el año 2004 para la web de Worth1000.com, conocido site especializado en concursos de fotomontajes de mil y una temáticas diferentes.

Si queréis conocer más sobre este personaje o saber más sobre su trabajo podeis ver la entrevista que le realizaron desde abduzzedo (en inglés).

Enlace: Joancharmant.com