comparte el articulo 

10 reglas de CSS que todo diseñador debe conocer

Actualizado el 09/11/2012 < > 2 Cometarios

Resumen: En este artículo expondremos 10 declaraciones y consejos que todo diseñador web debe tener disponibles al momento de trabajar con CSS

A lo largo de nuestro recorrido como diseñadores web, estudiamos, aprendemos y memorizamos toda clase de sintaxis de código, fragmentos que nos permiten resolver problemas y hacks para lograr una total compatibilidad de nuestro diseño con los distintos navegadores. Gracias a esto, se logra identificar y recopilar las reglas de más utilidad para salir avante ante diversas situaciones.

CSS tiende a ser un lenguaje muy sencillo cuando se logra dominar su estructuración básica, debido a su fácil aprendizaje, el diseñador tiende a omitir reglas que van más allá de colocar un simple ID o clase como selector. En este lenguaje, existen una serie de reglas y declaraciones un poco más complejas, las cuales nos permiten transformar nuestros diseños de manera considerable, abriendo una nueva cortina de posibilidades en comparación con el uso de técnicas antiguas.

A continuación, expondremos 10 reglas de CSS que te ayudarán a resolver muchos de los problemas más comunes que se presentan al realizar un proyecto.

Media queries (@media)

@media screen and (max-width: 960px) {
   ...
}

En la actualidad, la regla @media ya no solo es utilizada para especificar el estilo de tu página cuando es mandada a imprimir, los media queries se han convertido en una herramienta muy importante para elaborar el diseño adaptable (responsive design).

El uso de esta regla en combinación con propiedades como “min-width” y “max-height”, nos permite ajustar el diseño de nuestro sitio al tamaño de la pantalla o ventana donde se esta desplegando.

background-size

body {
	background: url(imagen_de_fondo.jpg) no-repeat;
	background-size: 100%;
}

Si te ha tocado desarrollar un proyecto funcional en navegadores modernos y se presenta la necesidad de manejar una imagen de fondo que cubra en su totalidad el espacio desplegado en la pantalla, entonces esta propiedad de CSS3 te resultará extremadamente útil.

Antes para poder realizar esta clase de tarea, se tenía que recurrir al uso de JavaScript o algún otro truco que nos permitiera adaptar la imagen al tamaño del padre, pero ahora gracias a la propiedad background-size, basta con una sola línea de código. La desventaja es que si deseas imitar este comportamiento en navegadores antiguos, tendrás que seguir recurriendo a dichos trucos.

@font-face

@font-face {
	font-family: FuenteLaWebera;
	src: url("fuentes/fuentelawebera.ttf");
             url("fuentes/fuentelawebera.eot"); /* IE9 */
}

Otra propiedad CSS3 que ha venido a ser de gran ayuda para tranformar el diseño web, es @font-face. Anteriormente, el manejo de fuentes en una página web era algo muy poco flexible, ya que para manejar una fuente uniforme en el sitio tenías que elegir una de tipo común que pudiera encontrarse en la mayoría de los sistemas operativos, y si deseabas utilizar alguna personalizada tenías que forzosamente subir dicha fuente a tu servidor.

Ahora, con el uso de “@font-face” se ha promovido el uso de fuentes alojadas en la Web, ya que esta propiedad nos permite cargar cualquiera de estas desde la locación donde se encuentren. Gracias a esto, ahora podemos obtener fuentes de servicios proporcionados por terceros, como Google Webfonts y Typekit, de esta manera el diseñador se olvida de utilizar las fuentes “web-safe”.

margin: 0 auto;

#contenedor {
	margin: 0 auto;
}

Por íncreible que parezca, uno de los más grandes dolores de cabeza para los diseñadores web principiantes que tratan de estructurar una página, se produce al querer centrar de manera correcta los elementos que la componen. Esto se debe a varios factores, el principal es que CSS no incluyo ninguna sentencia para centrar horizontalmente un elemento de tipo bloque, aunado a esto, el uso de etiquetas como “center” en el pasado, han hecho que los diseñadores se malacostumbren y no sepan como lograr un centrado correcto.

La propiedad “margin” es utilizada para establecer los margenes que tendra un elemento con respecto a lo que le rodea en el DOM, en este caso el valor “0 auto” indica que no tendrá ningún espacio en su parte superior e inferior, mientras que en los laterales se le agregará un espacio automático. Esto hace que el elemento de tipo bloque, se centre automáticamente respecto a su padre.

overflow: hidden

#contenedor {
	overflow: hidden;
}

En muchas ocasiones, cuando nuestro sitio carga contenido de manera dinámica, podemos encontrarnos con el caso de que el contenido sobrepasa el espacio proporcionado para el contenedor, es entonces que el texto sale del elemento y afecta la apariencia. Para evitar esta clase de situaciones, se puede optar por utilizar la propiedad “overflow”, a la cual si le damos el valor “auto” agregará barras desplazadoras cuando sea necesario y si le damos el valor “hidden” simplemente omitirá la información que salga de los limites del elmento y no la presentará.

Esta propiedad, también representa una alternativa para limpiar los elementos de tipo float que manejamos en el DOM.

Técnica clearfix

Para todas esas situaciones donde “overflow:hidden” no cumpla con su función de limpiar el espacio dejado por los elementos flotantes, se puede hacer uso de la técnica clearfix, la cual básicamente consiste en agregar esta clase a los elementos necesarios.

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

color: rgba()

#elemento{
	color: rgba(0,0,0,0.5);
}

En el pasado, para poder utilizar una transparencia colorida se recurría al uso de imágenes de tipo PNG, a las cuales se les agregaba la propiedad alpha para que se traslucieran y el usuario pudiera ver lo que estaba detrás de ellas.

Ahora gracias al uso de la propiedad “rgba” de CSS, podemos agregar un color a un elemento y al mismo timpo añadir un patrón alpha para establecer la transparente que portará. De esta manera también omitimos el uso de valores hexadecimales, ya que con “RGBa”, definidos el valor en base a la escala de rojo-verde-azul, mientras que el cuatro parámetro se utiliza para definir la transparencia mediante un valor que va del 0 al 1.

input[type=”text”]

input[type="text"] {
	width: 200px;
}

En la lista de sentencias un poco más avanzadas, encontramos “input[type=’text’]”, este selector es realmente útil si queremos englobar todos los elementos de cierto tipo pero que solamente cuenten con cierta propiedad. En este caso, la síntaxis que estamos manejando es para obtener todos los elementos input de tipo texto.

Este tipo de selectores puede ser elaborado con cualquiera de los atributos que maneje el tag, además de que si queremos manejar algo más avanzado, podemos hacer uso de expresiones regulares.

transform: rotate(40deg)

#elemento {
	transform: rotate(40deg);
}

Esta propiedad nos permite manipular la colocación de un elemento, rotando su posición dependiendo de los grados que especifiquemos como parámetro. Esto resulta bastante interesante, ya que no necesitamos del uso de alguna librería externa o de JavaScript para lograrlo, por lo que en combinación con las transiciones podemos lograr buenos efectos en las animaciones.

a {outline: none;}

a {
	outline: none;
}

Después del borde, todos los elementos cuentan con otra línea que los rodea la cual recibe el nombre de “outline”. Esta propiedad generalmente no tiene mucho uso, uno de los casos donde se puede utilizar, es cuando se desea obtener un doble borde o un efecto tridimensional, para ello se puede optar por darle un color.

Sin embargo, el problema con esta propiedad no se deriva por su uso planeado, si no por lo contrario, ya que esta propiedad tiende a desplegarse sin nuestro consentimiento cuando damos clic sobre un elemento de tipo enlace. Es muy probable que hayas notado, que al momento de dar clic sobre links, aparece una línea punteada alrededor del elemento, para evitar este comportamiento basta con utilizar la propiedad “outline:none”.

Publicado el 08/11/2012, última actualización 09/11/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. Ricardogz

    Muy bueno los consejos (Reglas) jaja no sabia la mitad de ellos jajaja, esta info me ayudara, :D

    Viernes, 23 de noviembre 2012

  2. clemente garcia g

    Muy buenos temas ,en los libros de html no los he visto.

    Gracias

    Martes, 10 de marzo 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras