Transitions CSS3 Crea boas fadas
Os deseñadores web desexaban moito máis control sobre as páxinas que estaban creando cando CSS3 tocaba a escena. Os novos estilos introducidos en CSS3 proporcionaron aos profesionais web a capacidade de engadir efectos similares a Photoshop ás súas páxinas. Isto incluía propiedades como sombras e brillos , cantos redondeados e moito máis. CSS3 tamén introduciu efectos de animación que se poden usar para crear unha boa interactividade nos sitios.
Un efecto visual moi bo que podes engadir aos elementos do teu sitio web usando o CSS3 é facelos desaparecer e usar unha combinación das propiedades para a opacidade e a transición. Este é un xeito doado e ben compatible de facer que as páxinas sexan máis interactivas creando áreas desbotadas que se poñen en foco cando un visitante do sitio fai algo, como se se move sobre ese elemento.
Vexamos o sinxelo que é engadir este efecto visual interactivo a varios elementos nas súas páxinas web.
Permite cambiar a opacidade ao pasar o rato
Comezaremos mirando como cambiar a opacidade dunha imaxe cando un cliente se está movendo sobre ese elemento. Para este exemplo (o HTML móstrase a continuación) Estou usando unha imaxe co atributo class de greydout.
Para facelo en branco, engadimos as seguintes regras de estilo á nosa folla de estilo CSS:
.greydout {
-webkit-opacidade: 0.25;
-moz-opacidade: 0.25;
opacidade: 0.25;
}
Estes parámetros de opacidade converten ao 25%. Isto significa que a imaxe será mostrada como 1/4 da súa transparencia normal. Totalmente opaco sen transparencia sería 100% e 0% sería totalmente transparente.
A continuación, para que a imaxe quede clara (ou máis precisa, para facerse completamente opaca) cando se manteña o rato sobre ela, engadirá o seguinte: pseudo-class deslizante:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacidade: 1;
opacidade: 1;
}
Notarás que, para estes exemplos, estou usando as versións prefixadas do vendedor da regra para garantir a compatibilidade con versións anteriores destes navegadores. Aínda que esta sexa unha boa práctica, a realidade é que a regra de opacidade agora está ben soportada polos navegadores e é bastante seguro deixar caer as liñas prefixadas por vendedores. Aínda así, tampouco hai razón para non incluír estes prefixos se quere garantir o soporte para versións de navegador máis antigas. Simplemente asegúrese de seguir a mellor práctica aceptada de finalizar a declaración coa versión normal e non prefixada do estilo.
Se implementaches isto nun sitio, verías que este axuste de opacidade é un cambio moi abrupto. Primeiro é gris e non é así, sen estados intermedios entre estes dous. É como un interruptor de luz - activado ou desactivado. Isto pode ser o que quere, pero tamén pode querer experimentar cun cambio máis gradual.
Para engadir un efecto realmente bo e facer que isto se esvaece gradualmente, quere engadir a propiedade de transición á clase .greydout:
.greydout {
-webkit-opacidade: 0.25;
-moz-opacidade: 0.25;
opacidade: 0.25;
-webkit-transition: todos facilidade 3s;
-moz-transition: todos facilidade 3s;
-ms-transition: todos facilidade 3s;
-o-transition: todos facilidade 3s;
transición: facilidade de todos;
}
Con este código, o cambio converteríase gradualmente en vez de simplemente cambiar de forma abrupta.
Unha vez máis, estamos a usar aquí unha serie de regras prefixadas polo vendedor. A transición tampouco é compatible coa opacidade, polo que estes prefijos teñen sentido.
Unha cousa que recordar cando planea estas interaccións é que os dispositivos con pantalla táctil non teñen un estado "deslizante", polo que estes efectos moitas veces pérdense en calquera persoa que use un dispositivo con pantalla táctil como un teléfono móbil. A transición adoita ocorrer, pero ocorre tan rápido que realmente non se pode ver. Isto está ben se engades este como un bo efecto de bonificación, pero evite os cambios que NON se vexan para que o contido sexa entendido.
A desaparición é posible tamén
Non ten que comezar cunha imaxe desbotada, pode usar transicións e opacidade para desaparecer dunha imaxe totalmente opaca. Usando a mesma imaxe, só cunha clase de fadeout:
class = "withfadeout">
Do mesmo xeito que antes, cambia a opacidade usando o selector:
.withfadeout {
-webkit-transition: todos os 2s facilidade-in-out;
-moz-transition: todos 2s facilidade-in-out;
-ms-transition: todos 2s facilidade-in-out;
-o-transition: todos os 2s facilidade-in-out;
transición: todas 2s facilidade-in-out;
}
.withfadeout: hover {
-webkit-opacidade: 0.25;
-moz-opacidade: 0.25;
opacidade: 0.25;
}
Neste exemplo, a imaxe pasaría dun xeito completamente opaco a algo transparente: ao revés do noso primeiro exemplo.
Ir máis alá das imaxes
É excelente que pode aplicar estas transicións visuales e desaparecer nas imaxes, pero non se limita a usar imaxes con estes efectos CSS. Pode facilmente facer botóns de estilo CSS que se desaparecen cando se preme e manteña. Simplemente establecería a opacidade usando: pseudo clase activa e poñerá a transición na clase que define o botón. Fai clic e manteña este botón para ver que pasa.
É posible facer esencialmente calquera elemento visual que se desbloquee cando se faga clic ou se faga clic. Neste exemplo cambio a opacidade da div e a cor do texto cando o rato está por riba. Aquí está o CSS:
#myDiv {
ancho: 280 px;
cor de fondo: # 557A47;
cor: #dfdfdf;
padding: 10px;
-webkit-transition: todos os 4s facilidade-out 0s;
-moz-transition: todos os 4s facilidade-out 0s;
-ms-transition: todos os 4s facilidade-out 0s;
-o-transition: todos os 4s facilidade-out 0s;
transición: todos os 4s facilidade-out 0s;
}
#myDiv: hover {
-webkit-opacidade: 0.25;
-moz-opacidade: 0.25;
opacidade: 0.25;
cor: # 000;
}
Os menús de navegación poden beneficiarse de desfacer as cores de fondo
Neste sinxelo menú de navegación a cor de fondo desaparece lentamente dentro e fóra mentres tocoi os elementos do menú. Aquí está o HTML:
- Inicio
- Tutoriais CSS3
- Propiedades CSS3
E aquí está o CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
mostrar: en liña;
flotar: esquerda;
padding: 5 píxeles 15 píxeles;
marxe: 0 5px;
-webkit-transition: todos os 2s lineares;
-moz-transition: all 2s linear;
-ms-transition: todos os 2s lineares;
-o-transición: todas as 2s lineares;
transición: todo 2s lineal;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
cor de fondo: # DAF197;
}
Apoio ao navegador
Como xa teño tocado algunhas veces, estes estilos teñen un bo soporte para o navegador, polo que debes sentarte libre para usalos sen ningún temor. A única excepción a isto é as versións máis antigas de Internet Explorer, pero coa recente decisión de Microsoft de rematar o soporte para todas as versións de IE debaixo de 11, estes navegadores máis antigos están facendo cada vez menos problemas e, de forma realista, se un navegador máis antigo non vexa esta transición fade, que non debería ser un problema importante. Sempre que confine estes tipos de efectos a interaccións agradables e non confíe neles para dirixir a funcionalidade ou revelar o contido da chave, os navegadores máis antigos que non soportan os efectos terán unha experiencia menos agradable, pero os usuarios nestes navegadores nin sequera coñecen a diferenza, especialmente se poden usar o sitio de forma normal e obter a información que necesitan.
Extra Fun; Intercambia dúas imaxes
Aquí tes un exemplo de como desaparecer unha imaxe noutra. Use o HTML:
E o CSS que o fai totalmente transparente mentres que o outro é totalmente opaco e entón a transición intercambia os dous:
.swapMe img {-webkit-transition: todos facilmente facilitados; -moz-transition: todos facilmente-in-out; -ms-transition: todos facilmente facilitados; -o-transition: todas facilmente facilitadas; transición: todas facilmente facilitadas; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacidade: 1; opacidade: 1; } .swapMe: pasar .swap1, .swap2 {-webkit-opacity: 0; -moz-opacidade: 0; opacidade: 0; }