1.043 views

Como eliminar el margen izquierdo de las listas
  • con css
  • enero 07, 10 by Gerald | Puesto en Tutorial

    El siguiente ejemplo es bien básico y suele pasar que es una pregunta muy recurrente entre los maqueteadores al momento de trabajar con listas. Pues por defecto siempre se añade un margen que a no se ve bien en nuestros diseños.
    Por ejemplo:

    Una lista ordenada

    • Uno
    • Dos
    • Tres

    El código css para quitarle el margen izquierdo sería


    ul {
    margin: 0;
    padding: 0;
    }

    Esto es muy básico pero espero les sirva a muchos.

    ¡Saludos!


    Tambien te puede interesar

    Tags: ,

    1.037 views

    Como aumentar o reducir el tamaño de los videos de Youtube con CSS

    diciembre 10, 08 by Gerald | Puesto en Design, Herramientas

    Resulta ser que ando metido en un proyecto de un portal de rock y al insertar videos de youtube en la página, el tamaño por default de este malogra el diseño de la página.
    La solución a esto fue usando un tip muy útil de CSS para aumentar o reducir, manejar las dimensiones del reproductor de videos de YouTube, a la hora de publicarlo en nuestras webs.

    El CSS es el siguiente:

    object, embed{
    width:140px;
    height:119px;
    }

    Los valores (píxeles) dependen del diseño de cada sitio.

    Saludos!!


    Tambien te puede interesar

    Tags: ,

    893 views

    Hojas de ayuda o referencia de PHP, HTML y CSS

    octubre 22, 08 by Gerald | Puesto en Design, Programación

    Revisando mis feeds veo que en Gosquared han publicado 3 excelentes y completas hojas de ayuda o referencial ideal para todos aquellos que nos dedicamos al desarrollo web.
    Estas hojas se tratan de un conjunto de 3 cheatsheet, una de CSS, otra de HTML y la última de PHP. Estas hojas de ayuda o referencia son unos pequeños documentos en donde encontramos de forma muy resumida los comandos y funciones más importantes para el desarrollo web en general.

    [ Enlace: GoSquared ]
    [ Descarga: PHP | HTML | CSS ]
    [ Vía: Adictos a la Red ]


    Tambien te puede interesar

    Tags: , , ,

    1.868 views

    Chuleta sobre tipografía y sus códigos CSS

    octubre 07, 08 by Gerald | Puesto en Design

    En CosasSencillas acabo de encontrar esta chuleta u hoja de referencia sobre tipografía y sus códigos CSS. Está dividida en tres partes: propiedades CSS para la tipografía, las diferentes tipografías web disponibles en plan general, y los valores y conversiones de las unidades tipográficas.

    Estas chuletas u hojas de referencia, resultan ser bien útiles y se convierten en recursos indispensables si estás empezando en este mundillo del Css.

    Saludos!!

    [ Enlace : Hoja de referencia sobre tipografía y sus códigos CSS ]
    [ Descarga: PNG ]


    Tambien te puede interesar

    Tags: , ,

    3.077 views

    Tutorial de como crear tablas bonitas

    agosto 14, 08 by Gerald | Puesto en General

    En SmashingMagazine, nos deja buen artículo Top 10 CSS Table Designs, donde nos muestra diez formas sencillas para implementar el diseños de tablas con CSS para darle buena apariencia a las tablas.

    Yo me quedo con el estilo de la tabla N° 8, con esquinas redondeadas :)

    Tablas bonitas con css

    ¿Y tú que estilo aplicarías a tus tablas?

    Saludos!


    Tambien te puede interesar

    Tags: ,

    1.967 views

    Colorear código en WordPress

    julio 07, 08 by Gerald | Puesto en Design, Herramientas, Tutorial

    Inspirado en el post de Vinagreasesino donde se buscaba dar estilo al código en WordPress he encontrado un plugin para WordPress y paso a detallar el proceso de instalación:

    Primero descargamos el CodeColorer desde el directorio de plugins de WordPress.

    Luego deszipeamos el archivo y subimos el directorio codecolorer a la carpeta wp-content/plugins/.

    Luego renombramos el archivo wp-content/plugins/codecolorer/codecolorer.css.in a wp-content/plugins/codecolorer/codecolorer.css

    En mi caso estoy buscando colorear el código php y le añadido estas líneas al final del codigo de codecolorer.css :


    .php .codecolorer .kw1 { color: #3300CC; font-weight: bolder; }
    .php .codecolorer .kw2 { color: #000066; }
    .php .codecolorer .kw3 { color: #3300CC; }
    .php .codecolorer .kw4 { color: #DDE93D; }
    .php .codecolorer .kw5 { color: #999966; }
    .php .codecolorer .st0 { color: #333333; }
    .php .codecolorer .es0 { color: #c3c3c3; }
    .php .codecolorer .br0 { color: #330066; }
    .php .codecolorer .nu0 { color: #CC0000; font-weight: bolder; }
    .php .codecolorer .re0 { color: #000033; }
    .php .codecolorer .re1 { color: #FFCC00; }
    .php .codecolorer .re3 * { color: #FFFFFF; }
    .php .codecolorer .re4, .php .codecolorer .re4 * {
    color: #64A2FF;
    }
    .php .codecolorer .co1, .php .codecolorer .co2,
    .php .codecolorer .coMULTI { color: #006633; }

    Luego vamos al panel de control y activamos el Plugin.

    Para su configuración vamos a opciones de configuración y ahí nos aparece este formulario :

    CodeColorer

    Aquí solo he cambiado el capo de CSS Style para que se adapte al diseño de mi blog y es así como los he dejado :


    border: 2px dotted #143147; background: #E4F2FD; padding: 5px; margin: 10px;

    Y active las opciones de Show line numbers(mostrar número de líneas) y Disable keyword linking (desactive los links de las funciones de php).

    Después de todo estos pasos ya tenemos instalado nuestro plugin colorerdecoder con el cual, yo buscaba colorear el código php, y también aplicarlo a cualquier código y es así como lo uso :

    [ cc lang="php"]codigo[/ cc] o <code lang="php">code</cc> ó también simplemente <code> código </code>

    Como verán en este post he estado haciendo uso de este plugin y va de lujo!!

    colorear codigo en wordpress

    Saludos!!

    Descarga CodeColorer.


    Tambien te puede interesar

    Tags: , , , ,

    Página 1 de 212»