css

Letras capitales mediante CSS

ByLuis April 10, 2008

Es curioso como el uso del pseudo-elemento :first-letter no es muy usado en la web, mientras que en papel si se suele usar con frecuencia. En este caso se trata de crear letras capitales mediante este pseudo-elemento. Para ello habrá que usar un fondo común para todas y luego modificar la letra inicial para que encaje en el marco.

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

Nice Drop caps with CSS

Vía / Posh CSS

css | Trucos

Cinco consejos sobre CSS

ByLuis May 31, 2006

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cÃ³mo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

Organiza tus estilos segÃºn el siguiente formato: primero reune las que correspondan a los contenedores y layouts, despuÃ©s las cabeceras (<h1>..<h6>), seguido irÃa los pÃ¡rrafos y los enlaces, y por Ãºltimo todas las listas (navegaciÃ³n, …).
No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defÃnelo contenido por bloques (por ejemplo: #contenido a {..}).
Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una lÃnea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un cÃ³digo mÃ¡s limpio.
En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma funciÃ³n que quieres mostrar, por ejemplo, en vez de usar una capa para el tÃtulo, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
Nombra los estilos segÃºn su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
VÃa / SkimCSS

css

Invierte tu email mediante CSS para evitar el spam

ByLuis June 22, 2009

Curioso truco para evitar que los spammers lean tu email, ya que lo escribes al revés y mediante CSS lo inviertes.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Reverse Your Email with CSS and Prevent Spam

Vía / @jlantunez

css

Consejos para estructuras tus CSS

ByLuis March 13, 2008

Buenos consejos para realizar tus estilos CSS bien estructurados.

Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

css

Gráficas mediante CSS

ByLuis April 10, 2007

Una buena colecciÃ³n de herramientas para generar grÃ¡ficas (de barras, progreso, de tarta, …):

Ajax MGraph: desarrollado en XHTML u CSS, es una grÃ¡fica interactiva que funciona en Firefox, IE y Opera. Incluye integraciÃ³n PHP y de la base de datos.
PlotKit: grÃ¡fica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
CSS Javascript Bar Charts: grÃ¡fica de barras sencillo.
Vertical Bar Graphs with CSS and PHP: grÃ¡fica de barras con CSS y PHP.
CSS For Bar Graphs: grÃ¡fica de barras usando los tanto por ciento que ofrece CSS.
CSS Vertical Bar Graphs: grÃ¡fica de barras de forma sencilla.
Displaying Percentages with CSS: barra de progreso mediante CSS.
Dynamic Pie Chart with CSS: grÃ¡fica de tarta dinÃ¡mica.

10 Free CSS Graph Resources

VÃa / Intenta

css

Recopilación de técnicas CSS

ByLuis January 15, 2008

Interesante recopilaciÃ³n de tÃ©cnicas CSS que se han usado desde siempre. Cada vez es mÃ¡s importante realizar diseÃ±os que cumplan estÃ¡ndares, y si queremos que a parte de cumplir estÃ¡ndares, tambiÃ©n tenga un diseÃ±o atractivo, es necesario usar muchas de las tÃ©cnicas que nos ofrece el recopilatorio.

CSS Sprites
Esquinas redondeadas
Reemplazar texto por imÃ¡genes
Tabuladores
Colocar texto alrededor de una imagen
Misma altura en capas
Transformar una lista en una barra de navegaciÃ³n
Cabeceras
Sombras
Transparencia

101 CSS Techniques Of All Time- Part 1

VÃa / CSS Globe

Accesibilidad | css | Javascript | TipografÃa

Cambiar el tamaño de letra dinámicamente

ByLuis April 25, 2006

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Similar Posts