cores em css

exemplo de cores

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus quas excepturi labore dignissimos rem tempora consequatur, obcaecati suscipit. Deserunt exercitationem reiciendis a optio ullam odit error tempora, aliquid debitis.

exemplo de cores

DESING

harmonia de cores

preguica

degrade

comando "background-image: linear-gradient(direcao, white ,green)" site pra criar paleta de cores

fonte de texto

e so usar a tag "font-family" apertar ctrl+espaco e selecionar a fonte que tu quer

se tu nao quer nenhuma das fontes do google fonts e as fontes basicas que tem ent tu pode baixar uma nova por exemplo eu baixei a fonte do minecraft e coloquei aqui. Pra fazer isso e simples primeiro tu baixa a fonte que tu quer usar depois tu vai aonde tu colocou tuas css e poe o seguinte codigo

 

      @font-face { 

        font-family: 'exemplo de nome'; 

        src: url('caminho ate a fonte.otf'); 

        scr: url('mesma fonte mas em formato.ttf'); 

         font-style: normal; 

         font-weight: normal;}

tu pode colocar qualquer nome na area "font-family"na area de url tu poe o caminho do arquivo html ate a fonte e as tags "font-style" e "font-weight" tu poe o valor normal

a tag "text-indent" serve para colocar aquele espacinho no comeco de cada paragrafo

pseudo classes

para usar tem que colocar 2 pontos ex"a:hover"

hover
id
class
visited (usado p links)
active(tbm p link mas e p qnd tu clicar nele)

peseudo elementos

para usar tem que colocar dois simbolos de ponto duplo ex"a::after"

after

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate provident veniam nesciunt nobis. Neque sequi quibusdam praesentium laboriosam accusantium dolore debitis voluptatum, nesciunt officiis repellendus officia inventore? Enim, tempora quisquam?

vsf

grouping tags

header =cabecalho
main = conteudo principal
footer = basicamente e onde tu poe coisas do tipo quem fez e links para outros sites ou redes sociais
section =o nome ja diz td e pra fazer secoes com conteudo ex:
<section id="noticias">exemplo de conteudo</section>
article = para colocar um artigo
aside =para colocar conteudo relacionado
nav =menu de navegacao?

sombras nas caixa

comando "box-shadow" so colocar 1px 1px 1px e black e depois mexer com o dev tools do navegador tambem e possivel criar um diretamente pelo dev tools do navegador para colocar a sombra para dentro da caixa e so adicionar ""
ex:

exemplo de texto com sombra

comando para fazer uma borda personalizada

se for fazer uma manualmente tem q pegar uma imagem e desenhar um jogo da velha nela depois fazer os desenhos nos lados ,esse desenho que tu fizer vai ser a borda, nao precisa colocar nada no meio.
obs:fazer uma imagem transparente

comando "border-image-repeat" serve para mexer na borda por exemplo vc pode colocar o valor "repeat" e a imagem da borda vai se repetir pelo quadrado inteiro ou colocar o valor "stretch" para esticar a borda

atalho shorthand

comando "border-image" ai vc coloca o caminho ate a imagem o tamanho e o estilo(repeat, stretch e etc.)
ex: border-image:url('imagem.png') 20px repeat;

list-style-type: '/2714/00A0/00A0'

colocar o codigo do emoji sem o u+
codigo "00A0" serve para dar um espacinho entre o simbolo e o texto (obs:essa feture nao e compativel com todos os navegadores)