Xtreme News & Web Design

Image2CSS es una pequeña biblioteca PHP para la conversión de imágenes a CSS de manera automática. Por supuesto que la calidad no es la misma que la que obtendría un excelso diseñador, no obstante el resultado es bastante aceptable y se logra en apenas unos segundos. Ejemplo de uso: include ‘PointlessImageToCssConverter.php’; $img = new PointlessImageToCssConverter(“monalisa.jpg”); $img->setWidth(200); $img->setPixelSize(4); $img->setBlur(4); echo $img->computeStyle(); La biblioteca no tiene dependencias importantes, apenas necesita PHP instalado con la extensión GD lista para utilizar. Les [...]

Ahora les traigo un poco de css para modificar los checkboxes y rapido inputs para darle un estilo diferente. Como pueden ver en la imagen de arriba el resultado sera el de la parte derecha. Primero necesitan crear un custome css para su formulario y darle el estilo que deseen.  Luego tienen que bajar estas imagenes. check.png, off.png y radio.png Cuando ya tienen las imagenes solo tienen que agregar el css. /* Hide the original [...]

JQuery se a hecho muy popular para el desarrollo Web. Hay muchisimos plugins o herramientas con las cuales se pueden desarrollar websites usando html/css/javascript. Todas estas herramientas le hacen un poco mas facil el trabajo a los desarrolladores y aqui pongo una lista de esas herramientas que son muy buenos y ayudarian a todos en el desarrollo de una website. JQuery En si jQuery es una librería o framework javascript que nos permitirá interactuar con el HTML de [...]

Alessio Atzeni pone a nuestra disposición los ejemplos online para que podamos probarlos de forma directa. Al ser código HTML y CSS3 podemos investigar el código visualizando el fuente de la pagina. Para ilustrar un poco lo sencillo que resulta crear animaciones con CSS, colocó a continuación el ejemplo que realizo Alessio para generar el efecto de la captura. Estructura HTML: <div> <img src=”images/1.jpg” /> <div></div> <div> <a href=”#” title=”Full Image”>Full Image</a> </div> </div> CSS: .effect img { [...]

Compare Ninja es una aplicación online y gratuita que nos asiste en la tediosa tarea de crear tablas comparativas, utilizando para ellos solo HTML y CSS. De una forma muy simple y mecánica podemos crear nuestras tablas perfectamente estructuradas en apenas unos minutos. El proceso para crear nuestras tablas es muy sencillo, simplemente debemos ingresar por un lado los datos impredecibles como cantidad de columnas, categorías, ancho y titulo de la tabla. Y por el otro, [...]

WebPutty es un editor de código CSS online y que funciona en tiempo real, cada cambio realizado en las hojas de estilo lo muestra directamente en la pagina que modificamos, una forma simple y rápida de trabajar modificaciones visualizando los cambios de manera instantánea. La aplicación es muy simple de usar y por el momento es gratuita para los primeros usuarios, solamente requiere tener una cuenta de Google para ingresar al sistema. Una vez que ingresamos a [...]

Bubble Point Tooltips es un plugin que modifica el comportamiento por defecto de la etiqueta title de los enlaces que se muestra comúnmente cuando posicionamos el puntero del ratón sobre un enlace con un fondo amarillo, bastante feo. Para ejecutar este plugin solo necesitamos inicializarlo con una simple linea de código. Ejemplo de uso: $(“article a[title]“).tooltips(); Pueden ver una demostración online directamente desde la demo disponible. Web Bubble Point Tooltips with CSS3 & jQuery