Testo 3D CSS
Esempio 1
In questo esempio, in primo luogo, dobbiamo creare il file HTML prima di creare il file CSS. Eseguiremo esempi nello studio del codice visivo. Devi creare un nuovo file con il nome file e utilizzare il ".Estensione del file HTML "per il file HTML. Quindi, scrivi il seguente codice per rendere "Hello World" sul browser.
Innanzitutto, dobbiamo menzionare il tipo di documento, che è "HTML" qui. Ricorda che una cosa che ogni tag che dobbiamo aprire deve essere chiusa con un tag di chiusura. Come il tag di chiusura di "" sarà "."Quindi aggiungi il tag" "e all'interno di questo tag" ", abbiamo il nuovo tag, che è il tag" Meta "; Abbiamo impostato il set di caratteri come "chatset", che è "UTF-8". Consentirà l'utilizzo di più caratteri in un documento.
Quindi apri un tag "" e aggiungi un titolo che è "documento" qui e poi chiudi questo tag "" usando "."Dopodiché, dobbiamo dare il collegamento al file" CSS ". Per questo, utilizziamo il tag "link" e qui l'attributo "rel" per definire la relazione tra la pagina collegata e la pagina corrente, che è menzionata come un "foglio di stile" qui.
Quindi, viene utilizzato "HREF" e diamo il nome del nostro file "CSS", che vogliamo collegare con questo file "HTML". Il nome del nostro file "CSS" è "stile.CSS "Chiudi il tag testa" "qui. E aprire un nuovo tag corporeo "."In questo corpo, abbiamo" classe span ", che è uguale a" testo ", e accetta il testo, che è scritto come" Hello World."Inoltre, chiudi questo tag come". Quindi chiudere tutti i tag rimanenti. Il tag rimanente che non abbiamo chiuso è il tag del corpo e alla fine chiudiamo il tag con l'aiuto di "e tag, rispettivamente. Dopo questo, devi solo salvare questo file. E spostati allo "stile.File CSS ”per lo styling e dando un effetto 3D a questo testo.
Ora, devi creare un altro file del nome che ti viene dato in "Href" e diamo lo "stile.CSS ”FileName per il collegamento. Quindi, abbiamo creato il nostro file "CSS" con questo nome. In questo "stile.File CSS ", faremo un po 'di stile sul testo.
Aggiungeremo stile. A partire dal corpo, diamo il colore di sfondo come "dimgrey."La prossima cosa che abbiamo fatto è modellare il testo e la posizione del testo è" assoluta "qui che posizionerà il testo in cui vogliamo posizionarlo. Ora, diamo i margini "top" e "giusto" come "20%" e "30%", rispettivamente. Usiamo la "trasformazione: traduci (50% - 50%)" e usando questo, possiamo ruotare, inclinarsi o tradurre il nostro testo.
Andiamo avanti e trasformiamo il nostro testo in "maiuscola."Faremo la famiglia dei caratteri su" Verdana."Quindi, aumenta la dimensione del carattere a" 6em "e il" carattere "a" 500 ". Il "font-peso" imposta lo spessore e la magrezza del carattere. Abbiamo impostato il "colore" del carattere come "marrone."Aggiungeremo qui più livelli di ombra di testo. Il primo valore viene utilizzato per l'offset orizzontale che stiamo per impostare come "1px", che significa 1 pixel, e il secondo valore è per l'offset verticale, che è di nuovo "1px, e il terzo è per" Blur ", che è anche "1px" e il colore che sceglieremo è "#919191" che è di nuovo una tonalità di grigio.
Ora aggiungeremo un altro livello in cui usiamo un offset orizzontale come "1px" ma il verticale come "2px". Come sopra, cambieremo l'offset verticale in ogni riga, ma l'offset orizzontale e sfocato sarà lo stesso come mostrato nell'immagine. Quindi, il testo-shadow prenderà forma. Quindi abbiamo una cosa finale da fare, dobbiamo aggiungere qualche altro livello di text-shadow, ma questa volta useremo i valori di colore "RGBA" in cui "R" è per "rosso", "g" è Per "verde", "b" è per "blu" e "a" è per il valore "alfa". Abbiamo impostato l'offset orizzontale come "1px", l'offset verticale come "18px", l'offset "Blur" come "6px" e "RGBA" è impostato come "(16, 16, 16, 0.2) "dove" 16 "è per il rosso, il prossimo" 16 "è per il verde, l'altro ultimo" 16 "è per il blu e il valore del canale Alpha è impostato come" 0.4 ". Nelle righe successive, cambiamo gli offset verticali e le aree sfocate in ogni linea. L'ultima cosa che facciamo è anche cambiare il canale Alpha.
Nel codice Visual Studio, eseguiamo questo codice sul browser, quindi per questo, vai a "Extension" o premi "Ctrl+Shift+X" e cerchiamo "Apri nel browser" e installalo.
Dopo aver installato questo, è necessario fare clic con il pulsante destro del mouse sul file HTML e fare clic su "Apri nel browser predefinito" o premere "Alt + B" per aprire questo codice nel browser. Quindi, la seguente uscita viene resa sullo schermo.
Esempio n. 2
In questo esempio, utilizziamo lo stesso file HTML, ma useremo un altro foglio di stile qui. Daremo il nome di un altro file "CSS" con lo stesso codice "HTML". Il nome del secondo file "CSS" è "StylesHeet1.CSS ”, come mostrato di seguito.
Nel file CSS, modifichiamo un po 'il codice e cambiamo l'effetto 3D del testo che è indicato nel nostro file HTML. Proviamo questo codice.
Qui, impostiamo il colore di sfondo “Blue-Violet."E la" posizione "del testo è assoluta come nell'esempio sopra, ma qui impostiamo i valori migliori come" 15px "e" a sinistra "come" 25px ". In trasformata, abbiamo impostato "Skew (-63dg)" e "Scala (1,.5) ". La "inclinazione" distorcerà gli elementi a "-63dg" in orizzontale. La funzione "Scala" ridimensionerà gli elementi in direzioni orizzontali e verticali. Entrambi sono funzioni integrate. Quindi abbiamo una trasformazione del testo che è "trasformazione: eredita", che visualizza il testo come viene fornito nel file HTML. Usiamo la "famiglia del carattere" come "Times New Roman", la "dimensione del carattere" è "7em" e il peso "weight di carattere" è "500".
Abbiamo impostato il "colore" del carattere "bianco" qui. Quindi, applicheremo la proprietà "text-shadow". In questo, impostiamo l'offset orizzontale come "-1px", offset verticale come "-1px", sfocata come "1px" e selezionano il colore "#808080", che è il codice del colore grigio. Nelle righe successive, cambieremo tutti gli offset orizzontali e verticali, ma l'offset e il colore sfocati saranno gli stessi. Aggiungeremo più livelli di text-shadow, ma qui usiamo i valori "RGBA". In questo (0, 0, 128, 0.75), abbiamo impostato "0" per "rosso", "0" per "verde", "128" per "blu" e "0.75 "per" Alpha."" Z-Index "è qui per controllare l'ordine verticale dell'elemento che si sovrappone. L'output è qui.
Conclusione
Abbiamo scritto questa guida per te in modo da poter capire il funzionamento del testo 3D nel codice Visual Studio. Abbiamo eseguito questi esempi, che sono riportati in questa guida nello studio del codice visivo. Abbiamo discusso di come creiamo i file HTML e CSS separatamente e quindi collegati entrambi i file per utilizzare il file in stile CSS nel nostro file HTML. Questa guida ti aiuterà a capire l'uso di "HTML" e "CSS."