Artículos Etiquetados ‘CSS’

Bordes Redondeados en todos los exploradores con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Bordes Redondeados en todos los exploradores con CSS3

Una de las cosas que frenan un poco la evolución de web es el tiempo que tardan algunos exploradores adoptar las innovaciones de los códigos más usados como HTML y CSS. En el caso que tratamos me refiero a CSS3, que incluyen una gran cantidad cosas nuevas que nos facilitan la vida a la hora crear nuestros sitios y a su vez le ofrecen una mejor experiencia al visitante. Pero la realidad es que algunas cosas como los bordes redondeados con CSS3 solo es visible en los exploradores más modernos, por esa razón debemos aplicar algunas líneas de código adicional para que sea visible en la mayoría de ellos.

Botones sociales de forma horizontal

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botones sociales de forma horizontal

Partiendo de la petición de Miguel en su comentario en tuto del Botón deTwitter y para todos aquellos que sea necesario va dirigido esta guía para colocar los botones sociales de nuestro sitio de forma horizontal, abarcando desde la más práctica y sencilla usando solo HTML con unos simples atributos de CSS, hasta una un poco más compleja y sofisticada, para quienes desean aplicar un poco más de código y quieran jugar más con los maravillosos poderes de CSS. Las siguientes técnicas son aplicables a cualquier sitio sean manejados por WordPress, Joomla o cualquier otro CMS, ¡hasta para foros!, el único requisito es que el sitio soporte HTML y creo que incluye a todos.

Agregar estilos CSS personalizados en WordPress

Escrito por Jose M Ramirez en . Publicado en Desarrollo Web

Agregar estilos CSS personalizados en WordPress

Muchos creen que una ventaja de Joomla frente a WordPress es la capacidad de integrar lo que se conoce como “sufijo de clase” que son clases personalizadas en ese CMS que permite darle un estilo diferente o único a cada módulo. Sin embargo muchos no saben que esto también es posible en WordPress incluso de una manera más flexible que en Joomla. Lo mejor de todo esto es que no necesitas saber CSS, no necesitas instalar un plugin ni menos complicarte la vida ya que desde el mismo panel de administración puedes hacerlo agregando unas cuantas líneas. Para entender un poco mejor; si quieres agregar un botón de Twitter con efecto rollover puedes hacerlo fácilmente copiando el código de este tutorial que hice hace poco. ¡Así de simple! Por ende puedes sacar mayor provecho a toda variedad de código HTML y CSS que abunda en la red.

Botón de Twitter efecto Rollover con CSS

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botón de Twitter efecto Rollover con CSS

El efecto rollover consiste en hacer cambiar un objeto al pasar el mouse sobre él, esto resulta muy atractivo y sofisticado si se aplica bien, aunque existen varias formas de hacerlo la más fácil y efectiva es mediante unas pocas líneas de código CSS. Este efecto es muy usado en los botones de redes sociales de muchas páginas, por ende; no es una novedad aquí, pero la intención es mostrar cómo se hace y que todos puedan aplicar su propio estilo. Esta vez lo haremos creando un atractivo botón de twitter pero básicamente el fundamento es el mismo para cualquier objeto que queramos aplicarlo.

Menú Simple con etiqueta menú en HTML5 y CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Menú Simple con etiqueta menú en HTML5 y CSS3

La promesa de HTML5 se basa en la semántica, que no es más que llamar las cosas por su nombre. Esto hace el código más simple para el maquetador, quien edite a futuro y los crawler de buscadores. Sin embargo a pesar del esfuerzo de los exploradores más modernos en integrar todas las características de HTML5 y CSS3, aun no todo soportan los atributos de la etiqueta ‘menu’. Aunque si soportan la etiqueta como tal y podemos empezar a usarla para empezar a poner el código de nuestros sitios al día recordando que para garantizar que se visualice perfectamente debemos usar algunos trucos.

Círculos con CSS3 y efecto hover

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Círculos con CSS3 y efecto hover

Siguiendo con los tutoriales sencillos pero divertidos de CSS3 para animar aquellos que temen un poco al código, continuamos con los círculos y los efectos que podemos agregar para hacerlos más atractivos. Basado en el mismo principio de nuestro tutorial circulo con CSS3, agregaremos algún condigo adicional y crearemos el efecto hover que se trata de hacer cambiar de color el objeto cuando se coloque el mouse sobre él. Es el mismo efecto que tienen en muchos sitios cuando colocamos el mouse sobre los enlaces y vemos que este cambia, sin embargo el método será diferente y mucho más fácil. Tendremos nuestro mismo círculo color verde y cuando coloquemos el cursor sobre él este cambiara a color verde claro. Veamos cómo.

Como hacer círculos con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Como hacer círculos con CSS3

CSS3 es todo un mundo nuevo a descubrir a la hora escribir nuestros estilo, una de las que más divertida puede parecer es la capacidad que tiene de crear formas y figuras solo limitado por tu imaginación. En el pasado a la hora de incluir bordes redondeados en nuestros sitios debíamos recurrir a imágenes, esta; si bien era una solución efectiva, agregaba peso a la carga de la página web. Ahora es tan simple de hacer con pocas líneas de código usando las técnicas de CCS3 y todo será interpretado por el explorador, lo mejor es que es aún mucho más fácil que hacerlo con imágenes.

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs