Trasparenza CSS e sua applicazione per vari elementi

Gli elementi di stile sul tuo sito, indubbiamente, possono essere definiti uno dei compiti più importanti per il webmaster. Qui, come nella vita, si incontrano sui vestiti. Lo stile unico, la bellezza e allo stesso tempo il design semplice e intuitivo non solo aiuteranno a fare la prima impressione, ma attirano anche nuovi lettori, clienti o clienti, a seconda della direzione del sito.

Trasparenza del contenuto

Creare mezzi di trasparenza CSS dei contenuti, per cominciare vale la pena capire come è necessario prescrivere il modulo stesso. Naturalmente, in questo materiale non ci saranno indentazioni nei tag standard per la programmazione della pagina del sito in generale. Per esempio illustrativo, ci concentreremo su un'area rettangolare, un riempimento monotono colorato. Per visualizzarlo, è necessario creare un semplice file di stile CSS con associazione successiva o posizionare il codice direttamente sulla pagina del documento html. Dopo aver prescritto i parametri di altezza, larghezza, colore e contorno necessari per un blocco rettangolare, è necessario aggiungere codice allo stile che consente di rendere trasparente l'oggetto CSS. Il parametro "opacità: 0.X" è responsabile di questo, poiché questo è il livello di visibilità. Più il suo valore è vicino a uno, l'oggetto diventa invisibile. Questo stile funzionerà correttamente nei browser con supporto per CSS3. Quasi tutti i moderni browser Web ora hanno queste istruzioni.

Aumenta l'universalità del codice

Se il programmatore vuole ottimizzare i suoi contenuti per le applicazioni precedenti, dovrà imparare altri stili.

Per Internet Explorer versione 5.5 e successive, il codice percepito è una linea molto lunga e brutta - "filter: progid: DXImageTransform.Microsoft.Alpha (opacity = X)", dove il parametro di trasparenza deve essere specificato non in frazioni di uno, ma in centinaia. Il suo valore massimo, al quale la trasparenza del colore dell'oggetto CSS diventa pieno, è 100.

Il proprio codice esiste per i browser meno popolari. Uno di questi è Konqueror, meglio noto agli utenti del desktop KDE su sistemi UNIX. Per questo, è necessario impostare la trasparenza CSS con il parametro "-khtml-opacity: 0.X".

Per avere totale fiducia nell'ottimizzazione del codice, è possibile aggiungere una linea che fornisce supporto per una delle prime versioni dei browser Mozilla: "-moz-opacity: 0.X".

Eseguendo questa ottimizzazione, il webmaster può ottenere la corretta visualizzazione del loro contenuto sulla maggior parte dei dispositivi dell'utente.

Attività al passaggio del mouse

Poiché la trasparenza CSS viene spesso utilizzata come progetto per elementi con collegamenti ipertestuali, l'attività di spostamento diventa una delle attività principali. Ad esempio, considera lo stesso rettangolo. Supponiamo che sia necessario che quando si passa il mouse su un blocco, la trasparenza cambi da 0 a un valore di 0,5. Per ottenere tale opportunità, sarà necessario aggiungere lo stile già esistente responsabile della trasparenza sotto l'ulteriore Hover css parameter Questa proprietà viene anche utilizzata per aggiungere effetti come la modifica del colore e della forma degli oggetti durante il passaggio del mouse. Ciò consente di rendere visivamente attive le aree necessarie, attirando l'attenzione dei visitatori sui collegamenti o sui contenuti.

Applicazione per immagini

Nel caso in cui il processo sopra descritto sia chiaro, aggiungere trasparenza alle immagini con CSS sarà facile. Non ha nemmeno bisogno di apportare modifiche al codice di stile stesso. Può essere lasciato invariato. Dovrai lavorare solo con il layout delle immagini nel documento html stesso. Se in casi precedenti per inserire l'elemento utilizzato tag «div», qui devi solo sostituirli con «img», appropriato per questo tipo di contenuto. Lo stile per le immagini è lo stesso dei blocchi. Ovviamente, applicando il CSS descritto all'inizio dell'articolo, sarà necessario modificare i parametri di altezza, larghezza e bordi per l'aspetto armonioso dell'immagine inserita.

Testo e trasparenza di sfondo

L'esempio di testo è simile all'inserimento di immagini. Crea trasparenza in CSS separatamente anche non richiesto. In questo caso, sarà necessario sostituire i tag con quelli utilizzati per il layout dei campi di testo. Questi sono "p" e "span".

Quando il testo è scritto nel corpo di un documento html senza usare tag speciali, aggiungere trasparenza sarà molto difficile e richiede molto tempo. Pertanto, questa opzione non ha senso da considerare.

Nel caso in cui il sito web fosse necessario per rendere lo sfondo trasparente, i CSS sarebbero l'opzione migliore qui. Dal momento che lo sfondo è essenzialmente la stessa immagine o forma, è sufficiente collegare il nostro stile ad esso nel codice principale della risorsa web.