[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: CSS

  • CSS | Generadores | Recursos Web

    28 /02 / 2009 - 6:05 pm

    Publicado por Nikko.

    • 15
    • 5.165

    Social Link

    CSS Chart Generator – Graficos de Barras en segundos

    csschat.jpg

    CSS Chart Generator, un práctico generador de gráficos de Barras en CSS. Con esta interfaz es realmente simple crear diseños gráficos en cuestión de segundos. Simplemente debemos configurar algunos parámetros como el color de las barras, tamaño, los títulos de los ejes X e Y, color de fuente, fondos y muchas características más. Una vez que hemos realizado la configuración deseada, es fácil de implementarlo a nuestro blog; Solo deberemos copiar el codigo que se nos genera y pegarlo en las secciones que deseamos mostrar nuestra grafica. Muy facil.

    uso:

    PLAIN TEXT
    PHP:
    <?php
    $chartData = file_get_contents("     ///AQUI PEGAMOS EL COGIGO Q SE NOS GENERA /////     ");
    echo $chartData;
    ?>

    Ejemplo:

    PLAIN TEXT
    PHP:
    <?php
    $chartData = file_get_contents("http://www.artviper.net/css-chart-generator/chartdraw.php?&w=350&h=250&fontsize=10&ytitle=Welcome&xtitle=CSS Chart Generator&vals=100,120,170,210,222&colors=900,e60,333,3a8ef6,cf0&bw=35&barspc=15&showvals=1&bgchart=555&fontcol=000&spenable=1&spdist=25&spcol=222");
    echo $chartData;
    ?>

  • CSS

    16 /02 / 2009 - 7:28 pm

    Publicado por Nikko.

    • 15
    • 3.853

    Social Link

    CSS 3 – Ocultar mensajes dentro de un texto

    CSS 3 posee propiedades muy interesantes, y algunas con las cuales podremos divertirnos un poquito. Hoy acabo de leer aquí, un pequeño truquito para ocultar mensajes dentro de un texto, utilizando la declaración ::selection. La idea es muy simple, al seleccionar todo el texto de un párrafo, algunas letras quedaran fuera de toda esa selección, formando en conjunto nuevos mensajes. Claro que podrán verlo, siempre y cuando no utilicen Internet Explorer.

    Ver Demo - Mas Info Hidden Messages

    PLAIN TEXT
    CSS:
    p::selection { background:#000;color:#000; }
    p::-moz-selection { background:#000;color:#000; }
    p span::selection { background:#fff;color:#000; }
    p span::-moz-selection { background:#fff;color:#000; }

    PLAIN TEXT
    HTML:
    <p> 
    Estas son las palabras que quiero ocultar.
    <span> 
    Y estas son las palabras que quiero mostrar</span></p>

  • CSS | Diseño Web | jQuery | Recursos Web

    29 /01 / 2009 - 6:37 pm

    Publicado por Nikko.

    • 15
    • 12.523

    Social Link

    Crear un Menu de navegación al estilo de Vimeo.com

    vimeo.jpg

    Si siempre te agrado el menú de navegación utilizado en Vimeo.com, hoy aprenderás a crearlos para tus proyectos personales. Posee un estilo muy llamativo y le efecto justo y necesario. Lo mas atractivo del menú, es el cuadro que despliega al situarnos en el cuadro de búsqueda, brindándonos más opciones que podremos elegir antes de realizarla las búsquedas por todo nuestro sitio.

    Ver Demo - Descarga de Codigo - Articulo Original  jankoatwarpspeed

  • CSS | jQuery | Scripts

    16 /12 / 2008 - 9:15 pm

    Publicado por Nikko.

    • 15
    • 19.253

    Social Link

    Animated Drop Down Menu – Con jQuery y Css

    menuanimado.jpg

    Animated Drop Down Menu with jQuery, un bonito menú desplegable basado en jQuery y Css. Muy práctico para ubicarlo en la sección superior de nuestro header, ya que ocupa muy poco lugar y a su vez lograra llamar la atención de los usuarios. Me recuerda mucho al menú de NETTUTS como a todos los de la red de Envato.

    Ver Demo - Descarga

    Uso
    Realizar las llamadas correspondientes desde nuestro encabezado < head>

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="jsfiles/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("ul.menu_body li:even").addClass("alt");
        $('img.menu_head').click(function () {
        $('ul.menu_body').slideToggle('medium');
        });
        $('ul.menu_body li a').mouseover(function () {
        $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_body li a').mouseout(function () {
        $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
    </script>

    agregar estilo

    PLAIN TEXT
    CSS:
    ul, li{margin:0; padding:0; list-style:none;}
    .menu_head{border:1px solid #998675;}

    .menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
    .menu_body li{background:#493e3b;}
    .menu_body li.alt{background:#362f2d;}
    .menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
    .menu_body li a:hover{padding:15px 10px; font-weight:bold;}

    nuestro Menu

    PLAIN TEXT
    HTML:
    <img src="images/navigate.png" width="184" height="32" class="menu_head" />
    <ul class="menu_body">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Support Forums</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    Mas Info Animated Drop Down Menu with jQuery,

  • CSS | Diseño Web | Herramientas

    16 /12 / 2008 - 8:29 pm

    Publicado por Nikko.

    • 15
    • 7.430

    Social Link

    Styled Menus

    stylemenu.jpg

    ¿Trabajando en sus proyectos web y sin ideas para el menu de navegación? Styled Menus podra ser una atractiva alternativa para ayudarte a diseñar tu menú. Es ni más ni menos, que un sitio que nos ofrece una amplia variedad de diseños muy profesionales realizados en Css y html y lo mejor aun, compatible con todos los navegadores web. Podrán ver cada uno de los diseños en acción y descargar todo el código de aquellos que han llamado tu atención.

    Enlace Styled Menus

    Via webintenta | webmasterlibre

  • CSS | Diseño Web

    13 /12 / 2008 - 2:21 am

    Publicado por Nikko.

    • 15
    • 2.877

    Social Link

    CSS Mastery – Ampliar tu info sobre CSS

    cssmastery.jpg

    En estos largos meses que llego posteando en xyberneticos, he notado la evolución que ha tenido cada uno de los comentarios generados por ustedes. Seguramente debido que al navegar por cantidad de blog extraordinarios que hay en la red, sus conocimientos en desarrollo web se han ampliado con el día a día. Creo que esto habla de lo rico que puede ser internet, si lo sabemos aprovechar de la manera adecuada. Es tan amplia la información, que jamás dejaremos de aprender cosas nuevas, sin importar el nivel de conocimiento que tengamos. Pero claro, si bien la información que podamos llegar a encontrar en internet, quizás logre solucionarnos más de un problema, hay libros que vale la pena tener en nuestra biblioteca para recurrir a ellos en cualquier momento. Quizás producto de las fiestas o solo por locura, este mes decidí invertir el 70% de mi sueldo en la compra de libros que puedan ayudarme a crecer profesionalmente (una buena inversión para fin de año). Y mientras compraba mis libros via internet me tope con cssmastery un libro con muchos tips sobre CSS que me agradaría recomendarles. Si tienen la posibilidad de comprarlo, no se arrepentirán, y si no pueden hacerlo, desde www.cssmastery.com podrán acceder a la descarga de muchos ejemplos prácticos, con diversos tips sobre css, que seguramente podrán serles muy útiles para ampliar un poco de info o repasar algunas cosas que hace tiempo no sueles hacer.

    Mas Info  cssmastery.com

    Descargas:

  • CSS | Diseño Web | WordPress

    30 /11 / 2008 - 11:30 pm

    Publicado por Nikko.

    • 15
    • 4.207

    Social Link

    Tips & hacks WordPress theme

    Hace tiempo que llevo marcado en navegador un artículo que deseaba comentar, Tips and hacks for creating your own WordPress theme, algunos tips básicos y avanzados que ayudaran a personalizar sus diseños basados en WordPress. Algunos de ellos, sin duda sacara algunas de sus dudas. Leer mas tips

    Hacer referencia a las imágenes de su Theme
    Hacer referencia a las imágenes en su hoja de estilos (style.css)

    PLAIN TEXT
    CSS:
    background:url(images/myimage.gif)

    Hacer referencia a las imágenes desde nuestra plantilla

    PLAIN TEXT
    HTML:
    <img src="<?php bloginfo('template_directory'); ?>/images/myimage.gif" alt="" />

    Poner el nombre de la página actual seguido por un guión.

    1.jpg

    PLAIN TEXT
    PHP:
    <?php wp_title(' - ',true,'right');?>Freelance Web Design

    Tags fantasías

    2.jpg

    Configure su lista de etiquetas.

    PLAIN TEXT
    PHP:
    <?php the_tags('<ul class="tags clearfix"><li>', '</li><li>', '</li></ul>'); ?>

    Lograr algo como

    PLAIN TEXT
    PHP:
    <ul class="tags">
        <li><a rel="tag" href="http://www.leemunroe.com/tags/cms/">CMS</a></li>
    </ul>

    A continuación, aplicar algunos estilos CSS

    PLAIN TEXT
    CSS:
    ul.tags{
    list-style: none;
    margin:0;
    }
    ul.tags li{
    display: inline;
    }
    ul.tags li{
    display:block;
    float:left;
    padding-left:12px;
    background:url(images/tag.gif) left no-repeat;
    margin:0 5px 5px 0;
    }
    ul.tags li a{
    display:block;
    float:left;
    height:22px;
    padding:3px 12px 0 0;
    background:url(images/tag.gif) right no-repeat;
    }

    Personalizar leer más

    sin-titulo-4.jpg

    Personalizar el enlace "Leer más" que separa a su post. En su index.php, donde dice:

    PLAIN TEXT
    PHP:
    <?php the_content(); ?>

    Coloque el texto que usted desea para su enlace.

    PLAIN TEXT
    PHP:
    <?php the_content('Read this article'); ?>

    Aplicar algunos estilo CSS para la misma.

    PLAIN TEXT
    CSS:
    .more-link{
    padding:10px;
    background:#3c3028;
    font-weight: bold;
    float: right;
    }

    Destacar comentarios del autor

    4.jpg

    Añadir Authcomment estilo.

    PLAIN TEXT
    CSS:
    .authcomment{ background:#fff; }

    comments.php tiene una línea como esta:

    PLAIN TEXT
    PHP:
    <li class=”<?php echo $oddcomment; ?>” id=”comment…

    Cambiar por estas lineas:

    PLAIN TEXT
    PHP:
    <li class=”<?php
    /* Only use the authcomment class from style.css if the user_id is 1 (admin) */
    if (1 == $comment->user_id)
    $oddcomment = “authcomment”;
    echo $oddcomment;
    ?>” id=”comment…

    Puedes encontrar muchos mas tips aqui: Tips and hacks for creating your own WordPress theme


Pagina 2 de 11«1234567891011»