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: , , ,
CSS, Herramientas

CSS Templates Free: Plantillas CSS gratis

Publicado por Claudia en julio 13, 2012

CSS Templates Free

Hay algo que siempre agradezco: las plantillas CSS. Son muy útiles a la hora de empezar un nuevo proyecto (sitio web o blog), porque las puedes adaptar a tus necesidades sin importar el gestor de contenidos que uses. Además, son una excelente fuente de inspiración si quieres empezar a diseñar y maquetar desde cero.

En CSS Templates Free encuentras más de 200 plantillas CSS gratuitas CSS3 y HTML5, bien categorizadas y para todos los gustos. Lo que destaco del sitio, es que se ve actualizado, y hay una buena selección de templates modernos y que siguen las últimas tendencias en cuanto a diseño:  tipografías llamativas, slideshows como Nivo Slider y atractivos efectos jQuery. Merece un vistazo.

Enlace: CSSTemplatesFree.org | Vía: Soft and apps

Tags:
CSS, Herramientas

CSS-sprit.es: Un generador de CSS sprites

Publicado por Claudia en septiembre 16, 2009

css-sprit-esLos CSS sprites son una técnica para reducir el número de peticiones HTTP y disminuir el tiempo de carga de nuestro sitio, que consiste en “agrupar varias imágenes en una sola de mayor tamaño, para luego volver a separarlas en imágenes individuales mediante CSS” (me gusta la simpleza con que lo explica Román Cortés).

No son una técnica nueva ni poco usada -especialmente en los sitios con alto tráfico-, pero su implementación requiere un manejo más bien avanzado de CSS. CSS-sprit.es, sin embargo, lo hace más fácil: subimos el grupo de imágenes, y automáticamente entrega como output (en formato PNG o GIF con transparencia o JPG sin transparencia) una gran imagen que contiene todas las anteriores, junto a los correspondientes códigos CSS y HTML con la posición de cada imagen “pequeña”.

css-sprites

Es compatible con la mayoría de los navegadores, y también es útil para crear imágenes con efecto roll-over en sepia o escala de grises.

Visto en Makeuseof

CSS

Técnicas para asegurar la compatibilidad crossbrowser

Publicado por Claudia en julio 14, 2009

Uno de los mayores desafíos que enfrenta un diseñador web, o webmaster, o un blogger que quiera hacer algunos retoques en su theme o plantilla, es lograr que su sitio se vea igual en los navegadores más usados, o que tenga al menos una apariencia estéticamente aceptable.

En Cats Who Code, J.B. Jung nos presenta 15 técnicas para asegurar la compatibilidad entre navegadores al codificar en CSS. La lista incluye los clásicos trucos para IE como el “hack del asterisco” para todas las versiones de Internet Explorer (o la línea baja para IE6), el uso de comentarios condicionales, algunas líneas de código para browsers menos populares y herramientas web para probar tu sitio en distintas versiones de Internet Explorer, Mozilla Firefox, Google Chrome u Opera.

Enlace: 15+ techniques and tools for cross browser CSS coding

Tags: ,