daniBlog

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.

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

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.

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).

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

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

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

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.

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

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.

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

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

El elemento de tipo file -dentro del mundo CSS y XHTML “común”- es algo dificil de modificar en cuanto al estilo. Si le aplicásemos una clase, o un id vía CSS, no tomaría ninguna propiedad diferente.

Sin embargo, siempre se le puede encontrar una solución a estos problemas. En anieto2k han publicado un pequeño artículo que nos guía para poder darle estilo y diseño a un elemento del tipo file. Para ello se apoya en HTML, CSS, y algo de JavaScritp. A continuación les haré otra versión de su mini-guia:

XHTML:

<label class="cabinet">
<input type="file" class="file" />
</label>


Ahora definimos un poco de estilos:

.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;

display: block;
overflow: hidden;
cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}


Ahora debemos -mediante JavaScritp- hacer que el puntero siempre haga click en nuesto nuevo botón:

<script type="text/javascript" src="/path/to/si.files.js"></script>
SI.Files.stylizeById('input-id');


¿Cómo funciona? El CSS nos agrega una linda imagen de fondo a nuestro label. Luego le damos una opacidad cero (0) al elemento file, lo cual está definido dentro del segundo bloque de CSS, haciéndolo invisible al ojo humano (pero no al navegador). Luego, el JavaScritp se encarga de que nuestro puntero accione siempre el elemento file.

Es compatible con: IE5.5+, Firefox 1.5+, Safari 2+.

Enlace: Demo, Descargar