Juglar

Showcase o buscar inspiración

juglar103 — Thu, 06 Sep 2007 15:03:30 +0000

Servicios que recogen los mejores y más novedosos diseños web, y permiten seguirlos mediante feeds.
Best Web Gallery
brdcast
CeeSeS
Cool site collection
CSS11
CSS Based
CSS Beauty
CSSclip
CSS Collection
CSS Container
CssCool
CSS Web Design Yorkshire
CSS Drive
CSS Elite
CSS Gallery
CSS Hazard
CSS Heaven
CSS Import
CSS Impress
Css Love
CSS Mania
CSS MESS
CSS Princess
CSS Reboot
CSS Remix
CSS Tux
CSS Vault
Css Website
Designbeauty
Design Shack
eduStyle
InspirationKing
Light on dark
Liquid Designs
Most Inspired
netcocktail
Netzfruehling
One Pixel Army
Piepmatzel.de
Plasticpilots.com
Refresh
Screenalicio.us
Screenfluent
Styleboost
Style Crunch
Stylegala
Unmatchedstyle.com
W3C Sites
Web Creme

Usar iconos en el blog

juglar103 — Tue, 04 Sep 2007 08:36:35 +0000

Primero quisimos que apareciera un icono que enlazara a nuestro feed:

Después, pretendimos que al principio del título de cada post apareciera un icono muy mono que hemos robado por alguna página:

.titulopost { background: transparent url(URL_ICONO) no-repeat 0 50%; /**** el icono aparece como fondo del titulo, a la izquierda, y se repite solo una vez ****/ padding-left: 2em; /**** mover un poco a la derecha el titulo para q no pise el icono ****/ }

`TITULO_POST`

TITULO_POST

Por último, para practicar opciones poco habituales, probamos texto como icono (por ejemplo, quise que los elementos de las listas del menú comenzarán con dos exclamaciones rojas, y acabaran con puntos suspensivos grises)

#menu ul li:before{ content:"!! "; color: red; } #menu ul li:after{ content:" ..."; color:grey; }



Categorías




Blogs


RSS

Categorías
!! Blogs …
!! RSS …

PNG en Internet Explorer

juglar103 — Sun, 02 Sep 2007 15:19:50 +0000

Las versiones anteriores a Internet Explorer 7 tienen problemas para visualizar las imágenes en formato PNG. Las soluciones:
Webmaster Libre | PNGs con transparencia en Internet Explorer
Webmaster Libre | Arreglo rápido para los PNG en Internet Explorer 6

Alma se basó en:
PNG in Windows IE
IE PNG Fix - TwinHelix

Mapas de imagen con CSS

juglar103 — Thu, 01 Feb 2007 12:34:51 +0000

CSS Image Maps
CSS Image Maps, Redux
Moryson.net - CSS Image Map
Alsacreations: (1), (2), (3), (4)
CSS image maps
Stu Nicholls | Cutting Edge CSS | Image Map
stu nicholls | CSS PLaY | image map for detailed information
A List Apart: Articles: A More Accessible Map (con js)
CSS: Map Pop | Mike’s Experiments | MikeCherim.com

Galerías de imágenes

juglar103 — Sun, 28 Jan 2007 11:05:54 +0000

Soluciones fáciles para secuencias dinámicas de imágenes para tu blog:
RockYou.com
FilmLoop
Slide
Imagelooop
Scooch
PhotoShow.com
fliptrack
Picture Trail - Photo Flicks
Photoblox
HOW TO Quickie: Embedded Flickr Slideshows
tracking shot (no permite colgar en blog)
Good Widgets

Para efectos dinámicos en javascript:
Juglar : Imágenes y Javascript

Estilos para las fuentes de texto

juglar103 — Wed, 10 Jan 2007 18:40:37 +0000

Características de la fuente de texto:
font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.2em; font-family: arial,sans-serif;

Modo simplificado de representar varias características a la vez (el orden es importante):
font: bold italic small-caps 1em/1.2em arial,sans-serif;

font-family: tipo de fuente.
Variantes principales: Sans-serif (Arial), Serif (Times New Roman), Monospace (Courier New).
Vease ejemplo de visualización de distintas fuentes.

(Imagen de InformIT)

- Serif tiene elementos decorativos en la parte superior e inferior, y sans-serif no. En Monospace cada letra tiene un ancho fijo.
- Si el nombre de la fuente tiene varias palabras, va entre comillas: ‘Times New Roman’.
- A continuación de cada fuente se añade el nombre genérico de la familia: arial, sans-serif.
- Cursive y Fantasy son las otras dos familias pero no se se suelen usar.
- La familia más legible para web es la sans-serif.
- Equivalencias para Mac: Arial - Helvetica, Times New Roman - Times.
- Si observáis diseños profesionales, se suelen exponer una cadena de fuentes de la más concreta hasta la más genérica (incluso las equivalencias en mac) para no dejar nada al azar en la interpretación que da el navegador:
font-family: "Trebuchet MS", arial, helvetica, Sans-serif;

font-size: tamaño de la fuente.
Variantes: medidas absolutas (px), medidas relativas (%, em).

Aunque existen varias formas de indicar el tamaño de la fuente, el método para que se vea de forma similar en distintos navegadores, que el usuario pueda adaptar el tamaño en cualquier navegador, y que se adapte a las distintas resoluciones de pantalla es:
- Fijar en el body el tamaño en porcentaje entre 76 y 100%.
- Y cuando queramos variar el tamaño en contenedores concretos, usar la medida relativa “em”.

body { font-size: 80% } #titulo { font-size: 1.5em } .comentario { font-size: 0.9em }

font-style: efecto a la fuente
Variantes principales: normal, italic (cursiva).

font-variant: mostrar todo en mayúsculas, resaltando las mayúsculas iniciales.
Variantes: normal, small-caps.

font-weight: grosor de la fuente.
Variantes principales: normal, bold (negrita).

line-height: altura de la línea.
Variantes: Por lo comentado en el tamaño de la fuente, también es recomendable usar medidas relativas “em”.

Artículos en castellano:
Qué tipo de fuente usar - BlogMundi
Con font todo será más corto. - aNieto2K
Controlando tus fuentes con CSS — yukei.net
Tipo de letra (fuente). CSS. Amaya

Visualizadores de fuentes:
Juglar : Visualización de fuentes
korhoen typeviewer
CSSTYPE
W3C: CSS: fonts
Safe web fonts
Browser News: Font Samples
Code Style: Font sampler
Rich Typography