[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: CSS

  • CSS

    21 /02 / 2008 - 3:45 am

    Publicado por Nikko.

    • 15
    • 4.016

    Social Link

    Cambiar el tamaño de las Miniaturas usando la propiedad Css Overflow

    using-overflow.jpg

    Una bonita técnica destinada a controlar el tamaño de las miniaturas que aparecen en nuestra Web usando la propiedad “overflow”. Básicamente, podremos crear miniaturas, pero el truco esta, en que lo haremos sin cambiar el tamaño de la imagen real, sino más bien, cambiando el tamaño de la zona Visible de la misma.

    Ver demos – Mas info y descarga de ejemplos cssglobe

    1. /* single thumbnail */
    2.  
    3.     p.thumb{
    4.         float:left;
    5.         margin:.5em 0;
    6.         margin-right:10px;
    7.         border:1px solid #999; 
    8.         padding:2px;
    9.     }
    10.     p.thumb a{
    11.         display:block;
    12.         float:left;
    13.         width:100px;
    14.         height:100px;
    15.         line-height:100px;
    16.         overflow:hidden;
    17.         position:relative;
    18.         z-index:1; 
    19.     }  
    20.     p.thumb a img{
    21.         float:left;
    22.         position:absolute;
    23.         top:-20px;
    24.         left:-50px;
    25.     }
    26.    
    27.     /* mouse over */
    28.    
    29.         p.thumb a:hover{
    30.             overflow:visible;
    31.             z-index:1000;
    32.             border:none;       
    33.         }
    34.         p.thumb a:hover img{
    35.             border:1px solid #999; 
    36.             background:#fff;
    37.             padding:2px;           
    38.         }  
    39.    
    40.     /* // mouse over */
    41.  
    42. /* // single thumbnail */

    Uso

    1. <p class="thumb"><a href="http://xyberneticos.com/"><img src="image.jpg" /></a></p>

    Mas info y descarga de ejemplos Create Resizing Thumbnails Using Overflow Property

  • CSS Type Set – Dar formato a tus textos mediante CSS sin saber de CSS

    csstypeset.jpg

    CSS Type Set es una practica herramienta online que nos permitirá dar formato a nuestros textos mediante CSS y sin necesidad de saber demasiado de el. CSS Type Set es realmente muy sencillo, tan solo basta introducir un fragmento de texto y posterior mente comenzar a reconfigurar los parámetros. Por ejemplo: Con que tipo de fuente nos agradaría escribir nuestro texto, el tamaño, espacios entre líneas, cursivas, color de fondo, etc. A medida que vamos utilizando los controles inferiores para configurar todo, veremos en un recuadro también el código CSS generado, listo para ser usado en nuestras Web.

    Enlace CSS Type Set

    Via diariothc

  • CSS | Diseño Web

    17 /02 / 2008 - 2:03 pm

    Publicado por Nikko.

    • 15
    • 3.688

    Social Link

    Clearfix CSS Hack

    .clearfix es un hack CSS que permite que los elementos flotantes dentro de un Div se adapten lo mejor posible o con mejores resultados.

    Resultado

    1. /* slightly enhanced, universal clearfix hack */
    2. .clearfix:after {
    3.         visibility: hidden;
    4.         display: block;
    5.         font-size: 0;
    6.         content: " ";
    7.         clear: both;
    8.         height: 0;
    9.  }
    10.  
    11. .clearfix {
    12.         display: inline-block;
    13.  }
    14.  
    15. /* start commented backslash hack \*/
    16.  
    17. * html .clearfix {
    18.         height: 1%;
    19.  }
    20.  
    21. .clearfix {
    22.         display: block;
    23. }
    24. /* close commented backslash hack */

    Via rudeworks

  • CSS Sandbox – Practica forma de aumentar tus conocimientos en CSS

    csssandbox.jpg

    Siempre que comenzamos a aprender algo nuevo suele resultar un poco complejo, otras lo hacemos más complejo de lo que verdaderamente es, o en el peor de los casos simplemente solemos olvidarnos de algunos términos hasta adaptarlos por completo hasta a nuestro lenguaje cotidiano. Cuando se trata de CSS sucede exactamente lo mismo. Cuando comenzamos con el por primera vez solemos olvidarnos de que es lo que debíamos escribir para lograr fuentes en negritas (font-weight: bold), crear líneas discontinuas (dashed), bordes con una seguidilla de puntos (dotted), como justificar todo nuestro texto en un div determinado (text-align:justify), etc.
    Es aquí cuando herramientas como CSS Sandbox pueden ser realmente útiles, es ni más ni menos que una guía de referencia rápida (quickref) para CSS.

    • Nos permite ver de manera online las principales características CSS.
    • Nos sirve para ver la diferencia en aspecto que existe entre algunos navegadores.
    • Sirve para probar ideas rápidamente, sin necesidad de escribir codigo alguno
    • Es simple, no tiene botones ni necesita configuración.
    • Es rápida, muestra al instante cada cambio generado en las propiedades después de un click con nuestro ratón
    • Es compatible, con safari, Firefox, y funciona bien en IE 6.

    Y lo mejor aun, es que a medida que vamos realizando los cambios en nuestra caja, agregando bordes, colores y demás, todo nuestro código será guardado y podremos obtenerlo dando un click en el botón CODE que veremos en el margen inferior derecho.

    Enlace CSS Sandbox

    Via kabytes

  • CSS | Diseño Web

    12 /02 / 2008 - 4:59 am

    Publicado por Nikko.

    • 15
    • 4.112

    Social Link

    Crear listas en múltiples columnas con CSS

    listasmultiples.jpg

    Estas semanas mientras decidía hacia donde llevaría el diseño de un proyecto en el cual me encuentro trabajando. Y luego de dibujar un poco, probar algunas ideas para ver como quedarían en el diseño en si, en fin, he decido aprovechar un poco mas los espacios, que si bien el sidebar es por lo general la sección donde mostramos cantidad de información importante (publicidad, suscripción a feed, categorías, tags, etc) no estaría nada mal comenzar a aprovechar otros espacios, que por lo menos yo, a veces suelo dejar un poco de lado. Entonces decidí concentrarme un poco mas en mi encabezado y pie de pagina. Y de que manera podía aprovechar esos espacios añadiendo cierta información que sea importante para nuestros usuarios y a la vez den al diseño una personalización mas agradable. Con el cuidado por supuesto, de no sobrecargar estas secciones y no eliminar el sidebar por completo. En mi proyecto, mi encabezado se encuentra prácticamente armado, e considerado que la información que añadí es de importancia, útil, y no ha quedado para nada sobrecargado (El logo, un poco de publicidad, el menú, un formulario de suscripción y una que otra cosita muy pequeñita y bien ordenado). Pero llego el momento de comenzar a pensar un poco mas en el pie de pagina. Ideas han surgido muchas, y las formas de organizar cada uno de los elementos también. Pero entre tantas de las cosas que planeo agregar, opte por agregar los tradicionales Tags o Categorías. Que si bien es una información que solemos agregar en nuestro sidebar, tranquilamente podríamos incluirlas en nuestro pie de pagina con la demás información que tenemos pensado agregar. Obvio que esto es cuestión de gustos, pero de todas formas considero que repetir una sección, en este caso nuestras categorías en nuestro sidebar y luego en nuestro pie de pagina, no estaría nada mal, siempre y cuando lo hagamos sin cargar mucho el diseño y de forma ordenada. Después de todo hará que cada usuario indague aun más sobre cada una de nuestras categorías.
    La idea es entonces abarcar todo el ancho de nuestro pie de pagina creando listas con nuestros enlaces ordenados en múltiples columnas. El resultado que se obtiene, es algo que por lo menos a mí, me agrada mucho.

    Podran ver un demo aqui.
    ¿Como lo adaptamos a wordpress?
    Es simple, lo primeros que haremos será armar nuestras estructura. La que corresponde a nuestras categorías.

    1. <div id="tags">
    2. <ul>
    3. <?php wp_list_cats('sort_column=name&optioncount=1'); ?>
    4. </ul></div>

    y lo segundo, darle estilo mediante CSS a esa estructura

    1. #tags ul {
    2.     width: 960px;
    3.     list-style-type:none;
    4. }
    5. #tags li {
    6.     width:130px;
    7.     margin:15px 0 0 0;
    8.     padding:0 10px 0 0;
    9.     line-height:15px;
    10.     float:left;
    11. color: #e1e1e1;
    12. }
    13. #tags li a {
    14. color:#878787;
    15.     border-bottom:1px dotted #878787;
    16. text-decoration:none;
    17. background: url(images/tag.gif) 0 1px no-repeat;
    18. padding-left:20px;
    19. margin:5px 0 5px 5px;
    20.  
    21. }
    22. #tags li a:hover {
    23. color:#ccc;
    24.     border-bottom:1px solid #CF5607;
    25. text-decoration:none;
    26.  
    27. }

    Y siguiendo con este tema, acabo de encontrar otra buena opción, que es también muy agradable, solo que esta vez creando segmentos, y donde estos segmentos poseen estas listas separadas que se forman dentro de un div contenedor.
    Podran ver Demo Aqui

    1. li {
    2.     margin:15px 0 0 0;
    3.     padding:0 10px 0 0;
    4.     line-height:15px;
    5. }
    6. .licol {
    7.     float: left;
    8.     width: 200px;
    9. }

    y la estructura

    1. <div class="licol">
    2.   <ol>
    3.     <li>Creación de listas multicolumn</li>
    4.     <li>Creación de listas multicolumn</li>
    5.     <li>Creación de listas multicolumn</li>
    6.     <li>Creación de listas multicolumn</li>
    7.   </ol>
    8. </div>
    9. <div class="licol">
    10.   <ol start="5">
    11.    <li>Creación de listas multicolumn</li>
    12.     <li>Creación de listas multicolumn</li>
    13.     <li>Creación de listas multicolumn</li>
    14.     <li>Creación de listas multicolumn</li>
    15.   </ol>
    16. </div>
    17. <div class="licol">
    18.   <ol start="9">
    19.    <li>Creación de listas multicolumn</li>
    20.     <li>Creación de listas multicolumn</li>
    21.     <li>Creación de listas multicolumn</li>
    22.     <li>Creación de listas multicolumn</li>
    23.   </ol>
    24. </div>
    25. <div class="licol">
    26.   <ol start="13">
    27.     <li>Creación de listas multicolumn</li>
    28.     <li>Creación de listas multicolumn</li>
    29.     <li>Creación de listas multicolumn</li>
    30.     <li>Creación de listas multicolumn</li>
    31.   </ol>
    32. </div>

  • Grid Designer

    grid-designer.jpg

    Grid Designer sera un sitio util para desarrolladores, sobre todo cuando estemos trabajando sobre un diseño web y tengamos en mente agregar en una sección en especial (pie de pagina por ejemplo) varias columnas donde tenemos pensado mostrar cierta información extra, publicad, o lo que fuese. Básicamente Grid Designer nos ayuda a calcular o a ajustar varias columnas en el diseño de nuestra web con respecto a nuestras fuentes. Podremos configurar varias cosas en Grid Designer, cuantas columnas tenemos pensado agregar, el margen, el ancho, el tipo de fuente a utilizar, etc. Una vez que logramos básicamente lo que deseamos, podremos exportar el codigo CSS utilizado para adaptarlo a nuestros proyectos.

    Enlace Grid Designer

  • CSS

    03 /02 / 2008 - 3:42 am

    Publicado por Nikko.


    Social Link

    Personalizando el color de selección de texto con CSS

    cssseleccion.jpg

    Si estas pensando siempre como personalizar aun mas tu Web, seria bueno comentar esta nueva declaración que podremos usar hoy en día con CSS3, la misma es “::selection que básicamente nos permite anular el color de selección de texto que usa un navegador (al seleccionar texto de nuestra web), por otro completamente a nuestra elección. Por el momento este truco es soportado por Safari y Firefox (era de imaginar), veremos que sucede luego con IE.Ver Demos – Mas info css-tricks

    Uso

    Nuestro CSS (podremos crear todas las clases que deseemos, con diferentes tonos)

    1. p.yellow::selection {
    2.     background: #fff2a8; /* Safari */
    3. }
    4. p.yellow::-moz-selection {
    5.     background: #fff2a8; /* Firefox */
    6. }

    Ahora simplemente agregamos al clase a nuestro contenido

    1. <p class="yellow"> Contenido……………………   </p>


Pagina 7 de 12« Portada...34567891011...Ultima »