toggle

Centrar texto verticalmente con CSS

Parece mentira, pero todavía tengo muchos problemas para centrar el texto verticalmente dentro de un div. Hoy he visto una solución que me ha gustado en Stack Overflow.

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

De este modo conseguimos lo que vemos en esta imagen, que los botones siempre tengan la misma altura, y queden bien con una o dos líneas.

double-line-button

Adaptar el alto y ancho al embeber un iframe de Youtube, Vimeo, …

Uno de los problemas que surgen al hacer una web responsible es el de querer mostrar un iframe de Youtube, Vimeo, etc… Los iframes que nos facilitan estos proveedores suelen tener asociado una anchura y altura fijas, por lo que difícilmente se van a adaptar a nuestro flamante diseño fluido. Lo bueno, es que ya hace tiempo alguien muy sesudo se encontró con este problema, y le dio una solución de lo más sencilla, para que al altura del iframe siempre sea relativa a su anchura.

video_responsive

<div class="responsiveContent">
    <iframe src="//www.youtube.com/embed/_veOIvMWazU" 
            allowfullscreen="" frameborder="0"></iframe>
</div>

 

.responsiveContent {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.2%;
  margin-bottom: 20px;
}
.responsiveContent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Como vemos en el código la solución pasa por:

  • Quitar toda referencia a width o height en la etiqueta del propio iframe
  • Crear un contenedor para el iframe con altura 0
  • La altura vendrá definida por el padding que le demos al contenedor. Al darle el padding en porcentage, la altura siempre sera el x% de la anchura del padre.

Podéis ver este ejemplo funcionando en mi querido framework paragridma.

Lo único que tendréis que tener en cuenta es el aspect ratio del vídeo que queráis mostrar. En caso de no coincidir se deberá de modificar el padding del contenedor.

Espero que este truqui os sea de utilidad.

LESS CSS examples

I’m using LESS in the new version that i’m developing of the framework ParaGRIDma.

To render the .less file in a .css i’ve choose the software WinLess. I also evaluate Simpless that is a more beautiful software to do the same task, but it give me some error editing the file. WinLess work like a charm.

Making loops in less

@iterator: 12;
.loop (@index) when (@index > 0) {
    .g-@{index}  { width: (100% *  @index / @iterator) }
    .loop(@index - 1); // next iteration
}
.loop (0) {} // exit loop
.loop (@iterator); // draw loop

Convering dimesions in less

Sometimes you want to change dimensions in your CSS. To do this you only need to add 0[unit]

@context = 12px;
@context/10 + 0em; // returns 1.2em;

Make color variations in less

You can convert given color by adding other color. For example:

@linkColor: #2a85e8;
@linkColorHover: (@linkColor + #111);

Importing files in less

If you want to import some other css file you can do it like:

@import "normalize.css";

If you want to process this CSS file like a LESS files do this:

@import (less) "normalize.css";

Nested rules in less

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nerea, voy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero «set_max_size» es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo «min_size»

adjustTextSize

 

(más…)

Componente de Tabla como RadioGroup

Hoy he tenido que desarrollar un nuevo componente, para un muy interesante proyecto que estamos empezando a desarrollar en Paradigma.

Este componte debe de mostrarse como una tabla, tal y como podéis ver en la siguiente imagen con el diseño creado por el artistazo @davidmontalvo, pero debe de actuar como un grupo de input tipo radio, ya que el usuario podrá seleccionar cada una de las celdas.

(más…)

Selector :nth-child CSS

Siempre me resulta muy difícil acordarme de como debo de usar los selectores :nth-child de CSS. Al final siempre tengo que buscar en google alguna pagina que me lo explique bien.

Hoy he tenido la suerte de encontrarme con el articulo Useful :nth-child Recipes de página de css-tricks.com, en el que a través de unos sencillos ejemplos podemos ver los típicos casos de usos de este selector.

También podemos probar tanto como queramos en este :nth tester

/* Seleccionar el elemento 5 */
li:nth-child(5) { ...  }

/* Seleccionar todos menos los primeros 5 elementos */
li:nth-child(n+6) {  ... }

/* Seleccionaar los primeros 5 elementos */
li:nth:child(-n+5) {  ... }

/* Seleccionar un elemento cada 4 */
li:nth-child(4n+1) {  ... }

/* Seleccionar solo los elementos impares */
li:nth-child(odd) {  ... }

/* Seleccionar solo los elementos pares */
li:nth-child(even) {  ... }

/* Seleccionar el último elemento */
li:last-child {  ... }

/* Seleccionar el penúltimo elemento */
li:nth-last-child(2) { ... }

El próximo día ya me acordaré que debo de acudir a esta web directamente.

¿Qué debo conocer para empezar a Maquetar?

Una buena amiga me ha pedido recientemente ayuda para introducirse en el mundo de la maquetación. Aunque ya llevo muchos años maquetando, nunca he tenido que formar a nadie desde cero, y he querido aprovechar mis consejos para ella en un nuevo post.

La maquetación web se sabe donde empieza; en la combinación de HTML (estructura del código) y CSS (estilos aplicados al código HTML), pero donde acaba ya no está tan claro. Según a quien preguntes, algunos te dirán que termina ahí, y otros te dirán que el Javascript (comportamientos) también forma parte del «pack». Yo no tengo ninguna duda de que el no se puede separar Javascript y maquetación, y que un maquetador que no sabe aplicar Javascript en sus aplicaciones web, no es un buen maquetador.

Antiguamente las tres patas del «pack» se agrupaban en un fichero HTML, pero es una buena practica el desacoplar estructura (HMTL), de estilos (CSS) y de comportamientos (Javascript). Esto hace que el código esté mejor estructurado, sea mas limpio, y sea mas sencillo trabajar en equipo.

¿Por donde debo empezar?

Pues en mi opinión creo que se debe de empezar por conocer bien HTML. Es un lenguaje muy sencillo, y con el que muy rápido veremos resultados. Puedes consultar este manual online de introducción a HTML.

Posteriormente deberíamos de familiarizarnos con HTML5, la versión actual de HTML, para conocer el potencial actual y futuro de este lenguaje.

Una vez que nos sintamos cómodos con HTML, deberíamos pasar a conocer CSS, y profundizar todo lo que se pueda en las técnicas más avanzadas de CSS, ya que será la base de nuestro trabajo.

Con estos dos lenguajes de programación ya sabríamos lo básico para empezar a maquetar, pero a poco que maquetes vas a sentir la necesidad de conocer Javascript para ampliar tus superpoderes.

Deberías de conocer al menos lo básico de Javascript, y luego pasarte a un framework como jQuery, que facilitará mucho tu tarea de trabajar con Javascript.

¿y esto es todo?

Pues en lo que a conocimiento teórico se refiere si. Si lees todos los enlaces anteriores tendrás la base teórica necesaria para ser un buen maquetador, pero el 90% del éxito de tus trabajos se basaran en práctica, práctica y práctica.

Cuando veas paginas que tengas cosas que te gustan, no dudes en revisar su código, y averiguar como lo han hecho. Con estos ejercicios obtendrás mucho conocimiento práctico.

¿Que herramientas debo de usar?

Pues para crear y editar código yo te recomiendo que uses un editor de textos sencillos. Yo uso el notePad++, pero puedes usar con el que mas cómodo te sientas.

Podrías usar programas que te facilitarían mucho la tarea de maquetar páginas, como DreamWeaver, pero yo creo necesario el escribir tu propio código desde cero, sin ayudas, ni autocompletados, ya que este esfuerzo extra repercutirá de manera muy positiva en el conocimiento de las etiquetas, y en consecuencia en nuestra valía como maquetadores.

La herramienta de la que no te debes de separar ni a sol ni a sombra es del inspector de código de tu navegador favorito. Si usas Chrome, tendrás instalado por defecto el inspector de código (pulsa F12 en chrome, si usas windows, y lo verás). En cambio si eres de Firefox, tendrás que instalarte el Firebug, ya que aunque Firefox tiene un inspector de código instalado por defecto, creo que todavía no es muy potente.

Por último, instálate un arsenal de navegadores, con los que pruebes todo tu código. Que hagas algo que se vea bien en Firefox, no significa que se vea bien en Explorer, y aunque con las nuevas versiones de Explorer cada vez son menos las incompatibilidades, todavía es algo que te dará muchos dolores de cabeza.

Yo en mi caso, pruebo mis páginas con: Chrome, Firefox, Opera, Explorer 9, Explorer 8 y Explorer 7. Creo que ya no deberíamos de pelearnos con Explorer 6, su tiempo pasó.

Y para empezar no se me ocurre ningun consejo mas, aunque seguro que los habrá. Sientete libre para solicitar o aportar más consejos en los comentarios.

Media Queries en Internet Explorer 6-8

Surgen muchos problemas a la hora de hacer aplicaciones web fluidas con responsive design. Uno de ellos es que Internet Explorer (hasta su versión 9) no acepta nativamente las css media-queries (mostrar estilos diferentes según el tamaño del navegador).

Hay unos cuantos plugins javascript que solucionan este problema:

  • respond.js: quizás el más popular, pero yo no lo he usado por que la necesidad de tener que incluir varias llamadas a diferentes ficheros. El motivo de tener que hacer esto es que el plugin hace una petición por ajax de los CSS con cada redimensión.
  • css3-mediaqueries-js: Mi elegido por la simpleza, y por que simplemente funciona. Su alcance es más limitado, pero es mas que suficiente para el uso que yo hago de

Y vosotros, ¿Cual habéis usado?

Efecto rebote con slideDown() de jQuery

Cada cierto tiempo me encuentro con un problema al mostrar cierto tipo de paneles con el método .slideDown() de jQuery.

Lo que me pasaba es que al irse desplegando el panel tomaba una altura superior a la de su contenido, para luego volver a su tamaño real cuando terminaba la animación.

Siempre pensé que era un problema relacionado con los margins y los paddings del elemento a mostrar, pero por fin he encontrado la solución a este problema, y parece que es de lo mas sencilla.

Al parecer jquery tiene problemas para detectar el tamaño real del texto que contiene el panel, y la solución es tan sencilla como definirle la anchura. Por ejemplo:

.element-to-slide { width:100%; }