[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: CSS

  • 20 técnicas para crear tablas mediante Ajax y CSS

    c3.gif

    En noupe podremos encontrar una bonita colección de técnicas para crear tablas mediante ajax y css. Los diseños son muy diferentes y cada una de las técnicas empleadas posee una cualidad que la hace hermosa. Seguramente esta colección te será realmente útil si estabas pensando en crear tablas para mostrar algun tipo de información o estadísticas en tu sitio. Aunque a esta colección le agregaría estas Tablas Estilo Zebra que publicamos hace tiempo atrás y que son igual de bonitas .

    Enlace 21+ Fresh Ajax CSS Tables

  • 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

  • Centrando en el centro

    ¿Qué?. Ahora lo entenderemos todos. Supongamos que necesitamos centran un div o imagen en el centro mismo de la pantalla (por ejemplo el logotipo de una web en la pantalla de presentación para el sitio) y no damos con la solución.CSS Tricks nos la da. Lo más lógico es crear una clase para esa imagen o div que queremos centrar (si es un div tenemos que darle un ancho y un alto fijo), proporcionando un porcentaje superior del 50% e izquierdo de otro 50%:

    1. .centered {
    2. position: fixed;
    3. top: 50%;
    4. left: 50%;
    5. }

    Pero esto como muchos habrán deducido no nos vale, porque lo que hace es centrar la esquina superior izquierda de la imagen o div en el centro de la pantalla, pero no el centro de la imagen en el centro de la pantalla.

    not-centered-csstrick.gif

    *Imagen de CSS Trick

    La solución es simple, añadiremos un margen superior negativo dándole como medida la mitad de la altura que tenga la imagen o div y otro margen izquierdo negativo dándole como medida la mitad de la anchura de la imagen o div:

    1. .centered {
    2. position: fixed;
    3. top: 50%;
    4. left: 50%;
    5. margin-top: -50px;
    6. margin-left: -100px;
    7. }

     

    centered-csstrick.gif

    *Imagen de CSS Trick

    ¿Solucionado? No, porque IE6 interpreta como le da la gana, así que tendremos que añadir a todo lo anterior un hack en nuestra hoja de estilos:

    1. *html .centered {
    2. position:absolute
    3. }

    Ahora sí, ya tenemos la imagen o div centrado en el centro de la pantalla para IE6, IE7 y FireFox.

    ACTUALIZACIÓN: Todo lo dicho anteriormente sigue siendo válido pero actualizamos para explicar como eliminar el hack (anieto2k nos lo comentó en los comentarios de esta misma entrada pero se perdieron debido a la mudanza del blog), solo tendremos que cambiar el valor de “position” poniéndolo en “absolute”. Así quedaría el código:

    1. .centered {
    2. position: absolute;
    3. top: 50%;
    4. left: 50%;
    5. }

    Para el segundo ejemplo sería lo mismo, cambiar la propiedad de position por absolute. Con esto evitamos el uso de ningún tipo de hack.

    Autoría original del tutorial: CSS Tricks Títuolo original: Quick CSS Trick: How To Center an Object Exactly In The Center

    Escrito por redactor invitado: Elías Notario
    Blog: diarioTHC

  • 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.798

    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.371

    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>


Pagina 9 de 12« Portada...456789101112