3D Texto CSS
Exemplo 1
Neste exemplo, primeiro, temos que criar o arquivo HTML antes de criar o arquivo CSS. Vamos realizar exemplos no estúdio de código visual. Você precisa criar um novo arquivo com o nome do arquivo e usar o “.Extensão do arquivo html ”para o arquivo html. Em seguida, escreva o seguinte código para renderizar “Hello World” no navegador.
Primeiro, temos que mencionar o tipo de documento, que é "html" aqui. Lembre -se de uma coisa que qualquer tag que temos para abrir deve ser fechada com uma etiqueta de fechamento. Como a tag de fechamento de "" será ".”Em seguida, adicione a tag“ ”e, dentro desta tag“ ”, temos a nova tag, que é a tag“ meta ”; Definimos o conjunto de personagens como "charset", que é "UTF-8". Isso permitirá o uso de mais caracteres em um documento.
Em seguida, abra uma tag "" e adicione um título que é "documento" aqui e feche esta tag "" usando "."Depois disso, temos que dar o link para o arquivo" css ". Para isso, usamos a tag "Link" e aqui o atributo "rel" para definir o relacionamento entre a página vinculada e a página atual, que é mencionada como uma "folha de estilo" aqui.
Em seguida, "href" é usado e damos o nome do nosso arquivo "css", que queremos vincular a este arquivo "html". O nome do nosso arquivo "CSS" é "estilo.CSS "Feche a etiqueta da cabeça" "aqui. E abra uma nova etiqueta corporal “."Nesse corpo, temos" Span Class ", que é igual a" texto "e aceita o texto, que é escrito como" Hello World.”Além disso, feche esta tag como“. Em seguida, feche todas as tags restantes. A tag restante que não fechamos é a etiqueta corporal e, finalmente, fechamos a tag com a ajuda de "e tags, respectivamente. Depois disso, você precisa apenas salvar este arquivo. E mude para o “estilo.Arquivo CSS ”para modelar e dar um efeito 3D a este texto.
Agora, você precisa criar outro arquivo do nome que você recebe no "href", e damos o "estilo.CSS ”nome do arquivo para vincular. Então, criamos nosso arquivo "css" com este nome. Neste “estilo.Arquivo CSS ”, faremos algum estilo no texto.
Nós vamos adicionar estilo. Começando com o corpo, damos a cor de fundo como “Dimgrey.”A próxima coisa que fizemos é estilizar o texto, e a posição do texto é“ absoluta ”aqui, que posicionará o texto onde queremos colocá -lo. Agora, damos as margens "top" e "certa" como "20%" e "30%", respectivamente. Usamos o "Transform: traduzir (50% - 50%)" e, usando isso, podemos girar, distribuir ou traduzir nosso texto.
Vamos seguir em frente e transformar nosso texto para a “maiúscula.”Vamos definir a família de fontes como“ Verdana.”Então, aumente o tamanho da fonte para“ 6em ”e o“ peso da fonte ”para“ 500 ”. O "peso da fonte" define a espessura e a magreza da fonte. Definimos a "cor" da fonte como "marrom.”Estaremos adicionando várias camadas de sombra de texto aqui. O primeiro valor é usado para o deslocamento horizontal que vamos definir como "1px", o que significa 1 pixel, e o segundo valor é para o deslocamento vertical, que é novamente "1px, e o terceiro é para" Blur ". que também é "1px" e a cor que vamos escolher é "#919191", que é um tom de cinza novamente.
Agora, adicionaremos outra camada na qual usamos um deslocamento horizontal como "1px", mas a vertical como "2px". O mesmo que acima, alteraremos o deslocamento vertical em todas. Então, a sombra de texto vai tomar forma. Então temos uma coisa final a fazer, temos que adicionar mais algumas camadas de shadow de texto, mas desta vez, vamos usar valores de cores "rgba" nos quais "r" é para "vermelho", "g" é Para "Green", "B" é para "azul" e "A" é para o valor "alfa". Definimos o deslocamento horizontal como "1px", o deslocamento vertical como "18px", o deslocamento "Blur" como "6px", e o "RGBA" é definido como "(16, 16, 16, 0.2) "onde" 16 "é para vermelho, o próximo" 16 "é para verde, outros últimos" 16 "são para azul e o valor do canal alfa é definido como" 0.4 ”. Nas próximas linhas, mudamos as compensações verticais e as áreas desfoque em todas as linhas. A última coisa que fazemos é mudar o canal alfa também.
No Código do Visual Studio, executamos esse código no navegador; portanto, para isso, vá para a "extensão" ou pressione "Ctrl+Shift+X" e pesquise "Abrir no navegador" e instale -o.
Depois de instalar isso, você deve clicar com o botão direito do mouse no arquivo html e clicar em "Abrir no navegador padrão" ou pressionar "Alt + B" para abrir este código no navegador. Então, a saída a seguir é renderizada na tela.
Exemplo # 2
Neste exemplo, usamos o mesmo arquivo HTML, mas vamos usar outra folha de estilo aqui. Daremos o nome de outro arquivo "CSS" com o mesmo código "html". O nome do segundo arquivo "CSS" é "STILESHEET1.CSS ”, como mostrado abaixo.
No arquivo CSS, alteramos um pouco o código e alteramos o efeito 3D do texto que é fornecido em nosso arquivo html. Vamos tentar este código.
Aqui, definimos a cor de fundo “azul-violeta.”E a“ posição ”do texto é absoluta como no exemplo acima, mas aqui, definimos os valores superiores como“ 15px ”e“ esquerda ”como“ 25px ”. Em Transform, definimos “Skew (-63dg)” e “Escala (1,.5) ". O "inclinação" irá distorcer os elementos para "-63dg" horizontalmente. A função "escala" redimensionará os elementos nas direções horizontal e vertical. Ambos são funções internas. Então temos uma transformação de texto que é "Transform: Herits", que exibe o texto da mesma forma que é dado no arquivo html. Usamos a "família da fonte" como "Times New Roman", o "tamanho da fonte" é "7em", e o peso "peso da fonte" é "500".
Definimos a "cor" da fonte "branca" aqui. Em seguida, aplicaremos a propriedade "Text-shadow". Nisso, definimos o deslocamento horizontal como "-1px", deslocamento vertical como "-1px", borrão como "1px" e selecione color "#808080", que é o código da cor cinza. Nas próximas linhas, mudaremos todas as compensações horizontais e verticais, mas o deslocamento do desfoque e a cor. Adicionaremos mais camadas de sombra de texto, mas aqui usamos valores "RGBA". Neste (0, 0, 128, 0.75), definimos "0" para "Red", "0" para "Green", "128" para "Blue" e "0.75 "para" Alpha."O" Z-Index "está aqui para controlar a ordem vertical do elemento que se sobrepõe. A saída está aqui.
Conclusão
Escrevemos este guia para você para que você possa entender o funcionamento do texto 3D no código do Visual Studio. Realizamos esses exemplos, dados neste guia no Visual Code Studio. Discutimos como criamos arquivos HTML e CSS separadamente e depois vinculamos os dois arquivos para usar o arquivo de estilo CSS em nosso arquivo HTML. Este guia ajudará você a entender o uso de "HTML" e "CSS.”