Ferticidio's » CSS

Crear botones y barras de carga en CSS online

ferticidio — Mon, 21 Nov 2011 11:25:18 +0000

CSSload es un servicio interesante para los desarrolladores de sitios web. A través de una interfaz gráfica simple podremos crear botones y barras de carga en el CSS online para ser utilizados en cualquier proyecto web. El servicio es completamente gratuito y no requiere registro.

Para crear un botón o una barra de carga de sólo seleccionamos una plantilla en la columna “select animation template“y establecer los diferentes parámetros de personalización. Luego, simplemente haga clic en “Get code” para generar el código CSS que podremos utilizar en cualquier proyecto web que necesitemos.

Sin duda alguna un sitio que todo desarrollador web debe tener guardada, ya que nos ahorrara demasiado tiempo en cualquier proyecto.

Enlace: CSSload

display: inline-block para IE, y los demas navegadores

ferticidio — Tue, 20 Oct 2009 22:58:00 +0000

Estaba yo muy contento con la diagramacion de un listado generado dinámicamente en donpresupuesto.com. Pero de golpe me vengo a enterar que el display: inline-block no funciona en Internet Explorer. Y todo se fue al carajo. Las 5 columnas de localidades (Que pueden ver, por ejemplo en la pagina de reformas en a coruña) se transformaba en una sola, tan pero tan, fea que daba lastima.

Tenia dos opciones, meter un poco mas de código php, para generar divs con ese contenido dinamico y luego posicionarlos con float o algo asi, o buscar una forma de que mi listado funcione como yo esperaba. PHP se bastante, pero quería buscar una forma de hacerlo solo con css. Por suerte en Internet hay de todo. Una búsqueda y lo encontre.

Básicamente consiste en agregar unas lineas al css que hacen que se muestre el bien en todos los navegadores. No es un display: inline-block puro pero logramos que se muestre como esperamos.

Solo tuve que agregar estas lineas:


display: -moz-inline-stack; /* FF2*/
vertical-align: top; /* BASELINE CORRECCIÓN*/
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 20px; /* IE6 */

Lo que me dejo el código asi:


#footer ul li{
display: inline-block;
width: 165px;
margin: 0 0 3px 0;
color: #757575;
display: -moz-inline-stack; /* FF2*/
vertical-align: top; /* BASELINE CORRECCIÓN*/
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 20px; /* IE6 */
}

Y con eso ya deje todo funcionando…

Animaciones CSS en Safari

ferticidio — Mon, 09 Feb 2009 22:51:02 +0000

Una vez quise hacer un theme con los típicos tabs, pero en vertical… Quería usarlos como una especie de señaladores de hojas. Cuando me puse a investigar como hacerlo me di cuenta de que era casi imposible. Podria haberlo hecho con imágenes. Pero como era un theme para WordPress tuve que desechar esa idea.

Luego de mucho buscar me encontré con el concepto de animaciones CSS. Con esto uno puede hacer que el texto se “ponga” vertical (Entre un monton de cosas mucho mas interesantes). Y bueno… sigo esperando que esto sea un estándar para aplicarlo.

Según leo en Appleismo en el MobileSafari del iPhone y el iPod Touch ya esta implementado y es completamente operativo. Y ahora pretende llevarlo a OS X. Ojala así sea. Estoy ansioso de que la mayoría de los navegadores lo tengan por defecto.

Drawter, creando estructuras HTML-CSS de manera sencilla

ferticidio — Thu, 13 Nov 2008 17:08:13 +0000

Me encontré con un post en spamloco, que habla de drawter. Una aplicación web que nos permite armar estructuras HTML y CSS de forma sencilla. Sin necesidad de escribir ni una sola línea de código. Tan solo usando el mouse para ir definiendo las distintas secciones.

Luego de crear nuestra pagina solo tenemos que darle al generar código. Y ya tenemos el resultado. Solo nos faltaría ir pegando los códigos de WordPress y ya tendríamos armado el esqueleto de nuestro blog :p