[ un desarrollo de PATAGONIA CREATIVE ]
  • Fancy Sliding Tab Menu V2

    fancymenu

    Fancy Sliding Tab Menu V2 un bonito menú con efecto acordeón. Esta versión 2 incorpora otro nuevo efecto que se produce al dejar un rato el Mouse sobre una de las opciones, lo que hará que el menú vuelvo a su estado normal. El menú se desarrolla con script.aculo.us y como se menciona arriba tiene algunas características adicionales.

    DemoDescarga – Web Andrew Sellick

    Instalación:

    Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.

    1. <script src="js/prototype.js" type="text/javascript"></script>
    2.  
    3. <script src="js/effects.js" type="text/javascript"></script>
    4.  
    5. <script src="js/tabslide.js" type="text/javascript"></script>

    NOTA: Verificamos bien en “src” que la localización de loa script sea la correcta. ///
    En nuestra hoja de estilo agregamos:

    1. #accordion {
    2.             border: 1px solid #1F669B;
    3.             width: 600px;
    4.             height: 310px;
    5.             font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    6.             font-size: 11px;
    7.             position:relative !important;
    8.             display:block;
    9.             overflow:hidden;
    10.             background-image:url(images/aston.jpg);
    11.             background-repeat:no-repeat;
    12.             background-position:top left;
    13.     }
    14.    
    15.     h3 {
    16.             font-size: 12px;
    17.             padding: 6px 6px 4px 35px;
    18.             margin: 0;
    19.             color:#fff;
    20.             border-bottom:1px solid #333333;
    21.             cursor:pointer;
    22.             display:block;
    23.             background-image:url(images/tab-left.gif);
    24.             background-position:top left;
    25.             background-repeat:no-repeat;
    26.     }
    27.    
    28.     #visible {
    29.             background-image:url(images/tab-left-active.gif);
    30.             border-bottom:1px solid #DA1074;
    31.     }
    32.    
    33.     .panel_body {
    34.             height:150px;
    35.             background-color:#333333;
    36.             display:block;
    37.             position:relative;
    38.             color:#FFFFFF;
    39.     }
    40.    
    41.     .panel_body div {
    42.             padding:3px 5px;
    43.     }
    44.    
    45.     .panel{
    46.         bottom:0px;
    47.         margin:0px;
    48.         padding:0px;
    49.         background-image:url(images/tab-right.gif);
    50.         background-position:top right;
    51.         background-repeat:repeat-x;
    52.         background-color:#333333;
    53.     }
    54.     .wrapper{
    55.         bottom:0px;
    56.         position:absolute;
    57.     }

    Contenido:

    1. <div id="accordion">   comienzo menu acordeon
    2.  
    3. <div class="panel" id="panel1">
    4.     <h3>PANEL 1</h3>
    5.     <div id="panel1-body" class="panel_body">
    6.         <div>
    7.        Contenido del panel 1
    8.         </div>
    9.     </div>
    10. </div>
    11.  
    12. <div class="panel" id="panel2">
    13.     <h3>PANEL 2</h3>
    14.     <div id="panel2-body" class="panel_body">
    15.         <div>
    16.        Contenido del panel 2
    17.         </div>
    18.     </div> 
    19. </div>
    20.  
    21. </div>  cierre de menu acordeon

    Via themesheaven

  • SlanXP, bonito theme para Windows XP

    SlanXP es otro bonito estilo muy minimalista para cambiar completamente la apariencia de Windows XP. Posee tonos oscuros pero muy bien cuidados. Si eres de los que están constantemente cambiado la apariencia de WinXP este nuevo skin o estilo visual no podrá faltarte.

    Enlace Descarga Theme – Enlace Descarga wallapaper – Vista Previa

    Web Autor – Via styledesktop

  • Menu con rollover

    Cssplay es un bonito sitio a visitar a la hora de buscar recursos para complementar con proyectos web, Hoy he seleccionado una pequeña lista de bonitos menús que podrás usar en tus proyectos.

    DescargaDemo

    DescargaDemo

    DescargaDemo

    DescargaDemo

    DescargaDemo

    DescargaDemo

    Descarga - Demo

    DescargaDemo

  • Every Tool CS2 – Un paseo visual por las herramientas de Photoshop

    Cuando conocemos una aplicación por primera vez, y por ende somos principiantes en ella, solemos dar un vistazo general de esta aplicación, y en algunos casos ver ejemplos de los resultados que podremos llegar a conseguir con ella. Si eres principiante en Photoshop por ejemplo querrás ver para que se utilizan cada una de las herramientas. Every Tool CS2 es una interfaz realizada en flash pero que también podremos encontrarlo bajo una extensión .exe. Básicamente Every Tool CS2 te mostrara de forma visual al pasar el ratón por cada una de las herramientas, que es lo que podrás hacer con ella, que efecto genera, etc. Algo que te hará aun más fácil conocer cada una de las funciones de estas herramientas y puedas así sin duda sacar provecho lo antes posible de este tan extraordinario software que es photoshop.
    El autor ofrece el SWF o el EXE para que cualquiera pueda distribuirlo desde su propio sitio alojándolo en su propio host, y si deseas conocer el código fuente también podrás pedirlo por e-mail. EveryTool CS2 se distribuye bajo una licencia Creative Commons y puedes usarlo siempre y cuando cites la fuente de su creador.

    Enlace EveryTool CS2

    Via isopixel

  • Buscadores

    14 /09 / 2007 - 11:30 pm

    Publicado por Nikko.

    • 1
    • 634

    Social Link

    oSkope – Bonita forma de buscar en Flickr, YouTube, Amazon y Ebay

    oSkope una bonita aplicación web que nos permitirá realizar búsquedas visuales en sitios como Flickr, YouTube, Amazon y Ebay. Algo para destacar de oSkope es su diseño, que emula un escritorio repleto de papeles a la hora de mostrarnos los resultados generados por nuestras búsquedas. También podríamos compararlo con una galería de imágenes, ya que al ver los resultados, y pasar el ratón por cada una de las imágenes veremos efectos realmente muy bonitos.
    Enalce oSkope

    Via Bitelia | Digital Inspiration

  • Firefox

    14 /09 / 2007 - 10:43 pm

    Publicado por Nikko.

    • 2
    • 966

    Social Link

    Evita colgar Firefox por los enlaces PDF

    La mayoría de nosotros con esto de la utilización de pestañas incorporadas a firefox, nos hemos acostumbrado a navegar siempre en cantidad de sitios a la misma vez. Por ejemplo yo, llegue a tener 30 pestañas abiertas en un mismo momento. Imaginaran que la sobrecarga tanto de firefox y como de la conexión a Internet se torna mucha mas lenta. Pero existe un caso realmente especial, aun navegando con pocas pestañas, que es el llamado a enlaces PDF.
    Muchas veces aun navegando con pocas pestañas, al dar click en un enlace hacia un archivo PDF nuestro Firefox suele colgarse. El problema es que Firefox automáticamente para este tipo de archivos abrirá Adobe Reader para visualizarlo desde nuestro navegador. Si estos archivos son pesados, seguramente firefox se colgara.
    Si te sucede esto seguido la extensión PDF Download, puede ser una buena alternativa para solucionarlo. Básicamente PDF Download nos permitirá decidir si descargamos el archivo, lo abrimos, lo vemos como HTML, o directamente cancelamos cualquier opción, en caso de que hayas dado un click por accidente.

    Enlace PDF Download

    Via visualbeta

  • CSS

    13 /09 / 2007 - 12:01 pm

    Publicado por Nikko.

    • 2
    • 4.357

    Social Link

    CSS para alinear nuestras imágenes

    En Snipplr publican una sencilla forma para conseguir mediante CSS tener siempre nuestras imágenes bien alineadas. Visto en intenta

    1. img.centered {
    2.     display: block;
    3.     margin-left: auto;
    4.     margin-right: auto;
    5.     }
    6.  
    7. img.alignright {
    8.     padding: 4px;
    9.     margin: 0 0 2px 7px;
    10.     display: inline;
    11.     }
    12.  
    13. img.alignleft {
    14.     padding: 4px;
    15.     margin: 0 7px 2px 0;
    16.     display: inline;
    17.     }
    18.  
    19. .alignright {
    20.     float: right;
    21.     }
    22.  
    23. .alignleft {
    24.     float: left
    25.     }