Categories
CSS HTML Trucos Utilidades

Quitando espacios innecesarios en archivos usando Dreamweaver

Desde siempre trabajo con Dreamweaver para editar mis archivos. A veces sucede que cuando descargo un archivo vía FTP, lo que obtengo es algo como esto:

Código HTML con líneas de más

o esto:

Código PHP con líneas de más

Para quitar estos espacios podemos hacer lo siguiente (usando Dreamweaver):

Si el archivo contiene HTML o CSS:

  1. Nos vamos al menú y escogemos Comandos –> Aplicar formato de origen:

    Aplicando formato de origen

  2. Fin

Resultado:

Resultado después de aplicar el comando

Si el archivo es cualquier otro tipo de lenguaje:

  1. Abrimos el diálogo de búsqueda y reemplazo presionando Ctrl + F
  2. Chequeamos la opción “Utilizar expresión regular
  3. En el cuadro “Buscar” escribimos la siguiente expresión: [\n\r]{2,}
  4. En el cuadro “Reemplazar” escribimos: \n
  5. Click al botón “Reemp. todos”.

    Quitando espacios innecesarios en archivos usando Dreamweaver

  6. Esperamos un momento
  7. Fin

Resultado:

Resultado despúes de quitar líneas innecesarias

Como vemos los espacios desaparecieron, sin embargo a veces es bueno revisar un poco más.

Esta utilidad aunque simple y talvez conocida nos puede ahorrar algún trabajito extra. Si tienes algún otro pequeño truco, compártelo.

Categories
CSS CSS3 Herramientas

css3.me: Otro generador de CSS3

css3.me te permite generar código CSS3 y mostrarte los resultados en vivo.

Css3.me

Para poder obtener los resultados lo único que tienes que hacer es arrastrar las barras, o si deseas resultados más personalizados puedes dar click al ícono (+) y cambiar los valores a tu gusto. Podemos elegir las siguientes propiedades:

  • border-radius.
  • box-shadow.
  • background-gradient.
  • opacity.

También puedes obtener código que funcione en IE7 e IE8.

Enlace: css3.me.

Visto en: Veerle.

Categories
CSS CSS3 Herramientas

Crea prefijos de CSS3 fácilmente con -prefix-my-css

Ahora que el CSS3 no está aun soportado por la mayoría de navegadores, muchas veces tenemos que crear prefijos para ciertas reglas de CSS3 en nuestra hoja de estilos.

-prefix-my-css

Esto podría ser un trabajo tedioso, sin embargo –prefix-my-css permite crear los prefijos rápidamente y nos permite elegir como tendremos nuestro producto final.

Por ejemplo, si le damos:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
border-radius:15px;
box-shadow:0 0 5px black;
background:#1D1D1D;
}

nos devuelve:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
/*box-shadow*/
-webkit-box-shadow:0 0 5px black;
   -moz-box-shadow:0 0 5px black;
        box-shadow:0 0 5px black;
background:#1D1D1D;
}

Sin duda una gran herramienta

Enlace: prefixMyCSS

Categories
Artí­culos CSS CSS3 Diseño HTML Webkit

Ejemplos de Webkit CSS (II): Colores, Bordes y Fondos

Ejemplos de Webkit

Esta es la segunda parte de la entrega “Ejemplos de Webkit”, en esta oportunidad vamos a mostrar algunos ejemplos de colores, bordes y fondos.

Categories
Artí­culos CSS CSS3 Diseño HTML Webkit

Ejemplos de Webkit CSS (I)

Ejemplos de Webkit

Retomando nuestra costumbre de ayudarles con artículos de Diseño, presentamos ejemplos de como usar Webkit CSS y CSS 3, en esta entrega: Flexible Box Model, Box Sizing y Columns