[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Diseño Web

  • Contenido deslizante con Auto-Reproducción

    contslider.jpg

    Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

    • Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
    • Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
    • Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

    Ver demo - Mas informacion y descarga Auto playing featured Content Slider – By css-tricks
    Instalacion:

    1. <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    2.     <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
    3.     <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
    4.     <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
    5.     <script type="text/javascript">
    6.         var theInt = null;
    7.         var $crosslink, $navthumb;
    8.         var curclicked = 0;
    9.         theInterval = function(cur){
    10.             clearInterval(theInt);
    11.             if( typeof cur != 'undefined' )
    12.                 curclicked = cur;
    13.             $crosslink.removeClass("active-thumb");
    14.             $navthumb.eq(curclicked).parent().addClass("active-thumb");
    15.                 $(".stripNav ul li a").eq(curclicked).trigger('click');
    16.             theInt = setInterval(function(){
    17.                 $crosslink.removeClass("active-thumb");
    18.                 $navthumb.eq(curclicked).parent().addClass("active-thumb");
    19.                 $(".stripNav ul li a").eq(curclicked).trigger('click');
    20.                 curclicked++;
    21.                 if( 6 == curclicked )
    22.                     curclicked = 0;
    23.             }, 3000);
    24.         };
    25.         $(function(){
    26.             $("#main-photo-slider").codaSlider();
    27.             $navthumb = $(".nav-thumb");
    28.             $crosslink = $(".cross-link");
    29.             $navthumb
    30.             .click(function() {
    31.                 var $this = $(this);
    32.                 theInterval($this.parent().attr('href').slice(1) - 1);
    33.                 return false;
    34.             });
    35.             theInterval();
    36.         });
    37.     </script>

    Agregando estilo

    1. /*
    2.     SLIDER
    3. */
    4. .slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
    5. .stripViewer .panelContainer
    6. .panel ul                          { text-align: left; margin: 0 15px 0 30px; }
    7. .stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
    8. .stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
    9. .stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
    10. .stripNavL, .stripNavR, .stripNav        { display: none; }
    11. .nav-thumb        { border: 1px solid black; margin-right: 5px; }
    12. #movers-row      { margin: -43px 0 0 62px; }
    13. #movers-row div     { width: 20%; float: left; }
    14. #movers-row div a.cross-link             { float: right; }
    15. .photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
    16.                                               margin-top: -50px; position: relative; z-index: 9999; color: white; }
    17. .photo-meta-data span            { font-size: 13px; }
    18. .cross-link      { display: block; width: 62px; margin-top: -14px;
    19.                                               position: relative; padding-top: 15px; z-index: 9999; }
    20. .active-thumb                { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

    Contenido

    1. <div class="slider-wrap">
    2.     <div id="main-photo-slider" class="csw">
    3.         <div class="panelContainer">
    4.             <div class="panel" title="Panel 1">
    5.                 <div class="wrapper">
    6.                     <!-- REGULAR IMAGE PANEL -->
    7.                     <img src="images/tempphoto-1.jpg" alt="temp" />
    8.                     <div class="photo-meta-data">
    9.                         Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
    10.                         <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
    11.                     </div>
    12.                 </div>
    13.             </div>
    14.             <div class="panel" title="Panel 2">
    15.                 <div class="wrapper">
    16.                     <!-- PANEL CONTENT -->
    17.                 </div>
    18.             </div>
    19.             <div class="panel" title="Panel 3">
    20.                 <div class="wrapper">
    21.                     <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
    22.                     <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
    23.                     <h1>How to Cook a Scotch Egg</h1>
    24.                     <ul>
    25.                         <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
    26.                         <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
    27.                         <li>1/2 cup AP flour</li>
    28.                         <li>1-2 eggs, beaten</li>
    29.                         <li>3/4 cup panko-style bread crumbs</li>
    30.                         <li>Vegetable oil for frying</li>
    31.                     </ul>
    32.                 </div>
    33.             </div>
    34.             <div class="panel" title="Panel 4">
    35.                 <div class="wrapper">
    36.                     <!-- PANEL CONTENT -->
    37.                 </div>
    38.             </div>
    39.             <div class="panel" title="Panel 5">
    40.                 <div class="wrapper">
    41.                     <!-- PANEL CONTENT -->
    42.                 </div>
    43.             </div>
    44.             <div class="panel" title="Panel 6">
    45.                 <div class="wrapper">
    46.                     <!-- PANEL CONTENT -->
    47.                 </div>
    48.             </div>
    49.         </div>
    50.     </div>
    51.     <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
    52.           AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
    53.     <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
    54.     <div id="movers-row">
    55.         <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    56.         <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    57.         <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    58.         <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    59.         <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
    60.     </div>
    61. </div>

    Ver demo – Mas informacion y descarga Auto playing featured Content Slider – By css-tricks

  • Crear menu de navegación de dos niveles para tus secciones

    seccionesdoblefila.jpg

    Si han estado siguiendo algunas de las tendencias en los themes WordPress Premium, probablemente habrán notado que los dos niveles en menú de navegación se han ido convirtiendo en algo muy popular o frecuente de ver, quizás más aun, en aquellos diseños estilo magazine que suelen poseer muchas secciones con información. Este estilo de menú puede utilizarse en infinidad de maneras, pero lo más común es mostrar las paginas principales, donde al posar nuestro ratón sobre uno de los títulos nos mostrara en un segundo nivel todas las subpáginas que contenga dicha sección. Como lograrlo en worpdress? de esta forma:

    1. <ul id="nav">
    2. <?php wp_list_pages('title_li=&depth=1'); ?>
    3. </ul>
    4.  
    5. <?php if($post->post_parent)
    6. $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
    7. $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
    8. if ($children) { ?>
    9. <ul id="subnav">
    10. <?php echo $children; ?>
    11. </ul>
    12. <?php } else { ?>
    13. <?php } ?>

    un poco de estilo

    1. * {
    2.     margin:0;
    3.     padding:0
    4.     }
    5.  
    6. #nav {
    7.     background:#577da2;
    8.     border-bottom:1px solid #FFF;
    9.     height:32px;
    10.     }
    11.  
    12. #nav li {
    13.     margin-right:25px;
    14.     }
    15.  
    16. #nav li, #subnav li {
    17.     float:left;
    18.     list-style:none
    19.     }
    20.  
    21. #nav a, #nav a:visited {
    22.     color:#FFF;
    23.     text-decoration:none;
    24.     font-weight:bold
    25.     }
    26.  
    27. #nav a:hover, #nav a:active,
    28. li.current_page_parent a,
    29. li.current_page_parent a:visited,
    30. #nav li.current_page_item a,
    31. #nav li.current_page_item a:visited
    32.        {
    33.     background:#295887
    34.     }
    35.  
    36. #subnav {
    37.     background:#e6eef7;
    38.     border-top:2px solid #577da2;
    39.     border-bottom:2px solid #cad8e6;
    40.     height:28px;
    41.     }
    42.  
    43. #subnav li {
    44.     border-right:1px solid #295887;
    45.     padding:0 7px;
    46.     }  
    47.  
    48. #subnav a, #subnav a:visited {
    49.     color:#295887;
    50.     text-decoration:none;
    51.     font-weight:bold
    52.     }
    53.  
    54. #subnav a:hover, #subnav a:active,
    55. #subnav li.current_page_item a,
    56. #subnav li.current_page_item a:visited {
    57.     text-decoration:underline
    58.     }

    Mas informacion darrenhoyt

  • DhoniShow ROCK – Mas formas de crear slideshows

    dshowquery.jpg

    DhoniShow ROCK otra versión de esta estupenda galería que nos permite montar slideshows a nuestros proyectos web. Anteriormente comentamos la que se llama solamente DhoniShow basada en prototype 1.5+ y Script.aculo.us. La diferencia con esta versión DhoniShow ROCK, es la librería que se utilizara, ahora completamente en jquery. Su funcionamiento es realmente muy simple, y las configuración con las cuales interactuar muchísimas. Muchos efectos, autoplay, transiciones manuales, opción de añadir imágenes miniaturas bajo la de tamaño original, tiempo de transiciones en secuencias, etc.

    Ver DemoDescarga Demo – Mas info DhoniShow ROCK

    Uso:
    Para su instalación como siempre, necesitamos descargar cada uno de los archivos, alojarlos en una carpeta o servidor y realizar la llamada correspondiente a ellos. Es decir, a nuestras librerías jquery y las correspondientes a DhoniShow, su script y su hoja de estilo.

    1. <link rel="stylesheet" href="dhonishow.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    2. <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    3. <script src="jquery.dhonishow.js" type="text/javascript" charset="utf-8"></script>

    Crear una slideshow con AUTOPLAY

    1. <div class="dhonishow autoplay_3 duration_3">  
    2.  <img src="1.jpg">  
    3.  <img src="2.jpg">  
    4.  <img src="4.jpg">  
    5. </div>

    Crear galerias y agregando enlaces a las descripciones

    1. <div class="dhonishow">  
    2. <img src="1.jpg" alt="Agregando link a la descripcion. Mira: <a href='http://xyberneticos.com/'>xyberneticos.com</a>">  
    3. <img src="2.jpg" alt="Nuestra galeria slideShow con un dise&ntilde;o muy peculiar bajo <a href='http://dhonishow.de/'>dhonishow ROCk</a> mediante jQuery - power by <a href='http://xyberneticos.com/'>xyberneticos.com</a>
    4. ">  
    5. <img src="4.jpg" alt="Soy un link <a href='http://xyberneticos.com/'>xyberneticos.com</a> ">  
    6. </div>

    Ambas formas, lo podrán ver funcionar en el ejemplo que también pueden descargar.
    gracias Cesar

  • CSS | Diseño Web

    13 /09 / 2008 - 12:47 pm

    Publicado por Nikko.

    • 15
    • 2.419

    Social Link

    Integrando nuestra fotos directamente desde Flickr

    flickr.jpg

    Para aquellos que me han preguntado cómo integrar sus imágenes de Flickr a sus blog sin recaer en la utilización de algún plugin para tal fin, una simple forma es la que utilizo yo en mi blog, directamente haciendo la llamada desde Flickr. Tan solo es necesario cambiar en el código nuestro id de usuario y la cantidad de imágenes que tenemos pensado mostrar.

    Ver Demo

    Codigo

    1. <span style="color:#0063DC">Flick</span><span style="color:#FF0084">r</span>
    2.     <div class="flickr">
    3.  
    4. <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;display=latest&amp;size=s&amp;layout=h&amp;source=user&amp;user=14412260@N08"></script>
    5.  
    6. </div>

    count=4 Cantidad de fotos a mostrar
    user=14412260@N08 nuestro ID de usuario
    Agregando estilo

    1. .flickr a img{
    2.     float:left;
    3.     background: #F0F0F0;
    4.     border: 1px solid #dedbd1;
    5.     margin: 4px 9px 4px 0px;
    6.     padding: 7px;
    7.     list-style:none;
    8. }
    9. .flickr img:hover{
    10.     background: #ebe9e1;
    11.     border: 1px solid #dedbd1;
    12. }

  • Typechart – CSS para tus fuentes

    typechart.jpg

    Si desean darle diferentes estilos a los párrafos de sus proyectos web, Typechart será un sitio indispensable para visitar. Typechart es un sitio que nos presenta diversas formas de resaltar el contenido de nuestro blog, jugando con las propiedades de nuestras fuentes. Lo bueno es que nos permite ver en tiempo real como se verían nuestras fuentes tanto en Windows como en MAC. Y lo mejor de todo, es que una vez que hemos encontrado una idea original podremos obtener el código CSS que nos permitirá luego, obtener en nuestros proyectos online los mismos resultados. Encontraran cantidad de opciones y ejemplos, que podrán poner a prueba en sus futuros diseños.

    Enlace Typechart

    Via webappers

  • Sexy Alert Box – Tus mensajes de error más atractivos

    sexyalert.jpg

    Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Este script ha dejado de desarrollarse por el autor, pero Eduardo ha sabido adaptarlo muy bien a Mootools luego de la liberación del código original. El efecto es muy similar a los logrados con Lightbox, pero desarrollado para otros fines. Los ejemplos sin duda te serán de guía para saber en qué momento utilizarlos. Sexy Alert Box requiérela utilización de Mootools 1.2, es compatible con cada uno de los navegadores, incluyendo Internet Explorer (Una gran ventaja) y su finalidad es mostrar mensajes de error de una manera más atractiva a los ojos de nuestros usuarios.

    Ver DemosDescarga ejemplos – Mas info e instalacion  Sexy Alert Box

  • Interface Slideshow

    interfaceshoe.jpg

    Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
    Ver Demo -Interface Slideshow

    Uso:

    Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

    1. <script src="jquery.js" type="text/javascript"></script>
    2. <script src="interface.js" type="text/javascript"></script>

    Un poco de CSS

    1. #slideShow1
    2. {
    3. width: 300px;
    4. height: 280px;
    5. border: 1px solid #ccc;
    6. padding: 10px;
    7. background-color: #fff;
    8. margin: 10px;
    9. }
    10. #slideShow2
    11. {
    12. width: 300px;
    13. height: 300px;
    14. border: 1px solid #ccc;
    15. padding: 10px;
    16. background-color: #fff;
    17. margin: 10px;
    18. }
    19. .pagelinks a
    20. {
    21. font-weight: bold;
    22. color: #666;
    23. }
    24. .slideCaption
    25. {
    26. background-color: #FFFFCC;
    27. padding: 4px;
    28. text-align: center;
    29. font-weight: bold;
    30. }
    31. .pagelinks a.activeSlide
    32. {
    33. color: #f90;
    34. }
    35. /* this is for IE so the prev/next links can be hovered*/
    36. .nextSlide,.prevSlide
    37. {
    38. background-image: url(images/spacer.gif);
    39. }
    40. .nextSlide:hover
    41. {
    42. background-image: url(images/nextslide.jpg);
    43. background-repeat: no-repeat;
    44. background-position: right bottom;
    45. }
    46. .prevSlide:hover
    47. {
    48. background-image: url(images/prevslide.jpg);
    49. background-repeat: no-repeat;
    50. background-position: left bottom;
    51. }
    52. .inputsTooltip
    53. {
    54. border: 1px solid #ccc;
    55. background-color: #eee;
    56. padding: 4px;
    57. color: #333;
    58. font-family: Arial, Helvetica, sans-serif;
    59. font-size: 11px;
    60. filter:alpha(opacity=70);
    61. -moz-opacity:.70;
    62. opacity:.70;
    63. }
    64. #tooltipURL
    65. {
    66. display: none;
    67. }

    Estructura de ambos ejemplos

    1. <div id="slideShow1">
    2. <div class="slideshowLoader"></div>
    3. <div class="slideshowHolder"></div>
    4.    
    5.    
    6. <div class="slideshowLinks pagelinks"></div>
    7.  
    8. <div class="slideshowCaption slideCaption"></div>
    9. </div>
    10.  
    11.  
    12.  
    13. <div id="slideShow2"><div class="slideshowLoader"></div>
    14. <div class="slideshowHolder"></div>
    15.    
    16.    
    17. <div class="slideshowLinks pagelinks"></div>
    18. <div class="slideshowCaption slideCaption"></div>
    19. </div>
    1. <script type="text/javascript">
    2. $(document).ready(
    3.     function()
    4.     {
    5.         $.slideshow(
    6.             {
    7.                 container : 'slideShow1',
    8.                 loader: 'slideshow_files/slideshow_loader.gif',
    9.                 linksPosition: 'top',
    10.                 linksClass: 'pagelinks',
    11.                 linksSeparator : ' | ',
    12.                 fadeDuration : 400,
    13.                 activeLinkClass: 'activeSlide',
    14.                 nextslideClass: 'nextSlide',
    15.                 prevslideClass: 'prevSlide',
    16.                 captionPosition: 'bottom',
    17.                 captionClass: 'slideCaption',
    18.                 autoplay: 5,
    19.                 random: true,
    20.                 images : [
    21.                     {
    22.                         src: 'slideshow_files/Dynamic.jpg',
    23.                         caption: 'Panda Dynamic'
    24.                     },
    25.                     {
    26.                         src: 'slideshow_files/Active.jpg',
    27.                         caption: 'Panda Actual'
    28.                     },
    29.                     {
    30.                         src: 'slideshow_files/Dynamic.jpg',
    31.                         caption: 'Fiat Panda'
    32.                     },
    33.                     {
    34.                         src: 'slideshow_files/Active.jpg',
    35.                         caption: 'Panda Active'
    36.                     }
    37.                 ]
    38.             }
    39.         )
    40.         $.slideshow(
    41.             {
    42.                 container : 'slideShow2',
    43.                 loader: 'images/slideshow_loader.gif',
    44.                 linksPosition: 'top',
    45.                 linksClass: 'pagelinks',
    46.                 linksSeparator : ' | ',
    47.                 fadeDuration : 400,
    48.                 activeLinkClass: 'activeSlide',
    49.                 nextslideClass: 'nextSlide',
    50.                 prevslideClass: 'prevSlide',
    51.                 captionPosition: 'bottom',
    52.                 captionClass: 'slideCaption',
    53.                 autoplay: 5,
    54.                 images : [
    55.                     {
    56.                         src: 'slideshow_files/Dynamic.jpg',
    57.                         caption: 'Fiat Panda'
    58.                     },
    59.                     {
    60.                         src: 'slideshow_files/Dynamic.jpg',
    61.                         caption: 'Panda Active'
    62.                     },
    63.                     {
    64.                         src: 'slideshow_files/Dynamic.jpg',
    65.                         caption: 'Panda Actual'
    66.                     },
    67.                     {
    68.                         src: 'slideshow_files/Dynamic.jpgg',
    69.                         caption: 'Panda Dynamic'
    70.                     }
    71.                 ]
    72.             }
    73.         )
    74.        
    75.         $('a').ToolTip(
    76.             {
    77.                 className: 'inputsTooltip',
    78.                 position: 'mouse'
    79.             }
    80.         );
    81.     }
    82. );
    83. </script>

    Ver Demo -Mas info Interface Slideshow


Pagina 12 de 35« Portada...8910111213141516...30...Ultima »