ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » css3 http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Menú desplegable con Css3 http://www.zoneartcss.com/webdesign/css/men-desplegable-con-css3/ http://www.zoneartcss.com/webdesign/css/men-desplegable-con-css3/#comments Tue, 16 Nov 2010 18:36:52 +0000 miguelortega http://www.zoneartcss.com/webdesign/css/men-desplegable-con-css3/

Uno de los menús más bonitos y limpios(en código) que he encontrado por la red, este menú es multinivel similar a Max.

image

Funciona correctamente en Firefox, Safari y Chrome, el menú desplegable también funciona en los navegadores no compatibles con CSS3, tales como Internet Explorer 7 +, pero las esquinas redondeadas y sombras no son soportadas.

Descargar en : Webdesignerwall

]]> http://www.zoneartcss.com/webdesign/css/men-desplegable-con-css3/feed/ 0 ¿Cómo crear botones en CSS 3? http://www.zoneartcss.com/webdesign/css/cmo-crear-botones-en-css-3/ http://www.zoneartcss.com/webdesign/css/cmo-crear-botones-en-css-3/#comments Mon, 04 Oct 2010 22:21:34 +0000 miguelortega http://www.zoneartcss.com/webdesign/css/cmo-crear-botones-en-css-3/

Nuestro amigo ubuwaits nos regala unos fabulosos ejemplos de botones desarrollados en css 3, la verdad son varios y muy útiles.

 

image

Este es el link de descarga: http://github.com/ubuwaits/css3-buttons

]]> http://www.zoneartcss.com/webdesign/css/cmo-crear-botones-en-css-3/feed/ 0 Menu Dock – Solo Con CSS http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/ http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/#comments Sun, 19 Jul 2009 05:14:03 +0000 miguelortega http://www.zoneartcss.com/?p=326

Menu Dock Mac OS Solo con CSS

CSS Animations no hace posible programar con CSS un menu dock al estilo MacOS. Aun que solo es posible con el navegador Safari (desde 3+) y el Google Crhome.

Codigo CSS del Menu

1
2
3
4
5
6
7
8

*{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;}
.all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;}
.dock{ display:block; margin-top:50px;}
.dock li {display:inline-block;}
.dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; }
.dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;}
.dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;}
.dock li a:hover span{left:45%;}

Todo está en la propiedad -webkit-transition. y all que durará 1 segundo con el método ease-in. Y al pasar el mouse el elemento cambiará la opacidad, que -webkit-transition aplico en la propiedad anterior y que tiene en el :hover.

Codigo HTML del Menu

1
2
3
4
5
6
7
8
9
10

<div class="all">
	<h1>Menu Dock MacOS solo con CSS Animations</h1>
    <ul class="dock">
        <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li>
        <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li>
        <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>            
    </ul>
</div>

Es una pena que solo para el Safari y Chrome funcionen, igual el CSS 2.1 es inválido.

Ver demo en linea

]]> http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/feed/ 3