CSS de texto 3D
Ejemplo 1
En este ejemplo, primero, tenemos que crear el archivo HTML antes de crear el archivo CSS. Realizaremos ejemplos en el estudio de código visual. Debe crear un nuevo archivo con el nombre de archivo y usar el ".Extensión del archivo HTML ”para el archivo HTML. Luego, escriba el siguiente código para representar "Hello World" en el navegador.
Primero, tenemos que mencionar el tipo de documento, que es "HTML" aquí. Recuerda una cosa que cualquier etiqueta que tengamos para abrir debe cerrarse con una etiqueta de cierre. Como la etiqueta de cierre de "" será "."Luego agregue la etiqueta" ", y dentro de esta etiqueta" ", tenemos la nueva etiqueta, que es la etiqueta" meta "; Establecemos el conjunto de caracteres como "Charset", que es "UTF-8". Permitirá usar más caracteres en un documento.
Luego abra una etiqueta "" y agregue un título que sea "documento" aquí y luego cierre esta etiqueta "" usando "."Después de eso, tenemos que dar el enlace al archivo" CSS ". Para esto, usamos la etiqueta "Enlace" y aquí el atributo "Rel" para definir la relación entre la página vinculada y la página actual, que se menciona como una "hoja de estilo" aquí.
Luego, se usa "href", y damos el nombre de nuestro archivo "CSS", que queremos vincular con este archivo "HTML". El nombre de nuestro archivo "CSS" es "estilo.CSS "Cierre la etiqueta de la cabeza" "Aquí. Y abrir una nueva etiqueta de cuerpo "."En este cuerpo, tenemos" clase de span ", que es igual al" texto ", y acepta el texto, que está escrito como" Hola mundo."Además, cierre esta etiqueta como". Luego cierre todas las etiquetas restantes. La etiqueta restante que no cerramos es la etiqueta del cuerpo, y por fin, cerramos la etiqueta con la ayuda de "y las etiquetas, respectivamente. Después de esto, solo debe guardar este archivo. Y pasar al "estilo.Archivo de CSS "para el estilo y dar un efecto 3D a este texto.
Ahora, debe crear otro archivo del nombre que se le da en el "href", y le damos el "estilo.nombre de archivo de CSS ”para vincular. Entonces, creamos nuestro archivo "CSS" con este nombre. En este "estilo.Archivo de CSS ", haremos algo de estilo en el texto.
Vamos a agregar estilo. Comenzando con el cuerpo, damos el color de fondo como "Dimgrey."Lo siguiente que hemos hecho es diseñar el texto, y la posición del texto es" absoluta "aquí, que posicionará el texto donde queremos colocarlo. Ahora, damos los márgenes "superiores" y "correctos" como "20%" y "30%", respectivamente. Usamos la "Transformar: Traducir (50% - 50%)", y al usar esto, podemos rotar, sesgar o traducir nuestro texto.
Sigamos adelante y transformemos nuestro texto en el "Eppercase."Vamos a poner a la familia de fuentes a" Verdana."Luego, aumente el tamaño de la fuente a" 6em "y el" Font-Weight "a" 500 ". El "Font-Weight" establece el grosor y la delgadez de la fuente. Establecimos el "color" de la fuente como "marrón."Agregaremos múltiples capas de sombra de texto aquí. El primer valor se usa para el desplazamiento horizontal que vamos a establecer como "1px", que significa 1 píxel, y el segundo valor es para el desplazamiento vertical, que nuevamente es "1px, y el tercero es para" desenfoque ", que también es "1px" y el color que vamos a elegir es "#919191", que es un tono de gris nuevamente.
Ahora, agregaremos otra capa en la que usamos un desplazamiento horizontal como "1px" pero el vertical como "2px". Igual que el anterior, cambiaremos el desplazamiento vertical en cada línea, pero el desplazamiento horizontal y de desenfoque será lo mismo que se muestra en la imagen. Entonces, la sombra de texto tomará forma. Luego tenemos algo final que hacer, tenemos que agregar algunas capas más de Shadow de texto, pero esta vez, vamos a usar valores de color "RGBA" en los que "R" es para "Rojo", "G" es para "verde", "b" es para "azul" y "A" es para el valor "alfa". Establecimos el desplazamiento horizontal como "1px", el desplazamiento vertical como "18px", el desplazamiento "desenfoque" como "6px" y el "RGBA" se establece como "(16, 16, 16, 0.2) "Donde" 16 "es para rojo, el próximo" 16 "es para verde, otro último" 16 "es para azul y el valor del canal alfa se establece como" 0.4 ". En las siguientes líneas, cambiamos las compensaciones verticales y las áreas de desenfoque en cada línea. Lo último que hacemos es cambiar el canal alfa también.
En el código de Visual Studio, ejecutamos este código en el navegador, por lo que para esto, vaya a la "Extensión" o presione "Ctrl+Shift+X" y buscamos "Abrir en el navegador" e instálelo.
Después de instalar esto, debe hacer clic con el botón derecho en el archivo HTML y hacer clic en "Abrir en el navegador predeterminado" o presionar "Alt + B" para abrir este código en el navegador. Luego, la siguiente salida se representa en la pantalla.
Ejemplo # 2
En este ejemplo, usamos el mismo archivo HTML, pero vamos a usar otra hoja de estilo aquí. Le daremos el nombre de otro archivo "CSS" con el mismo código "HTML". El nombre del segundo archivo "CSS" es "Stylesheet1.CSS ", como se muestra a continuación.
En el archivo CSS, cambiamos un poco el código y cambiamos el efecto 3D del texto que se da en nuestro archivo HTML. Probemos este código.
Aquí, establecemos el color de fondo "Blue-Violet."Y la" posición "del texto es absoluta como en el ejemplo anterior, pero aquí, establecemos los valores superiores como" 15px "y" izquierda "como" 25px ". En Transform, establecemos "Skew (-63DG)" y "Escala (1,.5) ". El "sesgo" sesgará los elementos a "-63dg" horizontalmente. La función de "escala" cambiará el tamaño de los elementos en direcciones horizontales y verticales. Ambas son funciones incorporadas. Luego tenemos una transformación de texto que es "transformar: heredar", que muestra el texto igual que se da en el archivo HTML. Utilizamos la "familia de fuentes" como "Times New Roman", el "tamaño de la fuente" es "7em", y el peso "Font-Weight" es "500".
Establecemos el "color" de la fuente "blanco" aquí. Luego, vamos a aplicar la propiedad "Shadow de texto". En esto, establecemos el desplazamiento horizontal como "-1px", compensación vertical como "-1px", desenfoque como "1px" y seleccione el color "#808080", que es el código del color gris. En las siguientes líneas, cambiaremos todas las compensaciones horizontales y verticales, pero la compensación y el color de desenfoque serán los mismos. Agregaremos más capas de sombra de texto, pero aquí usamos valores "RGBA". En esto (0, 0, 128, 0.75), establecemos "0" para "rojo", "0" para "verde", "128" para "azul" y "0.75 "para" alfa."El" índice z "está aquí para controlar el orden vertical del elemento que se superpone. La salida está aquí.
Conclusión
Hemos escrito esta guía para usted para que pueda comprender el funcionamiento del texto 3D en el código de Visual Studio. Hemos realizado estos ejemplos, que se dan en esta guía en el estudio de código visual. Discutimos cómo creamos archivos HTML y CSS por separado y luego vinculamos ambos archivos para usar el archivo de estilo CSS en nuestro archivo HTML. Esta guía lo ayudará a comprender el uso de "HTML" y "CSS."