1

Responsive 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 solicitado
Como 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 the
image element calls the PHP file it works like an include statement in PHP. The PHP file
first checks for the file to exist, then reads the cookie for the screen width, and delivers the
appropriate-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 modernos
Como 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 servidor
Como 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 Funciona
La 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 width
Como 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 = 216px
Para 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.




2
Responsive 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