DavidGonzalez

Hoy comparto con todos este elegante menú desplegable o "drop down menu" hecho con CSS y nada de JavaScript. Ver / Descargar

Basándome en uno ya hecho por "Css-Triks" , que solo permitía 2 niveles, lo he modificado para que soporte todos los que uno necesite. Ver / Descargar

A modo de experimento y base para un próximo proyecto hice un ColorPiker que no usa ninguna imagen, ya que las he sustituido por css gradients, por lo que solo es compatible de momento con Chrome y Firefox. Descargar Source Code

Os presento un menú fácil de hacer, que tiene un efecto bonito y que podéis usar en vuestras paginas web, lo único que tienes que tener en cuenta es que no le di soporte para Internet Explorer (quizás en un futuro lo haga para que no lo tengáis que hacer vosotros), pero si lo necesitas, en el post anterior dice lo necesario para que se vea bien en IE. Demo / Descargar Source Code Se trata de un menú cuyos elementos se encuentran borrosos, y al poner el ratón encima se quita el efecto blur viéndose el texto mas claro. Para los navegadores mas modernos le puse una animación para que al poner o quitar el ratón de encima valla gradualmente poniéndose o quitándose el blur, para firefox 3.6 e inferiores e IE, hay que usar algún javascript para darle ese toque de animación.

Bueno, no se si "Texto borroso" se escribe "blurred text", pero lo importante ahora no es el título, sino la posibilidad de crear el efecto blur solo con css. Demo / Descargar Source code Con el siguiente código css podrás hacer que cualquier texto se vea borroso como en la imagen de arriba y funcionando en la mayoría de los navegadores. .blur { text-shadow: #F00 0 0 4px; color: rgba(0, 0, 0, 0); color: #F00\9; /* Color for IE */ width: 100%; /* IE 5.5, 6, 7 Fix */ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2.5'); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius='2.5')"; } El color del texto se cambia en la propiedad text-shadow y en la tercera linea, que he necesitado usar este css hack para IE. El tamaño o nivel de desenfoque también se cambia en la propiedad text-shadow , concretamente el ultimo valor y para Internet Explorer, para que quede lo mas parecido al resto de navegadores ...

Si quieres hacer que un texto de tu blog o pagina web comience con una letra capital , que por si no lo sabes, es una letra al inicio de un texto o párrafo que es más grande que el resto, quedando asi: DEMO! ¿Como puedo hacer esto?, pues muy fácil, tan solo añadiendo unas lineas de código css y en el documento html "mete" dentro de un span la primera letra del texto al que le queremos dar estilo. CSS: .dropcap { float: left; padding-right: 5px; display: block; font-size: 70px; line-height: 60px; } HTML: <span class="dropcap">P</span>

En este post podéis ver como crear pestañas casi idénticas a las de Windows 7, usando CSS y un poco de Javascript. Podría haberlo hecho sin javascript pero para no complicarme mucho y hacerlo compatible con la mayoría de los navegadores lo he usado, ya que para crear un mismo efecto de pestañas sin javascript, solo css, habría que usar el selector :target , el cual solo es compatible en algunos de los navegadores mas modernos. DEMO! El html: <div class="tabs-wrap"> <ul class="tabs"> <li><a href="#A">Tab A</a></li> <li><a href="#B">Tab B</a></li> <li><a href="#C">Tab C</a></li> <li><a href="#D">Tab D</a></li> </ul> <div id="A" class="panel">Text....A</div> <div id="B" class="panel">Text....B</div> <div id="C" class="...

El otro día me dió por instalar el Avast!, un antivirus gratuito, y mirando el típico "Acerca de..." leí en los créditos que usaba HTMLayout , e inmediatamente me puse a buscar que era eso, pues ya me imaginaba lo que podía ser y quería saber si yo también podía usarlo. Y efectivamente, entre en su web y me descargué las demos y la sdk. Al ver las demos me sorprendió muchísimo sus posibilidades, ya que no solo era una dll que te permitía usar HTML en la interfaz de tus aplicaciones, sino que tambien css3 y unas cuantas cosas mas. Segun dicen en su web: (Traducido) HTMLayout es un motor de renderizado HTML ligero y rápido que te permite utilizar los archivos HTML como "skins" para tus aplicaciones. ...tiene tiempos de preparación muy cortos y su tiempo de inicio es cero. tiene HTML y CSS mejorado para tareas de diseño. Unidades%% y fondos ampliables Distribución de tamaño pequeño: se trata de htmlayout.dll 600KB sin comprimir. Aunque esto ultimo no es de...