[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: CSS

  • CSS

    30 /04 / 2008 - 3:51 am

    Publicado por Nikko.

    • 15
    • 3.288

    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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>

  • CSS

    28 /04 / 2008 - 3:22 am

    Publicado por Nikko.

    • 15
    • 1.615

    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

    PLAIN TEXT
    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

    PLAIN TEXT
    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>

  • CSS | Tutoriales | WordPress

    21 /04 / 2008 - 3:52 am

    Publicado por Nikko.


    Social Link

    Paginar artículos recientes en WordPress

    pagarticulos.jpg

    Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable tip para generar paginación con nuestros articulos recientes.

    Ver demo en raproject - Mas info weblogtoolscollection

    Uso:

    Agregamos a nuestro sidebar el siguiente codigo

    PLAIN TEXT
    JavaScript:
    <div id="recientespag">
    <h3>Articulos Recientes</h3>
    <ul>
    <?php
    $temp = $wp_query;
    $wp_query= null;
    $wp_query = new WP_Query();
    $wp_query->query('showposts=5'.'&paged='.$paged);
    ?>
    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
    </ul>
    <div class="navigation">
      <div class="alignleft"><?php previous_posts_link('&laquo; Otros') ?></div>
      <div class="alignright"><?php next_posts_link('Leer Mas &raquo;') ?></div>
    </div>
    <?php $wp_query = null; $wp_query = $temp;?>
    </div>

    un poco de estilo (Básicamente el estilo que muestro en la foto del post)

    PLAIN TEXT
    CSS:
    #recientespag {
        width:300px;
        background: #1B1B19;
    border: 1px solid #2A2A2A;
        float:right;
        padding:13px 15px 8px 15px;
        }
    #recientespag h3 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 2.2em;
        color: #C7C54F;
    }

    #recientespag ul {
        margin-top:-5px;
        }
       
    #recientespag li {
        border-bottom:1px solid #2A2A2A;
        list-style:none;
        padding:7px 0 7px 0px;
        }

    #recientespag a, #recent a:visited {
        color:#999831;
        font-size:0.9em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        }

  • CSS | Diseño Web | Scripts

    21 /04 / 2008 - 3:19 am

    Publicado por Nikko.

    • 15
    • 3.736

    Social Link

    Image Cross Fade Transition

    fadetransi.jpg

    En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

    Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3

    Tecnica con jQuery
    En nuestro encabezado

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

        <script type="text/javascript">
        <!--
       
        $(function () {
            // find the div.fade elements and hook the hover event
            $('div.fade').hover(function() {
                // on hovering over find the element we want to fade *up*
                var fade = $('> div', this);

                // if the element is currently being animated (to fadeOut)...
                if (fade.is(':animated')) {
                    // ...stop the current animation, and fade it to 1 from current position
                    fade.stop().fadeTo(250, 1);
                } else {
                    fade.fadeIn(250);
                }
            }, function () {
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                    fade.stop().fadeTo(3000, 0);
                } else {
                    fade.fadeOut(3000);
                }
            });
        });
       
        //-->
        </script>

    Un poco de CSS

    PLAIN TEXT
    CSS:
    .fade {
      position: absolute;
      top: 100px
      left: 100px
    }

    .fade div {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    Nuestra estructura

    PLAIN TEXT
    HTML:
    <h2> Tecnica jQuery</h2>
    <div class="fade">
      <a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
      <div>
        <a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
      </div>
    </div>

    TECNICA con CSS

    PLAIN TEXT
    CSS:
    img.fade {
      opacity: 1;
      -webkit-transition: opacity 1s linear;
    }

    img.fade:hover {
      opacity: 0;
    }

    PLAIN TEXT
    HTML:
    <h2> Tecnica CSS</h2>
          <span style="position: relative;">
        <img src="2.jpg" />
        <img
          style="position: absolute; left: 0px;"
          src="1.jpg" class="fade" />
    </span>

  • CSS | Diseño | Tutoriales

    12 /04 / 2008 - 4:28 am

    Publicado por Nikko.

    • 15
    • 7.577

    Social Link

    Personalizando listas con CSS

    listascss.jpg

    Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde solemos compartir imágenes, contar lo que estamos haciendo en un determinado momento, divertirnos con amigos, en fin. Aunque también es común, que no siempre solemos brindar desde nuestro blog los enlaces a ese tipo de redes, sean: twitter, pownce, flickr etc en las cuales participamos. Pero si deseáramos hacerlo, como una forma de que nuestros usuarios nos comiencen a conocer un poco mas, no necesariamente deberemos crear enormes banner que llamen la atención de nuestros usuarios, ya que siempre existen otras alternativas, mas simples, limpias, ordenadas y agradables, que llamara de la misma forma la atención de nuestros usuarios, pero evitando arruinar el diseño de nuestro blog que tanto trabajo no haz costado. La forma más simple, es crear listas con iconos personalizados.
    Ver Demo - Descarga Ejemplo

    PLAIN TEXT
    CSS:
    .mac {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/macosx.gif) bottom left no-repeat;
        List-style:none;
    }

    .clickideas {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/cli.gif) bottom left no-repeat;
        List-style:none;
    }
    .pownce {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/pow.gif) bottom left no-repeat;
        List-style:none;
    }
    .flickr {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/flickr.gif) bottom left no-repeat;
        List-style:none;
    }
    .wordpress {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/wordpress.gif) bottom left no-repeat;
        List-style:none;
    }
    .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;
    }
    .mail {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/mail.gif) bottom left no-repeat;
        List-style:none;
    }
    .tarjeta {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/tarjeta.gif) bottom left no-repeat;
        List-style:none;
    }
    .info {
        font-size: 11px;
        padding-left: 17px;
        margin-left: 2px;
        margin-bottom: 5px;
        background:url(images/info.gif) bottom left no-repeat;
        List-style:none;
    }

    Estructura

    PLAIN TEXT
    HTML:
    <ul>

    <li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
    <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/14412260@N08/">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>
    <li class="tarjeta">My <a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard</a></li>
    <li class="info">More <a href="http://www.xyberneticos.com/index.php/acerca-de/">Info</a></li>

    </ul>

  • CSS | Generadores | Herramientas

    12 /04 / 2008 - 2:02 am

    Publicado por Nikko.

    • 15
    • 1.388

    Social Link

    CSSTXT – Personalizar nuestros textos mediante CSS de la forma más simple

    csstext.jpg

    CSSTXT es una de esas aplicaciones que me agradan mucho, ya que suelen ser herramientas que pueden sacar de apuros, a aquellos que no están tan familiarizados con CSS, y tampoco desean meterse de lleno en este tema, pero si solucionar o personalizar alguna cosita pequeñita rápidamente y sin solicitar ayuda alguna en el proceso. Básicamente CSSTXT nos permite dar formato a nuestros párrafos o textos de la forma mas sencilla posible, tan solo deberemos ir configurando o seleccionando en las opciones la fuente a utilizar, color, espacios, etc. Para que automáticamente CSSTXT nos genere la estructura, y específicamente el código CSS para lograr la personalización deseada.

    Enlace CSSTXT

    Via accessoweb

  • CSS | Diseño Web

    30 /03 / 2008 - 5:29 am

    Publicado por Nikko.

    • 15
    • 4.392

    Social Link

    CSS Block Navigation Menu

    blockmenu.jpg

    Si algo he estado utilizando mucho últimamente para proyectos personales son los menu de navegación en bloques y en dos líneas. Ya que son simples, y a la vez el efecto en Mouseover es algo que me gusta mucho como se visualizan. A su vez, tratándose de un menu de navegación, la segunda línea siempre es una buena opción para añadir una breve descripción o un fragmento de texto adicional que acompañe el titulo principal de nuestro botón. Para mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu.
    Ver Demo - Mas info y Descarga A CSS Block Navigation Menu by vikiworks

    El fragmento de código que comparte yichi

    PLAIN TEXT
    CSS:
    #menu {margin:0;padding:0; }
    #menu ul { margin:0;padding:0; }
    #menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
    #menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
    #menu li a:hover { color:#ffc300; }
    #menu li span { font:11px arial; color:#666; margin:0; }
    #menu li span:hover {color:#999;}

    La estructura de nuestro menú

    PLAIN TEXT
    HTML:
    <div id="menu"><ul>
    <li><a href="#">Menu01<br /><span>Short desc</span></a></li>
    <li><a href="#">Menu02<br /><span>Short desc</span></a></li>
    <li><a href="#">Menu03<br /><span>Short desc</span></a></li>
    </ul></div>


Pagina 5 de 11«1234567891011»