CSS / página 2 de 3

Nuevas Propiedades para CSS 3

Se viene nueva versión de HTML, y bueno, por lo tanto, también una nueva de CSS, la 3.

Se habla de que el CSS 3 será muy “social” (leer más de ésto).

En fin, algunas de las propiedades nuevas de CSS son:

  • Bordes: border-color, border-image, border-radius, box-shadow.
  • Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
  • Color: HSL colors, HSLA colors, RGBA colors opacity.
  • Texto: text-shadow, text-overflow.
  • Interface: box-sizing, resize.
  • ¡Selectores!: attribute selectors.
  • Formatos: media queries, multiple column layout, speech.

Si quieres una explicación detallada de cada una, recomiendo leer la fuente: Maestros del Web

Sangría en la Primera Línea de Párrafos con CSS

Hoy estaba trabajando en un proyecto para un cliente, y me encontré, por primera vez, con la necesidad de dejar sangría en la primer línea de los párrafos.

Luego de intentar cosas poco eficientes y aceptadas, me encontré con la sorpresa de que existe una propiedad de CSS que hace esto: text-indent.

Entonces, si estamos definiendo una clase llamada “consangria” para setearla en algunos párrafos específicos, y queremos que el espacio de la sangría sean 30 píxeles, nos quedaría algo así:

.consangria{ text-indent:30px; }

Luego, para utilizarla en algún párrafo deberíamos poner:

<p class="consangria">

Este parrafo tiene sangría en la primer línea. <br>Linea 2. <br> Linea 3.

</p>

El ejemplo se vería masomenos así:

Este parrafo tiene sangría en la primer línea.
Linea 2.
Linea 3.

Darle Estilos al ScrollBar

En ocaciones queda muy bien esto de modificar un poco los colores de los scroll-bars (HTML), en otras no; pero en este caso hablaremos de las primeras.

La idea es darle el estilo mediante el uso de hojas de estilos en cascada (algunos colores acordes al sitio, que reemplazen al grig predeterminado), con las siguientes propiedades:

  • scrollbar-3dlight-color, color del borde que hace el efecto 3D en la barra de scroll.
  • scrollbar-arrow-color, color de las flechas.
  • scrollbar-base-color, es el color genérico a utilizar por la barra de scroll. Podríamos utilizar únicamente este para dar color a la barra.
  • scrollbar-darkshadow-color, sombra de la barra de progreso.
  • scrollbar-face-color, el color de lo que es realmente la barra de progreso. Es decir, del bloque que se mueve por la barra.
  • scrollbar-highlight-color, el color del fondo de la barra.
  • scrollbar-shadow-color, son los dos botones sobre los que podemos pulsar para desplazar la barra.
  • scrollbar-track-color, es el color de fondo de la barra de scroll.

Éstas propiedades deben ser adjudicadas al body; así se aplicarán a todos los elementos que estén dentro del mismo. Se aclara que no se verá modificado el scroll propio del navegador.

Ésto funciona sólo en algunos navegadores, ya que no están soportadas por el estándar CSS de la W3C.

Vía: Linea de Código

Algunas Técnicas de CSS

Vía ilmaistro me encuentro con un enlace al artículo publicado en smashingmagazine, en dónde se enumeran 53 excelentes técnicas para se aún mejores maquetadores CSS.

Para los que no lo saben, CSS se llama a las hojas de estilo en cascada, y combinándolas con XHTML se pueden hacer maquetaciones semánticas muy interesantes; para nada comparables con los diseños de páginas basados en tablas.

Invito a mirar algunos de estas técnicas, que seguramente, si saben ya algo de CSS les ayudará a pasar al siguiente “nivel de conocimiento” en la materia.

CSS

Clean CSS: Optimizador de Estilos CSS

Clean CSS es una herramienta que podríamos usar cada vez que terminamos de confeccionar la hoja de estilos en cascada (CSS) para una página web.

¿Qué hace? En síntesis, luego de ingresar -ya sea mediante URL o pegando en un textarea– una hoja de estilos CSS y especificar algunas opciones generales, nos depura un poco el código de la hoja, logrando una que ocupe menos, más eficiente y mas linda a nuetra vista (logrando mayor velocidad a la hora de futuras modificaciones).

Clean CSS

Yo probé con una hoja de estilos algo compleja, de 4,90KB de tamaño, y la salida que obtube fue de 4,23KB; no es mucho pero ayudaría a una mayor velocidad en la carga del sitio.

Enlace: Clean CSS
Vía: wwwhatsnew

Herramienta para Convertir Estilos CSS a Etiquetas en Línea

Definir estilos se puede hacer de dos formas. La primera y más usada es mediante un archivo externo, que en el HTML se incluye y adopta todas sus especificaciones. La segunda, no recomendable y poco usada, es definirlo en la misma etiqueta que queremos formatear mediante el atributo style; este modo se enuncia como etiquetas en línea.

Ahora bien, ¿nunca debemos utilizar CSS con etiquetas en línea? La respuesta es si; hay casos en los que las definiciones de CSS mediante archivos externos no funciona, y es necesario hacer uso de las etiquetas en línea. Tal es el caso de los email: Hotmail, Gmail, y otros proveedores de mails no toleran en un 100% las hojas externas de estilos en cascada (CSS).

Vía webintenta me encuentro con una pequeña herramienta que, luego de proporcionarle un trozo de CSS y HTML separados, es capaz de devolvernos lo mismo, pero con etiquetas en linea.

Veamos como funciona con un simple ejemplo; nosotros le pasamos el siguiente código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Probando CSS en línea</title>
<style type="text/css">
body {
margin: 25px 25px;
font-family: verdana, tahoma;
font-size: 10px;
color: #333333;
background: #ffffff;
}
p {
margin: 11px 5px 3px 11px;
line-height: 1.5em;
text-align: justify;
}
p#biggens {
font-size: 75pt;
}
p.tinyred {
text-align: center;
text-weight: bold;
color: red;
font-size: 9px;
}
</style>
</head>
<body>
<p>Parrafo clásico</p>
<p id="biggens">Esto sale muy grande</p>
<p class="tinyred">Rojo y chico</p>
</body>
</html>

La herramienta nos devolverá:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Probando CSS en l&Atilde;&shy;nea</title></head>
<body style="margin: 25px 25px;font-family: verdana, tahoma;font-size: 10px;color: #333333;background: #ffffff">
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify">Parrafo cl&Atilde;&iexcl;sico</p>
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify;font-size: 75pt">Esto sale muy grande</p>
<p style="margin: 11px 5px 3px 11px;line-height: 1.5em;text-align: justify;text-align: center;text-weight: bold;color: red;font-size: 9px">Rojo y chico</p>
</body>
</html>

Enlace: csstoinline

Dándole Estilo a la Etiqueta Blockquote con CSS

Uno de los elementos HTML a los que más me gusta aplicarle estilos es el Blockquote; ya que por ahí se pueden hacer cosas muy interesantes en cuestión de segundos.

En CSS-Tricks han publicado un puñado de estilos para blockquotes muy atractivos y descargables para utilizar en nuestros diseños.

Enlace: Blockquotes Designs

Creador de Menúes Profesionales en CSS

Cuando no se ocurren ideas a la hora de hacer un menú en CSS, pueden pasar dos cosas: seguimos trabajando y terminamos con un menú horrible; o bien contratamos a alguien para que lo haga, al menos en un JPG/PNG/GIF y luego lo pasamos a CSS.

CSS Menu Generator es un site que nos ofrece diferentes (pocos, 13; pero de calidad) diseños de menúes en CSS, pudiendo descargar automáticamente su fuente para implementarlo en el momento.

CSS Menú Generator

La idea es que se sigan 3 pasos: elegir el menú que queremos, personalizarlo un poco, descargarlo gratuitamente (CSS, HTML y las imágenes correspondientes).

La personalización que nos permite es muy básica, no podemos cambiar ni los colores de los menúes. Tan solamente podemos dos cosas: definir la cantidad de opciones del menú; definir label y texto para cada uno.

Aún así, los diseños están bastante buenos, y pueden ser una base para que, modificándola un poco, obtengamos como producto final un menu pro.

En sí, la idea es buena, bien implementada, lindo sitio. Pero el logo es terriblemente feo; si tuviesen un buen logo, al sitio le cambiaría mucho más la imagen.

Enlace: CSS Menu Maker
Vía: PuntoGeek

CSSVista: Maqueteando con CSS en Vivo

Para los que somos de trabajar con CSS de forma cotidiana, hay algo que nos hace llevar bastante tiempo; ésto es, guardar los cambios de la hoja de estilos, ir al navegador, y actualizar la página. Con CSSVista este tiempo “perdido” se recupera, ya que nos permite ver los resultados de una página con la hoja de estilos que estamos editando.

CSSVista

Como pueden ver en la imágen anterior, soporta Internet Explorer y Firefox, y en una misma ventana. Imagino que con una alta resolución, CSSVista nos puede simplificar mucho las cosas, y no será necesario cerrar o minimizar su ventana, hasta que terminemos el trabajo.

CSSVista corre bajo Windows, y es totalmente gratuito.

Enlace: Descargar CSSVista (8.9MB)
Vía: Bitelia

Descarga Templates Luego de Personalizarlos

Existen muchos sitios que ofrecen plantillas en CSS muy lindas, pero no ofrecen la posibilidad de cambiarle algunos aspectos antes de la descarga, por ejemplo algunos colores que nos gustan más.

DoTemplate es un sitio que por ahora ofrece para la descarga 8 templates bastante aceptables, y antes de iniciar la descarga nos da la posibilidad de editar algunos parámetros para lograr un theme más a nuestro gusto. Ésto se hace desde un pequeño frame que aparece arriba a la derecha del template como este:

Como podemos ver, las opciones que disponemos para personalizar el diseño del template son muchas, pudiendo obtener un template totalmente diferente al que inicialmente nos ofrecen. Una vez que hacemos algunas modificaciones podemos presionar “Apply Changes” y se recargará la página con los cambios definidos plasmados.

Enlace: DoTemplate
Vía: Blog and Web