CSSBlog ES - ¡CSS 100%!

MarkerCSS, un framework al estilo español

Pedro CM — Thu, 11 Mar 2010 18:15:59 +0000

MarkerCSS es un framework creado en castellano, que nos ayudará a maquetar nuestro código CSS de manera más cómoda y sencilla. Mediante referencias en las clases podremos aplicar estilos de forma cómoda, sin tener que ir a modificar el código CSS, porque ya vendrá todo listo. Únicamente tendremos que insertar en la clase la referencia correspondiente a la propiedad que deseemos insertar, con su valor, por ejemplo:

Configuración del body

Referencias “T” “A” “C” “GG” “V” “GV” “TT”
Esto crea referencias a familias de tipografías, por ejemplo “A” para Arial.

Referencia “s” + número del 7 al 20, y del 20 al 200 de 10 en 10
El tamaño de la tipografía; ejemplo “s14″ para un tamaño de 14 píxeles.

Referencia “c” + números prestablecidos
Ver colores prestablecidos; ejemplo “c16″.

Referencia “tl” “tc” “tr”
Alineación del texto ala izquierda, al centro a la derecha respectivamente, por ejemplo, “tc” para alinearlo al centro.

Podemos ver más ejemplos en su página oficial: http://www.markercss.com/index.php?page=ejemplos

Vídeos

Aquí os muestro varios vídeos, el primero sobre instalación de MarkerCSS y el segundo sobre cómo aprender a usarlo.

Zona de descarga

Podemos descargar Marker CSS desde este enlace:

Descargar MarkerCSS

Si lo deseas puedes revisar la lista de frameworks que existe en CSSBlog.es

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Baseline, Framework HTML5 + CSS3

El Framework todo en uno: BlueTripCSS

Hojas de referencia y recursos sobre CSS

Consejo CSS #2

Pedro CM — Sun, 07 Mar 2010 20:35:43 +0000

La clase (class) y los identificadores (ID) no son iguales. ¡Si aplicas un determinado ID a un elemento, no podrás repetirlo en otros elementos y el documento no tendrá el código CSS válido! Para ello, usa las clases.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Contenidos exclusivos para lectores de Twitter y RSS Feed

Sigue CSSBlog.es por Twitter

Consejo CSS #1

Consejo CSS #1

Pedro CM — Sun, 07 Mar 2010 10:49:46 +0000

Puedes ahorrarte tiempo con los colores hexadecimales definiendo únicamente 3 letras si estas son iguales. Por ejemplo, si tu línea CSS viene a ser así: color: #000000; puedes cambiarlo de esta forma y hará el mismo efecto: color: #000;

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Contenidos exclusivos para lectores de Twitter y RSS Feed

Sigue CSSBlog.es por Twitter

Consejo CSS #2

Basekit, de Photoshop a página web dinámica [20 invitaciones]

Pedro CM — Wed, 24 Feb 2010 22:07:46 +0000

Basekit es un servicio (en fase BETA) que os permitirá crear páginas web dinámicas desde diseños de Photoshop (PSD) o elegir una selección de sitios preconstruidos, todo ello sin necesidad de tener conocimientos de programación, ya que todo se realiza de manera visual con las herramientas especiales que nos permiten usar. Así, podremos editar textos, crear formularios de contacto, mapas, vídeos, además de poder usar widgets relacionados con las redes sociales, todo de manera sencilla, arrastrando y soltando elementos. Finalmente, los cambios que hagamos podemos ir observándolos en tiempo real.

Me han ofrecido 20 invitaciones para probar este servicio, que compartiré con los lectores de este blog. Si estáis interesados en probar el servicio, únicamente tendréis que publicar un comentario exponiendo que se desea probar el servicio, acompañando, en el campo de email, una dirección de correo válida. Ojo, no hay que escribir el correo electrónico en el mensaje, únicamente en el campo de email.

25 Febrero 2010 13:34

20 invitaciones agotadas.

27 Febrero 2010 13:35

40 invitaciones agotadas.

1 Marzo 2010 15:23

20 invitaciones agotadas.

8 Marzo 2010 16:28

30 invitaciones agotadas.

Actualización: ¡Nuevo! Plus de 50 invitaciones más.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Evita spam invirtiendo tu email con CSS

25 mejores pinceles de interfaces para Photoshop

Guía de soporte CSS en clientes de email

El tiempo en vida y la muerte de IE6 (Viñeta de cómic)

Pedro CM — Sun, 21 Feb 2010 10:05:10 +0000

Durante muchos años Internet Explorer 6 ha sido el navegador más usado, pero ahora está decayendo. Muchas empresas ya no dan soporte a IE6, incluido Google, que dejará de darlo dentro de poco. Brad Colbow ha creado una simpática viñeta (si lo deseas puedes verla a mayor resolución) en la que nos muestra el tiempo, vida y muerte de IE6 (en inglés, pero se entiende bastante bien). ¿Será este año el fin de IE6? ¿Recurrirá Microsoft a eliminar este año el soporte? ¿Las empresas convencerán finalmente a sus clientes de que IE6 está obsoleto? Podéis participar en los comentarios y contar vuestra opinión al respecto.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Google finalizará el soporte para IE6

Opera 10.5 soporta CSS3 Transitions y 2D Transforms

Microsoft anuncia el soporte CSS3 & HTML5 para Internet Explorer 9 (IE9)

Mejora las miniaturas de Wordpress con CSS

Pedro CM — Sat, 20 Feb 2010 23:25:00 +0000

Wordpress en su versión 2.9 ha añadido una nueva característica, la posibilidad de insertar miniaturas en lo artículos, lo que hace mucho más fácil realizar miniaturas. Hay muchas formas de diseñar miniaturas, de hecho, os mostraré una técnica para darles un toque estético en 5 minutos con CSS, muy sencilla.

Código CSS

Primero crearemos el “esqueleto” de las miniaturas, con el que definiremos el ancho, alto y su colocación:

.post-thumbnail {
width: 200px;
height: 150px;
float: left;
margin: 0 20px 0 20px;
}

Después añadiremos el CSS necesario para cuando posicionemos el cursor encima de la miniatura. Es necesario crear la imagen transparente (PNG) para cuando que, cuando se mueva el cursor encima de la miniatura, se muestre. Obviamente la imagen transparente debe tener el mismo ancho y alto que la miniatura en sí. Puedes tomar como referencia esta imagen transparente que se usa en la plantilla para Wordpress llamada TV Elements (allí podéis comprobar como funciona la miniatura si os desplazáis hacia abajo y mantenéis el cursor sobre una miniatura).

.post-thumbnail-frame {
background: url(images/post-thumbnail-frame.png) 0 0;
width: 200px;
height: 150px;
position: absolute;
}
.post-thumbnail-frame:hover {
background: url(images/post-thumbnail-frame.png) 0 -150px;
}

Código HTML

Finalmente para integrarlo en Wordpress, únicamente deberemos editar el archivo index.php, si queremos que aparezca en la portada, insertando este código encima de la etiqueta

Y listo, ya tendremos nuestra miniatura en los artículos, ¿os resulta sencillo?.

Vía | Woork

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Aumentar imágenes con CSS

Diferente CSS por categoría en Wordpress

Los mejores themes gratis para Wordpress del 2009

Un corazón creado únicamente con CSS-HTML

Pedro CM — Thu, 18 Feb 2010 22:02:13 +0000

No, no es otra de las sublimes creaciones de Román Cortés, pero podría acercarse a ello. Deepuu se entretuvo el día 13 de Febrero, día de San Valentín, en crear un corazón hecho únicamente con CSS y HTML, nada de imágenes. Es compatible con Firefox 3.5, Chrome 4.0, pero tiene pequeños fallos de renderización en IE7, Safari y Opera 9.02. A continuación os muestro el código HTML, CSS y un enlace para descargarlo.

Código CSS

#container {
height:500px;
margin:0 auto;
position:relative;
width:500px;
z-index:1;
}
.hrt-lft {
-moz-border-radius:150px 150px 0 0;
-webkit-border-radius:150px 150px 0 0;
background-color:#FF0000;
float:left;
height:90px;
left:85px;
position:absolute;
width:180px;
}
.hrt-rgt {
-moz-border-radius:150px 150px 0 0;
-webkit-border-radius:150px 150px 0 0;
background-color:#FF0000;
height:90px;
position:absolute;
right:85px;
width:180px;
}
.bot {
border-left:165px solid transparent;
border-right:165px solid transparent;
border-top:165px solid #FF0000;
font-size:0;
left:85px;
line-height:0;
position:absolute;
top:90px;
width:0;
z-index:1000;
}
.arw1 {
background-color:#333333;
height:10px;
left:20px;
position:absolute;
top:80px;
width:195px;
z-index:1000;
}
.arw2 {
background-color:#333333;
height:10px;
position:absolute;
right:20px;
top:80px;
width:66px;
z-index:1000;
}
.pointer {
border-color:transparent transparent transparent #000000;
border-style:solid;
border-width:20px;
font-size:0;
line-height:0;
position:absolute;
right:-20px;
top:64px;
width:0;
z-index:1000;
}
.pointer2 {
border-color:#000000 #000000 #000000 transparent;
border-style:solid;
border-width:20px;
font-size:0;
left:0;
line-height:0;
position:absolute;
top:65px;
width:0;
z-index:200;
}
.pointer3 {
border-color:#FFFFFF transparent;
border-style:solid;
border-width:20px;
font-size:0;
left:20px;
line-height:0;
position:absolute;
top:65px;
width:0;
z-index:300;
}
.shade1 {
-moz-border-radius:100px;
-webkit-border-radius:100px;
background-color:#FF9900;
height:100px;
position:absolute;
right:120px;
top:25px;
width:100px;
z-index:1200;
}
.shade2 {
-moz-border-radius:100px;
-webkit-border-radius:100px;
background-color:#FF0000;
height:120px;
position:absolute;
right:115px;
top:35px;
width:120px;
z-index:1300;
}
.shade3 {
-moz-border-radius:200px 300px 200px 350px;
-webkit-border-radius:200px 300px 200px 350px;
background-color:#FF0000;
height:170px;
position:absolute;
right:60px;
top:102px;
width:170px;
z-index:1300;
}
.shade4 {
border-color:#FF9900 #FF9900 #FF9900 transparent;
border-style:solid;
border-width:0 11px 30px 40px;
font-size:0;
line-height:0;
position:absolute;
right:200px;
top:170px;
width:0;
z-index:1600;
}
.shade5 {
border-color:transparent #FF0000;
border-style:solid;
border-width:40px 37px 0 0;
font-size:0;
line-height:0;
position:absolute;
right:195px;
top:160px;
width:0;
z-index:1700;
}
.msg-holder
{
-moz-box-shadow:0 0 12px #D2D2D1;
-webkit-box-shadow:0 0 12px #D2D2D1;
background-color:#EEEEEE;
border:1px solid #D2D2D2;
height:50px;
margin:0 auto;
padding:10px;
position:relative;
top:300px;
width:90%;
}
.c {
-moz-border-radius:15px 0 0 15px;
-webkit-border-radius:15px 0 0 15px;
background-color:#333333;
height:45px;
position:absolute;
right:140px;
width:45px;
}
.c div {
-moz-border-radius:10px 4px 4px 10px;
-webkit-border-radius:10px 4px 4px 10px;
background-color:#eeeeee;
height:22px;
position:relative;
right:-20px;
top:11px;
width:25px;
}
.i {
background-color:#333333;
height:45px;
position:absolute;
left:20px;
width:17px;
}
.l {
background-color:#333333;
height:45px;
position:absolute;
left:65px;
width:35px;
}
.l div {
-moz-border-radius:2px 0 3px 0;
-webkit-border-radius:2px 0 3px 0;
background-color:#eeeeee;
height:33px;
left:15px;
position:relative;
top:0;
width:20px;
}
.o {
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#333333;
height:45px;
left:105px;
position:absolute;
width:45px;
}
.o div {
-moz-border-radius:0 3px 0 3px;
-webkit-border-radius:0 3px 0 3px;
background-color:#eeeeee;
height:27px;
left:19px;
position:relative;
top:9px;
width:8px;
}
.v {
border-color:#333333 transparent transparent;
border-style:solid;
border-width:60px 30px;
font-size:0;
left:152px;
line-height:0;
position:absolute;
top:10px;
width:0;
z-index:300;
}
.v2 {
background-color:#eeeeee;
bottom:0;
height:15px;
left:165px;
position:absolute;
width:30px;
z-index:1000;
}
.v3 {
border-color:#eeeeee transparent transparent;
border-style:solid;
border-width:60px 25px;
clip:rect(30px, 60px, 200px, 0px);
font-size:0;
left:158px;
line-height:0;
position:absolute;
top:-25px;
width:0;
z-index:300;
}
.e {
background-color:#333333;
height:45px;
left:217px;
position:absolute;
width:43px;
}
.e2 {
-moz-border-radius:0 0 2px 0;
-webkit-border-radius:0 0 2px 0;
background-color:#eeeeee;
height:6px;
left:15px;
position:relative;
top:27px;
width:28px;
}
.e3 {
-moz-border-radius:0 2px 0 0;
-webkit-border-radius:0 2px 0 0;
background-color:#eeeeee;
height:5px;
left:15px;
position:relative;
top:4px;
width:28px;
}
.s {
-moz-border-radius:9px 0 9px 0;
-webkit-border-radius:9px 0 9px 0;
background-color:#333333;
height:45px;
position:absolute;
right:85px;
width:45px;
}
.s2 {
-moz-border-radius:0 3px 3px 2px;
-webkit-border-radius:0 3px 3px 2px;
background-color:#eeeeee;
height:6px;
position:relative;
right:0;
top:27px;
width:25px;
}
.s3 {
-moz-border-radius:3px 2px 0 3px;
-webkit-border-radius:3px 2px 0 3px;
background-color:#eeeeee;
height:6px;
position:relative;
right:-20px;
top:5px;
width:25px;
}
.ss {
-moz-border-radius:9px 0 9px 0;
-webkit-border-radius:9px 0 9px 0;
background-color:#333333;
height:45px;
position:absolute;
right:30px;
width:45px;
}
.ss2 {
-moz-border-radius:0 3px 3px 2px;
-webkit-border-radius:0 3px 3px 2px;
background-color:#eeeeee;
height:6px;
position:relative;
right:0;
top:27px;
width:25px;
}
.ss3 {
-moz-border-radius:3px 2px 0 3px;
-webkit-border-radius:3px 2px 0 3px;
background-color:#eeeeee;
height:6px;
position:relative;
right:-20px;
top:5px;
width:25px;
}

Código HTML

Descargar CSS Heart

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Menú con varios niveles mediante CSS

Un lapiz que dibuja solo con CSS

Bordes redondeados en Webkit mediante CSS

20 tipografías gratis de excelente calidad

Pedro CM — Thu, 18 Feb 2010 16:11:07 +0000

He publicado una gran cantidad de tipografías en el blog, para aumentar vuestro rendimiento e inspiración y que no tengáis que perder vuestro valioso tiempo buscándolas por todo Internet. Hoy os voy a mostrar un listado de 20 fuentes gratuitas de enorme calidad, cada una pensada para un estilo, ya que hay una gran variedad de ellas, podemos encontrar por ejemplo una versión de la tipografía Helvética dibujada a mano. Si estáis creando diseños web, camisetas o posters, por ejemplo, estas tipografías seguro que os resultarán muy útiles.

Deibi

Sketchetica

Giro

Clutchee

Tribbon

KnucklePuck

Folk

Etcetera

Amputa Bangiz

Betlog Square

Slimbo

Tozuna

VAL

Days

LOT

Cube 02

FILE

Zag

Hetilica Bold

Paranoid

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Tipografías gratis de alta calidad

104 tipografías gratis para diseñar sitios y logotipos

Descarga cientos de tipografías @font-face gratis

Una Torre de Hanoi hecha con CSS y HTML

Pedro CM — Tue, 16 Feb 2010 12:04:55 +0000

Román Cortés nos muestra su última creación, el juego de la Torre de Hanoi realizada únicamente con CSS y HTML. La verdad es, que después de ver sus últimas creaciones ya nada nos impresiona de lo que puede llegar a hacer CSS. Se puede jugar perfectamente, no es únicamente un objeto estático. Recordad que hace poco hice una entrevista a Román Cortés, puede que os interese.

Ver la Torre de Hanoi en funcionamiento

¿Qué os parece?

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Girar una lata de Coca-Cola con CSS

Un corazón creado únicamente con CSS-HTML

Pajarita de papel con CSS

Errores comunes al usar CSS

Pedro CM — Sun, 14 Feb 2010 22:21:38 +0000

Cuando empezamos a usar CSS, como todo en la vida, cometemos errores. Pero estos errores son beneficiosos, ya que, si reflexionamos pregúntandonos el porqué los hemos cometido, estaremos aprendiendo. Si crees que tus errores no son comunes, mira estos errores con su respectiva solución que voy a mostrar a continuación y, a lo mejor, puedes que te lleves una sorpresa y que tu error aparezca allí:

1. No cerrar los corchetes

#container {
width: 50%;margin:0 auto;
 /* Falta cerrar el corchete */

Si abrimos una clase o id pero después nos olvidamos de cerrarla, el código siguiente no tendrá efecto. Para ello es necesario ser muy meticuloso y fijarse si hemos cerrado todos los corchetes en nuestra hoja de estilos.

2. No definir los atributos con la estructura correcta

#header {

background-color: #000

/* Falta el punto y coma con el que termina un atributo, por lo tanto el siguiente atributo no se leerá */

font-size: 1em;
}

Es necesario cerrar los atributos con punto y coma. Si no lo hacemos así, el siguiente atributo no será leído.

3. Escribir mal el nombre del selector o clase

#haedr {

/* regularmente la cabecera se escribe #header, no #haedr. Si lo definimos correctamente en el documento HTML, puede valer, pero es complicarse la vida.  */

background-color: #000;

font-size: 1em;

}

Si enlazamos en el documento HTML a la id #header, pero después en el código HTML escribimos #haedr, estaremos cometiendo un grave error que tendrá como consecuencia la incapacidad de leer dicho selector.

4. Escribir incorrectamente el nombre de un atributo

Bastante parecido al anterior pero equivocándose esta vez en el atributo, lo que trae como consecuencia que no se pueda aplicar.

#header {

background-color: #000;

fton-sezi: 1em;

/* El atributo "fton-sezi" no podrá ser leido porque no existe, es font-size */

}

5. Confundir el valor de los atributos

Todos los atributos tienen sus valores específicos y no deben ser confundidos con los de otro. Si nos confundimos, el atributo no podrá ser leído.

#header {

background-color: #000;

font-size: 1em;

float: center;

/* El atributo float no permite "center", si no únicamente "left" o "right" */

}

6. Caracteres y tildes del español en los selectores y las clases

Vale, el idioma español es muy usado, pero no cuando se manejan códigos CSS. No se pueden poner tildes ni símbolos del español en los selectores, clases o en los valores, ya que si lo hacemos, no podrán ser ejecutados correctamente.

#cajón {

/* No se puede poner tilde en el selector, debería ser "#cajon" */

clear: both;

font-size: 1em;

}

Estos son algunos errores que comete mucha gente que se inicia en el mundo de CSS, espero que os hayan servido para aprender.

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Solucionar errores comunes de CSS con Javascript

Los peores errores CSS de David Walsh

Lista de errores en el uso de CSS