|

Recursos CSS para principiantes

ByLuis

No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquí tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.

  • La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demás de las tablas, filas y celdas.
  • La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itálica, tamaño, separación de letras, alineamiento, …
  • Y por último una lista de colores y su correspondencia RGB.

También es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizás si sepa usar un editor gráfico.

Web development

Vía / dzone

Similar Posts

| |

Posicionamiento y estilo de las imágenes en los lectores RSS

ByLuis

Este verano cuando hicimos las plantillas (web de uso interno) de Blogia 2.0, uno de los elementos que cuidamos fue el de dar estilo a las imágenes cuando el autor elige la posición de la imagen desde el editor WYSIWYG.

cssimg-feeds.jpg

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */
img.left, img.right, img.center {
border: 3px solid #d0dfc3;
padding: 3px
}
img.left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
img.right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center {
margin: 0 auto 10px auto;
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.

Consejos para estructuras tus CSS

ByLuis

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

GMail Remote Command: controla tu PC desde GMail

ByLuis

gmail-remote.gifGMail Remote Command es una utilidad que nos permite realizar ciertas operaciones en nuestro PC a distancia mandando emails a nuestra cuenta de GMail. Podremos ejecutar aplicaciones, abrir páginas web y apagar el ordenador. Tan solo tendremos que ejecutar una pequeña ocx en el directorio System32 e indicarle la dirección de email y la contraseña. Para enviar los comandos que queremos ejecutar solo tenemos que mandar un email vacio con el asunto con un código. Lo que no sé es si la aplicación te leerá todos los correos que lleguen, por lo que se quedarán marcados como leçidos, yo casi mejor me creo una cuenta nueva para estas labores.
GMail Remote Command
Vía / hispamp3

Sitemap mediante CSS

ByLuis

Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de búsqueda.

Para aquellos que quieran incluir el sitemap con un buen diseño puede usar este truco que hemos encontrado.

csssitemap.png

Podemos darle un estilo parecido si añadimos CSS al siguiente sitemap:

<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Sin estilos sería así:

  • Web Root
    • stuff
      • nested-deep
        • nested-deeper
          • nested-deepest
      • nested deep

Y para que quede como la imagen anterior debería tener los siguientes estilos:

#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}

CSS SiteMap

Vía / Posh CSS

|

Paso a paso de un diseño web

ByLuis

La gente de SitePoint han publicado un gran artículo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artículo cómo podía pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artículo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box

Letras capitales mediante CSS

ByLuis

Es curioso como el uso del pseudo-elemento :first-letter no es muy usado en la web, mientras que en papel si se suele usar con frecuencia. En este caso se trata de crear letras capitales mediante este pseudo-elemento. Para ello habrá que usar un fondo común para todas y luego modificar la letra inicial para que encaje en el marco.

firstletter.png

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

Nice Drop caps with CSS

Vía / Posh CSS