Juanmgonza
Usuario (Argentina)
Bienvenidos a mi nuevo Post, esta vez les enseñare HTML5, y CSS3 en la próxima parte de este "curso" si se lo quiere llamar así, enseñar no se, pero decirles los nuevos codigos de dichos lenguajes. Espero que les guste y les resulte util. Cualquier duda, pregunten por MP, ¿Que Es HTML5? HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. ¿Necesito saber HTML? Y yo diria que si, es recomendable. Si no sabes, te recomiendo que leas el Post de @powersh: Post De ahí aprendí yo y es muy bueno, sumamente recomendable ¿Que necesito usar para diseñar Paginas Web? Recomiendo Sublime Text2, Notepad y Bloc de Notas de cualquier SO. Bueno, Empecemos! Pensemos esto, en HTML hasta el momento escribíamos el siguiente código: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <div class="header"><h1>Titulo de Pagina</h1></div> <div class="menu"> <ul>uno</ul> <ul>dos</ul> <ul>tres</ul> </div> <br> <div class="cont"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <br> <center><div class="footer"> Pie de Pagina </div> </center> </body> </html> Seria así: Pero ahora en HTML 5 podemos escribirlo asi: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <header> <h1>Titulo de la Pagina</h1> </header> <nav> <ul>uno</ul> <ul>dos</ul> <ul>tres</ul> </nav> <br> <section> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </section> <br> <center><footer> Pie de pagina </footer></center> </body> </html> Seria asi: Conclusión: En HTML, usábamos mucho el Div para hacer los títulos, contenido, etc. Pero existiendo HTML5, creo que es algo innecesario de hacer. Este como otros son los beneficios de este HTML5, que ahora les pasare a explicar y mostrar. Las Etiquetas de HTML5 <header> Está diseñada para reemplazar la necesidad de crear divs sin significado semántico. Lo que nos ayuda esta etiqueta es no utilizar Div para todo. Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <header> <h1>Titulo de la Pagina</h1> </header> </body> </html> Se vería así: <hgroup> Pensada para utilizar en Blog, cuando tenemos que poner un Titulo y una descripción abajo. Permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <header> <hgroup> <h1>Titulo del Blog</h1> <h2>Subtitulo del Blog</h2> </hgroup> </header> </body> </html> Se Vería así: <nav>: El uso de esta etiqueta es para el menú de la Web. Dentro del mismo se puede poner la etiqueta <ul> Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <nav> <ul>Opcion 1</ul> <ul>Opcion 2</ul> </nav> </body> </html> Se Vería Así: <section>: Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <section>Estoy viendo el Tuto de Juanmgonza en T!</section> </body> </html> Se Vería Así: <article>: Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <section> <article>Estoy viendo el Tuto de Juanmgonza en T!</article> <article>Espero que les sirva</article> <article>Recomienden asi aprendes otras personas.</article> </section> </body> </html> Se Vería Así: <footer>: No necesita ni explicacion. Ejemplo: <!DOCTYPE html> <title>Ejemplo</title> </head> <body> <footer>Pie de Pagina</footer> </body> </html> <video> Inserta video sin necesidad de plugins. Es muy fácil usarla. Uso del tag <video>: Soporte en Navegadores: IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari Mobile 1.0+ Ejemplo: <video src=”un-video-mlw.avi” width=”320” height=”240”></video> Atributos: preload: que empezará a precargar el video independientemente de las acciones del usuario sobre el player. <video src=”un-video-mlw.avi” width=”320” height=”240” preload></video> autoplay: dará play al video en cuanto cargue la página sin acción del usuario sobre los controles. <video src=”un-video-mlw.avi” width=”320” height=”240” autoplay></video> controls: Invoca a incluirse los controles (play, pausa, volumen, etc.) en el player del video. Estos controles están predefinidos en cada navegador y como veremos más adelante en algunos players opciones pueden ser modificados con javascript + css3. <video src=”un-video-mlw.avi” width=”320” height=”240” controls></video> Formatos que puedo usar: .avi, .mp4 (o .m4v), .flv (flash video), .ogv <audio>: Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador. Ejemplo: <audio controls="controls"> <source src="musica.mp3" type="audio/ogg" /> </audio> Atribuciones: autoplay: Especifica que el audio se reproducirá tan pronto como esté listo. controls: Especifica que los controles de audio se debe mostrar. preload: Comenzara a reproducirse cuando se cargue completamente. loop: El Audio empezara a reproducirse ni bien termine, nuevamente. src: Especifica la dirección URL del archivo de audio. <canvas>: Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript. No cabe decir que debes saber JS. <canvas id="miCanvas">Su navegador no puede reproducir Canvas de HTML5</canvas> <script type="text/javascript"> var c=document.getElementById('miCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> <svg>: Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML. Les recomiendo que se pasen por aquí para aprender SVG, ya que se me complica como explicarlo . Hasta aquí hemos llegado Espero que les haya sido útil este Post, recomienden asi mas gente aprende este Lenguaje. Cualquier duda manden MP y lo contestare lo mas pronto posible. En el próximo Post veremos CSS3, que hay mas que aprender Saludos!!
Bienvenidos a mi Post, donde nuevamente les pondre unos codigos para sus Webs extraidos de la pagina CSS Deck. Espero que se les sea Util Soothing CSS3 Dropdown Animation DEMO HTML: <nav> <ul> <li><a href="#">View</a></li> <li class="drop"> <a href="#">You</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div> <ul> <li>Plan</li> <li>Account Settings</li> <li>Switch Account</li> <li>Sign Out</li> </ul> </div> </div> </li> <li><a href="#">Help</a></li> </ul> </nav> CSS: html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;} /*---------- BODY --------------------------------*/ body { text-align: center; background: #e0e0e0; padding-bottom: 200px; } a { text-decoration: none; } /*---------- Wrapper --------------------*/ nav { width: 100%; height: 80px; background: #222; } ul { text-align: center; } ul li { font: 13px Verdana, 'Lucida Grande'; cursor: pointer; -webkit-transition: padding .05s linear; -moz-transition: padding .05s linear; -ms-transition: padding .05s linear; -o-transition: padding .05s linear; transition: padding .05s linear; } ul li.drop { position: relative; } ul > li { display: inline-block; } ul li a { line-height: 80px; padding: 0 20px; height: 80px; color: #777; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } ul li a:hover { color: #eee; } .dropOut .triangle { width: 0; height: 0; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; top: -8px; left: 50%; margin-left: -8px; } .dropdownContain { width: 160px; position: absolute; z-index: 2; left: 50%; margin-left: -80px; /* half of width */ top: -400px; } .dropOut { width: 160px; background: white; float: left; position: relative; margin-top: 0px; opacity: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); box-shadow: 0 1px 6px rgba(0,0,0,.15); -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } .dropOut ul { float: left; padding: 10px 0; } .dropOut ul li { text-align: left; float: left; width: 125px; padding: 12px 0 10px 15px; margin: 0px 10px; color: #777; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background .1s ease-out; -moz-transition: background .1s ease-out; -ms-transition: background .1s ease-out; -o-transition: background .1s ease-out; transition: background .1s ease-out; } .dropOut ul li:hover { background: #f6f6f6; } ul li:hover a { color: white; } ul li:hover .dropdownContain { top: 65px; } ul li:hover .underline { border-bottom-color: #777; } ul li:hover .dropOut { opacity: 1; margin-top: 8px; } Page Curl Box Shadow DEMO HTML: <div class="page-curl shadow-bottom"> <h2>Bottom shadow, both sides</h2> <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p> </div> <div class="page-curl shadow-bottom shadow-right"> <h2>Bottom shadow, right side</h2> <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p> </div> <div class="page-curl shadow-bottom shadow-left"> <h2>Bottom shadow, left side</h2> <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p> </div> <div class="page-curl shadow-top-bottom shadow-right"> <h2>Top & Bottom shadow, right side</h2> <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p> </div> <div class="page-curl shadow-top-bottom shadow-left"> <h2>Top & Bottom shadow, left side</h2> <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p> </div> CSS: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); html { background: #DEF; background: -moz-linear-gradient(45deg, #EFF, #DEF); background: -ms-linear-gradient(45deg, #EFF, #DEF); background: -webkit-linear-gradient(45deg, #EFF, #DEF); background: linear-gradient(45deg, #EFF, #DEF); min-height: 100%; font-family: "Open Sans", Helvetica, sans-serif; font-weight: 300; } h1, h2 { font-weight: 400; text-shadow: 0 1px 0 #FFF; } h1 { width: 800px; margin: 0 auto; } p { font: 300 13px/20px Arial,sans-serif; color: #888; } .page-curl { background: #FFFFFF; background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%); background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%); background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%); background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%); border: 1px solid #777777; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); margin: 50px auto; padding: 15px; position: relative; width: 800px; } .page-curl:before, .page-curl:after { background: none; bottom: 12px; -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); content: ""; height: 10px; left: 12px; position: absolute; width: 40%; z-index: -1; -moz-transform: skew(-4deg) rotate(-4deg); -webkit-transform: skew(-4deg) rotate(-4deg); transform: skew(-4deg) rotate(-4deg); } .page-curl:after { -moz-transform: skew(4deg) rotate(4deg); -webkit-transform: skew(4deg) rotate(4deg); transform: skew(4deg) rotate(4deg); left: auto; right: 12px; } .page-curl.shadow-left { background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important; background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important; background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important; background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important; } .page-curl.shadow-right { background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important; background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important; background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important; background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important; } .shadow-bottom:before, .shadow-bottom:after { top: auto; bottom: 12px; -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5); } .shadow-left:after { display: none; } .shadow-right:before { display: none; } .shadow-top-bottom.shadow-left:after { display: block; bottom: auto; top: 15px; right: auto; left: 12px; -moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); } .shadow-top-bottom.shadow-right:before { display: block; bottom: auto; top: 15px; right: 12px; left: auto; -moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5); } CSS-Only Pinterest Style Columns Layout DEMO HTML: <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" /> <p> Donec a fermentum nisi. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" /> <p> Nullam eget lectus augue. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> </div> </div> CSS: body { background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; } #wrapper { width: 90%; max-width: 1100px; min-width: 800px; margin: 50px auto; } #columns { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; } .pin { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 2px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 1; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .pin img { width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 5px; } .pin p { font: 12px/18px Arial, sans-serif; color: #333; margin: 0; } @media (min-width: 960px) { #columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media (min-width: 1100px) { #columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } } #columns:hover .pin:not(:hover) { opacity: 0.4; } Pure CSS3 Slideshow Without Page Jump DEMO <h2>Pure CSS3 Slideshow Without Page Jump</h2> <ul id="css3-slider"> <li> <input type="radio" id="s1" name="num" checked="true" /> <label for="s1">1</label> <a href="javascript:void(0);"> <img src="http://cssdeck.com/uploads/media/items/0/0UeVZv3.jpg" /> <span>Why do you put the egg yolks on your eyes?</span> </a> </li> <li> <input type="radio" id="s2" name="num" /> <label for="s2">2</label> <a href="javascript:void(0);"> <img src="http://cssdeck.com/uploads/media/items/9/9J2jvF6.jpg" /> <span>How can you look ahead if your eyes are on the side?</span> </a> </li> <li> <input type="radio" id="s3" name="num" /> <label for="s3">3</label> <a href="javascript:void(0);"> <img src="http://cssdeck.com/uploads/media/items/0/0ckDaQF.jpg" /> <span>Keep praying to God</span> </a> </li> <li> <input type="radio" id="s4" name="num" /> <label for="s4">4</label> <a href="javascript:void(0);"> <img src="http://cssdeck.com/uploads/media/items/3/3oMnVPz.jpg" /> <span>Stay relaxed</span> </a> </li> <li> <input type="radio" id="s5" name="num" /> <label for="s5">5</label> <a href="javascript:void(0);"> <img src="http://cssdeck.com/uploads/media/items/1/1hZPTaR.jpg" /> <span>And you will forever be relaxed</span> </a> </li> </ul> <footer>Images from anywhere</footer> CSS: /** * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman * 26 April 2012 * http://hompimpaalaihumgambreng.blogspot.com */ body { background-color:black; height:2000px; color:#999; text-align:center; font:normal 12px 'Century Gothic',Arial,Sans-Serif; } a { color:blue; text-decoration:none; } h2 { margin:30px 0px; font-weight:normal; } /* General */ #css3-slider { margin:20px auto; padding:0px 0px; width:448px; height:286px; position:relative; } #css3-slider li { list-style:none; margin:0px 0px; padding:0px 0px; } /* Navigation */ #css3-slider li input + label { position:absolute; bottom:5px; left:10px; z-index:999; font:bold 11px/16px Arial,Sans-Serif; background-color:black; color:white; padding:0px 0px; width:16px; text-align:center; cursor:pointer; } #css3-slider li:nth-child(2) label {left:28px;} #css3-slider li:nth-child(3) label {left:46px;} #css3-slider li:nth-child(4) label {left:64px;} #css3-slider li:nth-child(5) label {left:82px;} /* Images */ #css3-slider li img { border:none; outline:none; position:absolute; top:50%; left:50%; width:0px; height:0px; visibility:hidden; opacity:0; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -ms-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -webkit-transform:rotate(0deg) scale(0); -moz-transform:rotate(0deg) scale(0); -ms-transform:rotate(0deg) scale(0); -o-transform:rotate(0deg) scale(0); transform:rotate(0deg) scale(0); } /* Captions */ #css3-slider a { text-decoration:none !important; } #css3-slider li a span { cursor:default; display:block; position:absolute; right:0px; bottom:0px; left:0px; background-color:rgba(0,0,0,0.8); font:normal 11px/26px Arial,Sans-Serif; color:white; padding:0px 10px; text-align:right; opacity:0; viibility:hidden; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -ms-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; } /* Active navigation */ #css3-slider li input:checked + label { background-color:#39f; color:white; } /* Show the image with transition */ #css3-slider li input:checked ~ img, #css3-slider li input:checked ~ a img { top:0%; left:0%; width:448px; height:286px; visibility:visible; -webkit-transform:rotate(720deg) scale(1); -moz-transform:rotate(720deg) scale(1); -ms-transform:rotate(720deg) scale(1); -o-transform:rotate(720deg) scale(1); transform:rotate(720deg) scale(1); opacity:1; z-index:99; } /* Show the caption with fade effect */ #css3-slider li input:checked ~ a span { opacity:1; z-index:100; } /* Hide the radio */ #css3-slider input { display:none; } 10 Crazy Effects with CSS3 Border Transitions DEMO HTML: <a class="one" href="#"></a> <a class="two" href="#"></a> <a class="san" href="#"></a> <br> <a class="yon" href="#"></a> <a class="goo" href="#"></a> <a class="rok" href="#"></a> <a class="ryk" href="#"></a> <br> <a class="x7" href="#"></a> <a class="x8" href="#"></a> <a class="x9" href="#"></a> CSS: body { padding: 10px 0 0 10px; } a { display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100px; height:100px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; background-image:url(data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==); background-repeat:no-repeat; background-origin:border-box; background-position:50% 50%; border-width:50px; border-color:rgba(0,0,0,0); -webkit-transition:0.5s ease; -moz-transition:0.5s ease; -ms-transition:0.5s ease; -o-transition:0.5s ease; transition:0.5s ease; } a:hover { border-width:0; border-color:rgba(0,0,0,0.5); } a.one {border-style:solid;} a.two {border-style:dashed;} a.san {border-style:dotted;} a.yon {border:50px solid rgba(0,0,0,0.7);} a.goo {border:50px dashed rgba(0,0,0,0.7);} a.rok {border:50px dotted rgba(0,0,0,0.7);} a.ryk {border:50px double rgba(0,0,0,0.7);} a.yon:hover {border: 1px solid rgba(0,0,0,0.7);} a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);} a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);} a.ryk:hover {border: 1px double rgba(0,0,0,0.7);} a.x7, a.x8, a.x9 { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; } a.x7 {border:50px solid rgba(0,0,0,0.7);} a.x8 {border:50px dashed rgba(0,0,0,0.7);} a.x9 {border:50px dotted rgba(0,0,0,0.7);} a.x7:hover {border: 1px solid rgba(0,0,0,0.7);} a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);} a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);} Bueno hasta aca llego el Post, si les gusto, voy a seguir posteando estos recursos, capaz me tiro alguno mio, si quieren dejar algun PSD aquel que haga Diseño Grafico para alguna web y no saben como hacerlo, diganme y lo paso, no tengo problema. Hubo menos que la otra vez por tiempo, pero tengo pensado poner de a 5 ahora, ya tengo planeado para un parte 3 Saludos