Archivo de la categoría: CSS

Carrusel Bootstrap con Font Awesome

Como sabrás, Bootstrap importa la librería de fuentes Glyphicons para el uso de iconos en la maquetación. Son dos de estos iconos los que utiliza internamente en la construcción del componente Carousel para los controles de cambio de imagen.

En mi caso prefiero importar la librería Font Awesome y evitar Glyphicons, lo que me ha obligado a sustituir estos iconos de control. Al principio pensaba encontrarme todo hecho simplemente sustituyendo las clases de los iconos, pero viendo el resultado es necesario incorporar algo de CSS (o LESS ¿todavía no conoces LESS?) para que el resultado quede responsivo y los iconos perfectamente alineados. Explico como hacerlo correctamente.

Primero en nuestro html hay que sustituir los iconos de control del carrusel por algunos equivalentes en Font Awesome, en mi caso he pasado de:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

a:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="fa fa-chevron-right"></span>
</a>

Esto hará tus iconos font-awesome visibles en el carrusel, pero no estarán correctamente alineados, para ello destripé las librerías LESS de Bootstrap para ver los estilos propios de esos iconos y añadí el siguiente código CSS a mi hoja de estilos):

.fa-chevron-left, .fa-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
     display: inline-block;
}

.fa-chevron-left {
     left: 50%;
}

.fa-chevron-right {
     right: 50%;
}

@media screen and (min-width: 768px) {

     .fa-chevron-left, .fa-chevron-right {
          width: 30px;
          height: 30px;
          margin-top: -15px;
          margin-left: -15px;
          font-size: 30px;
     }

}

Con esto tendríamos nuestro carrusel Bootstrap con iconos de Font Awesome. Recomiendo usar selectores de ID en el código CSS que os he puesto para que estos estilos sólo afecten a los iconos que se encuentren dentro del carrusel y no en todos los de nuestra web, aquí los he omitido por no entretenerme demasiado 🙂

Hover.css: libreria CSS para animaciones y transiciones

Hover.CSS es una librería de efectos CSS3 con la que podremos crear animaciones en nuestros elementos de interfaz (botones,textos, enlaces, imágenes…), todo ello simplemente aplicando clases predefinidas al elemento que se desea animar.

Si eres curioso y no terminas de entender como se crean animaciones y efectos en CSS3 te aseguro que si analizas el código de esta librería resolverás muchas dudas (al menos en mi caso así fue). 

Página oficial de Hover.CSS

Como aplicar formato LESS en el editor de Eclipse (plugin)

Comentaros que existe un plugin en Eclipse para poder dar formato a los archivos de tipo LESS en Eclipse. En mi caso lo he probado en la versión Luna y funciona correctamente.

Podeís ver como instalarlo en la propia página del plugin less para eclipse

No olvidéis cerrar pestañas y reiniciar Eclipse trás su instalación.

Eliminar ajuste de tamaño en textarea con CSS

Algunos navegadores como Chrome permiten realizar un ajuste de tamaño de los textarea de nuestros formularios. Aunque esta función es de utilidad para el usuario, puede suponernos problemas de diseño si nuestro formulario se encuentra enmarcado o estamos usando algún background. Para evitar el poder dimensionar nuestros textareas basta con asignar la siguiente propiedad CSS:

textarea {resize: none;}

Si queremos eliminar el redimensionado a determinados textareas aplicaremos la propiedad a alguna clase o identificador.

Tutorial CSS Sprites

Uno de los requisitos fundamentales de una aplicación web es la carga rápida de la interfaz. Normalmente tenemos muyltitud de imágenes de iconos para las distintas funcionalidades de la aplicación, además de imágenes de menú, botones… CSS Sprites es una técnica que tiene su tiempo y que permite que la carga se agilice. Esto se realiza añadiendo todas nuestras imágenes en un único archivo y mostrando el fragmento necesario en cada caso mediante CSS con la propiedad background-position de manera que sólo necesitaremos cargar una única imagen de nuestro servidor al mostrar la interfaz.

En mi caso utilicé esta técnica para el desarrollo de un menú. No es muy conveniente usar imágenes en menú desde un punto de vista SEO pero en este caso las palabras de menú no eran muy relevantes.

El primer paso es crear el archivo .png con todas las imágenes necesarias (imagen para mostrar cada opción de menú, imagen para la opción seleccionada e imagen en la activación del evento a:hover). El resultado es el siguiente:

La rejilla o grid que se muestra en la imagen (es un screenshot de Fireworks) nos ayudará a rescatar cada imagen necesaria en cada caso. Cada cuadro de la rejilla tiene unas medidas de 25×25 píxeles, por tanto para la opción de INICIO se que las coordenadas X de cada imagen necesaria empiezan en los 25 pixeles (un cuadro). Las coordenadas Y de las distintas opciones y contando el número de cuadros serán 25, 100 y 175 píxeles.

Vamos con nuestro html, añado un menú (en mi caso una lista):

</pre>
<ul id="”menu_sprite”">
	<li><a href="”#”">Inicio</a></li>
	<li><a href="”#”">Servicios</a></li>
	<li><a href="”#”">Proyectos</a></li>
	<li><a href="”#”">Contacto</a></li>
</ul>
<pre>

Nuestro CSS queda de la siguiente manera:

ul#menu_sprite{margin:0px 0px 0px 120px; padding:0; list-style:none; clear:both;}
#menu_sprite li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px; margin-bottom:15px;}
#menu_sprite li a{background:url(‘../images/menu_sprite.png’) no-repeat; width:100%; height:100%; display:block;}

/* OPCION INICIO */
#menu_sprite li.inicio{width:105px; height:55px;}
#menu_sprite li.inicio a{background-position:-25px -175px;}
#menu_sprite li.inicio a:hover{background-position:-25px -25px;}
#menu_sprite li.inicio a.selected{background-position:-25px -100px;}

/* OPCION SERVICIOS */
#menu_sprite li.servicios{width:165px; height:55px;}
#menu_sprite li.servicios a{background-position:-150px -175px;}
#menu_sprite li.servicios a:hover{background-position:-150px -25px;}
#menu_sprite li.servicios a.selected{background-position:-150px -100px;}

/* OPCION PROYECTOS */
#menu_sprite li.proyectos{width:183px; height:55px;}
#menu_sprite li.proyectos a{background-position:-325px -175px;}
#menu_sprite li.proyectos a:hover{background-position:-325px -25px;}
#menu_sprite li.proyectos a.selected{background-position:-325px -100px;}

/* OPCION CONTACTO */
#menu_sprite li.contacto{width:165px; height:55px;}
#menu_sprite li.contacto a{background-position:-525px -175px;}
#menu_sprite li.contacto a:hover{background-position:-525px -25px;}
#menu_sprite li.contacto a.selected{background-position:-525px -100px;}

Como puede verse, asignamos las propiedades a la lista para convertirla en un menú horizontal (esto se hace en las primeras líneas) y hacemos la carga de la imagen diseñada para cada elemento de la lista menú (#menu_sprite li a). Las siguientes cuatro estructuras definen la posición que nos interesa de la imagen en cada opción.

Artículo basado en esta guía de Zach Dunn

Em Calculator – De unidades absolutas a relativas

Em Calculator es una aplicación web que nos presenta una calculadora para pasar de píxeles a la unidad relativa em. Además permite añadir hijos al contenedor calculado y volver a calcular la unidad relativa del hijo.

Lo mejor es que lo probéis para entenderlo :).

Em Calculator

Em Calculator

Em Calculator

font-face. Agregar fuentes descargables con CSS

Aunque no todos los navegadores lo soportan, bueno es saber que en CSS2 contamos con la regla @font-face, regla que nos permite usar fuentes tipográficas externas descargables en el cliente. Esta regla es ignorada en CSS1.

El modo de uso de esta regla es bien sencillo, como ejemplo vamos a declarar que nuestros titulares <h1> tengan una determinada tipografía que localizaremos mediante una URL:


@font-face {
font-family: "Robson Celtic";
src: url("http://websenior/fonts/rob-celt")
}
h1 { font-family: "Robson Celtic", serif }

En este caso nominamos la fuente externa como “Robson Celtic” usando font-family. Con este nombre la podremos usar en el resto de estilos de nuestro documento CSS2. Indicamos l aURL donde estará alojada nuestra fuente con src. Preparamos el tag <h1> para que use esta fuente, si no es posible se usará serif.

Ver @font-face en W3C