[ un desarrollo de PATAGONIA CREATIVE ]
  • Color | Herramientas

    05 /05 / 2008 - 3:47 am

    Publicado por Nikko.

    • 2
    • 1.561

    Social Link

    Color palette – Aplicar diferentes grados de opacidad a tus colores bases

    colorpaletesteee.jpg

    Color palette, una simple Herramienta online que nos permite crear una paleta de colores con 10 tonos bases, y a partir de ellos jugar con diversos grados de opacidad. La fila superior emula la opacidad en un fondo blanco, y la siguiente sobre un fondo negro.
    La opacidad en la fila superior va desde un valor 100% opaco, al 75%, 50%, 25% hasta llegar al 10%. La fila inferior se inicia en un 85% en lugar del 100%, llegando hasta un tono realmente oscuro. Podremos configurar cada opción como deseemos, o añadir el color base que más nos agrade. Pero si aun no se deciden por cual, basta jugar con el botón “Random Base” para que nos vaya generando diferentes paletas de colores de forma automática. Además, podremos obtener un Link permanente a la gamas que hemos creado o mas nos ha gustado.

    Enlace Color palette

  • CSS | Diseño Web | Scripts

    02 /05 / 2008 - 3:16 am

    Publicado por Nikko.

    • 3
    • 6.909

    Social Link

    Simple slide panel – Practica forma para añadir información adicional

    slidepanel.jpg

    Simple slide panel, es otra practica forma para añadir contenido o información adicional sobre nuestra empresa, nosotros o sobre los perfiles en los cuales participamos en Internet. Posee un efecto simple pero muy atractivo, y lo mejor es que siempre llama la atención de alguna forma. Seguramente habrán visto varios slide de este tipo, donde la idea es hacer clic sobre un vinculo (boton) que accionara nuestro slide, mostrando todo el contenido en el, con un efecto de desplazamiento (arriba / abajo) similar al de una persiana de oficina.

    Ver Demo - Descarga ejemplo - Referencia webdesignerwall
    Instalación:
    Descargamos jquery y realizamos como de costumbre la llamada a nuestra librería de nuestro encabezado (Head)

    JavaScript:
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

        $(".btn-slide").click(function(){
            $("#panel").slideToggle("slow");
            $(this).toggleClass("active"); return false;
        });
       
        
    });
    </script>

    Añadimos un poco de estilo (style.css)

    CSS:
    /**********************************************

    *   Estilos para nuestro panel superior          *

    ***********************************************/
    #panel {
        background: #754c24 url(images/panel.jpg) repeat;
        height: 250px;
        display: none;
    }

    .slide {
        margin: 0;
        padding: 0;
        border-top: solid 4px #422410;
        background: url(images/btn-slide.gif) no-repeat center top;
    }
    .btn-slide {
        background: url(images/white-arrow.gif) no-repeat right -50px;
        text-align: center;
        width: 144px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
    }
    .active {
        background-position: right 12px;
    }

    /**********************************************

    *  Estilos para nuestra foto            *

    ***********************************************/

    #profileImage  { float:left; width:105px; margin: 30px 15px 15px 15px;}
    #profileImage img { border: 2px solid #422410; }
    div#profileText   { float:right; width:350px; color:#fff;}
    div#profileText   a { color:#F68A1A;}

    /**********************************************

    *  Estilos para nuestros Iconos de perfiles   *

    ***********************************************/
    .blog {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/blog.gif) bottom left no-repeat;
        List-style:none;
    }
    ..... etc

    Contenido

    HTML:
    <div id="panel">

            <div id="profileImage">
                <img src="images/nikko.jpg" alt="">
            </div>   
        <div id="profileText">
                    <h2>About</h2>
     Hola mi nombre es Nikko, xyberneticos es mi blog personal. Vivo en argentina, actualmente desarrollador Freelance. 
            <img src="images/perfiles.gif" alt="">
        <ul>
                        <li class="wordpress">Powered by <a href="http://www.wordpress.org">WordPress</a></li>
                    <li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>

            <li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
            <li class="flickr">My Photos <a href="http://www.flickr.com/photos/xyberneticos/">Flickr</a></li>
            <li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
            <li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
                
            </ul>
       
        </div>

  • CSS

    30 /04 / 2008 - 3:51 am

    Publicado por Nikko.

    • 1
    • 3.287

    Social Link

    CSS Tagcloud – Simulando Tags con CSS

    CSS-Tagcloud Una simple técnica para simular mediante CSS, los tradicionales estilos que solemos ver con nuestros Tags. Algo que será útil, para resaltar ciertos enlaces o categorías por nuestra cuenta, o para aquellos que no necesariamente se encuentren utilizando WordPress y desean dar algún estilo similar en sus web.

    Ver Demo - Descarga de ejemplos - Idea Original web-spirit

    estilo1.jpg

    Estilo 1

    CSS:
    #tagcloud{ background: #303030;     font-family:Tahoma,Verdana,sans-serif;  padding:10px 5px 10px 5px;}
     
    .tag1{ font-size:1em; color:#555555; line-height:1em; }
    .tag2{ font-size:1.2em; color:#606060; line-height:1em; }
    .tag3{ font-size:1.4em; color:#808080; line-height:1em; }
     
    #tagcloud a{ text-decoration:none; }
    #tagcloud a:hover{ text-decoration:underline; }

    Estructura

    HTML:
    <div id="tagcloud">
    <a href="#"  class="tag1">Almacenamiento</a>
    <a href="#"  class="tag3">Capturas Web</a>
    <a href="#"  class="tag2">Color</a>
    <a href="#" class="tag1">CSS</a>
    <a href="#"  class="tag2">diseno</a>
    <a href="#"  class="tag3">diseno Web</a>
    .....etc etc etc
    </div>

    estilo2.jpg

    Estilo 2

    CSS:
    #tagcloud2{ background:#000000; font-family:arial,Verdana,sans-serif; width:200px; text-align:center; }
     
    #tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
    #tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
    #tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }
     
    #tagcloud2 a{ text-decoration:none; }
    #tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

    Estructura

    HTML:
    <div id="tagcloud2">
    <a href="#"  class="tag1">Almacenamiento</a>
    <a href="#"  class="tag3">Capturas Web</a>
    <a href="#"  class="tag2">Color</a>
    <a href="#" class="tag1">CSS</a>
    <a href="#"  class="tag2">diseno</a>
    <a href="#"  class="tag3">diseno Web</a>
    .....etc etc etc
    </div>

    estilo3.jpg

    Estilo 3

    CSS:
    #tagcloud3{ width:180px;    font-family:arial,Verdana,sans-serif; padding:10px; background:#303030; }
     
    #tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
    #tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
    #tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }
     
    #tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
    #tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }

    Estructura

    HTML:
    <div id="tagcloud3">
    <a href="#"  class="tag1">Almacenamiento</a>
    <a href="#"  class="tag3">Capturas Web</a>
    <a href="#"  class="tag2">Color</a>
    <a href="#" class="tag1">CSS</a>
    <a href="#"  class="tag2">diseno</a>
    <a href="#"  class="tag3">diseno Web</a>
    .....etc etc etc
    </div>

  • Parallax Gallery – Extraordinaria galería en flash para tus proyectos

    parallax.jpg

    En estos meses, debo decir que he visto galería de imágenes realizadas en flash muy originales, inclusive gran parte de ellas muy simple de utilizar y fáciles de adaptar a nuestros proyectos. Debo admitir que todo lo relacionado a animaciones en flash no es mi punto fuerte, si tuviera que realizar un trabajo muy complejo a pedido donde todo se basara únicamente en flash y la idea sea lograr efectos y animaciones muy originales, dudo que pueda lograrlo, supongo que es por eso siempre suelo tener recursos que me ayuden a tener una base al trabajar, o en el mejor de los casos trabajar en conjunto con alguien experto en esta área que se dediqué de lleno a trabajar en elementos flash. Aunque esto no quiere decir, que no suela animarme a jugar con algunas aplicaciones y crear bonitas animaciones por mi cuenta. Pero repito, no es mi punto fuerte.
    Hoy acabo de ver en Webdesignerwall un bonito tutorial y una buena alternativa para montar nuestras galerías de imágenes en flash con desplazamientos con una originalidad extraordinaria. Parallax Gallery utiliza en gran mayoría animación 2D donde las imágenes del fondo y las imágenes del primer plano suelen desplazarse a diferente velocidad. Con esto se crea una ilusión de profundidad, donde las imágenes del fondo se mueven más lento que las imágenes del primer plano. A esto sumarle, que al hacer clic sobre una sección o foto a mostrar, se genera una especie de Lightbox mostrando en mayor resolución la imagen que contiene ese elemento. Parallax Gallery se puede descargar de forma libre, inclusive el pack posee el trabajo final, y los archivos necesarios para modificar cuanto desees de esta galería. Inclusive en el post original, podrás aprender desde cero como crear algo similar, algo que será muy útil si realmente deseas aprender a crear este tipo de trabajos por tu cuenta, y te lleve a lograr otro tipo de resultados.

    Ver DEMO - Mas Info y Descarga Parallax Gallery

  • CSS

    28 /04 / 2008 - 3:22 am

    Publicado por Nikko.

    • 3
    • 1.612

    Social Link

    Definir listas para crear una secuencia de preguntas y respuestas

    questioncss.jpg

    En cssnewbie encuentro un tips muy simple para definir listas que podremos utilizar al crear una secuencia de preguntas y respuestas. Aunque no necesariamente deben ser solo utilizadas para este fin, ya que es muy simple adaptarlos a otro tipo de ideas, pero si será muy útil para comenzar con una base bien ordenada que nos lleve a conseguir otro tipo de resultados para un proyecto determinado.

    Ver Demo - Descarga ejemplos - Info cssnewbie - Via css-tricks
    Como dar estilo

    CSS:
    #preguntas {
        width: 450px;
        margin: 15px auto;
    }
    dl {
        margin: 20px;
        border-left: 1px solid #999;
        padding-left: 10px;
        }
        dt {
            font-size: 2.0em;
            margin-bottom: 10px;
            }
            dt span {
                font-style: italic;
                font-size: 1.3em;
            }
        dd {
            font-size: 1.4em;
            margin-left: 20px;
            margin-bottom: 10px;
        }

    Estructura

    HTML:
    <div id="preguntas">
           
           
            <dl>
                <dt><span>Pregunta 2:</span>Por que las personas aprietan el control remoto con mas fuerza, cuando se esta quedando sin pilas? </dt>
                <dd>Esta es unan pregunta un poco comica, pero admitan que todos terminamos haceindo lo mismo.</dd>
            </dl>
           
           
        </div>

  • Diseño | Patterns

    25 /04 / 2008 - 12:38 pm

    Publicado por Nikko.

    • 3
    • 1.441

    Social Link

    Jeans textures by jay-han

    jeantxt.jpg

    jay-han ha publicado en unos de sus post, una bonita recopilación de imágenes Escaneadas de alta calidad sobre "Texturas Jean", en diversos colores y estilos. Se los recomiendo, este tipo de texturas, en proyectos personales suelen quedar realmente hermosos si sabemos como combinarlos.

    Enlace Jeans textures free download

  • Iconos

    25 /04 / 2008 - 12:19 pm

    Publicado por Nikko.

    • 1
    • 1.064

    Social Link

    Iconos by icojoy

    Otros agradables set de Mini Iconos desde icojoy, totalmente gratuitos para cualquier tipo de proyectos, y los podremos encontrar en 6 diferentes formatos, Ico , Icns, Tif, Gif, Bmp y Png.

    set3.jpg

    Free web development icons #3 - Descarga
    26 Iconos
    Tamaño: 16x16
    Formatos: .ico, icns, tif, gif, bmp, png
    Tonos: Color, grises

    set2.jpg

    Free web development icons #2 - Descarga
    32 Iconos
    Tamaño: 16x16
    Formatos: .ico, icns, tif, gif, bmp, png
    Tonos: grises