1Responsive Elements and Media

In this chapter, you will learn about:

Resizing an image using percent width Responsive images using the cookie and JavaScript Making your video respond to your screen width Resizing an image using media queries Changing your navigation with media queries Making a responsive padding based on size Making a CSS3 button glow for a loading element

Resizing an image using percent width(Redimensionar una imagen que usa la anchura de por ciento)

Este mtodo confa en la codificacin de lado de cliente para redimensionar una imagen grande. Esto sirve slo una imagen al cliente y lo pide dar la imagen segn el tamao de la ventana del browser. Esto es por lo general el mtodo preferible cuando usted es confidente que los clientes tienen la amplitud de banda para trasvasar la imagen sin hacer que la pgina cargara despacio.Preparacin

Primero usted necesitar una imagen. Para encontrar una imagen de alta calidad, use la Bsqueda de Imagen Google. Una bsqueda para robots, por ejemplo, la bsqueda me da 158,000,000 de resultados, que estn bastante bien. Sin embargo, que realmente quiero es una imagen grande, entonces pulso sobre instrumentos De bsqueda, y luego pulso sobre Cualquier Tamao, que cambio a Grande. Todava tengo 4,960,000 imgenes para escoger. La imagen debera ser redimensionada para emparejar la escala ms grande visible. bralo en su software de edicin de imgenes. Si usted no tiene un software de edicin de imgenes ya, hay muchos libres, vaya consiguen el que. Gimp es un software de edicin de imgenes poderoso y esto es la fuente abierta, o libre de trasvasar. Vaya a http: // www.gimp.org para conseguir este software de edicin de imgenes poderoso abierto de la fuente.

Como hacerlo Una vez que usted tiene su software de edicin de imgenes, abre la imagen en ello y cambia la anchura de la imagen a 300px. Salve su nueva imagen y luego mueva o upload la imagen a su directorio de web.Su HTML debera contener su imagen y algn texto para demostrar el efecto sensible. Si usted no tiene el tiempo para escribir su historia de la vida, usted puede volver al Internet y conseguir algn texto de la muestra de un generador Ipsum. Vaya a http: // www.lipsum.com y genere un prrafo de texto Ipsum.

Su CSS debera incluir una clase para su prrafo y un para su imagen y una envoltura de imagen. Ponga a flote el prrafo a la izquierda y dele una anchura del 60 %, y la envoltura de imagen con una anchura del 40 %.

Esto crea una disposicin fluida, pero an no hace nada para crear una imagen sensible. La imagen se quedar en una anchura esttica de 300px hasta que usted aada CSS siguiente. Entonces, aada una nueva clase al CSS para la imagen. Asgnelo un valor de anchura de mximo del 100 %. Esto permite a la anchura adaptarse a los cambios de anchura de browser. Despus, aada una caracterstica de altura dinmica a la clase.

Esto crea una imagen que responde a la anchura de la ventana de browser con una versin optimizada de aquella imagen para la audiencia.

Como esto trabaja

La caracterstica sensible de la imagen CSS lo fuerza a tomar el 100 por ciento de su elemento paternal. Cuando los cambios de anchura del elemento paternal, la imagen se cambia para llenarse en aquella anchura. La altura: la caracterstica automtica acta para conservar la relacin de aspecto de la imagen.

Responsive images using the cookie and JavaScript (Imgenes sensibles que usan la cookies y JavaScript)

La anchura de una imagen sensible puede ser entregada por la lgica de servidor complicada. A veces debido a las exigencias usted no puede alcanzar los resultados deseados por el mtodo ms fcil. El mtodo de anchura de por ciento confa en el lado de cliente para la imagen redimensionar de un archivo de imagen grande. Este mtodo proporciona una entrega de lado de servidor de la imagen correctamente clasificada que usted solicita. Esto puede reducir la carga de servidor y la amplitud de banda y ayudarle con la carga larga, si usted est preocupado con la carga lenta que afecta el funcionamiento de su website.Preparandonos

Estos mtodos requieren que su servidor realice algn tipo de la funcin lgica sobre ello. En primer lugar, esto requiere PHP sobre su servidor. Esto tambin requiere que usted cree tres versiones diferentes clasificadas de la imagen y los sirvan al cliente como solicitadoComo hacerlo El JavaScript es simple. Esto crea una galleta basada en las dimensiones de pantalla de su dispositivo. Cuando el cliente hace una peticin al servidor para una imagen, esto enciende el cdigo de PHP para entregar la imagen apropiada.

Ahora, sobre su servidor, cree una carpeta de imgenes en el directorio de web y cree un archivo PHP (index.php) con el cdigo siguiente en ello:

Ahora con su software de edicin de imgenes, abra su imagen grande y cree dos ms pequeas versiones de ello. Si la versin original es 300px, entonces haga las dos siguientes copias 200px y 100px. Entonces, llmelos robot.png, robot-med.png, y el robot-low.png respectivamente. Upload estas tres imgenes en la carpeta de imgenes.ltimo, pero no lo menos, ponga el archivo de HTML siguiente en la raz de documento de su servidor:

Usted puede ver la receta en la accin en screenshot siguiente:

Mientras este mtodo es limitado con el entregamiento de una imagen especfica para cada tamao de pantalla, y no es fluidamente dinmico, esto realmente proporciona la misma funcionalidad sobre el lado de servidor como una pregunta de medios de comunicacin CSS. Usted puede el estilo la imagen servida con CSS o animarlo con JavaScript. Esto puede ser usado con una combinacin de mtodos de proporcionar el contenido sensible.El cdigo para esta receta al principio fue creado por la gente inteligente en http://www.html.it/articoli/responsive-images-con-i-cookie/.

Como esto trabaja

The HTML file first creates a cookie describing your device's screen dimensions. When theimage element calls the PHP file it works like an include statement in PHP. The PHP filefirst checks for the file to exist, then reads the cookie for the screen width, and delivers theappropriate-sized version of the image.

Making your video respond to your screen width(La fabricacin de su vdeo responde a su anchura de pantalla)

Derramar de vdeo tambin puede ser sensible. Usted fcilmente puede encajar un vdeo HTML5 en su pgina y hacerlo sensible. La etiqueta de vdeo fcilmente apoya la utilizacin de una anchura de por ciento. Sin embargo, esto requiere que usted tenga la fuente de vdeo sobre el anfitrin de su website. Si usted tiene este disponible, esto es fcil.

Sin embargo, usando un sitio que recibe vdeo, como YouTube o Vimeo, tiene muchas ventajas sobre la recepcin de ello usted mismo. Primero, hay cuestin de amplitud de banda, usted puede tener la amplitud de banda o lmites de espacio de disco sobre su servidor que recibe. Adems, sitios que reciben vdeo hacen la conversin upload a un vdeo utilizable de web sorprendentemente fcil, comparado a la utilizacin slo sus propios recursos.Preparandonos

Los sitios que reciben vdeo le permiten encajar un iFrame o el trocito de cdigo de objeto en su pgina para derramar el vdeo sobre su sitio. Esto no trabajar dentro de la etiqueta de vdeo. Tan, para hacerlo sensible, hay un mtodo ms complejo, pero todava fcil.

Como hacerlo El abrigo el trocito de vdeo de la fuente en HTML que contiene el elemento de divisin y le da un acolchado del 50 a 60 por ciento sobre las posiciones inferiores y relativas. Entonces d su elemento infantil, el vdeo iFrame el objeto, una anchura del 100 % y la altura del 100 %, y una posicin absoluta. Esto hace el objeto de iFrame completamente llenarse en el elemento paternal. Lo siguiente es el cdigo de HTML que usa una etiqueta iframe para conseguir un vdeo de Vimeo:

Lo siguiente es el cdigo de HTML que usa el ms viejo objeto de YouTube con el margen:

Ambos tipos de vdeo usan mismo CSS:

Usted no podra querer que el vdeo subiera la anchura entera de la pgina. En este caso, usted puede limitar la anchura del vdeo que usa la anchura y la anchura de mximo. Entonces, abrguese el elemento de abrigo de vdeo con otro elemento de divisin y asigne un valor de anchura fijo y el max-width:100%

Esta receta trabajar sobre todos los navegadores modernosComo esto trabaja

Llaman Proporciones Intrnsecas a este mtodo para Vdeos, creado por Thierry Koblentz a una Lista Aparte. Usted se abriga el vdeo dentro de un elemento que tiene una relacin de aspecto intrnseca, y luego dar una posicin absoluta al vdeo. Esto cierra la relacin de aspecto, permitiendo al tamao para ser el fluido.

Resizing an image using media queries (redimensionar un imagen usando media queries)

La pregunta de medios de comunicacin es otro mtodo til y sumamente personalizable para imgenes sensibles. Esto es diferente que la anchura sensible fluida alcanzada por el mtodo de anchura de por ciento. Su diseo puede requerir algunas anchuras de imagen especficas para gamas de tamao de pantalla diferentes y una anchura fluida rompera su diseo.Preparandonos

Este mtodo slo requiere una imagen, y hace el navegador del cliente redimensionar la imagen en vez del servidorComo hacerlo El cdigo de HTML es simple, usando la etiqueta de imagen estndar, crear un elemento de imagen, as:Para comenzar con una versin simple, cree una pregunta de medios de comunicacin que descubrir el tamao de la ventana de navegador y entregar una imagen ms grande para pantallas de navegador ms grande que 1024px, y una ms pequea imagen para ms pequeas ventanas de navegador. Primero la pregunta de medios de comunicacin, esto busca la pantalla de tipo de medios de comunicacin, y luego el tamao de pantalla. Cuando la pregunta de medios de comunicacin est satisfecha el navegador dar el CSS dentro de los anaqueles.Ahora, aada una clase a su etiqueta de imagen. La clase responder de manera diferente en preguntas de medios de comunicacin diferentes, como mostrado en la lnea de cdigo siguiente:La adicin de la clase CSS a cada pregunta de medios de comunicacin con un tamao diferente har el navegador dar el tamao de imagen deseado a cada uno la ventana de navegador clasificada de manera diferente. La pregunta de medios de comunicacin puede coexistir con otras clases CSS. Entonces, fuera de las preguntas de medios de comunicacin, aada una clase CSS para la imagen con height:auto. Esto trabajar para ambas preguntas de medios de comunicacin con slo la adicin de una lnea de CSS.Hacer la imagen responden a mltiples gamas usted puede combinar la anchura de mximo y preguntas de medios de comunicacin de anchura de minuto. Especificar un tamao de imagen para ventanas de navegador, clasificadas entre 1024px y 1280px, aaden una pregunta de medios de comunicacin para la pantalla, 1024px como la anchura de minuto, y 1280px como la anchura de mximo.Usted puede especificar muchos tamaos de imagen diferentes para muchos tamaos de ventana de navegador diferentes con el mtodo de pregunta de medios de comunicacin.Como FuncionaLa pregunta de medios de comunicacin de CSS3 da sus condiciones CSS lgicas basadas en las propiedades viewport del navegador, y puede dar estilos diferentes basados en las propiedades de ventana del navegador. Esta receta aprovecha esto por poniendo una anchura de imagen diferente para los tamaos de ventana de mucho navegador diferente. As la entrega un tamao de imagen sensible, usted puede controlar con un alto grado de granularidad.

Changing your navigation with media queries (Cambiando la navegacin con media queries)

La pregunta de medios de comunicacin puede hacer ms que justo redimensionar imgenes. Usted puede usar la pregunta de medios de comunicacin para entregar mucho ms pgina web dinmica a sus espectadores. Usted puede mostrar un men sensible basado en tamaos de pantalla diferentes que usan preguntas de medios de comunicacin.Preparandonos

Para hacer un sistema de men sensible, usando dos mens diferentes mostraremos un men dinmico para tres tamaos de ventana de navegador diferentes.Como hacerlo .

Para las ms pequeas ventanas de navegador, y sobre todo para dispositivos mviles y tablets, crean un men simple escogido que slo sube una pequea cantidad de espacio vertical. Este men usa un elemento de forma de HTML para las opciones de la navegacin que enciende un cdigo de JavaScript para cargar la nueva pgina sobre la seleccin

Para los tamaos de ventana de navegador ms grandes, cree un elemento de lista de ul simple que puede ser labrado por CSS. Este men recibir una disposicin diferente y mirar de las preguntas de medios de comunicacin diferentes. Este men es aadido a la misma pgina despus del men escogido:

Para hacer el men sensible, cree una pregunta de medios de comunicacin para los tamaos de ventana de navegador objetivo. Para ventanas de navegador ms pequeo que 800px, el CSS mostrar slo la forma escogida dentro del elemento de divisin con la clase de men pequeo, para todas las ventanas de navegador ms grandes, el CSS mostrar la lista de ul dentro del elemento de divisin con la clase de men grande. Esto crea un efecto donde la pgina cambiar entre mens cuando la ventana de navegador cruza la anchura de 801px.Para los tamaos de pantalla ms grandes, usted puede usar mismo ul catalogan y usan la pregunta de medios de comunicacin an con relacin a entregan un men diferente por simplemente cambiando hacia fuera el CSS y usando mismo HTML. Para el men de tamao mediano, use CSS para mostrar los artculos de lista como una lista horizontal, como mostrado en el trocito de cdigo siguiente:Esto gira la lista en una lista horizontal. Queremos esta versin de la navegacin para aparecer sobre las ventanas de navegador de tamao mediano. Colquelo dentro de la pregunta de medios de comunicacin que se extiende entre 801px y 1024px, como mostrado en el trocito de cdigo siguiente:Para ms lejos utilizar los elementos sensibles de la navegacin del mejor modo posible, queremos que la versin de lista de men se mueva a una posicin de disposicin diferente cuando la anchura de la pantalla se cambia. Para la anchura media, 801px a 1024px, el men se queda la cima de la pgina y tiene una anchura del 100 %. Cuando la pantalla es ms amplia que 1025px, el men se flotar al izquierdo lado de su elemento paternal. Aada al 801px a 1024px los medios de comunicacin preguntan una anchura del 100 % a la clase de men grande, y al 1025px la pregunta de medios de comunicacin, aaden una anchura del 20 % y un valor de float:left a la clase de men grande.Para llenar la pgina tambin agregaremos que un prrafo de texto se abrig en un elemento de divisin. Usted puede volver al Lorem Ipsum el generador de texto para crear el texto de relleno (http: // lipsum.com/). En la pregunta de medios de comunicacin de anchura media dan el elemento que contiene el prrafo una anchura del 100 %. En la pregunta de medios de comunicacin ms grande, d el elemento que contiene el prrafo una anchura del 80 % y pngalo a flote al lado derecho de su elemento paternal.

Y su estilo debera mirar como mostrado en el trocito de cdigo siguiente:El resultado final es una pgina con tres versiones diferentes de la navegacin. Su audiencia estar asombrada cuando dado una versin optimizada del men para cada tamao de ventana de navegador particular. Usted puede ver los elementos de la navegacin en toda su gloria en screenshot siguiente:

Como trabaja .Cada versin de la navegacin utiliza la propiedad de la pregunta CSS3 de medios de comunicacin para maximizar el espacio disponible para el men y el contenido. En la ventana ms pequea, debajo 1024px, la navegacin es embalada muy bien dentro de un elemento de forma escogido. La ventana media, en los lmites de 1025px a 1280px, la navegacin es ntegra y atraviesa a travs de la cima de la pgina, y es seguida del contenido. Finalmente, en las anchuras de navegador ms amplias, el men se flota a la izquierda y toma slo el 20 por ciento del espacio de pantalla horizontal, mientras el contenido es maximizado sobre el 80 por ciento restante (el lado derecho) de la ventana de navegador amplio. Esta tcnica requiere ms planificacin y esfuerzo, pero bien lo merece para entregar la mejor inspeccin posible a su audiencia.Making a responsive padding based on size (Fabricacin de un padding sensible basado en tamao)

Para complementar un elemento de imagen de anchura sensible, el acolchado de pariente puede ser aadido. Con un acolchado de anchura esttico, el acolchado de imagen puede aparecer demasiado grueso en ms pequeas ventanas de navegador y atestar cualquier otro elemento cerca, o puede empujar la imagen de la pantalla.Empezamos

Un lugar bueno para comenzar es con alguna comprensin del clculo de las propiedades de modelo de caja. La anchura total que un objeto toma es su anchura real ms su padding, border,and margin on both sides, or 2 x (margin + border + padding) + content = total widthComo se hace .Para una imagen que es 200px amplia en su estado normal no sensible, su padding tpico puede ser 8px, por lo tanto usando el modelo de caja anterior, la frmula puede ser enmarcada as:2 x ( 0 + 0 + 8px ) + 200px = 216pxPara encontrar el porcentaje de padding, divida el padding por el width total, 8 / 216 = el 0.037 % dado la vuelta al 4 %.Creamos este CSS Y HTML antes cuando creamos la imagen de width % sensible. Aada a la imagen clasifican un padding del 4 %.Para ayudar usted para ver el cambio de anchura de acolchado real como usted cambia el tamao de la ventana de navegador, aade background color (background-color: #cccccc;) a su imagen CSS.

Como funciona .

El padding de la imagen rellena el juego en el 100% se atendr al borde de su elemento paternal. Como los cambios de tamao de elemento paternales, el acolchado de imagen se adapta en consecuencia. Si usted ha hecho su caja modelan matemticas correctamente, su disposicin satisfactoriamente responder a la su anchura de cambio de la ventana de navegador.Making a CSS3 button glow for a loading element(La fabricacin de un botn CSS3 brilla para un elemento que carga)

Su sitio web, como muchos otros, puede satisfacer a la gente impaciente. Si su sitio tiene una forma de submitable, sus usuarios pueden encontrarse pulsando el botn "someter" varias veces con impaciencia si su pgina no carga el nuevo contenido bastante rpido. Esto puede ser un problema cuando esto causa mltiples sumisiones de forma con los mismos datos.Preparandonos

Usted puede parar este comportamiento por aadiendo algunas seales simples visuales que dicen al usuario que algo pasa entre bastidores y ser un pequeo paciente. Si es un poquito llamativo, esto an podra traer un poco de luz del sol en sus vidas apresuradas de otra manera. Esta receta no requiere ninguna imagen, vamos a crear un hermoso gradiente someten el botn que usa CSS slo. Usted puede querer hacer una pausa e ir consiguen una taza del caf, como esto es la receta ms larga en este captulo..Como hacerlo .Usted puede comenzar por creando un form con algunas cajas de texto y un botn enviar. Entonces, haga la forma realmente refrescar, usar el HTML5 placeholder la propiedad para la etiqueta. Incluso con el placeholders, la forma es bastante aburrida. Note que esto an no es apoyado en Internet Explorer 9.

Pero aadiendo propiedades CSS podemos comenzar a dar alguna vida al botn:

Esto es ilustrado en screenshot siguiente:

El botn puede hacerse an ms brillante cuando aadimos un efecto de gradiente CSS3. Para lograr esto, debe haber una lnea diferente de CSS para cada navegador que da el motor: pera, Internet Explorer, WebKit (Cromo y Safari), y Firefox. Usted puede aadir tantos cambios de gradiente como usted quiere, simplemente por aadiendo una fase en color y la posicin de % de la cima, cada cambio separado por una coma, como mostrado en el trocito de cdigo siguiente:Esto es ilustrado en screenshot siguiente:

Otro efecto puede ser aadido al botn por CSS, el efecto de planeo. Con esta propiedad, cuando el indicador se mueve sobre el botn, esto se parece a ello est siendo presionado en. CSS siguiente le ayudar a agregar que la frontera oscura al botn:

Esto es ilustrado en screenshot siguiente:

La utilizacin CSS3 Box Shadows y jQuery que podemos hacer una animacin simple de un halo de emisin de impulsos alrededor del botn Someter despus de que usted lo empuj. Cree a un oyente de acontecimiento con jQuery que escucha para el acontecimiento de chasquido del botn, y sobre aquel acontecimiento de chasquido una serie de cambios de clase sobre el elemento de botn de forma. El parcial - se descoloran la clase ser aadida por la escritura al elemento de botn.Entonces, inserte la escritura siguiente despus de los finales de forma:

Terminar para hacer el botn brillan cuando usted pulsa ello, agregue que la nueva clase parcial - descolora, a su archivo CSS y le da una Propiedad de Sombra de Caja de CSS3, y cambia las propiedades de frontera.

Ahora, el botn Someter dar un destello de azul cuando presionado. Screenshot siguiente muestra el producto final:

Whew! Este botn era mucho trabajo para un tan pequeo detalle, pero los detalles como esto realmente ayudarn a hacer un sitio web gran que mira. Esto resulta ser uno de mi favorito destaca para sorprender a mi audiencia por.Como funciona ..El gradiente CSS3 de fondo es un modo fcil de hacer un botn gran que mira coherentemente a travs de navegadores. El gradiente es complicado y cada navegador actualmente requiere su propia lnea para CSS. Usted puede controlar los lmites de facturacin de gradiente por aadiendo el porcentaje y colores a mano. Aadiendo la sombra de caja, las fronteras, y jQuery se ren efectos sobre el botn cuando el acontecimiento es encendido.

2Responsive Typography (tipografa responsive)

In this chapter, you will learn about: Creating fluid, responsive typography Making a text shadow with canvas Making an inner and outer shadow with canvas Rotating your text with canvas Rotating your text with CSS3 Making 3D text with CSS3 Adding texture to your text with CSS3 text masking Styling alternating rows with the nth positional pseudo class Adding characters before and after pseudo elements Making a button with a relative font size Adding a shadow to your font Curving a corner with border radius

Introduccin