Personalizando encabezados con CSS

Cuando queramos modificar cualquier elemento de un blog dándole estilos con CSS lo que debemos hacer siempre es lo siguiente:

Una vez que sepamos de que tipo es el elemento que hemos seleccionado simplemente debemos aplicarle la CSS a dicho elemento.

Aunque esto ya es sabido por casi todos, al igual que la scrollbar, todavía hay gente que me pregunta como se hace, pues bien, para todos ellos y para mi como recordatorio y apunte, en este post hablaremos de ello, casualmente hoy mismo, Silvy, mi novia, me preguntaba como cambiar los iconos de los títulos de la sidebar, pues bien, en este caso son H2, así que dicho esto iré al grano.

Si quieres cambiar la apariencia de cualquier tipo de encabezado del H1 al H6 ambos inclusive, es muy sencillo, solo debes indicarlo en la CSS.

Hay 6 tipos de encabezados, los cuales se utilizan para darle mayor o menor importancia a un texto, siendo H1 el de mayor importancia y H6 el de menor.

Ahora veremos unos ejemplos:

Texto con formato H1

Texto con formato H2

Texto con formato H3

Texto con formato H4

Texto con formato H5

Texto con formato H6

¿Cómo lo he hecho?

 <h1>Texto con formato H1</h1>
 <h2>Texto con formato H2</h2>
 <h3>Texto con formato H3</h3>
 <h4>Texto con formato H4</h4>
 <h5>Texto con formato H5</h5>
 <h6>Texto con formato H6</h6>
 

Estos serían los encabezados por defecto, pero si lo que queremos es un cambio de estilos, lo haríamos de la siguiente manera, supongamos que queremos darle formato a todos los H2, empezaremos con un simple cambio de color.

Texto con formato H2 y coloreado con CSS

¿Cómo lo he hecho?

 <h2 style="color:#f00;">Texto con formato H2</h2>
 

Ahora le pondremos un background o fondo que realmente será el icono que lleva al lado, le pondremos una estrella, pero recuerda que cambiando la url puedes poner la imagen que se te antoje.

Texto con formato H2, coloreado con CSS y con un background

¿Cómo lo he hecho?

 <h2 style="color:#f00; background: url(http://www.lacoctelera.com/plantillas/i/gossipcity/SRH3.png) left no-repeat; padding-left: 20px;">Texto con formato H2</h2>
 

Aunque estos son los estilos CSS integrados en las mismas etiquetas, hay dos formas más limpias de hacerlo y sería así:

 <-- CODIGO HTML -->
 
 <h2>Texto con formato H2</h2>
 
 <-- CODIGO CSS-->
 
 h2 {
      color: #f00;
      background: url(http://www.lacoctelera.com/plantillas/i/gossipcity/SRH3.png) left no-repeat;
      padding-left: 20px;
 }
 

Explicación del código CSS:

1. Le damos color al texto
2. Le damos un background o fondo, fijaros que tiene la URL de la imagen y luego un left no-repeat, pues bien, el left posiciona el fondo a la izquierda y el no-repeat le está indicando que no se repita
3. Por último el padding-left de 20 pixels le está indicando que el texto en este caso el H2 debe posicionarse 20px empezando por la izquierda hacia la derecha, lo que hace que el texto no quede montado encima de la estrella sino, a su derecha

Y la tercera forma de agregar el CSS, sería una hoja de estilos externa, ¿cómo se hace?, aquí tienes la solución.

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 4 comentarios compártelo

Menú tipo botones que se hunden al pasar el mouse por encima, sin imágenes, solo con CSS

Este menú nos servirá de ejemplo para este post.

¿Cómo lo he hecho?

 <!-- CODIGO CSS -->
 
 <style>
 .buttonscontainer {
      width: 120px;
 }
 .buttons a {
      color: #FFFFFF;
      border: 1px solid;
      background-color: #000099;
      padding: 2px;
      padding-left: 3px;
      font: 13px Arial, sans-serif;
      font-weight: bold;
      text-decoration: none;
      border-color: #0000FF #000066 #000066 #0000FF;
      display: block;
      margin: 0px;
      width: 100%;
      text-align: left;
 }
 .buttons a:hover {
      border: 1px solid;
      padding: 3px 1px 1px 4px;
      background-color: #0000CC;
      border-color: #000066 #0000FF #0000FF #000066;
      color: #99FFFF;
      text-decoration: none;
 }
 </style>
 

Como ves, es bien sencillo

 <!-- CODIGO HTML -->
 <div class="buttonscontainer">
 <div class="buttons">
 <a href="http://www.espacioblog.com/davitociber/posts/archive">Archivos</a><a href="http://www.espacioblog.com/davitociber/contacto">Contacto</a><a href="http://www.espacioblog.com/davitociber/feeds">Suscríbete</a>
 </div>
 </div>
 

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 8 comentarios compártelo

Esquinas redondeadas sin imágenes, solo con CSS

En este post vamos a ver como se redondean las esquinas de las capas, sin necesidad de utilizar imágenes en el código HTML, lo haremos únicamente con CSS.

¿Qué ventajas tiene esto?

Pues bien, son pocas pero con consistencia:

• Nos ahorramos el subir 4 imágenes, una por cada esquina de la capa.
• Con lo que nos ahorramos también insertarlas en el código HTML.
• Al ser un HTML sin imágenes, el blog o la web pesará menos.
• Al pesar menos carga mucho más rápido.

Estas son las líneas que vamos a utilizar:

• border-radius: Xpx;

En CSS3 obtenemos las esquinas redondeadas con border-radius, actualmente obtenemos lo mismo en los navegadores que usan el motor de renderizado Gecko (Firefox, Mozilla, Netscape, Galeon, Epiphany, Camino, Flock, etc), aumentando sólo -moz- al inicio del mismo código:

• -moz-border-radius: Xpx;
• Para Safari: -webkit-border-radius: Xpx;

Donde X seran los pixels que queramos darle de curvatura a las esquinas.

Pedimos que se implementen estas novedades en la próxima versión de Internet Explorer, pero ellos nos hacen oídos sordos, y se van por lo que es más fácil … para ellos, osea continuar redondeando esquinas con tablas y cuatro imágenes, algo muy tedioso y que no se soluciona con una linea o dos como aquí.

Si has llegado hasta aquí y aún usas Internet Explorer … no esperes más en abandonarlo y usar un navegador que se preocupa por respetar estándares.

Ejemplo 1:

¿Cómo lo he hecho?

 <!-- CODIGO CSS -->
 
 <style>
 .esquinasRedondasA {
       font-size: 1.5em;
 	margin: 0 20px 30px;
       padding: 20px 20px 20px 20px;
 	color:#fff;
 	background: blue;
 	min-height:50px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 }
 * html .esquinasRedondasA {
 	height:50px; /* Hack IE6*/
 }
 </style>
 
 <!-- CODIGO HTML -->
 
 <div  class="esquinasRedondasA">Capa única con las esquinas redondeadas.</div>
 

Ejemplo 2:

¿Cómo lo he hecho?

 <!-- CODIGO CSS -->
 
 <style>
 .esquinasRedondas {
 	margin: 0 20px 30px;
       padding: 20px 20px 20px 20px;
 	color:#fff;
 	background: #f00;
 	min-height:200px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 }
 * html .esquinasRedondas {
 	height:200px; /* Hack IE6*/
 }
 .esquinasRedondas1 {
       font-size: 1.5em;
       float: none;
       color:#000;
 	background-color:#FFF;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 	min-height:144px;
 	padding:20px 10px 10px;
 }
 * html .esquinasRedondas1 {
 	height:144px; /* Hack IE6*/
 }
 </style>
 
 <!-- CODIGO HTML -->
 
 <div  class="esquinasRedondas">Esta capa es la primera en la que redondearemos las esquinas, la pintaremos de color rojo para diferenciarla de la segunda capa que será de color blanco.
 <br/><div class="esquinasRedondas1">
 Esta es la segunda capa, anidada dentro de la primera.
 </div>
 </div>
 

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 9 comentarios compártelo

Colorea la scrollbar con CSS

Gracias a la etiqueta css “scrollbar” podemos cambiar el color de la barra desplazadora y configurar totalmente los colores de la misma, aunque esto ya es sabido por casi todos, todavía hay gente que me pregunta como se hace, pues bien, ahí va eso, debo advertir que todos los colores aquí publicados son solo un ejemplo, ves cambiandolos hasta que encuentres los que se adapten a tu blog.

 <style type="text/css">
 body {
      scrollbar-arrow-color:#FFFFFF;
      scrollbar-3dlight-color:#FFFFFF;
      scrollbar-highlight-color: #6685CA;
      scrollbar-face-color: #6685CA;
      scrollbar-shadow-color: #6685CA;
      scrollbar-darkshadow-color:#000000;
      scrollbar-track-color:#E5E5E5;
      scrollbar-base-color: #000;
 }
 </style>
 

• scrollbar-arrow-color - Color de las flechas.
• scrollbar-3dlight-color - Color del relieve, luz 3d.
• scrollbar-highlight-color - Color de la luz del cuadro de flecha.
• scrollbar-face-color - Color del primer plano.
• scrollbar-shadow-color - Color de la sombra del fondo.
• scrollbar-darkshadow-color - Color de la sombra más oscura.
• scrollbar-track-color - Color del fondo.
• scrollbar-base-color - Color de la base.

Nota

Esto podría decirse que no es CSS, ya que este código es código propietario de Microsoft, que aunque usa la misma sintaxis y declaración que CSS, no lo es. Por lo tanto, claro está, esto solo funciona en Internet Explorer desgraciadamente.(hay que joderse)

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik sin comentarios compártelo

Enlaza páginas desde tu blog incluyendo tu CSS

Imprime desde aquí este post

Utiliza el tag <link>, dentro del bloque <head>, para definir relaciones entre páginas, incluyendo la localización de la página de inicio, la anterior, la posterior incluso hojas de estilo.

Este tipo de enlace utiliza los atributos rel y rev

El atributo rel indica una relación entre el documento donde está el enlace y el documento enlazado. El atributo rev describe la relación inversa, entre el documento actual y documento que lo enlaza.

 <link href="index.html" rel="home">
 

 <link href="anterior.html" rel="prev">
 

 <link href="siguiente.html" rel="next">
 

Siendo index.html tu página de inicio, anterior.html la página previa y siguiente.html la página posterior.

Incluye tu

 <link href="/myfiles/davitociber/refuseniks.css" rel="stylesheet" type="text/css"> 
 

Siendo /myfiles/davitociber/refuseniks.css la ruta y el nombre de tu hoja de estilos.

Otra manera de enlazar tu CSS sería, utilizando CSS dentro de tu HTML al principio del Sobre mi (para La Coctelera) de la siguiente manera:

 <style type="text/css">
 @import url("/myfiles/davitociber/refuseniks.css");
 </style>
 

Siendo <style type="text/css"> el tag de apertura para incluir estilos CSS dentro del HTML y </style> el tag de cierre, entre estos dos tags iría el CSS, aunque de todos modos aconsejo que de esta manera sólo se utilice si es preciso para enlazar la CSS, siempre es más legible, limpio y estructurado un HTML con la CSS importada, que con la CSS incluida en él.

En este caso simplemente deberías substituir /myfiles/davitociber/refuseniks.css por la ruta y el nombre de tu hoja de estilos.

Referencia blográfica:
VAGABUNDIA de: JMiur
Plataforma: BLOGGER
Buenos Aires, Argentina

Referencia bibliográfica:
DESCUBRE HTML 4 de: PHILLIPS, ANNE
Editorial: PRENTICE HALL
ISBN: 978-84-8322-132-7
NIVEL USUARIO: Intermedio
Un libro que no me canso de leer y de aprender de él

servido por Sir Refusenik sin comentarios compártelo

+HTML y CSS en la 2ª temporada

Imprime desde aquí este post

Hola de nuevo, la verdad es que he estado una larga temporada sin tocar mucho este blog, ahora no es que tenga más tiempo, pero del que dispongo me gustaria aprovecharlo para inaugurar la nueva temporada de The Refuseniks...

¿nueva temporada?, si y esta vez vengo con otra idea, dedicarlo exclusivamente al lenguaje de marcación HTML Definición de HTML en la Wikipedia y las hojas de estilo CSS Definición de CSS en la Wikipedia, no descarto que intercale sobre otros temas pero me gustaría enforcalo así, para que todos aquellos que lo necesiten tengan aquí una guía rápida sobre HTML y CSS y puedan aplicarlo en sus blogs.

La creación de los Tooltips que ves al pasar el mouse por encima de los enlaces HTML y CSS los explicaré más adelante cuando entremos en CSS.

servido por Sir Refusenik 6 comentarios compártelo