[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: CSS

  • Navegación por franjas mediante CSS

    franjas.jpg

    Guardaba un post a Intenta desde hace tiempo. Una bonita técnica que han puesto a practica siguiendo este articulo “A Stripe of List Style Inspiration”. El cual consiste en lograr solo utilizando CSS un sistema de navegación horizontal mediante franjas. El resultado es realmente muy bonito y a la vez muy útil si lo piensas, basta usar un poco la imaginación para ver donde puedes llegar a implementarlo. En intenta encontraran el código utilizado y el ejemplo para descargar.

    Ver Demo – Enlace Sistema de navegación por franjas con CSS

  • CSS Builder – Un Generador de estilos CSS, muy fácil y práctico

    CSS Builder es una herramienta online que básicamente nos permite generar nuestro código CSS de forma realmente rápida. Para ello basta con seleccionar un selector cualquiera (a, a:link, a:visited, h2, h1, body, img, p…etc etc) luego simplemente deberemos incluir los estilos mediante el recuadro que encontraremos abajo. El cual posee un gran numero de opciones. Una vez que hemos conseguido lo que deseamos, basta con dar un click en el botón “Build it” y automáticamente nos generara el código css corresponderte. El cual incluiremos posteriormente en nuestra hoja de estilo. Más fácil imposible. Sin duda de CSS Builder, todos sacaremos provecho de alguna u otra forma.

    Enlace CSS Builder

    Via freakgroup

  • Diseñar nuestro menú con efecto acuarela

    Para los que están buscando siempre originalidad en sus trabajos, webdesignerwall acaba de publicar la primera parte de un tutorial muy bonito. El mismo consta en armar un menú con efecto acuarela, trabajando siempre con photoshop. Básicamente en esta primera parte se vera como lograr los efectos gráficos o artísticos que serán parte del menú. Inclusive podremos descargar el archivo PSD con el trabajo terminado.
    En la segunda parte del tutorial (que vendrá muy pronto), se enseñara el código CSS y los diferentes efectos sobre el menú.

    Enlace Design Watercolor Effect Menu

  • CSS

    19 /10 / 2007 - 10:07 pm

    Publicado por Nikko.

    • 15
    • 3.827

    Social Link

    Resaltar mensajes mediante CSS

    Seguramente habrás visto visitando algunos blog una forma bastante llamativa de resaltar ciertos mensajes. Creo que existe un plugin que nos permite hacer esto, por ejemplo el que se utiliza en el theme Redoable. Aunque ahora dejaremos el plugin de lado, para comenzar a personalizar nuestros propios mensajes llamativos. La idea es jugar con el texto y el contraste de fondo y dependiendo el mensaje a mostrar acompañarlo con un determinado icono.

    Ver DemoDescarga Ejemplos – Si desean mas iconos: FamFamFam

    Css Alerta

    1. .alerta {
    2. background: #fff6bf url(images/error.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #ffd324;
    7. border-bottom: 2px solid #ffd324;
    8. color:#000000;
    9. }
    1. <p class="alerta"> Texto Aqui</p>

     

    Css Info

    1. .info {
    2. background: #E7F9F8 url(images/info.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #B5D4FE;
    7. border-bottom: 2px solid #B5D4FE;
    8. color:#000000;
    9.  
    10. }
    1. <p class="info"> Texto Aqui</p>

     

    Css Descarga

    1. .descarga {
    2. background: #FBC895 url(images/descargared.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #F7AB75;
    7. border-bottom: 2px solid #F7AB75;
    8. color:#000000;
    9.  
    10. }
    11. .descarga a {
    12. color:#E15F13;
    13. text-decoration:none;
    14. border-bottom:1px dotted #E15F13;
    15. }
    1. <p class="descarga"> Enlace <a href="www.xyberneticos.com">Descarga</a> archivo</p>

     

    Css Descarga

    1. .descarga2 {
    2. background: #F7FABE url(images/descarga.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #DFE786;
    7. border-bottom: 2px solid #DFE786;
    8. color:#000000;
    9.  
    10. }
    11. .descarga2 a {
    12. color:#4B4B4B;
    13. text-decoration:none;
    14. border-bottom:1px dotted #444;
    15. }
    1. <p class="descarga2"> Enlace <a href="www.xyberneticos.com">Descarga</a> archivo</p>

     

    Css Importante

    1. .importante {
    2. background: #FDD1C5 url(images/importante.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #FBAB95;
    7. border-bottom: 2px solid #FBAB95;
    8. color:#000000;
    9.  
    10. }
    1. <p class="importante"> Texto aqui.</p>

     

    Css Nota

    1. .nota {
    2. background: #FAF9F7 url(images/nota.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #F2EFEA;
    7. border-bottom: 2px solid #F2EFEA;
    8. color:#000000;
    9.  
    10. }
    1. <p class="nota"> texto aqui.</p>

     

    Css Fuente

    1. .fuente {
    2. background: #F7F9E5 url(images/via.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #DBDCCD;
    7. border-bottom: 2px solid #DBDCCD;
    8. color:#000000;
    9.  
    10. }
    11. .fuente a{
    12. color:#4B4B4B;
    13. text-decoration:none;
    14. border-bottom:1px dotted #444;
    15. }
    1. <p class="fuente">Fuente <a href="http://www.xyberneticos.com/">Xyberneticos</a></p>

     

    Css Actualizacion

    1. .nuevo {
    2. background: #fff6bf url(images/new.gif) center no-repeat;
    3. background-position: 15px 50%; /* x-pos y-pos */
    4. text-align: left;
    5. padding: 5px 20px 5px 45px;
    6. border-top: 2px solid #FBC383;
    7. border-bottom: 2px solid #FBC383;
    8. color:#000000;
    9. }
    10. .nuevo a {
    11. color:#E15F13;
    12. text-decoration:none;
    13. border-bottom:1px dotted #E15F13;
    14. }
    1. <p class="nuevo">Actualizacion: En el siguiente <a href="http://www.xyberneticos.com/">post</a> bla bla bla bla</p>

  • CSS

    15 /10 / 2007 - 7:48 pm

    Publicado por Nikko.

    • 15
    • 1.375

    Social Link

    Crear listas con miniaturas (Para resaltar secciones, patrocinadores, etc)

    Una bonita técnica para aprovechar mejor nuestro sidebar, cuando necesitamos en el resaltar una sección en especial, inclusive cuando se trata de nuestros patrocinadores. La idea es crear una lista de enlaces formado por un título, una descripción corta, y la imagen miniatura. Ver demo

     

    1. dl {
    2. width: 250px;
    3. font-size: 80%;
    4. }
    5. dt {
    6. float: right;
    7. width: 190px;
    8. font-weight: bold;
    9. font-family: Georgia, "Times New Roman", Times, serif;
    10. }
    11. dd {
    12. margin: 0 0 15px 60px;
    13. color: #666666;
    14. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    15. }
    16. dd.image {
    17. float: left;
    18. margin: 0;
    19. }
    1. <dl>
    2.   <dt><a href="http://www.elserver.com/">El Server</a></dt>
    3.   <dd class="image"><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
    4.   <dd>  Hosting WEB 2.0 que sobrepasa todas las expectativas... </dd>
    5.   <dt> <a href="http://POOLDIGITAL.net">POOLDIGITAL </a> </dt>
    6.   <dd class="image"><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
    7.   <dd>Empresa de diseño web. Brasil. </dd>
    8.   <dt>&nbsp;</dt>
    9.   <dt><a href="http://www.spiga.com.mx/">SPIGA </a></dt>
    10.   <dd class="image"><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
    11.   <dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>
    12. </dl>

  • CSS | Javascript | Scripts

    08 /10 / 2007 - 5:34 pm

    Publicado por Nikko.

    • 15
    • 6.910

    Social Link

    TableCloth: Bonitas Tablas mediante css y javascript

    TableCloth una pequeña librería javascript acompañada de un poco de css, que nos permitirá crear tablas de contenido con bonito estilo, efectos agradables, sumamente personalizable, y sobre todo sumamente fácil de implementar. Demo – Via kabytes

    • Descargar el archivo, descomprimir y alojar toda la carpeta de nombre “tablecloth” que contiene los archivos tablecloth.css y tablecloth.js en la raíz tu sitio.

    Hacemos la llamada a los archivos, incluyendo dentro de nuestra etiqueta < head > el siguiente código.

    1. <link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
    2. <script type="text/javascript" src="tablecloth/tablecloth.js"></script>

    1. <table cellspacing="0" cellpadding="0">
    2.             <tr>
    3.                 <th>Title</th>
    4.                 <th>Title</th>
    5.                 <th>Title</th>
    6.                 <th>Title</th>
    7.             </tr>
    8.             <tr>
    9.                 <td>Data</td>
    10.                 <td>Data</td>
    11.                 <td>Data</td>
    12.                 <td>Data</td>
    13.             </tr>          
    14.                            
    15.         </table>

    1. <table cellspacing="0" cellpadding="0">
    2.             <tr>
    3.                 <th>Title</th>
    4.                 <th>Title</th>
    5.                 <th>Title</th>
    6.                 <th>Title</th>
    7.                 <th>Title</th>
    8.                 <th>Title</th>
    9.                 <th>Title</th>
    10.                 <th>Title</th>
    11.                 <th>Title</th>
    12.                 <th>Title</th>
    13.                 <th>Title</th>
    14.                 <th>Title</th>                             
    15.             </tr>
    16.             <tr>
    17.                 <td>Data</td>
    18.                 <td>Data</td>
    19.                 <td>Data</td>
    20.                 <td>Data</td>
    21.                 <td>Data</td>
    22.                 <td>Data</td>
    23.                 <td>Data</td>
    24.                 <td>Data</td>
    25.                 <td>Data</td>
    26.                 <td>Data</td>
    27.                 <td>Data</td>
    28.                 <td>Data</td>                              
    29.                                                                                            
    30.         </table>

    1. <table cellspacing="0" cellpadding="0">
    2.             <tr>
    3.                 <th>Title</th>
    4.                 <td>Data</td>
    5.                 <td>Data</td>
    6.                 <td>Data</td>
    7.             </tr>
    8.             <tr>
    9.                 <th>Title</th>
    10.                 <td>Data</td>
    11.                 <td>Data</td>
    12.                 <td>Data</td>
    13.             </tr>          
    14.             <tr>
    15.                 <th>Title</th>
    16.                 <td>Data</td>
    17.                 <td>Data</td>
    18.                 <td>Data</td>
    19.             </tr>          
    20.                                                                                                    
    21.         </table>

    1. <table cellspacing="0" cellpadding="0">
    2.             <tr>
    3.                 <td>&nbsp;</td>
    4.                 <th>Title</th>
    5.                 <th>Title</th>
    6.                 <th>Title</th>
    7.             </tr>
    8.             <tr>
    9.                 <th>Title</th>
    10.                 <td>Data</td>
    11.                 <td>Data</td>
    12.                 <td>Data</td>
    13.             </tr>
    14.             <tr>
    15.                 <th>Title</th>
    16.                 <td>Data</td>
    17.                 <td>Data</td>
    18.                 <td>Data</td>
    19.             </tr>          
    20.                                                                                                    
    21.         </table>

  • CSS

    07 /10 / 2007 - 5:33 am

    Publicado por Nikko.

    • 15
    • 8.542

    Social Link

    Pop-up en imágenes mediante CSS

    Cool CSS Image Pop-up, otra técnica sencilla para lograr el efecto Pop-up en imágenes. Seguramente recordaran el post donde explicamos una. La idea es muy sencilla, dar el efecto Pop-up que habitualmente podemos llegar a ver mediante Javascript pero utilizando únicamente css. Utilizaremos una imagen miniatura y al pasar el Mouse sobre ella (mouse over), hará detonar el efecto Pop-up (imagen ampliada)
    Podrán ver un demo aquí.

    1. #pic {
    2.     background-color: #FFFFFF;
    3.     left: 10px;
    4.     position: relative;
    5.     top: 10px;
    6.     width: 135px;
    7. }
    8.  
    9. #pic a .large {
    10.     border: 0px;
    11.     display: block;
    12.     height: 1px;
    13.     left: -1px;
    14.     position: absolute;
    15.     top: -1px;
    16.     width: 1px;
    17. }
    18.  
    19. #pic a img {
    20.     border: 0;
    21. }
    22.  
    23. #pic a.p1, #pic a.p1:visited {
    24.     background: #FFFFFF;
    25.     border: 1px solid #000000;
    26.     display: block;
    27.     height: 90px;
    28.     left: 0;
    29.     text-decoration: none;
    30.     top: 0;
    31.     width: 135px;
    32. }
    33.  
    34. #pic a.p1:hover {
    35.     background-color: #8C97A3;
    36.     color: #000000;
    37.     text-decoration: none;
    38. }
    39.  
    40. #pic a.p1:hover .large {
    41.     border: 1px solid #000000;
    42.     display: block;
    43.     height: 233px;
    44.     left: 150px;
    45.     position: absolute;
    46.     top: -60px;
    47.     width: 300px;
    48. }
    1. <p id="pic">
    2. <a class="p1" href="#" title="miniatura">
    3. <img src="imagen/miniatura.jpg" title="miniatura">
    4. <img src="imagen/grande.jpg" class="large"></a>
    5. </p>


Pagina 9 de 11« Portada...34567891011