Efectos de desplazamiento para imágenes css. Efectos de desplazamiento CSS: para imágenes, botones, al pasar el cursor sobre enlaces, bloques, etc. Efecto animado CSS al pasar el cursor

Preparación de cualquier Imagen digital, legible gráficamente editor de adobe Photoshop, ya sea un archivo PSD, una imagen TIF o una imagen JPEG grande, para su publicación en un sitio web, foro o en las redes sociales, así como para envío por correo electrónico. En otras palabras, "japeg" para Internet. Funcionó en rima.

Por supuesto, los formatos de imagen que Photoshop puede leer no se limitan a los tres mencionados anteriormente. Y lo bueno es que la mayoría se pueden convertir a JPEG. Independientemente del formato fuente, hay dos formas de "japegizar" Photoshop. La oportunidad de elegir es doblemente placentera. Ambas formas son diferentes. Diferencias externas se detectan a simple vista, resaltaré específicamente las diferencias de propósito (“¿Qué camino seguir?”).

En este tutorial presentaré dos instrucciones paso a paso con las inclusiones teóricas necesarias. Está diseñado para mostrarle cómo guardar de manera óptima su dibujo, collage o fotografía virtual en un formato ampliamente utilizado. formato JPEG. Este último es más eficaz para imágenes con transiciones de color suaves.

Para consolidar y ampliar los conocimientos adquiridos, así como desarrollar habilidades, he preparado ejercicios adecuados. Le sugiero que los complete y luego publique sus resultados en los comentarios de esta lección. Pruébalo en " condiciones de campo"¡Tu habilidad!

primera manera

1 paso

Abro la imagen original en Photoshop. En mi caso, se trata de un archivo llamado "Ejemplo.psd" que contiene una bola extraída.

En el teclado presiono la combinación de teclas “Ctrl”, “Shift” y la tecla marcada letra latina“S” o seleccione “Archivo” en el menú principal (“Archivo”) > “Guardar como...” (“Guardar como...”). Aparece un cuadro de diálogo titulado "Guardar como".

Paso 2

Elijo la ubicación de la futura imagen JPEG. En el campo "Nombre de archivo", ingrese un nuevo nombre para la imagen, si es necesario. En la lista desplegable "Tipo de archivo", seleccione el formato "JPEG (*.JPG, *.JPEG, *.JPE)".

Dejo los parámetros a continuación sin cambios, asegurándome de que se especifique y seleccione sRGB "estándar" como el perfil de color incrustado en la futura imagen JPEG. Si este es el caso, paso al paso 4.

Si se especifica algo más en lugar de sRGB perfil de color, por ejemplo, ProPhotoRGB o AdobeRGB, luego, antes de comenzar el procedimiento discutido en la lección, convertiré la imagen original a espacio de color sRGB para una visualización de color consistente en la mayoría de los dispositivos. Lo haré de esta manera.

Paso 3

Presiono la tecla "Esc" en mi teclado para cerrar la ventana "Guardar como".

Selecciono “Imagen” > “Modo” en el menú principal. Si la casilla de verificación está marcada frente a “8 bits\canal” (“8Bits\Channel”), seleccione “16 bits\canal” (“16bits\Channel”). Es deseable aumentar la profundidad del color para que la conversión de un perfil de color a otro se produzca con precisión. Visualmente, es poco probable que los cambios en la profundidad del color se reflejen en las imágenes originales y finales.

Luego selecciono “Editar” > “Convertir a perfil” en el menú principal. Aparece un cuadro de diálogo con el título Convertir a perfil.

En mi caso, el perfil de color original (“Source Space”) que describe los colores en el dibujo se llama “Adobe RGB (1998)”. Selecciono el valor "sRGB IEC61966-2.1" en la lista desplegable "Espacio de destino". Verifico los parámetros de conversión: se encuentran a continuación: el parámetro "Herramienta" ("Motor") está configurado en "Adobe (ACE)", "Método (renderizado)" ("Intención") - "Colorimétrico relativo", configurado allí hay una marca de verificación junto a la opción "Usar compensación de puntos negros"; no hay ninguna marca de verificación junto a la opción "Aplanar imagen para conservar la apariencia".

Si aumentó la profundidad del color (lo hice un poco antes), la opción "Usar tramado" aparecerá atenuada. si en abrir imagen Solo hay una capa (cuando abres imágenes JPEG o imágenes TIF “simples”, este suele ser el caso), entonces la opción “Aplanar imagen para preservar la apariencia” también está inactiva.

Hago clic en el botón "Listo" ("Aceptar"). La ventana Convertir a perfil desaparece.

Etapa 4

Aparece un nuevo cuadro de diálogo con el título "Opciones JPEG" en la ventana principal del programa. El parámetro "Calidad" le permite establecer la relación entre la calidad de la imagen de salida y la cantidad de espacio que ocupará la imagen en la memoria de la computadora. Por tanto, el precio por reducir el volumen es la degradación de la calidad de la imagen original. Cómo menos valor Parámetro “Calidad”, menor será el tamaño de la imagen JPEG.

En el ejemplo que estamos considerando, me centraré en un valor de 6.

Para evaluar la calidad de la imagen antes de guardarla, marcaré la casilla junto al parámetro "Vista previa".

Paso 5

Estableceré el valor del segundo parámetro, "Opciones de formato", igual a "Optimizado estándar" ("Optimizado de línea base"). El volumen de la futura imagen JPEG ha disminuido, pero la calidad de la imagen sigue siendo la misma.

Paso 6

Hago clic en el botón "Listo" ("Aceptar") en la ventana "Opciones JPEG" y verifico el resultado.

Comparo los volúmenes de la imagen PSD original (~ 3000 Kb) y la imagen JPEG final (82 Kb). Así, el archivo JPEG resultó ser aproximadamente 36 veces más pequeño que la imagen original con calidad visual igual. ¡Cómodo!

Tenga en cuenta que el tamaño de la imagen JPEG final sigue siendo el mismo que el de la imagen PSD original: 2480 píxeles × 2480 píxeles.

Segunda forma

1 paso

Abro la imagen original en Photoshop.

Presiono la combinación de teclas “Ctrl”, “Alt”, “Shift” y la tecla designada por la letra latina “S” en el teclado, o selecciono “Archivo” > “Guardar para Web” en el menú principal (“ Ahorrar para Web...").

Aparecerá un nuevo cuadro de diálogo con el título del mismo nombre.

Paso 2

Paso 3

Configuré el parámetro "Calidad" al máximo.

Etapa 4

Reduzco el tamaño de la imagen usando el parámetro "Tamaño de imagen".

Esta es una operación opcional, pero ayuda a reducir significativamente el tamaño de la futura imagen JPEG, generalmente con una pérdida mínima de calidad. Reducir el tamaño, por un lado, provocará una disminución natural del volumen y, por otro, una disminución del detalle. Esto último, a su vez, limita mi capacidad para imprimir la imagen JPEG final. Si no planeo imprimir el último, me olvidaré de las restricciones.

EN en este ejemplo Introduzco el valor 600 en el campo "Ancho". El valor en el campo "Alto" cambiará automáticamente. Además, el tamaño de la imagen de salida cambiará automáticamente en relación con el tamaño dibujo original, especificado en el campo “Porcentaje”. Los cambios se producen automáticamente y el campo "Porcentaje" está en estado activo si los campos de parámetros "Ancho" y "Alto" están conectados, como lo demuestra el icono correspondiente ubicado a la derecha de los campos nombrados.

En la ventana de vista previa de la izquierda evaluaré el tamaño y la calidad de la imagen. Y puedo averiguar el volumen aproximado de este último por el número indicado, normalmente en kilobytes (Kb) o megabytes (Mb) debajo de la esquina izquierda de la ventana.

Paso 5

Marco la casilla junto a la opción "Optimizado".

Paso 6

Si quiero reducir aún más el volumen de la imagen de salida, reduzco el valor del parámetro "Calidad". Recomiendo ceñirse a valores entre 45-90.

EN en este caso Elegiré un valor de 75.

Como resultado, en promedio, con una velocidad de acceso a Internet de un megabit (1 Mbits), el tiempo que tardará en descargar mi dibujo de Internet será de un segundo. Se indica debajo del valor de volumen de la futura imagen JPEG.

Al mismo tiempo, visualmente la imagen resultó bastante calidad aceptable, las transiciones de tono son bastante suaves.

Paso 7

Marco la casilla junto a "Convertir a sRGB" y selecciono "Color del monitor" en la lista desplegable a continuación.

Paso 8

Finalmente, marco la casilla junto a la opción "Incrustar perfil de color".

Es recomendable realizar las acciones de los pasos 7 y 8 para que la futura imagen JPEG se muestre aproximadamente por igual en varios dispositivos.

Paso 9

En el cuadro de diálogo que aparece con el título "Guardar optimizado como", selecciono la ubicación de la imagen JPEG y establezco su nombre, si es necesario. presiono ventana activa Botón "Guardar". Ambas ventanas desaparecen. Ahora puedo evaluar el resultado.

Cierro la imagen original. En el cuadro de diálogo que aparece pidiéndole que guarde los cambios, seleccione "No".

La imagen obtenida mediante el segundo método se puede utilizar cómodamente para publicarla en Internet. Y la imagen obtenida mediante el primer método puede, además de publicarse en Internet, imprimirse. Dado que el tamaño de la imagen no cambió, no fue interpolada, lo que significa que su calidad es a priori mayor que la calidad de la imagen obtenida por el segundo método.

Te contaré más sobre la interpolación y su impacto en la degradación de la calidad de la imagen digital en la lección "¿Qué es la interpolación?"

​

Para consolidar los conocimientos adquiridos, te sugiero que no solo guardes varias fotografías propias en formato JPEG, sino que también completes los ejercicios adjuntos a esta lección. Estos últimos cubren los desafíos que puede encontrar en su carrera fotográfica.

Definición de ideal calidad JPEG Tanto en Photoshop como en Lightroom puede ser un desafío porque a menudo vemos dos diferentes significados, entre los cuales se nos pide que elijamos. Photoshop ofrece al usuario niveles de compresión de 0 a 12 al guardar imágenes en formato JPEG mediante la opción Guardar o Guardar como, mientras que Lightroom ofrece una opción de porcentaje. Los porcentajes son más fáciles de percibir que los números del 0 al 12, ya que nos resulta más fácil relacionarnos al 100% con “ mejor calidad Imágenes". No está claro por qué Adobe creó confusión con el significado de los números, ya que en ninguna parte de la documentación hay información sobre qué rango representan estos mismos números.

Es cierto que el valor porcentual que vemos en Lightroom en realidad no representa los valores reales de 0 a 100. Adobe simplemente decidió mostrar una escala de 0 a 12 en porcentaje. En última instancia, esto significa que pasar de un número a otro, por ejemplo en el rango del 85% al ​​90%, no supondrá ninguna diferencia en la compresión y el tamaño de la imagen, mientras que cambiar del 84% al 85%, por el contrario, sí hará una diferencia significativa.

Debajo están varias ventanas que estamos acostumbrados a ver. Primero, verá la ventana que aparece cuando hace clic en el botón Guardar o Guardar como y selecciona el formato JPEG en Photoshop:

Como ya se mencionó, en esta ventana puede seleccionar un valor en una escala de 0 a 12. Y aquí está la ventana de exportación de Lightroom:

Aquí vemos información sobre la titulación. Compresión JPEG del 0% al 100%.

Ahora echemos un vistazo a la siguiente tabla, donde los valores de la escala de Photoshop de 0 a 12 se muestran como porcentajes:

Entonces, ¿qué significa esto? En general, esto significa que algunas cifras no tienen ningún significado, mientras que otras tienen un impacto significativo en la calidad, incluso con el más mínimo cambio en la escala porcentual. Es decir, elegir una calidad del 80% te dará el mismo resultado que elegir un 77% o un 84%. Y hasta que elijas el 85%, nada cambiará. Lo mismo se aplica al 90%: ¡este nivel de calidad no es diferente del 85%!

Función Guardar para Web de Photoshop

La función Guardar para Web de Photoshop funciona de manera ligeramente diferente a las opciones Guardar y Guardar como analizadas anteriormente en la exportación de Photoshop y Lightroom porque utiliza un algoritmo de compresión diferente. Aquí todos los números del 0 al 100 son importantes y el tamaño del archivo puede variar significativamente.

Lo que es particularmente digno de mención acerca de esta característica es que está optimizada para archivos de baja resolución destinados a ser publicados en un sitio web. Como puede ver, aquí hay más opciones para configurar JPEG, por ejemplo, puede seleccionar, guardar datos EXIF​​(campo de metadatos) o eliminarlos por completo junto con el perfil de color.

Relación de compresión JPEG óptima

Si siempre ha seleccionado 12 o 100% de calidad al exportar imágenes JPEG, es probable que tenga muchas imágenes demasiado grandes sin motivo aparente. El caso es que al seleccionar calidad 100% al exportar en formato JPEG, se utiliza una compresión mínima, lo que da como resultado archivos tamano enorme. Esto no sólo aumenta sus requisitos de espacio de almacenamiento, sino que también aumenta el tiempo que lleva cargar imágenes en su sitio y los costos de almacenamiento y almacenamiento. rendimiento. Si bien muchos sitios utilizan varios algoritmos para comprimirlos, sólo unos pocos lo hacen lo suficientemente bien. Entonces, ¿por qué desperdiciar recursos y tiempo subiendo constantemente imágenes con 100% de calidad?

Para la compresión JPEG recomendaría usar el valor 77% V sala de luz, Y 10 V Photoshop. Estas configuraciones le permiten ahorrar aproximadamente un 200% o más de espacio en disco, mientras mantienen suficientes detalles en la escena, sin agregar artefactos visibles. Ocasionalmente hay situaciones en las que pueden aparecer rayas en el cielo al 77%, por lo que si encuentra un problema de este tipo, aumente la calidad al 85%, como regla, esto es suficiente para resolverlo. Casi nunca uso los valores anteriores.

Aunque, para muchas fotos incluso el 77% puede resultar excesivo. Si observa la tabla anterior, elegir una calidad inferior a 10 ahorra mucho espacio.

Si desea reducir significativamente el tamaño del archivo de una imagen, intente mover el control deslizante del nivel de calidad al 62% o incluso al 54% y vea si está satisfecho con el resultado o no. Tenga en cuenta que los resultados variarán de una imagen a otra. Algunas fotos quedarán bien niveles bajos compresión, mientras que otros no.

¿Qué relación de compresión utilizas en Lightroom y Photoshop? Comparta su configuración en los comentarios de este artículo.

Del autor: varias lecciones sobre cómo crear efectos de desplazamiento en CSS puro, ligado a la dirección del cursor. Las lecciones están destinadas a aquellos que tienen al menos un nivel básico. conocimiento HTML y tener conocimientos avanzados de CSS/SASS.

Descargo de responsabilidad

Los efectos no funcionan en navegadores más antiguos; requieren un navegador con la capacidad de representar transformaciones 3D. Revisé los efectos en Últimas Versiones Navegadores Chrome, Firefox y Safari.

También utilizo la maravillosa biblioteca AutoPrefixer para sustituir automáticamente los prefijos de proveedores. Vaya a la configuración de CodePen en Pestaña CSS y seleccione AutoPrefixer.

Efecto de desplazamiento con paralaje

Introducción

Mi diseñador y yo nos encontramos pagina de inicio sitio Festival Kikk En 2015, implementó tarjetas con un efecto de paralaje al pasar el cursor sobre el cursor. Nos gustó y quisimos recrear este efecto en nuestro proyecto. Sin embargo, debido a la naturaleza del código, no pudimos utilizar JS. Comencé a buscar soluciones CSS puras y encontré algo interesante.

tilde todopoderoso

Uno de mis selectores favoritos en CSS es la tilde (~), que selecciona el elemento más cercano que coincide con el selector pero que se encuentra después del primer elemento. Por ejemplo, ul ~p seleccionará p elementos en el siguiente código:

< div > < ul > < / ul > < ol > < / ol > < p > < / p > < p > < / p > < / div >

¡Me di cuenta de que esto se puede usar para crear efectos de desplazamiento basados ​​en la dirección del cursor para casi cualquier cosa!

Estructura

La estructura del enlace es bastante simple: un contenedor con un conjunto de etiquetas. y un contenedor para el contenido de la tarjeta. Todos los atributos href deben tener la misma URL.

Contenido

< div class = "container" > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < div class = "card" > < h1 >Contenido< / h1 > < / div > < / div >

Agreguemos algo de SASS/CSS para colocar todos los enlaces en las esquinas de la tarjeta. Podrías crear más enlaces, pero por simplicidad tomaremos cuatro. Para acelerar el proceso usaremos Haml.

Como no tenemos JS para alertarnos sobre la dirección del movimiento del mouse y la posición del cursor, usaremos enlaces para dividir la tarjeta en zonas de detección. Si, por ejemplo, el cursor aterriza en un enlace El No. 1 está arriba, luego el mouse ingresa a la zona de detección No. 1 antes de ingresar a los No. 3 y No. 4.

efecto de desplazamiento

a (&:hover, &:focus ( ~ .card ( // código CSS ) ) )

&: flotar, &: enfocar ( ~ . tarjeta ( // código CSS

La tarjeta cambiará cuando pase el cursor sobre cualquier enlace, a diferencia del selector +, que selecciona solo elementos adyacentes cercanos.

Transformaciones

Las esquinas están definidas correctamente, ahora agregaremos transformaciones que inclinarán la tarjeta en las esquinas. El primer paso es agregar una perspectiva al contenedor. Normalmente uso algo de alrededor de 1000 px para poder mostrar una ligera profundidad.

Para un paralaje de este tipo, lo más propiedad importante no habrá una transformación, sino un origen de transformación superpuesto a la tarjeta. Debe cambiar para todas las zonas de detección y asignarse a la esquina opuesta a la zona de detección actual.

Por ejemplo, si ingresamos a la zona de detección No. 1 (arriba a la izquierda), el origen de la transformación debe estar en la parte inferior derecha, es decir. esquina opuesta. La conclusión es la siguiente: la esquina afectada debería alejarse de nosotros y las esquinas restantes deberían acercarse a nosotros.

Últimos retoques

Para completar nuestro efecto de paralaje, agreguemos un marco a la tarjeta, que también se doblará cuando pase el cursor sobre el enlace. Esta técnica se puede aplicar a otros elementos de la tarjeta.

// estilos de borde.card ( posición: relativa; .border ( origen-transformación: centro centro; posición: absoluta; arriba: 12px; izquierda: 12px; ancho: calc(100% - 24px); alto: calc(100% - 24px); borde: 2px blanco sólido; ) ) // efecto de paralaje.container ( a ( &:hover, &:focus ( ~ .card ( .border ( transform: TranslateZ(24px); ) ) ) // empujar el marco volver a hacer clic &:active ( ~ .card ( .border ( transform: none; ) ) ) )

// estilos de marco Tarjeta ( posición: relativa; Borde ( transformar-origen: centro centro; posición: absoluta; arriba: 12px; izquierda: 12px; ancho: calc(100% - 24px); altura: calc(100% - 24px); borde: 2px blanco sólido; // efecto de paralaje Envase ( &: flotar, &: enfocar ( ~ . tarjeta ( Borde ( transformar: traducirZ(24px); // empuja el marco hacia atrás haciendo clic & : activo ( ~ . tarjeta ( Borde ( transformar: ninguno;

Todo lo que queda es (1) agregar una transición a la tarjeta para suavizar la transición en las esquinas y (2) eliminar los estilos de enlace para que no sean visibles. Me gusta poner la opacidad en 0 para evitar incidentes. Para evitar la superposición debido a las rotaciones de las tarjetas, también muevo el enlace suspendido hacia adelante.

Resultado

A continuación se muestra la versión completa del efecto de desplazamiento de paralaje. CódigoPen. Active la casilla de verificación para ver la ubicación de los enlaces. Para mejorar el efecto de paralaje, decidí agregar algunos enlaces más.

El efecto de desplazamiento usando un cubo como ejemplo.

Introducción

Solteros de natación para adultos 2016 es otro sitio con un impresionante efecto de desplazamiento basado en la dirección del cursor. Al hacer clic en el icono del calendario a la izquierda esquina superior Se abre un calendario 3D, donde cada día se presenta en forma de cubo, que gira según la dirección del cursor. ¡Gran idea!

Inmediatamente me di cuenta de que se podía lograr un efecto similar usando la tilde. Ya tenía una forma de cubo que podía modificar fácilmente para enlaces y efectos de desplazamiento de paralaje.

La base

Ahora puedes empezar a crear la base del cubo con enlaces. Debe crear un contenedor exterior, cuatro triángulos que se ensamblarán en un cuadrado y un contenedor interior con seis elementos: cuatro vacíos y dos con contenido. Me gusta este orden: arriba, abajo, izquierda, derecha, adelante, atrás.

Contenido frontal
Contenido posterior

< div class = "link" > < a href = "http://codepen.io/gabriellewee/"> < / a > < div >Contenido frontal< / div > < div >Contenido posterior< / div > < / div > < / div >

Para crear enlaces triangulares puedes usar clippy. Para la compatibilidad con Firefox también necesita la ruta del clip SVG. Los enlaces deben tener un valor de traducción positivo (ser enviados a primer plano), de lo contrario se esconderán detrás del cubo.

Para definir el ancho, alto y transformaciones del cubo, usamos una variable con un valor de 12px. Para diferenciar las caras del cubo utilizamos diferentes tonalidades del mismo color para simular la iluminación. La parte trasera es completamente blanca.

Giramos ligeramente el cubo para que puedas ver que todos los lados están alineados correctamente. Si miras la transformación, puedes ver que todos los lados del cubo tienen significado negativo traducirZ. Es decir, todos los lados excepto el frente están al fondo.

La naturaleza de las transformaciones 3D es tal que si no mueves todo el cubo hacia adelante, es posible que parte de él se corte. fondo. Puedes mover el cubo hacia adelante para no tener este problema. Como ya tenía un cubo, apenas lo toqué. Escribe en los comentarios si tienes alguna dificultad para crear un cubo.

efecto de desplazamiento

A continuación, debe agregar una rotación al pasar el mouse. El efecto se puede diseñar como quieras, pero el método más realista que he encontrado es el uso del mouse. Si el mouse ingresa al cubo desde la izquierda, el cubo debe girar de izquierda a derecha. Todos los giros deben ser de 180 grados/0,5 giros o equivalentes negativos. También añadiremos una transición para que el cubo gire correctamente.

Pulido

Hay que pulir dos cosas:

El triángulo inferior da vuelta el texto posterior.

Pasar el cursor es demasiado sensible: la transición entre triángulos provoca giros innecesarios.

Con texto, la forma más sencilla es girar la parte posterior hacia la derecha sin transiciones suaves al giro principal. Por alguna razón, cambiar el triángulo inferior también afecta al superior. Por lo tanto, necesitamos agregar una rotación adicional para ambos efectos de desplazamiento.

La sensibilidad de los efectos de desplazamiento fue más difícil de solucionar. La solución es hacer que el enlace actual ocupe todo el espacio de los otros tres enlaces (ancho/alto completo, eliminar la ruta del clip, avanzar), pero luego el efecto angular interesante desaparece (cuando mueves rápidamente el mouse a lo largo de un curva sobre el cubo). Al final, resolví el problema: establecí un retraso en la transición para que la solución no funcionara si el cursor en el cubo no permanecía más de un segundo. El retraso no elimina todos los problemas, pero mitiga mayoría.

Resultado

Conclusión

Cuánto efectos interesantes El desplazamiento se puede crear usando tildes, transformaciones y transiciones suaves. A mi diseñador se le ocurrió la idea de crear un acuario en el que los peces nadaran en la dirección opuesta al cursor. Puede crear un efecto de ondas de agua, puede rotar imágenes con desplazamiento y también puede crear animaciones con desenfoque de movimiento. ¡Escribe en los comentarios si ya has utilizado esta técnica!

La idea de separar la presentación de información del código que la crea y procesa se volvió radicalmente nueva. Fue solución fuerte en un momento, pero este punto no fue plenamente reconocido entonces. Cuando la programación se separó de la computadora individual, pero no se convirtió en un ganador en red local o una zona de dominio único, e inmediatamente se extendió por todas partes, solo entonces se hizo obvio que presentar información (en términos de diseño) y trabajar con ella (en términos de código) son dos lados en el mismo plano.

Tres facetas del desarrollo de sitios web

Desde un punto de vista formal, hay tres componentes principales (en diferentes formas sintácticas) que componen un sitio web: código PHP, código JavaScript y descripciones. estilos CSS. No importa en absoluto cuál sea el nombre o la versión de tal o cual componente, qué versión marcado HTML se utiliza y qué versión del navegador está instalada. La compatibilidad no se tiene en alta estima hoy en día, porque en cada momento del tiempo es relevante: lo que está codificado y qué de lo que está codificado se puede mostrar y ejecutar.

Si antes las lenguas se peleaban por ideas, hoy los creadores de estándares en el campo de las tecnologías de Internet y los navegadores prefieren luchar en vano.

Personal y publico

Hay muchos medios a través de los cuales se puede acceder a Internet (computadoras, portátiles, tabletas, teléfonos inteligentes) y también hay muchos navegadores. No hay garantía de que un solo dispositivo muestre el sitio en la forma en que lo creó el desarrollador. Los esfuerzos de estos últimos no siempre logran el objetivo y dotan al diseño web de una diversidad única, es decir, la unidad de visualización de la esencia, dondequiera que se revele al visitante.

Al separar lo personal y lo público, utilizando solo lo que funciona en este último, se puede lograr un éxito notable en el diseño. La belleza, el momento artístico y el diseño web son el destino de especialistas y talentos relevantes. CSS es código, aunque muy singular. Su preocupación es describir estilos (opciones para mostrar información). Con el advenimiento dispositivos móviles El CSS se cargó con codificación real en forma de consultas de medios. Así que la posibilidad de una nueva unión entre diseño y código no es tan irreal como podría haber parecido hace apenas un par de años.

Al desarrollar estilos CSS, el desarrollador confía en su experiencia personal comprobada y en aquellos diseños CSS que funcionan en la mayoría de los navegadores y satisfacen a la mayoría de los visitantes del sitio. Debes utilizar el primero tanto como sea posible y el segundo lo menos posible, entonces hay muchas más posibilidades de obtener un resultado que funcione casi siempre y en todas partes.

Primera regla: espere el estándar, pero no se equivoque usted mismo

CSS: hover es cuando el mouse "ingresa" a un elemento de la página. Cuando el mouse hace clic en un elemento, este se activa, pero cuando el cursor se mueve hacia un lado, puede cambiar nuevamente y mostrarse en un estado activo. “:hover”, “active” y “visited” son las pseudoclases más populares a la hora de describir estilos.

Es muy conveniente en el código del sitio no preocuparse por cosas tan pequeñas como mover el mouse sobre los elementos. Proporcionando dos descripciones en la tabla de descripción de estilo:

color de fondo: verde;

Lo obtenemos cuando pasas el mouse sobre el elemento. cambio automático colorear el texto de negro a blanco y cambiar el fondo de este elemento a verde. Las pseudoclases se pueden aplicar a cualquier elemento y lograr una amplia variedad de efectos visuales.



Segunda regla: cuando confíes en los estándares, céntrate en tu código

Todo estaría bien si el progreso se mantuviera al nivel de las computadoras y portátiles equipados con ratones, y el progreso en comunicaciones celulares no condujo a la aparición de teléfonos inteligentes, tabletas y otros dispositivos móviles, a los que conectar dichos dispositivos es muy problemático.

Por otro lado, sólo en los dispositivos equipados con una pantalla táctil especial es posible manipular los dedos directamente sobre pantalla táctil, como ya es habitual en smartphones, tablets y dispositivos similares.

Comer diferencia significativa y:hover no funciona aquí en absoluto como nos gustaría. No se puede hacer esto sin código y el uso de consultas de medios no resuelve todos los problemas.



La compatibilidad es demasiado cara en la actualidad. mundo de la información, por lo tanto, para garantizar el correcto funcionamiento del sitio dentro de requisitos establecidos Al diseño web y la implementación de funcionalidades, es preferible centrarse en los casos de uso mínimos necesarios: desplazamiento CSS, CSS al pasar el foco, CSS al pasar el mouse activo (visitado). Cuanto más código (tanto en el navegador como en el servidor) controle el diseño web, mejor. Un programa es control, es mejor cuando ese control no se somete a los estándares vigentes, de los que muchas veces no se sabe qué esperar.



Botones y otros elementos de la página.

El CSS al pasar el botón es una solución maravillosa, pero en general cada elemento de la página es un "botón". El sitio debe, en primer lugar, estar vivo, y si esto no está incluido en el código, si la tarea es crear un sitio que se desarrolle adecuadamente al área de aplicación y actúe teniendo en cuenta el comportamiento del visitante, entonces al menos Usando estilos CSS puedes agregar vivacidad a los elementos de la página.



Es conveniente utilizar efectos de desplazamiento. Con su ayuda, puede agregar vida a las páginas fácilmente, pero el código no sabe qué está haciendo el mouse en la pantalla si no tiene la capacidad de seguir su movimiento. Desde este punto de vista, es decir, cuando el código controla el movimiento del mouse (= movimiento de los dedos en un teléfono inteligente), puede resaltar el elemento de forma independiente o transformarlo. Esto no tiene nada que ver con pseudoclases, pero sí da control total código de arriba apariencia página, le permite mostrarla adecuadamente en diferentes dispositivos en diferentes navegadores.

Errores en las hojas de estilo

No se puede decir que los estándares en el campo de la descripción de estilos CSS no sepan lo que hacen, pero tampoco se puede decir que interactúen completamente con otros estándares en el campo de la programación de Internet.

Los estilos y pseudoclases se pueden describir en la etapa de codificación de la página, en el momento en que el servidor genera la página y en dinámica: ya estando dentro del navegador, puedes crear fácilmente un nuevo estilo y cambiar el existente.

Usar AJAX, cuando no es necesario regenerar la página para mostrar una reacción a la acción de un visitante, sino que cambiar su elemento o varios elementos agrega un poco de "picante". La "amistad" de los códigos, lo que ya está en el navegador (JavaScript) y lo que está en el servidor (PHP), es responsabilidad del autor del sitio (programador).



De cómo se ejecuta el algoritmo para esta interacción no sólo depende en gran medida la visualización de sus elementos en la página, sino también su percepción posterior por parte del código. En pocas palabras, las pseudoclases (en particular) son muy buenas para condiciones estáticas, como un velero en mares claros con vientos suaves: todo es obvio, accesible y controlable. Si el clima cambia, el viento se intensifica o un visitante causa una emergencia, rápidamente puedes golpear el arrecife y perder al visitante.

Estándar y su emulación.

Hover se puede emular a través de JavaScript utilizando los eventos onmouseover y onmouseout. A menudo aquí es donde termina todo. Desde el punto de vista del sentido común, cuando estamos hablando acerca de Cuando se trata de crear un sitio web que realmente funcione, es mejor mantener el control en tus propias manos que dejarlo a merced de estándares míticos que cambian fuera de la voluntad y el deseo del desarrollador.

A veces puedes leer algo como " esta oportunidad está disponible incluso en IE”, pero más a menudo puede leer sobre qué descripciones de estilo percibe un navegador en particular. Con mucha menos frecuencia podrá aprender en qué se diferencia JavaScript en determinados navegadores.



Valorando la experiencia acumulada, admirando las capacidades de Chrome y Opera, criticando la lentitud e inercia del navegador del fabricante (el inolvidable programador IE de Microsoft, querido en el corazón de todo programador: "Buen viejo explorador de Internet Sólo los perezosos no regañaron. O alguien que sólo sabe jugar Klondike en una computadora”.(cita de un autor desconocido de Internet), debes ceñirte a la media dorada: usar lo que funciona en todas partes y siempre.

La gente necesita dinero para trabajar; cuando necesita divertirse, suele ir a la oficina de registro o al teatro, pero no a Internet.

Emulación y control

Anteriormente, cuando la programación se estaba poniendo de pie, era costumbre escuchar a los mayores y escribir correctamente. Hoy en día hay demasiados ancianos, todo está cambiando demasiado rápido y si escuchas a todos, no habrá suficiente tiempo ni siquiera para muy pequeños. trabajo sencillo, a un sitio web mínimamente funcional.

La programación es, ante todo, control, y en los casos en que el estándar establece las reglas de manera sesgada, o se puede esperar un cambio brusco en la regla, su eliminación y el surgimiento de una nueva, la mejor solucion Siempre no se trataba de tomar ninguna decisión, sino de implementar la funcionalidad requerida del sitio con el mínimo código posible, pero que realmente funcionara.