CSS, Herramientas

CSS Matic: Generador CSS para diseñadores Web

Publicado por Claudia en marzo 8, 2013

CSS Matic

Tal vez no seas un diseñador web pero estés pensando en hacer algunos retoques en tu blog. Cuando no sabemos mucho de CSS, los generadores pueden resultarnos muy últiles; incluso, si tenemos los conocimientos, los generadores pueden ayudarnos a ahorrar mucho tiempo.

Hace poco conocí CSS Matic, un útil generador CSS3 gratuito hecho por y para desarrolladores. Está completamente en español, y es tan simple de usar que te sorprenderás.

CSS Matic consta de:

1. Generador de gradientes lineales CSS3 (linear-gradient).

2. Generador de bordes redondeados con CSS3 (border-radius).

3. Generador de texturas con ruido, que puedes descargar en formato *.jpg para usar como fondo.

4. Generador de sombras CSS3 (box-shadow).

Lo mejor de este generador es que soporta los navegadores más populares, así que no tendrás problemas a la hora de implementar el código.

Enlace: CSSMatic.com

Tags:
CSS

Cómo usar cualquier tipografía en WordPress con @font-face

Publicado por Claudia en octubre 26, 2012

font-face
La  regla @font-face CSS3 se convirtió en mi forma preferida para incrustar nuevas tipografías en WordPress sin plugin, sin depender de Google (Google Web Fonts) y sin depender de que el usuario tenga la fuente en su equipo.

Su utilización es realmente sencilla, mucho más fácil de lo que parece.

Lo primero, es elegir una fuente que nos guste, y que podamos usar con @font-face. En Font Squirrel, por ejemplo, podemos encontrar muchas fuentes gratuitas y que ya están en todos los formatos necesarios para que podamos usar la regla sin tener problemas de compatibilidad con ningún navegador web o dispositivo.

Una vez descargado el paquete con la fuente en todos los formatos (eot, woff, ttf, svg), lo descomprimimos. Luego iremos a wp-content/themes/mitema, y dentro de la carpeta de nuestro tema creamos otra carpeta, a la que nombraremos “fonts“. Allí pondremos todos los archivos de nuestra fuente.

Hecho esto, en nuestra hoja de estilos style.css, incluimos la regla de acuerdo al siguiente ejemplo:

1
2
3
4
5
6
7
8
@font-face {
font-family: 'Deftone';
src: url('fonts/Deftone.eot'); /* IE9 Compat Modes */
src: url('fonts/Deftone.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Deftone.woff') format('woff'), /* Modern Browsers */
url('fonts/Deftone.ttf')  format('truetype'), /* Safari, Android, iOS */
url('fonts/Deftone.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Reemplazamos Deftone por el nombre de nuestra fuente, tal y como aparece en los archivos.

Finalmente, usamos la propiedad font-family como lo haríamos habitualmente. Por ejemplo:

1
2
3
h2 {
font-family: 'Deftone', Helvetica, Arial, sans-serif;
}

Vía

Tags: , , ,
Blogger, Herramientas

Pure CSS Menu: Generador de menús desplegables sin javascript

Publicado por Claudia en enero 27, 2010

Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.


3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}
Tags: ,
CSS

9 sitios para descargar menús CSS

Publicado por Claudia en enero 3, 2009

Las grandes ventajas de los menús CSS que podríamos llamar “pre-diseñados”, son que: (1) son muy estéticos, y le dan a un sitio una apariencia profesional; (2) generalmente son muy livianos; (3) son fáciles de añadir; (4) y que pueden adaptarse a cualquier sitio. Además, podemos encontrar una gran variedad de ellos en forma gratuita. Aquí hice una lista de los sitios que ofrecen menús CSS gratis:

13 STYLES

CSS MENU BUILDER

CSS MENU MAKER

CSS PLAY

DYNAMIC DRIVE

CSS PORTAL

EXPLODING BOY (1) (2) (3)

IZZY MENU

STYLED MENUS

Tags: ,
CSS

Arte y ciencia del CSS – Ebook gratuito por tiempo limitado

Publicado por Claudia en noviembre 24, 2008

El equipo de Sitepoint tuvo la genial idea de regalar su libro “Arte y ciencia del CSS” (valor de venta: $39.95 USD) durante 14 días, de los cuales ya han pasado 6. El libro, en formato *.pdf, de más de 200 páginas consta de 7 capítulos que tratan acerca del manejo de títulos, imágenes, fondos, menús, formularios y tablas, entre otros. Está dirigido a webmasters, y escrito íntegramente en inglés, pero puede no ser difícil de comprender para quienes tienen algún grado de conocimiento acerca de las hojas de estilo en cascada.

Para conseguir el libro gratuitamente, es necesario seguir en Twitter a @sitepointdotcom. Casi instantáneamente, llega por mensaje privado un enlace para la descarga directa del ebook.

Tiempo restante para conseguir el libro: 8 días y 4 horas, desde la publicación de esta entrada. Hurry up!

Fuente | Visual Blast Media

Tags: