Instalación de la extensión

Cuando hayas descargado la extensión, únicamente será necesario incluirla en el sitio y realizar una referencia a ella:

@import "fancy_3d_buttons";

Configurando las variables

f3d_button(background color, font size, font weight, line height, border radius, border top, border left)

Como podéis comprobar, existen muchas variables, pueden elegirse las que se deseen.

Para declarar las propiedades del botón, basta con seguir estas reglas, cambiando los valores y propiedades por las que se deseen, claro está:

a.green{
@include f3d_button(#63bb4a);
}
a.blue{
@include f3d_button(#2992DF, 50px, bold, 1.5em, 10px, 2px, 2px);
}

Ejemplo y descarga

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

Artículos relacionados

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

• Crea degradados CSS fácilmente con Ultimate CSS Gradient Generator

• Crear botones CSS estilo Wii

• Crea animaciones impresionantes con CSS3 mediante Sencha Animator

Es muy fácil hacer borde en un texto con imágenes, con Photoshop, pero, ¿y si queremos hacerlo con CSS? Una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {
-webkit-text-stroke: 3px black;
color: white;
}

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

Si deseas opciones más avanzadas de personalización, mira Modernizr.

Ejemplo de su funcionamiento

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

Vía | Nettuts

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

Artículos relacionados

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

• CSS: Text-shadow, propiedad

• Sombras en el texto sin usar text-shadow

• Ocultar mensajes en un texto con CSS

Las burbujas de texto son un efecto popular pero la mayoría de ellas se crean con HTML o Javascript. Este tutorial contiene varios ejemplos de efectos de burbujas de texto creados con CSS 2.1 y personalizados con CSS3. Como dije anteriormente, no contiene imágenes, Javascript y puede aplicarse a tu HTML semántico.

Por ahora soporta Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+ e Internet Explorer 8+.

Varios modos de crear burbujas

Con HTML tan simple como <div>Contenido</div> o <p>Contenido</p> puedes producir efectos de burbujas como este:

Añade un elemento hijo y tu obtendrás burbujas como estas:

Puedes usar los pseudoelementos :before y/o :after para producir formas básicas. Aplicando propiedades como border-radius y transform puedes producir formas complejas y orientaciones.

Código de ejemplo

Este es un ejemplo de como crear una burbuja de texto básica. Para ver más ejemplos mira la página de ejemplos completa.

/* Burbuja con un triangulo isosceles
------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creamos el triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Cabe destacar que los navegadores que no sean totalmente compatibles con CSS3 o algunos efectos de CSS 2.1, no mostrarán la burbuja “deforme”, si no que simplemente no tendrás los efectos completos.

Advertencia sobre Firefox 3.0

Firefox 3.0 soporta los pseudo-elementos de CSS 2.1 pero no el posicionamiento del contenido generador, así que si vas a implementar este efecto en tu sitio, ten en cuenta que Firefox 3.0 lo soporta parcialmente.

Ejemplos

Vía | Nicolasgallagher

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

Artículos relacionados

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

• Text-stroke, borde en el texto con CSS3

• Bocadillos de texto con CSS

• Grabado de texto con CSS

Centage es un framework complejo orientado a crear simples y avanzadas estructuras fácilmente. Está basado en less.js, una implementación en Javascript de less.css, y hace uso de sus funciones avanzadas, como pueden ser las variables, mezclas y la jerarquización. No utiliza ningún valor en píxeles, menos la expansión y compresión dependiendo de la anchura del navegador.

Por otro lado, La mayor desventaja de este framework es el requerimiento de Javascript para su funcionamiento, aunque existen otras soluciones ofrecidas en la página del autor.

Centage está en periodo alpha, y, aunque funciona en la mayoría de navegadores, en Opera da problemas y no está totalmente testeado en Internet Explorer.

Podéis ver más frameworks en CSSBlog.es.

¿Qué os parece?

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

Artículos relacionados

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

• El Framework todo en uno: BlueTripCSS

• Fem CSS Framework

• Baseline, Framework HTML5 + CSS3

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

.columnas {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}

p { white-space: nowrap; }

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

a[href^="http://"] { /* válido para cualquier enlace */
...
}
a[href="http://google.com"] { /* enlace específico */
...
}
a[href^="/"], a[href^=".."] { /* para enlaces relativos internos */
...
}
a[href^="mailto:"] { /* correo electrónico */
...
}
a[href$=".pdf"] { /* según su extensión -.pdf, .zip, .doc, .mp3, etc... */
...
}

.contenedor {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-top: -150px; /* 1/2 del elemento height*/
margin-left: -250px; /* 1/2 del elemento width */
}

.sombra {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

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

Artículos relacionados

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

• Rotar un texto con CSS Transformations

• Un hombre que anda gracias a CSS

• Bordes redondeados en Webkit mediante CSS

.elemento { background: url(//miimagen/imagen.gif); }

¿Lo consideráis un buen método?

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

Artículos relacionados

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

• Consejo CSS #4

• Consejo CSS #3

• Consejo CSS #1

¿Tienes curiosidad por aprender a realizar logotipos en CSS como el de Internet Explorer u Opera, entre otros? En este artículo explicaré como crear un logotipo con CSS, teniendo como fuente de inspiración el logotipo que asocio a la entrada. Se resumen en varios pasos, bastante sencillos, que dan como resultado un logotipo muy interesante realizado en CSS.

Código HTML

Empezaremos con esta estructura:

<div id="logo">
<h1>
<span id="css">CSS</span>
<span id="img"><a href="#" title="Long description of the image">D</a></span>
<span id="day">Day</span>
</h1>
<h2>Until the quirks stop</h2>
</div>

Ver ejemplo.

Estilos generales

Los estilos generales son muy sencillos:

#logo {

background: #fff;

color: #000;

font: 100%/1 Arial, Helvetica, sans-serif;

}

Hemos definido el tipo y el tamaño de la fuente del logotipo además del color del texto y el color del fondo.

Ver el ejemplo.

Posicionamientos y dimensiones

Ahora indicaremos la posición y dimensiones de los elementos:

#logo {

padding: 1em;

}

#logo h1, #logo h2 {

margin: 0;

}

#logo h1 {

height: 150px;

}

#logo h1 span {

float: left;

height: 100%;

}

Ver ejemplo.

Para posicionar el elemento hijo del encabezado h1, usaremos la propiedad float. La altura de este encabezado equivale a la altura de la imagen de fondo que vamos a insertar. El hijo del encabezado h1 (span) tendrá la misma altura que su padre.

Insertando la imagen de fondo

La imagen de fondo se incluirá de esta forma:

#logo h1 #img {

width: 80px;

height: 150px;

background: transparent url("../img/csslogo.png") no-repeat top left;

text-indent: -1000em;

}

Ver ejemplo.

Las dimensiones de el elemento #img equivalen a las dimensiones de la imagen de fondo.

Definiendo el tamaño de la fuente y el color

Ahora podremos escribir el tamaño y el color del elemento hijo del encabezado h1.

#logo h1 #css, #logo h1 #day {

font-size: 150px;

text-transform: uppercase;

}

#logo h1 #css {

color: #c00;

}

Ver el ejemplo.

Hemos usado píxeles para tener un control más preciso sobre el tamaño. En estos tamaños podemos usar píxeles mejor en vez de ems (?).

El subtítulo

El subtítulo (elemento h2) tiene el siguiente estilo:

#logo h2 {

text-transform: uppercase;

font-size: 55px;

display: inline;

background: #000;

color: #fff;

position: relative;

top: 10px;

}

Ver el ejemplo.

Como la imagen de fondo debe cubrir únicamente el área de texto y no todo el bloque contenedor, convertiremos el elemento a un elemento en línea. Después crearemos un espacio vertical usando la propiedad position con un desplazamiento vertical de 10 px.

Finalmente alinearemos verticalmente el texto del elemento h1 con la línea de la imagen de fondo. Para ello deberemos insertar lo siguiente:

#logo h1 #css, #logo h1 #day {

position: relative;

top: 15px;

}

Hemos usado la posición relativa pero ahora con un desplazamiento vertical de 15 píxeles. Puede ser interesante también que veas estos dos ejemplos: Ejemplo 1. Ejemplo 2.

Vía | Zibaldone.

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

Artículos relacionados

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

• Pasos para crear un logotipo

• El logotipo de Internet Explorer creado con CSS puro

• Posicionamiento Fixed con CSS

Sohtanaka recientemente ha descubierto un truco para realizar un sencillo efecto muy útil que hará que una determinada caja de contenido muestre más información al pasar el ratón por encima de ella. Es sencillo de construir, y totalmente gratis. A continuación os muestro el proceso, junto con un ejemplo y su descarga. Recordad que si tenéis alguna duda, sugerencia o problema podéis preguntarla en el foro.

Código HTML

Las columnas están realizadas en base a listas de items desordenados, entre cada item de la lista se encuentra la imagen de miniatura y los detalles para el item dentro de la lista, en la clase “info”.

<ul class="columns">
<li>
<a rel="nofollow" href="tuenlace"><img src="thumbnail.jpg" alt=""></a>
<div class="info">
<h2>Titulo</h2>
Descripcion corta
</div>
</li>
</ul>

Código CSS

Empieza a estilizar los items de la lista. Añadimos position: relative; a los items, y en hover elevamos el z-index a 99 para que se muestre por encima de otros elementos.

/*--Estilo de las columnas--*/
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

Gracias a que hemos añadido position: relative; a la imagen podremos controlar el valor de z-index en hover. Bajaremos la opacidad de la imagen por defecto a 30% y cuando se encuentre en estado hover subiremos esta opacidad al 100% y elevaremos el z-index a 999. Esto permitirá a la imagen permanecer por encima de los elementos (clase .info).

/*--Estilo de las miniaturas--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--Solo IE8--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Usaremos posicionamiento absoluto para mover la clase .info -10 píxeles a la izquierda y -10 píxeles a la parte superior. Debido a que .info usa posicionamiento absoluto no tendremos padding superior así que el contenido no se posicionará por encima de la miniatura. Para hacer. CSS3 fue añadido para los bordes redondeados. .Info quedará oculto por defecto y se mostrará en hover.

/*--Estilo de los detalles--*/
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Estandarización

CSS 2.1 inválido.

XHTML 1.0 Transitional válido.

Ejemplo y descarga

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

Artículos relacionados

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

• Popup de información en CSS

• Crear bloques de contenido con efecto hover con CSS

• Menú con varios niveles mediante CSS

Existen una lista interminable de tipografías, pero sólo unas cuantas encajarán con el estilo que tenemos en el sitio web. Desde aquí os mostraré algunos puntos que os pueden resultar útiles para distinguir entre una tipografía aceptable y otra que no es buena para nuestro sitio.

En las tipografías para títulos, se podrían seguir estos criterios:

¿Pequeña o grande?

Los títulos son algo que deben verse rápidamente, sin esforzarse mucho, así que es altamente recomendable que sean lo suficientemente grandes como para que el lector no tenga que fijarse mucho en ellos para verlos. Eso sí, los extremos también son malos, yo recomiendo establecer un mínimo de 17 píxeles a la tipografía de los títulos.

¿Fina o ancha?

Normalmente, las tipografías finas se utilizan para sitios con una combinación de tonos claros, debido a la ligereza que supone. Los sitios oscuros tienden a utilizar estilos de tipografías más anchas.

¿Colores claros u oscuros?

En los sitios con combinaciones de colores oscuros, se usa mayoritariamente tipografías claras, debido a que destacan más. Las tipografías oscuras se deberían utilizar en sitios con combinación de colores claros, por el mismo motivo que el anterior.

¿Estilo elegante o desenfadado?

Esto ya puede depender de cada persona, aunque personalmente concuerdo con que en sitios claros se utilicen tipografías más firmes, mientras que en sitios con colores oscuros se apliquen tipografías más divertidas y amigables, aunque, como digo, depende de cada persona.

¿Sans serif o serif?

Sans serif significa sin serifa, o terminación en las letras, como queramos llamarlo. En sitios con temáticas actuales, como diseño web, nuevas tecnologías, recomiendo usar fuentes sans-serif. En sitios con temas como viajes, museos, podría ser una buena opción utilizar fuentes serif.

(Imagen de Wikipedia)

¿Aplico text-shadow, degradados…?

Generalmente las propiedades CSS3 todavía no han sido aplicadas en todos los navegadores web. Si la temática que estamos tratando es sobre desarrollo web, diseño, el uso de propiedades CSS3 puede estar aceptado (hablando en la actualidad, ya que la mayoría de los navegadores no han conseguido todavía la compatibilidad con todas las propiedades CSS3). En otros sitios con temáticas como viajes, hoteles, restaurantes, deportes, todavía no encaja mucho aplicar este tipo de propiedades, según mis criterios.

Consejos de fuentes para los parrafos:

• No utilices tipografías demasiado finas, dificultará su lectura. Tampoco muy pequeñas, como mínimo 10 píxeles de tamaño.
• Intenta seguir el mismo estilo que en los encabezados, aunque varíe un poco. No cambies a otra tipografía totalmente distinta, intenta usar la misma.
• La tipografía debe verse bien por sí misma, no puedes usar efectos como text-shadow u otros para que se visualice bien. Debe mostrarse correctamente sin usar estos efectos. Esto se puede aplicar a las tipografías en los títulos también.
• Utiliza distintos tamaños de tipografía, dependiendo que sea un párrafo de contenido, bloque en la barra lateral o título. Debe diferenciarse. Generalmente el tamaño más grande lo tiene el título, seguido por el título en los bloques laterales y el texto en los párrafos.
• Debes distinguir los enlaces de texto en los párrafos. Generalmente se aplica otro color al enlace (por ejemplo, azul, frente al negro  del texto) o una decoración subrayado, especialmente).

Conclusión

Si sigues estos consejos darás una estructura más organizada a tu sitio, a la vez que ayudarás al lector a que se sienta bien leyendo tus artículos o lo que muestres. Todo depende de cada uno, así que si estás en desacuerdo con alguno de estos puntos, no lo sigas, quizás tengas otra idea mejor. Pero ante todo, recuerda, el contenido es el rey. Si deseas aplicar a tu página tipografías que no tengan los usuarios, utiliza la propiedad CSS3 @font-face. Ya sabes que tienes una lista de recursos muy útiles en este blog para desarrollar inspiración u obtener tipografías, texturas y fondos.

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

Artículos relacionados

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

• Novedosas tipografías gratis para diseñar sitios y logotipos

• 11 tipografías gratis para diseñar tu sitio web

• 16 tipografías estándares para usar con CSS

Es impresionante lo que puede llegar a hacer CSS3.  CSS3 nos está ayudando a todo el mundo, para crear sitios web más elegantes y accesibles, quitando relevancia poco a poco a Flash. CSS3, junto con HTML5, es el futuro.

Por ejemplo, con un poco de jquery, HTML5 y teniendo como principal protagonista, CSS3, podemos lograr una divertida animación de Spiderman, basada en un cómic:

Además de esto, Neography ha realizado un experimento con CSS Animations, CSS 3D Transforms y border-radius, que ha dado como resultado nuestro sistema solar realizado en CSS3 (Únicamente funciona en navegadores basados en WebKit, como Chrome o Safari:

¿Qué os parece?

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

Artículos relacionados

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

• Espectacular animación 3D de Creative Commons con CSS3 y HTML5

• Animación de la ballena de Twitter con CSS puro

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