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