Effetti hover CSS veloci e originali
Un sito realizzato rapidamente, senza inutili fronzoli e costi significativi, con un design decente e piena funzionalità: buon lavoro e un risultato decente.
La scelta dell'esecutore in questo caso è molto importante non solo per il proprietario del sito, ma anche per il visitatore medio. Non a tutti piace visitare risorse che utilizzano strumenti sofisticati per dimostrare le loro dinamiche. Pertanto, non importa quanto possa sembrare strano, ma l'impegno dell'artista nell'usare pseudo-classi come hover CSS è una buona scelta. La semplicità è spesso la chiave del successo.
Luogo di applicazione
La pseudo-classe hover CSS viene applicata al nome della classe (o delle classi) o al nome dell'identificatore che descrive il tag, che non deve necessariamente essere visivamente visibile sulla pagina, ma deve essere accessibile al mouse, ad esempio, tramite la regola z-index CSS.
Se l'accessibilità di una parte del tag è sufficiente, allora il hover CSS funzionerà. Il fatto che le classi possano essere manipolate e costruite dai loro costrutti di nomi nello stato normale dei tag di pagina e quando il mouse si trova su di esse non significa che i tag descritti dagli identificatori univoci siano limitati. Tutto dipende dall'abilità e dalla tecnologia dello sviluppatore.
Il posto sotto il tag ha sempre la forma di un rettangolo, ma un paio di regole background-image e background-color (nel valore di transparent) cambiano facilmente le cose. L'immagine non deve essere in formato .png o .jpg - puoi usare l'animazione .gif semplice.
Layout chiaro
Lo stile del layout dipende dall'artista. Se questo è un amante dei CSS, allora dovremmo aspettarci una completa mancanza di codice JavaScript e possibilità di capire come si forma questa o quella azione sulla pagina. Dovremo spalare molte classi CSS e intercettare le loro interconnessioni prima che il pensiero del creatore diventi disponibile.
Se l'esecutore ha scelto uno sviluppatore combinato che possiede abbastanza bene le regole CSS, ma presta maggiore attenzione ai tag HTML e al codice JavaScript, sarà difficile comprendere le opzioni per il layout dinamico. In questo caso, i tag e le regole CSS appariranno dal codice della pagina come i funghi dopo la pioggia.
L'opzione migliore è riunire un codificatore HTML + CSS e un codificatore HTML + JS, ma in pratica ciò non sempre funziona. L'opzione migliore è quella di imporre i propri requisiti allo sviluppatore, uno dei quali è un hover CSS e le regole di questo tipo sono molto importanti.
Questo è solo un caso così semplice in cui il cliente può specificare cosa dovrebbe essere usato. Sarebbe più appropriato applicare effetti CSS hover-like. Tutti i tentativi di entrare nel nuoto professionale libero dovrebbero essere fermati alla radice, anche prima che il lavoro sul sito venga avviato, altrimenti semplicemente non sarà completato.
Effetto hover CSS quando si passa e quando si esce
La cosa principale è capire il principio, ma è estremamente semplice. Dimostrare tutte le delizie delle pseudo-classi è possibile solo su pagine dinamiche o solo reali.
L'articolo è difficile da descrivere il movimento. L'idea generale può essere vista nell'immagine.
La logica qui è semplice: ci sono due descrizioni. Uno mostra il tag nello stato normale e il secondo - nel caso in cui un mouse lo abbia inserito. Nel secondo caso, ": hover" viene semplicemente aggiunto al nome della classe o dell'identificatore. Entrambe le descrizioni devono soddisfare i requisiti CSS.
Il mouse è arrivato al tag e lo ha lasciato.
È accettato che nello stato normale il tag sia statico se inizialmente non dovrebbe visualizzare qualcosa di dinamico. Perché le regole per il passaggio del mouse al passaggio del mouse, quando si passa il mouse, dovrebbero cambiare qualcosa nello stile dello stato normale del tag.
Questo non è un principio obbligatorio. È possibile e necessario utilizzare tutta la potenza delle regole CSS, in particolare la transizione, l'opacità, il colore di sfondo, l'immagine di sfondo ... I primi due sono particolarmente interessanti - sono dinamici di per sé.
Ancora più interessante è la possibilità di utilizzare le dinamiche quando il mouse lascia il tag. Perché no? Nello stato statico della pagina, nulla è dinamico, ma se l'arrivo di un mouse su un tag è un passaggio del mouse, lasciandolo potrebbe essere vivo. Il fatto che una pseudo-classe non sia assegnata a una classe non significa nulla.
Incorporando i tag l'uno nell'altro, ad esempio, una serie di cerchi con raggi decrescenti nel mezzo ti permetterà di creare un'onda quando muovi il mouse. Se vai oltre, quindi distribuisci tag con le stesse regole (nella solita versione e nel hover CSS) nei posti giusti, ad esempio gli spazi liberi tra i blocchi di informazioni, puoi mostrare la traccia del mouse, le onde, il gonfiore dello schermo o i contorni dei blocchi di informazioni.
Non è affatto necessario che gli effetti CSS al passaggio del mouse siano nei tag sopra i blocchi di informazioni. I tag desiderati possono solo guardare fuori. Ma non appena il mouse ha oltrepassato la parte accessibile, lo stile di hover CSS può aumentare lo z-index. Quando lasci il mouse, tutto ritorna al suo posto.
La pseudo-classe hover CSS unita alla corretta applicazione delle regole CSS è un sito buono, semplice e ben funzionante.