[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Diseño Web

  • Ribbon Rules Generator – Generador online de Ribbon superiores

    ribbonrules.jpg

    Seguramente habrás notado otra de las nuevas tendencias 2.0 que se pueden ver en diversos blog populares, básicamente unas franjas de colores en la parte superior de nuestro blog. La verdad que es un detalle realmente simple, pero admito que siempre logra captar mi atención, lo que sin duda es muy bueno, para resaltar contenido en nuestro encabezado. Y por otro lado, quedan realmente muy bonitos, pero claro, esto ya es cuestión de gustos personales. Ribbon Rules Generador, es una nueva herramienta o generador online de Ribbon “superiores” que llega desde dynamicdrive, con el prácticamente será realmente simple crear estas cintas de colores, inclusive podremos generarlas de dos formas. Una solo ingresando un color base, y dejando que Ribbon Rules Generador nos genere una cinta respetando una cierta gama, o bien ingresando de forma manual cada uno de los tonos que deseamos para nuestra franja de colores. Una vez generado nuestro Ribbon, descargamos la imagen generada, y copiamos el código CSS que pegaremos posteriormente en la hoja de estilo de nuestro blog.
    Enlace Ribbon Rules Generador

    1. body{
    2. background: white url(ribbon.gif) top left repeat-x;
    3. padding-top: 10px;
    4. }

  • Menu acordeón en javascript de tan solo 1kb

    menuacordeon1.jpg

    Michael Leigeber acaba de publicar un excelente menú acordeón horizontal animado que tiene tan sólo 1 kb. Sin duda será una muy bonita alternativa a los ya comentados anteriormente Kwicks con jQuery o Menu Kwicks con Mootools.

    Descarga – Mas info y demo Horizontal javascript accordion menu
    Uso

    1. <link rel="stylesheet" type="text/css" href="slidemenu.css" />
    2. <script type="text/javascript" src="slidemenu.js"></script>
    3.  
    4.  <script type="text/javascript">
    5.  function addLoadEvent(func) {
    6.     var oldonload = window.onload;
    7.     if (typeof window.onload != 'function') {
    8.         window.onload = func;
    9.     } else {
    10.         window.onload = function() {
    11.             if (oldonload) {
    12.                 oldonload();
    13.             }
    14.             func();
    15.         }
    16.     }
    17. }
    18. addLoadEvent(function() {
    19.     slideMenu.build('sm',200,10,10,1);
    20. });
    21. </script>

    estructura

    1. <ul id="sm" class="sm">
    2.     <li><img src="images/1.gif" alt="" /></li>
    3.     <li><img src="images/2.gif" alt="" /></li>
    4.     <li><img src="images/3.gif" alt="" /></li>
    5.     <li><img src="images/4.gif" alt="" /></li>
    6. </ul>

    Fuentes Anieto2kwebinventif

  • Context Hover

    contehoher.jpg

    Context Hover, es un agradable tips desarrollado por Kilian Valkhov, donde empleando jQuery y CSS, podremos resaltar todos nuestros enlaces similares (url externa hacia un mismo sitio) a la misma vez, cuando hagamos MouseOver sobre alguno de ellos. Un tip que puede ser muy interesante para algunas cosas.

    Ver Demo – Mas info Context Hover – Via webmasterlibre
    Uso

    1. <script type="text/javascript" src="jquery.js"></script>
    2.     <script type="text/javascript">
    3.         $(document).ready(function(){
    4.             $("a").hover(
    5.             function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");},
    6.             function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
    7.         });
    8.     </script>

  • Tag grid Lightbox – Jerarquizar u organizar nuestra nube de tags

    taggrid.jpg

    Se que a estas alturas, todos estarán familiarizados con las nubes de tags, es casi imposible no verlas en cualquier blog que visitemos (aunque puedo ser una excepción como tantas otras). Las nubes de tags, ha sido sin duda una de las mejores formas de resaltar el contenido relevante que posee un blog determinado, donde siempre se presenta de la misma forma, las fuentes mas grandes haciendo referencia a los temas mas importantes o mas buscados por los usuarios, y las mas pequeñas a los temas menos relevantes.
    Si afirmo que no es complicado deducir cuales son los temas más populares de un blog gracias a ellas, tampoco puedo negar que siempre careció de una Jerarquizacion u organización, algo que definitivamente puede ser muy bueno, si en un proyecto determinado seguimos teniendo la idea de utilizar estas nubes de etiquetas, solo que esta vez empleándolas de forma mas organizada, elegante y clara. ¿Cómo lo haremos? Utilizando como regencia este simple tutorial tag grid, que nos permitirá organizar y jerarquizar nuestras nubes de tags, inclusive presentarlas de una forma muy original, dentro de un Lightbox. Aunque lo del Lightbox puede obviarse si deseas.

    Ver Demo – Idea original Tag gris and evolve past the cloud

    Instalacion en WordPress:
    Primero descargamos los archivos necesarios, jquery.js, thickbox.js y thickbox.css. Descargar paquete de archivos. Lo segundo será realizar las llamas correspondientes a ellos desde nuestro encabezado. (copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >…..)

    1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.js"></script>
    2. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/thickbox.js"></script>
    3. <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/thickbox.css" type="text/css" media="screen,projection" />

    Ahora añadimos a nuestra hoja de estilo (style.css), lo siguiente:

    1. /* Styles for the Tag Grid */
    2. #tag_grid_container {
    3.     display: none;
    4.     margin: 0;
    5. }
    6. #tag_grid_crop {
    7.     height: 395px;
    8.     overflow: hidden;
    9. }
    10. ul#tag_grid {
    11.     list-style-type: none;
    12.     width: 600px;
    13.     height: 320px;
    14.     overflow: hidden;
    15.     margin: 20px auto 0 auto;
    16.     padding: 0 0 0 8px;
    17.     line-height: 12px;
    18. }
    19. ul#tag_grid li {
    20.     width: 94px;
    21.     height: 41px;
    22.     padding: 7px 9px;
    23.     float: left;
    24.     margin: 0 8px 8px 0;
    25. }
    26. ul#tag_grid li a {
    27.     font-size: 11px;
    28. }
    29. ul#tag_grid li.tagclass1 {
    30.     border-bottom: 1px solid #cbc8bf;
    31.     background-color: #e7e4e2;
    32. }
    33. ul#tag_grid li.tagclass1 a {
    34.     text-decoration: none;
    35.     color: #c0bcb2;
    36. }
    37. ul#tag_grid li.tagclass1 a:hover {
    38.     text-decoration: underline;
    39.     color: #000;
    40. }
    41. ul#tag_grid li.tagclass2 {
    42.     border-bottom: 1px solid #b5b0a4;
    43.     background-color: #ddd9d6;
    44. }
    45. ul#tag_grid li.tagclass2 a {
    46.     text-decoration: none;
    47.     color: #5d584d;
    48. }
    49. ul#tag_grid li.tagclass2 a:hover {
    50.     text-decoration: underline;
    51.     color: #000;
    52. }
    53. ul#tag_grid li.tagclass3 {
    54.     border-bottom: 1px solid #807b71;
    55.     background-color: #cdc4bd;
    56. }
    57. ul#tag_grid li.tagclass3 a {
    58.     text-decoration: none;
    59.     color: #5b564d;
    60. }
    61. ul#tag_grid li.tagclass3 a:hover {
    62.     text-decoration: underline;
    63.     color: #000;
    64. }
    65. ul#tag_grid li.tagclass4 {
    66.     border-bottom: 1px solid #310000;
    67.     background-color: #8c0000;
    68. }
    69. ul#tag_grid li.tagclass4 a {
    70.     text-decoration: none;
    71.     color: #e7e4e2;
    72. }
    73. ul#tag_grid li.tagclass4 a:hover {
    74.     text-decoration: underline;
    75.     color: #FFF;
    76. }
    77. ul#tag_key {
    78.     list-style-type: none;
    79.     width: 600px;
    80.     overflow: hidden;
    81.     margin: 28px auto 0 auto;
    82.     padding: 0 0 0 8px;
    83.     line-height: 12px;
    84. }
    85. ul#tag_key li {
    86.     width: 94px;
    87.     padding: 7px 9px;
    88.     float: left;
    89.     margin: 0 8px 8px 0;
    90. }
    91. #key {
    92.     border-bottom: 1px solid #e7e4e2;
    93.     background-color: #f7f6f5;
    94.     color: #cbc8bf;
    95. }
    96. #key1 {
    97.     border-bottom: 1px solid #cbc8bf;
    98.     background-color: #e7e4e2;
    99.     color: #c0bcb2;
    100. }
    101. #key2 {
    102.     border-bottom: 1px solid #b5b0a4;
    103.     background-color: #ddd9d6;
    104.     color: #5d584d;
    105. }
    106. #key3 {
    107.     border-bottom: 1px solid #807b71;
    108.     background-color: #cdc4bd;
    109.     color: #5b564d;
    110. }
    111. #key4 {
    112.     border-bottom: 1px solid #310000;
    113.     background-color: #8c0000;
    114.     color: #e7e4e2;
    115. }

    Agregamos a nuestro sidebar el contenido, básicamente nuestra nube de etiquetas, que no se mostrara (display: none) hasta que lo hagamos desde el Lightbox. Aunque puedes mostrarlo si deseas y evitar el Lightbox con tan solo eliminar “display: none” de la etiqueta “#tag_grid_container“.

    1. <!-- Hidden Tag Grid Array Code -->
    2. <div id="tag_grid_container">
    3.   <div id="tag_grid_crop">
    4.     <ul id="tag_grid">
    5.     <?php      
    6.       $tags = get_tags(array('orderby' => 'count', 'order' => 'DESC', 'number' => 25));
    7.      
    8.       foreach ($tags as $tag) {
    9.         if ($tag->count < 5) {
    10.           echo('<li class="tagclass1">');
    11.         } else if ($tag->count < 15) {
    12.           echo('<li class="tagclass2">');
    13.         } else if ($tag->count < 25) {
    14.           echo('<li class="tagclass3">');
    15.         } else {
    16.           echo('<li class="tagclass4">');
    17.         }
    18.      
    19.       echo('<a href="' . get_tag_link($tag->term_id) . '" rel="tag">' . $tag->name . "</a></li>\n");
    20.       }
    21.       ?>
    22.     </ul>
    23.     <ul id="tag_key">
    24.       <li id="key">Key:</li>
    25.       <li id="key1">1 – 4</li>
    26.       <li id="key2">5 – 15</li>
    27.       <li id="key3">16 – 25</li>
    28.       <li id="key4">> 26</li>
    29.     </ul>
    30.   </div>
    31. </div>
    32. <!-- End Tag Grid Array Code -->

    Por ultimo agregamos un enlace o botón que llamara a nuestro Tag grid Lightbox

    1. <a href="#TB_inline?height=405&width=606&inlineId=tag_grid_container" title="MI NUBE DE TAGS" class="thickbox"><img src="tag_boton.jpg" alt=""/></a>

    Mas información Tag gris and evolve past the cloud

  • Recursos: CoolVectors, Gfxfever & Foxtheme

    La verdad que hoy me he puesto contento al encontrar 3 sitios que les serán muy útiles, y donde podremos descargar cantidad de recursos de forma gratuita. Deberán registrarse de forma gratuita (lo q no es problema), aunque en algunos casos podremos descargar sin el registro previo. A continuación, los sitios recomendados de hoy.

    3.jpg

    CoolVectors, es un sitio muy interesante y de esos que todo diseñador suele disfrutar, en el encontraremos cantidad de Vectores libres para descargar y en formato tales como .Ai o .Eps. Tratándose de diseño es siempre un buen recurso, además partiendo de la base que se encuentran es vectores, siempre da lugar para modificarlos y adaptarlos a tus necesidades, sean en tamaños, tonos, y demás.

    b.jpg

    Gfxfever, es otro sitio tan útil como el anterior solo que esta vez enfocado en otro tipo de recursos gratuitos y para ser precisos, cantidad de Brushes, Patterns y fuentes. Algo que seguramente les agradara encontrar si adoran el diseño, teniendo en cuenta que siempre viene bien para trabajar sobre nuestros diseños.

    2.jpg

    Foxtheme, otro sitio que me ha agradado, esta vez enfocado en themes WordPress, Templates Joomla y Themes Drupal, sin duda las plataformas mas utilizadas hoy, lo que me da a entender, que este tipo de sitios, son de esos que serán realmente útiles para todos ustedes. Debo admitir que hay variedad de sitios de este tipo, pero en este sitio destaco mucho la calidad de los diseños que han decidió incorporar, espero terminen pensando de la misma forma al conocerlo.

  • Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools toggle effect

    sliuidexpan.jpg

    Un agradable tutorial en woork que explica como diseñar una bonita sección expansible con esquinas redondeadas en su parte superior izquierda, superior derecha, inferior izquierda, inferior derecha, utilizando CSS y a la cual le añadiremos un efecto que queda realmente bien “Efecto Toggle basado en mootools”, que nos permite básicamente esconder o volver a mostrar el contenido de dicha sección. Me pareció una forma muy practica para mostrar nuestro “about”, pero prácticamente aplicado de la forma correcta quedara bien con casi todo lo que deseemos usarlo.

    Ver mi DemoDescarga Mi demo – Ver demo Original – Ampliar info en woork

    Instalar:
    Descargamos los archivos necesarios, y realizamos el llamado correspondiente a ellos. Añadiendo dentro de nuestra etiqueta < head > el siguiente código.

    1. <script type="text/javascript" src="mootools.svn.js"></script>
    2. <script type="text/javascript">
    3. window.addEvent('domready', function(){
    4.     var mySlide = new Fx.Slide('section');
    5.    
    6.     $('toggle').addEvent('click', function(e){
    7.         e = new Event(e);
    8.         mySlide.toggle();
    9.         e.stop();
    10.     });
    11. });
    12.  
    13. </script>

    Y por ultimo nuestro html, donde añadiremos el contenido.

    1. <h2><span>
    2. <a href="#" id="toggle">My Section</a>
    3. </span></h2>
    4. <div id="section">
    5. <div>
    6. <!-- Your content here -->
    7. </div>
    8. </div>

    En base a esto, con un poco de CSS se pueden lograr cosas muy bonitas y funcionales. En el ejemplo que he modificado y dejado para que descarguen, podrán ver un poco el código por dentro que seguramente les dará un poco de ideas. De todas formas, siéntanse libres de usarlo tal como esta.

  • Menu inspirado en los efectos producidos por MooTools usando jQuery

    menumoojque.jpg

    Un agradable menú inspirado en los efectos logrados por MooTools, salvo que esta vez basado en jQuery. El tutorial es muy simple de seguir, aunque podremos descargar el ejemplo completo para estudiarlo desde casa, conocer como funciona, o para usar rápidamente en tus proyectos.

    Ver Demo – Mas info y descarga nettuts


Pagina 18 de 35« Portada...141516171819202122...30...Ultima »