Explorando la Categoría: "CSS"
Lectura recomendada: lista de herramientas útiles para desarrolladores CSS
W3avenue ha publicado una recopilación de herramientas que nos puede venir muy bien a los que nos dedicamos al desarrollo con tecnologías web XHTML/CSS. En la lista se incluyen desde aplicaciones online hasta extensiones de Firefox o aplicaciones de escritorio. Echar un ojo a la lista y seguro que encontráis algo que os sirva.Por : David
Muchas veces un buen diseño minimalista es mucho más elegante, estético y funcional que un diseño sobrecargado y lleno de elementos superfluos. En line25.com podemos encontrar una colección de 50 diseños minimalistas de muy bella factura. Muy útil para cuando nos encontramos faltos de inspiración.
Vía Xybernéticos
Leyendo CSSBlog me he encontrado con este valioso recurso. Se trata de una recopilación de 21 sets de iconos diseñados para el desarrollo de aplicaciones web. Siempre viene bien tener algo así a mano. Gracias a CSSBlog por hacer está recopilación.
CSS Redundancy Checker, herramienta útil para depurar tus hojas de estilos CSS
Muchas veces, por crear los estilos deprisa y corriendo, creamos hojas de estilos desordenadas, donde vamos añadiendo estilos y no nos preocupamos de revisar si el estilo ya existía para modificarlo, simplemente creamos uno nuevo para que sobreescriba el anterior. Esto puede degenerar en hojas de estilos demasiado grandes, dificiles de leer y que pueden incluso influir en el SEO de la página. Con CSS Redundancy Checker podermos revisar los estilos repetidos para depurar nuestros CSS.Por : David
1
Estilo CSS para wp-caption en WordPress
En Wordpress se pueden incluir las imágenes dentro de un div con clase wp-caption para mejorar la visualización y añadir pie de foto si se quiere. He encontrado unos estilos CSS que son muy fáciles de aplicar y queda muy bien.Por : David
Chuleta para atajos CSS
Navegando esta noche por internet me he encontrado con este sitio donde puedes encontrar más de 30 chuletas de CSS. La chuleta de los shorthands (atajos) me va a venir muy bien, siempre se me olvidan…
Por : David
Generador Css de menus y formularios
Navegando por la red me he encontrado con dos aplicaciones que me han parecido muy utiles, y que me han ahorrado mucho tiempo en mi trabajo.Generador de estilos para formularios: Formstylegenerator.
Generador de menus: Izzymenu.com
Por : David
1
Después de un periodo de descanso en semana santa, necesario para desconectar un poco y otro periodo de descanso forzoso debido al mal funcionamiento del hosting de Dreamhost, proseguimos con el blog, el cual había dejado un poco abandonado.
Escribiendo el articulo de MySQL se me ocurrió dar un estilo a los comandos que vaya insertando, creando un div que simule una consola de Microsoft, el típico CMD.
En un principio iba a usar una imagen capturada de la consola directamente, pero esta solución no me acababa de convencer, ya que no se podria copiar y pegar texto y ademas para Google, el texto de las imagenes es como si no existiese.
Realmente es una tontería, se me ocurrió una tarde que estaba aburrido y decidí escribir un articulo sobre esto.
La idea es usar un div con un pre dentro para introducir el texto preformateado.
Estas son las normas css que he usado :
.cmdWin { background:url(images/cabecera.png) 2px 2px; #background-position: 5px 5px; /* Solo para IE */ background-repeat: no-repeat; background-color:#08246B; color:#EFEFEF; padding:0px; padding-top:7px; #padding-top:19px; /* Solo para IE */ border: 4px #CFCFCF ridge; } .cmdWin pre , code{ font:monospace, Andale Mono, Lucida Console, Monaco, fixed ; font-weight:bold; background:black; margin-bottom:0px; padding:1px; overflow:scroll; height:400px; } .cmdWin pre span.cursor { text-decoration:blink; }
He usado un hack css , usando el carácter #, dado que Internet explorar y firefox interpretan el padding de forma distinta.
Para la cabecera del div he usado esta imagen:
También he creado una clase con nombre cursor para hacer parpadear el cursor.
Este el código html necesario para mostrar la línea de comandos.
<div class="cmdWin"><pre> Microsoft Windows XP [Versión 5.1.2600] (C) Copyright 1985-2001 Microsoft Corp.C:\Documents and Settings\felisa><span class="cursor">_</span></pre></div>
Y este es el resultado:
Microsoft Windows XP [Versión 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.
C:\Documents and Settings\felisa>_
Como ves, no es algo necesario, pero sirve para romper con la monotonía de la página a la hora de escribir código.
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página