por Oscar de Dios | 17 Jun, 2014 | CSS
Uno de los problemas típicos al insertar un iframe en una página es la de darle un tamaño variable dependiendo del contenedor, o dicho de otro modo: que tenga un comportamiento “responsivo”. Un iframe tiene parámetros de width y height, por lo que podemos poner un porcentaje en width para que sea relativo al contendor, pero tenemos el problema que eso no lo podemos hacer en el height por lo que el aspect ratio variaria según el tamaño del contenedor lo que resulta muy molesto especialmente en un video. Para solucionar este problema usaremos un div que contendrá el iframe <div class= "wrapper"> <iframe src="https://www.noteboardapp.com/oscardediosrodriguez?embed" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> 1234 <div class= "wrapper"> <iframe src="https://www.noteboardapp.com/oscardediosrodriguez?embed" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div> Y el CSS necesario: .wrapper { position: relative; width: 80%; height: 0; padding-bottom: 75%; overflow: hidden; } .wrapper iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } 1234567891011121314 .wrapper { position: relative; width: 80%; height: 0; padding-bottom: 75%; overflow: hidden;}.wrapper iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%;} La capa en la que “envolvemos” el iframe la posicionamos con absolute para posteriormente poder posicionar el iframe relativamente al wrapper. El width lo pondremos con el porcentaje que nos interese respecto al contenedor de la página y el height a cero. En el padding-bottom está la parte más interesante del div exterior. La altura la ponemos a cero por no poder poner porcentaje porque es con el padding con lo que controlaremos la altura con el aspect ratio que deseemos. En el caso del ejemplo he querido un 75%. Por ejemplo para el aspect ratio de los videos a 16:9 pondriamos un padding-bottom de 9/16 *...
por Oscar de Dios | 3 Jun, 2014 | CSS
Hace un tiempo vi un video de una presentación de Lea Verou, uno de los cracks mundiales del CSS, sobre la propiedad border-radius. Al principio llama la atención que se pueda hablar mucho rato sobre esta propiedad, pero como tantas otras, sobre todo de CSS3, esconde en su interior mucha más potencia de lo que parece. Uno de los momentos estelares del video es cuando combina el border-radius con animación consiguiendo un efecto muy potente sólo con CSS y unas pocas líneas de código. El efecto es el siguiente: (en el video de Lea es más espectacular porque anima un gráfico SVG más vistoso, la imagen de la cabecera de este post). El video, muy recomendable, es este: http://vimeo.com/70171266 el ejemplo que menciono está en el min 34. Voy a hacer una breve introducción a la animación CSS y al border-radius para explicar este ejemplo. Animación CSS La ventaja principal de la animación CSS respecto a hacerla con javascript es que es más óptima y consume menos recursos. Es más fácil que ordenadores poco potentes la realicen con suavidad. Está disponible en todos los navegadores modernos desde hace unas bastantes versiones excepto, como no, nuestro amigo Internet Explorer que sólo la permite desde IE 10. A continuación, para simplificar, pondré la sintaxis básica sin los prefijos de los diferentes navegadores: Primero hay que definir en el elemento a animar el nombre de la animación, el tiempo de cada iteración y las veces que se realizará la animación. Con alternate conseguimos que la siguiente iteración sea en el orden contrario a la anterior: .elemento-a-animar { animation: nombre 1s infinite alternate; } 1234 .elemento-a-animar{ animation:...
Comentarios recientes