Crear degradados, pero... ¿sin imágenes?

Los degradados en internet, ya son invisibles. Pero no porque no estén, todo lo contrario. Son invisibles porque ya estamos demasiado acostumbrados a ellos y no podemos detenernos a pensar en que un fondo tiene un degradado, por ejemplo.
Pero nosotros somos parte de los que hacemos la web, por lo que este tema sí nos debe interesar y no nos tiene que parecer invisible.
Antes
Para crear un degradado, teníamos que abrir en nuestro ordenador un programa de creación de imágenes (como el Photoshop) y crear el degradado en formato de imagen (png, jpg, gif). Lo cual nos costaba, además de trabajo, un poco de tiempo.
Hoy
Existen muchas aplicaciones y páginas que nos ayudan a crear el degradado sólo copiando y pegando un código de CSS3 y son muy fáciles de usar!
Antes de empezar a explicar, quiero que vean el resultado de lo que les proponemos en este post haciendo click en el enlace que los lleva al final del post. Click aquí para ver los degradés.

Crear degradados con CSS3

¿Qué es CSS3?
CSS3 es la última versión de CSS (Un lenguaje para establecer estilos a las páginas HTML).
¿Cúal es la diferencia entre la última y la anterior versión?
Es una pregunta amplia, es decir, se le puede dedicar todo un post acerca de esto. Pero en rasgos generales, CSS3 nos permite hacer muchos más cambios en cuanto al estilo propio de una web, como por ejemplo las fuentes, los colores transparentados, los bordes, entre otros. Pero lo que hay que remarcar es que CSS3 nos permite tener un gran resultado en cuanto a efectos visuales sin necesidad de crear imágenes. El ejemplo de esto es justamente, el degradado.

Crear degradados sin imágenes

Empezamos por decir que lo siguiente puede llegar a ser muy fácil o muy difícil, depende del conocimiento que tengan acerca de CSS (sin discriminar versión), de cualquier forma pueden ver este post que puede servirles de ayuda si ponen atención y se concentran.
Dicho esto:

1. Vamos al siguiente link: Ultimate CSS Gradient Generator - ColorZilla.com
2. En la pantalla vemos un cuadro con degradés defaults, estos son creados por los de ColorZilla, podemos elegir uno si queremos.
   
3. Pero también puedes crear tus propios degradés para que se adapte a tu necesidad. Es muy fácil, basta con saber qué colores hay que usar en la barra de la siguiente imagen. También podés elegir la opacidad de los colores y hacer un degradé con eso:
   
4. Bueno, una vez elegido el degradé, vamos a los códigos. A la derecha de la pantalla aparece un textarea en el que aparece el código CSS del degradé. Vamos a copiar y pegar este código y lo pones en un selector en código CSS. Por ejemplo:
   

   .EjemploDeSelector{
   background: #f6f8f9; /* Old browsers */
   background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
   }

Preguntas

¿Cuáles son las ventajas de no usar una imagen?
Las ventajas son que no tienes que crear una imagen por tu cueta, lo cual ahorra tiempo y además pesa mucho menos que poner una imagen.
¿Qué uso se le da a esto, es decir, para qué tipo de cosas serviría en una web?
La respuesta es: sólo se usa para fondos. Pueden ser para cualquier objeto en tu web que posea fondo (header, main, sidebar, footer, inclusive body).
¿Funciona para todos los navegadores?
Sí, para los más usados con sus últimas versiones sí (como por ejemplo: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, NetScape, Safari).
¿Se puede usar este degradé para letras y links?
No, es sólo para fondos.

Ejemplos 

Con esta aplicación se pueden crear "cajas" con fondos como estos:

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Cómo se compone una fórmula CSS

Una buena manera de entender (para los que empiezan) cómo se estructura un código CSS, es sabiendo los nombre y las partes del mismo.
Este post es más bien teórico (y por ser teórico, va a ser cortito), ya que vamos a explicar cómo se compone una línea de código CSS y los nombres de las partes.

Selector: es allí donde vamos a poner a una etiqueta, clase (ejemplo, .header) o una ID (ejemplo, #header) para poder darle estilo con las otras partes que vamos mencionando.
En el ejemplo vamos a darle estilo a la etiqueta <h1>.
Propiedades: es la función del estilo. Aquí debemos tipear la propiedad para dar estilo al Selector.
En el ejemplo que vemos en la imagen, font-family significa que al selector le va a dar la fuente arial, este último es el valor.
Valor: es el contenido de la propiedad y aquí es el lugar más personalizable ya que es aquí donde a las porpiedades se le puede dar color, fuente, decoración de texto, etcétera.
Declaración: es el conjunto de todo lo que abarcan las llaves.

Entonces, la fórmula sería:

Selector+Llave abierta+propiedad+valor de propiedad+llave cerrada

Un poco más...
La fórmula que dimos, es lo básico. Es decir, la fórmula que dimos es sólo para asignar la modificación con una sola propiedad.
Para asignar dos propiedades, debemos asignar un punto y coma (;) luego de la primer propiedad. De esta manera la fórmula sería la siguiente:

Selector+Llave abierta+Propiedad+Dos puntos (:)+valor de propiedad+punto y coma(;)+2ºPropiedad+Dos puntos (:)+Valor de 2º Propiedad+Llave cerrada
Ejemplo:
H1{font-family:arial; text-decoration: underline}

Puedes asignar muchas propiedades y sus respectivos valores, siempre que postpongan un punto y coma antes de tipear uno nuevo.

Asignar tooltips para enlaces con efectos

Antes de ver este post te recomiendo ver este que se relaciona: Atributo title

Con este truco te vamos a enseñar a crear un tooltip con códigos jquery y al pasar por un enlace o texto, el tooltip se mostrará con un efecto y persiguiendo al cursor, como podemos ver en el laboratorio de T.B..

Tooltip Jquery en tu blog

Vamos a Blogger → Diseño → Edición de HTML y bucamos el siguiente código: ]]></b:skin> y arriba pegamos el siguiente código arriba:

#easyTooltip{
padding:4px 9px;
border:2px solid #2086CA;
background:#fff;
color:#2086CA;
font-family:arial;
}

Ahora vamos a pegar el siguiente código abajo del mismo (]]></b:skin>):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Comienzo de código Tooltip -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){
var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};
var options=$.extend(defaults,options);
var content;
this.each(function(){
var title=$(this)
.attr("title");
$(this)
.hover(function(e){content=(options.content!="")?options
.content:title;
content=(options.useElement!="")?$("#"+options.useElement)
.html():content;$(this)
.attr("title","");
if(content!=""&&content!=undefined){$("body")
.append("<div id='"+options.tooltipId+"'>"+content+"</div>");
$("#"+options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")
.css("display","none")
.fadeIn("fast")}},function(){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)});$(this)
.mousemove(function(e){$("#"+options.tooltipId)
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")});
if(options.clickRemove){$(this)
.mousedown(function(e){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)
})}})}})(jQuery);
//]]>
</script>
<!-- fin de código de Tooltip -->

Y ahora vamos a aprender cómo hacer un tooltip en un enlace, cada vez que queramos publicar uno. Siempre que quieras publicar un tooltip, debes agregarle a la etiqueta <a> el atributo title y el contenido adentro: title="Contenido del tooltip" y ademas debes agregar el atributo class con el contenido tooltip dentro: class="Tooltip".
El enlace con tooltip se puede añadir en cualquier parte del blog (ya sea en una entrada, gadget o texto en la plantilla).

Código completo

<a href="http://teoriablogger.blogspot.com" id="tooltip" title="Obtiene ayuda para tu blog">Teoría Blogger</a>

Cambiar color de un texto en estado de selección (sólo para Firefox)

Si eres detallista el color de un texto seleccionado, en cualquier página, es el mismo. Pero no siempre es así. En el navegador Mozilla Firefox (también en Safari), se puede observar que en algunas páginas no tienen un color en común al seleccionar un texto y que pueden ser diferentes.
Sin embargo, esto se debe a que sólo Mozilla y Safari permiten este cambio (por ahora).

Cambiar color común de selección de texto

Para cambiar esta preferencia, debemos hacer unos cambios en la plantilla. Iremos a Blogger → Diseño → Edición de HTML y buscamos (ctrl+f) la siguiente partícula de código: }]]>
Cuando hayamos encontrado este código, pegamos arriba del mismo, el siguiente código:

::-moz-selection {
background: #4F4F4F;
color:#FFFFFF;
}
::selection {
background: #4F4F4F;
color:#FFFFFF;
}

Lo escrito en verde, va el color de fondo que tendrá el texto al seleccionarlo.
Lo escrito en rojo, va el color de letra que tendrá el texto al seleccionarlo.
Lo escrito en amarillo es la propiedad que se utiliza para modificar la preferencia en Mozilla Firefox (::-moz-selection ).
Lo escrito en violeta es la propiedad que se utiliza para modificar la preferencia en Safari (::selection).

Quitar barra Navbar

Para muchos de los que estan en Blogger, la barra Navbar es una molestia. Y muchos desean eliminarlo, más que nada por su estética (aunque actualmente hay para elegir con colores más modernos).
Por si no sabes a lo que me refiero, te ubico en la página principal de un blog recién creado: Verás una barra en la parte superior de la página:

Quitar la Barra Navbar de tu blog

Para quitar la barra navbar debemos modificar la plantilla en Blogger → Diseño → Edición de HTML y buscamos lo siguiente, presionando ctrl + f:

]]></b:skin>

arriba de este código, pegamos este código CSS:

#navbar-iframe {
display: none !important;
}

La parte completa quedaría así:

#navbar-iframe {
display: none !important;
}

]]></b:skin>

Vista Previa y si notas el cambio, Guárdalo!

Títulos en HTML

Así como hay etiquetas que modifican y decoran los textos, también existen etiquetas para los títulos (y para muchas cosas más).
En HTML, los títulos, subtitulos y más, se definen con las siguientes etiquetas:<h1>, <h2>, <h3>, <h4>.

Crear Títulos y subtítulos en los posts.

Encabezado 1:

Ejemplo

<h1>Agrega el texto</h1>
Encabezado 2:

Ejemplo

<h2>Agrega el texto</h2>

Encabezado 3:

Ejemplo

<h3>Agrega el texto</h3>
Encabeazado 4:

Ejemplo

<h4>Agrega el texto</h4>
Encabezado 5:

Ejemplo

<h5>Agrega el texto</h5>
Encabezado 6:

Ejemplo

<h6>Agrega el texto</h6>

Modificar estilos de encabezados

La etiqueta de los encabezados se puede modificar como todos, en códigos CSS.
Para tomar como ejemplo un encabezado, tomaremos el encabezamiento de nivel 2:

h2 {
font-size: 22px;
text-transform:uppercase;
font: Verdana;
color: #2F8EFF;
text-shadow: 1px 1px 1px #3F3F3F;
}

Ya implementado este código CSS en Blogger → Diseño → Edición de HTML → Entre las etiquetas <![CDATA[/* y ]]>, en el blog se debe ver así:

Título 2

EL DATO:
Si estás avanzado en el tema, debes saber que no se debe implementar la etiqueta <h1> porque buscadores como Google, lo marcan como Spam y eso dificulta la probabilidad de visitas.
Si no sos avanzado en el tema, ¡NO TE PREOCUPES! esto es por si algún curioso avanzado intenta agregar esa etiqueta a todos los títulos de la plantilla.