20 truques de CSS você provavelmente nunca usou

1. Introdução: Oi, meu nome é Aga e sou designer de códigos. Eu gosto de cor rosa e dinossauros, mas o mais importante é que eu preparei aulas especiais CSS, para você. 20 truques CSS que você provavelmente não usou antes. Você já ouviu falar sobre a propriedade Line Clamp ou Column Count? Você já aplicou o gradiente cônico em CSS? Bem, se não, esta vai ser uma jornada muito interessante porque eu vou mostrar 20 truques CSS, que não são muito populares para ser honesto, mas eu espero que você vai achar criativo e que vai impulsionar o seu trabalho em projetos de laboratório. As classes são destinadas a todos que já escreveu uma linha de código CSS e está familiarizado com classes CSS. Vou mostrar 19 propriedades CSS e uma tag HTML. Com todos eles, você poderá criar ainda mais layouts criativos e efeitos ainda mais legais. Tenho certeza de que eles irão impulsionar seu fluxo de trabalho diário enquanto codificar seus projetos. Mal posso esperar para te ver na lista de estudantes. Tchau. 2. Preparações - O que você precisa: O que você vai precisar para as aulas. Primeiro, seu navegador favorito. Gosto de usar o Chrome e o Firefox. Segundo, editor de código. Nas aulas, eu uso o editor Atom. Você pode facilmente baixá-lo do atom.io e do terceiro pacote da seção de projetos que eu criei, especialmente para você. Você vai encontrar lá o esqueleto do site em que vamos citar alguns exemplos e alguns truques CSS. O pacote inclui o resultado do arquivo HTML de índice PNG, que é o layout final que estamos visando. Mais tarde você pode comparar a aparência do seu site se ele é semelhante a este e nós temos ativos img, todos os ativos que eu usei no layout, todos os ativos que eu usei no site e, claro, CSS. Estilos em que vamos adicionar algumas linhas e criar CSS. Se eu abri-lo no átomo, eu posso ver código HTML e styles.css onde eu vou colocar todos os novos elementos ao longo do curso. Aqui, você pode ver que eu também deixei alguns comentários para que você saiba imediatamente onde colocar o novo CSS. 3. Truque n° 1 - Múltiplos fundos: Truque número 1, múltiplos antecedentes. Se você já se perguntou se você pode usar várias imagens para o seu plano de fundo, a resposta é que sim, você pode fazê-lo. Podemos usar o recurso de imagem de fundo para adicionar mais de uma imagem. Nós simplesmente usar a função URL, e separar todas as outras imagens por vírgula. Podemos empilhar fundos, mas, em seguida, para informações importantes é, que o primeiro plano de fundo que você fornece está na camada superior, eo último plano é mostrado na parte de trás. Apenas menos plano de fundo pode incluir cor de fundo. Claro, outros têm propriedades para plano de fundo, como repetição de fundo, ou posição de fundo pode ser aplicada também. Vamos começar o exercício. Agora estamos prontos para adicionar os fundos. Vamos abrir o índice HTML do nosso pacote, este é o site que temos, e como mencionado, vamos adicionar duas imagens ao nosso fundo. Se eu olhar no site que já está codificado, ele vai ficar assim. Temos dois fundos, e um está no canto superior esquerdo, o outro no canto inferior direito. Nós também vamos adicionar anexo em segundo plano fixo, que você pode ver que esses dois fundos são corrigidos em um só lugar. Temos esse efeito de paralaxe. Tudo bem. Vamos voltar ao nosso código, estamos no styles.css, e se abrirmos nossas ferramentas de desenvolvimento, veremos que esta é a seção de cabeçalho, este é o seletor que temos. Estou procurando um cabeçalho, este, e aqui, deixei um comentário que diz que aqui estamos adicionando vários fundos. Temos cor de fundo, que podemos adicionar imagem de fundo, função URL, e essas duas imagens estão na pasta de imagem. Vamos abrir a pasta img e devemos ter hand.jpeg, e colors.jpg. Esses dois arquivos, eu estou adicionando o primeiro, não importa qual será o primeiro porque eles não estão se sobrepondo um no outro. Estou escrevendo img/hand.jpeg, a outra função URL novamente na pasta img/colors.jpg. Tudo bem. Estou economizando e vamos atualizar nosso site, como você pode ver, há uma mudança. Podemos ver fundo, a mão, mas aqui temos duas imagens aplicadas. A primeira coisa que precisamos mudar é definitivamente o tamanho do fundo, a mão não será esticada até a largura total. Podemos fazer, digamos por 430 pixels, e os outros 470. Infelizmente, o fundo é repetido por padrão, precisamos redefinir isso, background-repeat: sem repetir; graças a isso, teremos apenas uma única imagem, e as imagens estão presas, tudo o que você pode ver estão encravados. O primeiro na frente é hand.jpeg porque é o primeiro no listado na função URL, e o segundo é colors.jpg e as cores estão embaixo. Vamos definir a posição para eles. Podemos definir a posição de fundo, definindo para a mão, será à esquerda e superior, e para as cores, será certo. Estas são as linhas que precisamos adicionar para o nosso código, e lá atrás também é aplicado, background-attachment: fixo; podemos ver isso, paralaxe como efeito. Se eu comentasse, ele vai se comportar de uma maneira diferente. O que faço, simplesmente copio essas linhas e colo-as abaixo. Lembre-se de que você pode usar todas as outras propriedades sub para fundos como tamanho de fundo para ajustar a posição e simplesmente fazer o mesmo, basta separar os valores para determinado fundo usando vírgula e simplesmente salvá-lo. Podemos misturar planos de fundo, você pode misturar imagens, e você também pode adicionar cor de fundo. Vejamos, eu tenho esses dois fundos de luz. 4. Truque n° 2 - Largura do Viewport e unidades de altura (vw e vh): Truque número dois, largura da janela de visualização e altura da janela de visualização. A viewport é a área onde o navegador renderiza o site. Esta é a tela, a altura da tela menos o espaço que é reservado para o painel do navegador. Às vezes queremos definir a altura do elemento ou a largura com base no tamanho da janela de exibição. Podemos usar unidades de largura de viewport e altura de viewport, e isso é algo que queremos usar em nosso layout também. Temos o nosso site e queremos definir o cabeçalho para 80 por cento da altura da viewport. Em vez de definir 800 pixels, podemos escrever 80 altura viewport. Se eu defini-lo como 50, você pode ver que esta é a metade da altura da tela. Se eu mudar de exibição em tela cheia, você verá que isso é menor, então ele é re-calculado com base na altura da janela, contornando uma altura de viewport. Então eu estou mudando para 80, e eu quero aplicar isso no meu código também. Escrevendo 80 viewport altura de poupança, e é assim que parece. Claro, você também pode jogar com largura viewport e altura viewport. Eu prefiro não aplicá-lo ao texto, não é método muito recomendado, mas você pode facilmente jogar com ele nas imagens ou caixas, recipientes. Por exemplo, podemos adicionar aqui altura, 100, altura da viewport, e você verá que ele se encaixa perfeitamente 100% da altura da viewport do navegador. Se eu mudá-lo para menor, você verá que ele está realmente mudando sua altura. 5. Truque n° 3 - Atalho da fonte: Truque número três, abreviação da fonte. Em vez de listar todas as propriedades SAP para fonte, como font-style, font-weight, font-size, line-height ou font-family, podemos escrever tudo em uma linha usando a abreviação de fonte. Como fazer isso? Vamos ver. Então vamos voltar para o seu site e temos o título h1 e gostaríamos de h2 na verdade, e gostaríamos de aplicar a esta fonte abreviada. Aqui podemos ver que temos font-family. Temos alguns estilos como font-weight. Temos a altura da linha. Então vamos usar a propriedade abreviada. Então vamos encontrar o H2. Era divisor de classe. Então temos aqui nossos estilos definidos para o título. Então eu estou escrevendo uma abreviação de fontes e colando aqui minha folha de truques. Lembrarei qual propriedade SAP vai em qual ordem? Primeiro nós definimos font-style, que é variante de fonte normal, que é normal também. Font-weight, temos 900, é daqui, então eu posso remover isso. Tamanho da fonte, que é de 100 pixels, removendo-a também. Altura da linha, que é 0%. Então isso é feito, e depois font-family, então eu estou copiando Darker Grotesque e sans serif. Removendo também. Se eu não perdi nada, precisamos remover a altura da linha. Salve isso. Ainda posso ter o meu comentário. Vamos atualizar o site. Temos a nossa abreviação de fonte funcionando corretamente. Se eu comentasse, eu veria que essas propriedades não são mais aplicadas. Então, é claro, você pode brincar com ele. Você pode alterá-lo e tornar seu código mais eficaz e mais curto, graças a esta propriedade abreviada. 6. Truque n° 4 - Traço de texto: Podemos conseguir um efeito de contorno para a fonte acariciando texto e não preenchendo esse interior. Infelizmente, esse recurso não é totalmente suportado por navegadores mais antigos, no entanto, isso não significa que não possamos experimentar com ele. Para isso, precisamos aplicar duas propriedades. O primeiro, -webkit-text-fill -color e ter este webkit prefixo é crucial. O segundo, -webkit-texts-stroke. Se olharmos para a página que já está codificada, você verá que lá temos o contorno preto do título. Ampliando isso para o efeito CD. Se eu mergulhar no código, você verá que para o título, temos cor de preenchimento de texto aplicada. O legal é que nós também podemos torná-lo transparente para criar um efeito realmente legal. Também podemos mudar a cor para torná-lo um verde, torná-lo o que você quiser. Claro, temos o contorno que é definido por traçado de texto, e podemos definir a largura do traçado em pixels. Podemos em cinco, podemos em um, o que você quiser. Também somos capazes de mudar sua cor. Você pode fazer o que quiser. Vamos aplicar isso a recursos em nosso código. Temos -webkit-text-fill-color, que no nosso caso é branco. Temos -webkit-texts-stroke. Aqui adicionamos dois pixels para o contorno e cor. Estou atualizando meu site que eu posso ver este belo efeito do esboço. Se você quiser criar um saco completo para os navegadores que não estão suportando isso para propriedades CSS, você pode usar sombra de texto. Vamos simplesmente comentar. Estou colando propriedade de sombra de texto. Mas primeiro precisamos aplicar fonte de cor, cor branca. Você verá que usando sombra de texto, podemos criar algo como um efeito de contorno, que conseguimos usando traçado de texto e cor de preenchimento. Eu só queria mostrar-lhe que você tem esta opção para aplicar um fallback usando t shadow. Mas eu recomendo fortemente que você jogue com cor de preenchimento e traçado de texto. 7. Truque n° 5 - Sombra projetada: Truque número 5, sombra. Sombra suspensa é a função CSS que aplica um efeito de sombra à imagem. Qual é a diferença entre a drop-shadow e box-shadow? Vamos ver. Se aplicarmos uma sombra de caixa, você verá imediatamente a diferença. Caixa de sombra aplica a sombra atrás do elemento, atrás da caixa do elemento, para que você tenha o retangular. Para sombra, ela se aplica ao próprio elemento. Se eu tiver a imagem que tem alguma transparência, assim como esta imagem dessas folhas, você verá que a sombra é criada para cada parte da imagem. É por isso que é bom saber que temos propriedade drop shadow, mesma propriedade também é aplicada para a mão. Se eu encobrir, você verá que as sombras aparecem. Se eu tiver caixa-sombra, a sombra é aplicada a todo o retangular. Vamos adicioná-lo ao nosso casaco. Para sombreada temos 1,2,3, três coordenadas, então x, y, na verdade não são coordenadas, mas o borrão e o primeiro valor é a cor da sombra que temos. Temos sombra, vamos adicionar isto à planta. Temos sombra filtrada, 10 pixels para o eixo x, para um eixo y, temos 40 pixels, 30 pixels para o desfoque e para a cor que temos preto, mas com transparência de 5%. Estou atualizando meu site, e eu posso ver para esta planta que eu tenho gota de sombra aplicada. Claro que podemos manipular, podemos mudar esses valores para 45, é claro, adicionar isso à nossa mão, salvando, atualizando o site e eu posso ver que para minha mão, a sombra é aplicada também. 8. Truque n° 6 - Desfoque de filtro: Truque número seis, Borrão Filtro. A propriedade Filter e seu valor de desfoque aplicam um efeito de desfoque à imagem. Quanto maior o valor que teremos, maior será o borrão que criaremos. O pixel que está dentro do parêntese é o raio do desfoque. Não precisamos mais usar o Photoshop para ter efeitos desfocados em nossa imagem em um site. Vamos dar uma olhada no código. Este é o site em sua versão final e você pode ver que temos estas folhas borradas aplicadas aqui. Vamos adicionar este efeito para esta imagem e este, este é o plano de fundo da planta da classe e fundo da planta da classe. Eu vou mudar para decodificar onde em nosso CSS então eu tenho fundo planta e sobre aplicar filtro borrão em, vamos adicionar cinco pixels. Nosso raio terá cinco pixels. Estou atualizando a página e vejo que minhas folhas estão borradas. Simplesmente, fácil, eficaz. Você também pode verificar a parte do meio da página onde temos folha também. Para esta imagem temos classe chamada fundo planta aplicada. É por isso que o filtro de desfoque também funciona. 9. Truque n° 7 - Unidade de caractere (ch): Truque número 7, unidade de caráter. Podemos aplicar a unidade de caracteres. Representa a largura do caractere '0' na fonte atual, de particular uso em combinação com fontes monoespaçadas. Isso é semelhante em espírito ao x-height. Somente, ch é baseado na largura do caractere 0 em vez da altura desse caractere X. Em vez de definir a largura de nossos parágrafos em pixels, podemos aplicar unidades de caracteres. Se verificar o site que já está codificado, você pode ver que o texto tem largura limitada. Vamos compará-lo com o nosso estágio atual. Vamos manter-nos em contacto. Este é o cabeçalho que gostaríamos de encurtar em termos de largura e para este caso, podemos aplicar a largura máxima que é definido na unidade de caracteres. Temos cabeçalho de contato H2 e podemos aplicar largura máxima, vamos aplicar oito unidades de caracteres e teremos nosso texto limitado. Eu simplesmente copiar esta propriedade, voltar para o código procurar o título de conduta e adicionar unidade de caracteres. Você pode ver aqui em comentário que eu adicionei max-width e unidade de caracteres. Eu posso escrever assim. É claro que podemos jogar com ele também para parágrafos. Por exemplo, aqui podemos escrever max-width, digamos 50 caracteres e nosso parágrafo será encurtado. Em termos de largura. 10. Truque n° 8 - Primeira letra: Trick número 8, primeira letra. Primeira letra é um pseudo-elemento que seleciona a primeira letra na primeira linha de um elemento de nível de bloco. Por exemplo, parágrafo. Inspirado nos elementos impressos, podemos facilmente transferir essas ideias para a web também. Aqui, podemos ver o efeito que pretendemos. Esta é a primeira letra do parágrafo, letra F, e eu aplicá-lo aqui, pseudo-elemento com a primeira letra. Vamos ver como o CSS se parece. Eu apliquei pseudo-elemento, primeira letra. Existem algumas propriedades de fonte, como família de tamanho de fonte, transformação de texto. Mas também eu adicionei flutuador-esquerda e algumas margens para ter esta carta perfeitamente ajustado para o texto flutuante. Vamos aplicar isso em nosso código. Este é o meu estado atual do site, e eu estou ansioso para o parágrafo. É introdução da classe p, estou procurando a aula de introdução. Primeira letra. Então eu já criei um seletor para você, e queremos que ele flutue à esquerda. Queríamos ter esta carta em maiúsculas. Queríamos ter a família de fontes, Karla, tamanho de fonte 100 pixels. Mais tarde podemos aplicar a ele, nossa abreviação para propriedade de fonte, linha e algumas margens. Digamos que por agora, vamos ajustá-lo diretamente nas ferramentas de adaptação, mas vamos adicionar para começar 10 pixels. Estou a refrescar a minha página. Eu vejo esse pseudo-elemento para os trabalhos da classe de introdução. Desculpe, eu cometi o erro. Deve ser a altura da linha, claro. Tudo bem, refrescante. Na parte inferior eu tenho este pseudo-elemento, elemento de primeira letra listado. Do lado esquerdo, eu gostaria de ter zero pixels, e talvez do lado direito, 20. Vamos compará-lo com o exemplo anterior. Penso que também podemos acrescentar uma margem a partir do topo. Então, como 15 vamos dizer para tê-lo bem equipado com o texto, que ele está flutuando o parágrafo. Estou lidando com margem, colando salvando. Eu também posso, em vez de escrever estas três linhas, Eu posso escrever fonte normal. Esta é a variante de estilo. Em seguida, o que foi o próximo? Podemos dar uma olhada na divisória. Era estilo, variante, peso, tamanho, altura da linha, font-family. Certo, espere, então temos tamanho normal, altura de linha e família de fontes. Vamos removê-lo. Refresque, tudo parece bem. É assim que podemos aplicar pseudo-elemento de primeira letra ao parágrafo. Você também pode adicioná-lo. Por exemplo, temos uma lista aqui. Vamos copiar os estilos que temos e vamos criar pseudo-elemento. Temos lista numérica li e pseudo-elemento, primeira letra. Você tem que admitir que é um pouco louco. Mas tendo em mente que é possível, podemos criar efeitos realmente interessantes mais tarde. Eu recomendo totalmente que você jogue com o pseudo-elemento de primeira letra, e claro, você pode fazer a letra maior, modo a tornar o efeito ainda mais impactante. 11. Truque n° 9 - Grampo de linha: Trick número 9, pinça de linha. A propriedade de braçadeira de linha webkit nos permite limitar o conteúdo de um contêiner de bloco, ao número específico das linhas que definimos. É importante saber que ele só funciona com a combinação com a propriedade display que é definido para caixa webkit, ou caixa embutida webkit. Nós também temos que aplicar webkit caixa orients propriedade que é definido como vertical. Também é essencial adicionar overflow, que é hepta escondido, porque, graças a ele o conteúdo, seria cortado. Não será mostrado depois de um número específico das linhas que aplicamos. grampos de linha estão em uma parte do módulo de estouro CSS nível três, e atualmente é o rascunho dos editores. Podemos aplicar grampo de linha, mas apenas com um prefixo webkit, que funciona surpreendentemente para todos os outros navegadores principais, não apenas no Chrome ou Safari. Gostaríamos de aplicar grampo de linha ao parágrafo com uma classe encurtada. O que temos de fazer, temos de definir estes quatro elementos. O primeiro dos quais eu estava mencionando é display e precisamos configurá-lo para caixa webkit. A próxima coisa é adicionar grampo de linha webkit. Este grampo de linha, vamos limitá-lo a três linhas. Então precisamos aplicar webkit, orientar caixa e definir para vertical. Como você pode ver que o parágrafo já está encurtado para três linhas, mas o resto do texto ainda é mostrado. Para limitar sua altura visualmente, precisamos aplicar transbordamento, configurá-lo para oculto. Graças ao que alcançamos três linhas de texto, embora nosso parágrafo seja super longo e o texto ainda esteja lá, mas visualmente, é truncado em apenas três linhas e temos uma reticência no final. Assim, ele dá ao usuário informações que na verdade há um mais, mais conteúdo escondido dentro deste parágrafo. Por favor, lembre-se sobre essas quatro coisas que precisam ser aplicadas. Claro, vou adicioná-lo ao meu editor, encurtado. Sim, aqui é onde eu deixei um comentário para você, colando-o. Apenas rapidamente, fazendo limpeza, salvando, refrescante, e eu tenho o parágrafo encurtado. 12. Truque n° 10 - Lista numerada: Truque número 10, lista numerada. Podemos facilmente criar uma lista numerada usando ol tack. O que temos como resultado são números exibidos antes de cada elemento da lista, é realmente útil e útil. Mas e quanto a estilizar esses números, você já tentou isso? Para fazer isso, precisamos jogar com algumas propriedades CSS chamadas contadores CSS. Os contadores CSS permitem ajustar seus períodos de conteúdo com base em sua localização no documento. Para usar um contador CSS, ele deve primeiro ser inicializado para um valor com a propriedade de reset do contador. Então, quando terminamos com a inicialização, mais tarde que o valor dos contadores pode ser aumentado ou diminuído e isso é feito por incremento de contador. O valor de um contador pode ser exibido usando uma função de contador ou contadores e uma propriedade de conteúdo. Vamos ver o lado prático dos contadores CSS. Agora vamos dar uma olhada na nossa lista. Esta é a parte ordenada da dívida que eu já preparei para você. O que eu fiz é que os números que são exibidos antes de cada elemento aliado, antes de cada elemento da lista. Este é o gramado do estilo da lista. Se eu sair, você verá os números. Mas estamos escondendo-os para usar pseudo elementos para usar contadores CSS. Isso é voltar a decodificar. Tenho a minha lista numerada, Ally. A primeira coisa que eu preciso fazer é aplicar propriedade de incremento de contador. Nós não usamos contador reset porque esta lista já está numerada e nós já temos nossos elementos numerados adequadamente. A única coisa que fazemos aqui é definir o incremento do contador para aliado. Este é o nome dado, então também podemos adicionar, por exemplo, elemento de lista, o que você quiser. Então precisamos criar pseudo-classe. Então nós já numerado lista aliado antes. Aqui precisamos adicionar contador de conteúdo e abordar o contador que já criamos. O valor que já criamos qual elemento de lista. Isto funciona assim. Aqui, é claro, podemos adicionar estilos aos nossos números. Mas primeiro, vamos ver se funciona. Então eu estou salvando isso, atualizando a página e eu posso ver os números. Eu posso ver que os números estão aparecendo e esses números estão corretos. Então temos seis elementos. Quem poderia seis personagens, temos 1,2,3,4,5,6. Então, em, então vamos brincar com isso um pouco. Podemos, por exemplo, adicionar raio de fronteira 50 por cento. Por enquanto, podemos adicionar o plano de fundo. Vamos dizer azul por enquanto, só para brincar com ele. Adicione o tamanho da fonte 20 pixels. Estou economizando, refrescante. Posso ver que os estilos estão chegando. Mas vamos aplicar os estilos que são visualmente atraentes. Então esta é a minha folha de batota. Eu tenho os números já aqui, então eu posso copiar o valor para o fundo. Posso ver que o tamanho da fonte é 30 pixels e a largura e a altura do, do círculo é 45 pixels. Este é o diâmetro. Também há algum posicionamento que nos ajuda a manter o número posicionado bem de acordo com a linha do texto. Então vamos simplesmente fazê-lo. Eu tenho antes aqui, eu tenho meu fundo, eu tenho altura, 45 pixels largura 45 pixels, posição absoluta, esquerda. Vamos adicionar menos 40 pixels, altura da linha 45, centro do alinhamento de texto, tamanho da fonte em 20. Nós já temos o tamanho da fonte, então podemos adicionar 30 e alterar a altura da linha para 40 parece mais agradável e a família da fonte deve ser Karla. Na verdade tamanho da fonte 25 e altura da linha 45. Parece bem. Parece algo que queríamos alcançar. Pegando todos os estilos que estão aqui, e eu estou colando meu pseudo elemento, atualizar. Posso ver que o número desses estilos, você pode usar contadores CSS para elemento diferente na seção do site. Então, mais tarde, eu vou dar-lhe um exercício para tentar aplicar números a, por exemplo, títulos ou parágrafos, elementos diferentes, que a lista numerada, que já é o elemento numerado. Portanto, é um pouco mais fácil aplicar contadores CSS para os pseudoelementos. 13. Truque n° 11 - Texto truncado: Truque número 11, truncar texto. Eu já mencionei truncar texto com grampo de linha. Também podemos usar um método diferente. Para truncar texto, precisamos de três propriedades CSS, espaço em branco, estouro e estouro de texto. O espaço em branco precisa ser configurado para não envolver, estouro para oculto e estouro de texto para reticências. estouro de texto ocorre somente quando a propriedade de estouro do contêiner tem o valor oculto, scroll ou auto, e sem quebra de espaço em branco. É por isso que precisamos de três deles para alcançar esse efeito. Vamos dar uma olhada em nosso site, e gostaríamos de truncar esse parágrafo inteiro para apenas uma linha. O que podemos fazer é aplicar estas três propriedades que eu já mencionei. Certo, então estamos procurando o parágrafo, está aqui. Eu posso realmente adicionar uma classe a ele. Este é o parágrafo sob a lista numerada. Estou procurando a lista numerada. Aqui temos o parágrafo, vou dar o título truncado. Vou adicionar estas três propriedades. Para fazê-lo funcionar, é overflow: hidden: text-overflow: elipsis; e o último é, white-space: nowrap; Estou salvando. Atualizando meu site, e o que eu posso ver, é que meu parágrafo inteiro é encurtado para apenas uma linha, e essa linha é terminada com uma reticência. Se eu mandar sair, uma das propriedades, verá que não funciona como esperávamos. Sem reticências de estouro de texto, não temos reticências no final. Sem espaço em branco: nowrap; Infelizmente, o texto não é truncado. O estouro funciona, mas e se adicionarmos espaço em branco: nowrap; e text-overflow: reticências? Bem, na verdade, todo o parágrafo está em algum lugar por aqui. Mas porque não temos overflow: hidden; o resto do texto que não está truncado, ainda é exibido. Graças ao overflow: oculto; temos apenas uma linha e termina com reticências. Graças ao estouro de texto: reticências. Podemos brincar com ele e ajustá-lo às suas necessidades. 14. Truque n° 12 - Texto degradê: Truque número 12, texto de gradientes. Vamos imaginar que gostaríamos de aplicar gradiente a este título. Vamos manter-nos em contacto. A questão é, podemos realmente aplicar fundos de gradiente para detects? Sim, podemos. Nós podemos fazer isso. Graças a algumas propriedades CSS que temos. Vamos dar uma olhada no código. Estamos ansiosos pela direção do contato. Sim, exatamente este. A primeira coisa que precisamos adicionar é o fundo. fundo que será recortado ao nosso texto. Eu gostaria de aplicar gradiente radial e eu já tenho minha folha de truques. Duas cores, rosa e amarelo que eu gostaria de usar. Temos a cor de fundo e, em seguida, a cor de fundo deve ser mascarada em relação à forma do texto. O resto precisa ser cortado, então temos que nos livrar dos elementos desnecessários do recipiente onde o texto está. Podemos conseguir isso aplicando propriedade webkit, clipe de fundo webkit. Este é o que precisamos de ter e aplicamos textos porque queremos cortar o texto. A última coisa que precisamos aplicar, preencher a cor e precisamos definir isso para um transparente. Temos webkit, texto, cor de preenchimento e aplicar para transparente. Estou refrescando a página e a magia acontece. Eu tenho um lindo gradiente aplicado ao meu texto. Se eu sair, por exemplo, cor de preenchimento, você verá imediatamente que o gradiente não funciona. Estas são as propriedades cruciais que precisamos adicionar, e, claro, podemos adicionar webkit-texts-stroke, e que dois pixels preto. Este é o efeito que gostaríamos de alcançar no final. Estou copiando esta linha, colando e bonito texto gradiente aparece. Claro, você pode jogar com o fundo aplicando gradiente linear. Você pode brincar com as cores. Você pode adicionar mais deles. Sinta-se livre para fazer o que quiser com os gradientes. Espero que você se divirta. 15. Truque n° 13 - Seleção de texto cruzado: Truque número 13; Seleção de texto cruzado. Quando selecionamos qualquer parte, qualquer parte do texto no navegador, ele mostra a cor azul. É a cor padrão que é gerada em todos os navegadores. Mas há truques do CSS que nos ajudam a mudar isso, a mudar de cor para um navegador diferente. Estamos no arquivo CSS em nosso exercício e vamos criar pseudo-classe que é chamado seleção. Para este, podemos aplicar a cor que gostamos que o nosso texto seja destacado. Então pensar que aplico uma cor de fundo simples e escolho a amarela, estou salvando, atualizando meu site, e posso ver que a seleção é amarela. Se eu remover esta pseudo-classe para a classe de seleção, você verá o azul padrão. Então vamos voltar à nossa cor amarela, e vamos aplicar cores diferentes. Por exemplo, para o Firefox, eu estava usando o Chrome, mas vamos mudar para o Firefox e vamos ter cores diferentes para o Firefox. Então, para o Firefox, precisamos adicionar pseudo-elemento pseudo-classe, mas com o prefixo do fornecedor. Então eu estou adicionando moz para Mozilla e seleção. Vamos aplicar cor de fundo, salmão. Estou abrindo o Firefox, que já estava preparado para você e se eu selecionar um texto, é cor de salmão. Para o Chrome, é amarelo. Então você pode brincar com ele, e eu acho que é um bom, bom efeito pequeno que tem a influência na experiência do usuário. Sinta-se livre para usar a seleção empilhada, sinta-se livre para mudá-la, sinta-se livre para usar fundos diferentes. 16. Truque n° 14 - Degradê cônico: Truque número 14, gradiente cônico. Fiquei super surpreso quando descobri que podemos usar CSS puro para criar gráficos de pizza. Eu acho que é super divertido porque para uma visualização simples, não precisamos criar SVG ou não precisamos aplicar bibliotecas JavaScript complicadas. É apenas CSS e é apenas uma linha de guarda de código para fazer site, que eu estou ligando aqui agora. Ele descreve que o ingrediente coning é a função CSS que cria uma imagem consistindo de um gradiente com transições de cor, girado em torno de um ponto central em vez de irradiar a partir do centro. É por isso que podemos alcançar este gráfico de pizza como efeito. Vamos dar uma olhada em nosso site. O que você pode ver é o gráfico de pizza, que é criado com apenas uma linha de CSS. Vamos dar uma olhada em como ele é construído. Tenho três cores em um gráfico de pizza. É o conjunto de propriedades de fundo. Ele define para valorizar ingrediente cônico. Temos três cores. O que está acontecendo aqui é que eles estão divididos em porcentagens. A primeira cor, aquela laranja, leva 25 por cento de todo o círculo. Você pode ver que é exatamente um quarto quarto trimestre. Então temos o azul, que leva 25-56 por cento, que é 31 por cento. Este, e o último, leva o resto. De 56 a 100, que é 34 por cento. É assim que podemos construir um gradiente cônico. Claro que você pode jogar com cores diferentes. Vamos voltar ao nosso código ao procurar um gráfico de pizza. É aqui. Nós aplicamos volta rodadas gradiente cônico. Aqui temos, por exemplo, salmão, azul e amarelo. Desculpe por não colar as cores apropriadas, mas espero que você as obtenha do pacote. Salmão, digamos de zero por cento a 30, de 30-50, e amarelo de 50 por cento a 100. Estou guardando, atualizando a página. O que vejo é quase o resultado que gostaríamos de alcançar. Mas a coisa é que nós também precisamos aplicar o raio de fronteira de espessura a porcentagem para alcançar o círculo. Estou aplicando 50% de raio de fronteira e tenho o gráfico. Estou colando salvando, e meu gráfico está pronto. Claro, você pode mudar as cores da lenda. Você pode mudar as cores para brincar com ele, seu símbolo, é divertido e eu acho que você também pode usá-lo para fins decorativos. 17. Truque n° 15 - Tag de quebra de palavras: Truque número 15, etiqueta de quebra de palavra. Embora eu intitulado o curso 20 truques CSS, Eu vou estar mencionando uma tag HTML que é oportunidade de interrupção de trabalho. Não é muito popular, mas decidi compartilhar minhas informações porque acho que pode ser muito útil em algumas situações. Então vamos dar uma olhada. Tag de oportunidade de quebra de trabalho especifica onde em um texto seria aceitável adicionar uma quebra de linha. Ele pode ser usado nos casos em que uma palavra é muito longa ou temos medo de que o navegador vai quebrar nossas linhas no lugar errado. Na segunda parte você verá que há um número de telefone e que tal dividir este texto em algumas partes? Que tal quebrar este texto em lugares específicos? Por exemplo, para cada cinco números, a cada cinco caracteres. Como esse número de telefone longo se comportará se alterarmos a largura do navegador? Vamos ver. O número permanece em uma linha e, na verdade, mudou sua posição, está agora dentro, mas ainda se comporta tão completo quanto a linha. E se você gostaria de quebrá-lo em vários lugares sem adicionar qualquer espaço extra, caráter extra. Podemos usar a tag de oportunidade de pausa de trabalho. Então vamos ver o nosso HTML. Este é o meu número de telefone, span disruppt em uma tag span. Posso adicionar tag de intervalo de trabalho cada quatro ou cinco ou seis caracteres. Então aqui podemos dar número par, e todo o nosso número de telefone será quebrado. Estou economizando, atualizando e vejo que meu número de telefone está quebrado. Começa na primeira linha e também aparece na segunda. Uma das partes deste número. Então você pode ver que esta é a primeira, a segunda parte, a terceira e a última. Então, ao tornar o navegador da janela menor, mais estreito, você verá que algumas partes do número mudarão sua posição em relação à tag de oportunidade de pausa de trabalho. Este é o número de telefone, podemos removê-lo, e podemos escrever aqui, por exemplo, uma palavra muito longa . Depois de cada palavra, podemos adicionar tag quebra palavra. Assim, irá dividir todo o texto em linhas que gostaríamos de alcançar. Tão atadas em volta deles. Temos um texto muito longo, vamos destacar isso. Não consigo vê-lo. Então esta é a palavra muito longa. Você pode ver que ele mantém muito tempo. Então não se divide no meio da palavra e aqui temos outra palavra muito longa. Embora possa parecer muito nicho tag, Eu acho que existem alguns casos que pode ajudar. 18. Truque n° 16 - Pontos de destaque personalizados: Truque número 16; Pontos de bala personalizados. E sobre a criação de uma lista que é desordenada, usando a tag UL, mas tendo um marcador personalizado pontos? Também podemos aplicar uma imagem. Como fazer isso? Bem, vamos dar uma olhada no código. Se eu verificar o código, eu vou ver que minha lista de códigos de classe tem elementos de lista, e o muito importante é redefinir o estilo de lista, configurá-lo como nenhum. Queremos ter os pontos pretos pretos pretos. A próxima coisa que é aplicada aqui é o pseud-elemento. É a classe de pseudo-elemento antes. Aplica-se ao LI, o elemento da lista. Para que funcione, precisamos definir conteúdo. Ele pode estar vazio, mas é muito importante ter a propriedade content. Então temos algum posicionamento conectado com este círculo amarelo e um fundo. Se eu mudar a cor de fundo, você verá diretamente a mudança acontecendo aqui. Claro que podemos ter os quadrados, podemos mudar a altura e a largura dele. Podemos jogar com algum posicionamento, tudo depende de você. Há também uma coisa mágica que podemos adicionar, e é adicionar o fundo ao conteúdo. Há também uma coisa legal que podemos realmente aplicar uma imagem, para a pseudo-classe antes. E se eu gostaria de adicionar uma imagem aqui? Imagem antes de cada elemento da lista não ordenada. Podemos fazê-lo usando a propriedade de conteúdo e definimos o valor para URL. Em vez de ter este conteúdo vazio, é claro que podemos escrever algo aqui. Deixe-me escrever mais uma vez. Como um, dois, três, podemos realmente fornecer a função URL. A função que tem o caminho para a nossa imagem, eu me lembro que eu tenho imagem chamada banana icon, e é uma tag IMG. Então eu estou escrevendo url (.. /img/banana-icon.png), e eu tenho meu ícone com banana pronto. Claro que posso comandar o fundo, ou talvez eu possa mudá-lo para tê-lo em cor rosa. Eu também posso misturar o fundo. Eu posso misturar algumas dimensões com o conteúdo, que na verdade é uma imagem aqui. Sua tarefa agora é criar uma coisa semelhante. Mudei para o site em que estamos trabalhando no momento, e se você for um pouco mais baixo, verá que há uma lista. Seria ótimo se pudéssemos aplicar os estilos a ele. A coisa que você precisa lembrar é que, primeiro precisamos redefinir o estilo da lista. Se eu navegar até ele, nós temos a lista de classes UL. Para este LI já temos list-style definido como nenhum, o que é muito importante. Então precisamos aplicar a pseudo-classe antes para o elemento LI, eo muito importante é o conteúdo. Mesmo que não queiramos aplicar uma imagem aqui, o conteúdo é muito importante para que a pseudo-classe realmente apareça. Vou deixar esta tarefa para você. Se você tiver algum problema, você pode voltar para o primeiro segundo da lição e ver como a pseudo-classe é criada. Se eu mudar para o editor de código você verá que eu já criei este seletor para você, então nós temos antes pseudo-classe para elemento LI no recipiente que tem classe lista, e você pode escrever aqui tudo o que você deseja obter o ponto de bala personalizado. Por favor, lembre-se sobre a propriedade de conteúdo. 19. Truque n° 17 - Encaixe de objetos: Truque número 17, encaixe no objeto. Object-fit, propriedade CSS, define como o conteúdo de img ou vídeo deve ser redimensionado para caber seu recipiente. Temos várias opções, como cobrir, preencher e conter. Vamos dar uma olhada em exemplos práticos. Neste exercício, vamos limitar a altura do contêiner de imagem. Este é o resultado final que gostaríamos de alcançar. Se inspecionarmos a imagem, veremos que na verdade ela tem 600 pixels de largura e 400 pixels de altura. Em nosso projeto atual, vemos que nossa imagem é super longa em termos de altura. O que vamos fazer é introduzir algumas limitações. Eu tenho o objeto de classe ajustado, eu já criei para você. Vamos adicionar altura para 100 pixels. Infelizmente, toda a imagem está ficando menor, mas gostaríamos de alcançar um resultado diferente, aquele que eu já mostrei no layout anterior. Para isso, também podemos adicionar com 100 por cento, graças ao que nossa imagem será esticada. Mas eu não gosto do fato de que ele realmente muda sua proporção. Graças a object-fit, podemos definir como a imagem se comportará nesta área de limitação, o recipiente que definimos na tag img. Podemos escolher “conter”, modo que toda a imagem será contida neste recipiente, 600 por 400 pixels. Podemos adicionar capa, então ela será esticada até a largura máxima que podemos “preencher”, assim, cada pixel será preenchido pela imagem, não importa o quão esticada ela deve ser. Podemos definir nenhum, então a imagem manterá seu tamanho natural. Vamos escolher “capa” para isso. Object-fit mais uma vez, cobrir e este é o resultado que gostaríamos de alcançar. Eu acho que o ajuste de objeto é uma ótima propriedade também em termos de design responsivo, às vezes temos proporções realmente estranhas das imagens, e também varia dependendo da resolução, seja móvel ou desktop. Eu recomendo fortemente que você brinque com ele. Só quero copiar todas as propriedades que escrevi. Estou voltando ao meu código e procurando o ajuste de objeto de classe, que está pronto para você, colando essas linhas, então altura com um ajuste de objeto. Atualizando o site e minha imagem parece muito agradável. 20. Truque n° 18 - Contagem de colunas: Truque número 18, contagem de colunas. A propriedade de contagem de colunas quebra o conteúdo do elemento dado, por exemplo, parágrafo em número especificado de colunas. Assim, o navegador distribuirá uniformemente o conteúdo em exatamente o número que lhe demos. Então, e se quisermos ter duas colunas em vez deste bloco de texto, podemos facilmente fazê-lo. Temos classe outro, e aqui podemos aplicar propriedades de contagem de colunas e configurá-lo para dois. Simplesmente assim. Fácil e simples. Claro que você pode aumentar o número. Podemos voltar à situação anterior em que temos apenas uma coluna. Por isso, é muito fácil manipular o conteúdo do recipiente usando column-count. Voltando ao meu código procurando outro, colando a contagem de colunas para salvar, atualizar e minha alteração está pronta. 21. Truque n° 19 - Seletor de irmãos adjacentes: Truque número 19, combinador de irmãos adjacentes. O combinador irmão adjacente corresponde ao segundo elemento somente se imediatamente seguir o primeiro elemento. Além disso, ambos são filhos do mesmo elemento pai. E se eu gostaria de estilizar este parágrafo e adicionar uma margem superior maior e ter a largura limitada? Eu posso ver que este parágrafo é os filhos de col-md-6, e é a próxima tag, o próximo seletor após legenda do gráfico. Podemos usar combinador irmão adjacente. Já preparei um seletor para você. Este seletor seleciona parágrafo que é imediatamente após a classe chart-legend. Em outras palavras, o parágrafo segue imediatamente a legenda do gráfico. Se eu gostaria de aplicar aqui margin-top 20 pixels e máxima largura, digamos, 300 pixels, estou salvando, atualizando minha página, e vejo que esses estilos são aplicados e esses estilos são aplicados apenas a este parágrafo. Os outros parágrafos, como por exemplo este, não são afetados pelo nosso seletor. Mesmo se eu adicionar outro parágrafo, podemos alterar seu conteúdo, e este parágrafo será também os filhos do recipiente col-md-6. Vamos ver quais azulejos o afetariam. Vamos ver como nosso site será renderizado e como esses dois parágrafos serão semelhantes. Estou refrescando a página. Se você compará-lo, você verá que apenas os primeiros parágrafos logo após a legenda do gráfico terão os estilos aplicados. Este teria apenas seletor p geral que criamos anteriormente. Podemos dizer que o combinador de irmãos adjacentes funciona. Você pode usar isso para vários fins. Às vezes é mais fácil para nós usar esses seletores em vez de criar classes. Acho que vale a pena brincar com ele. 22. Truque n° 20 - Seletor de irmãos gerais: Truque número 20, combinador geral de irmãos. Combinador irmão geral separa dois seletores e corresponde ao segundo elemento somente se ele segue o primeiro elemento. No entanto, não é necessário que o segundo elemento seja o seguidor imediato. Ambos os elementos devem ser os filhos do mesmo elemento pai. Assim, a mesma situação que para o combinador de irmãos geral. E se quisermos aplicar um estilo, por exemplo, altura da linha para todos os parágrafos que seguem a legenda do gráfico, mas não necessariamente imediatamente após a legenda do gráfico. Todas as tags p, então todos os parágrafos que seguem gráficos legendam para este e este tenha os estilos aplicados. Vamos adicionar a altura da linha, 200 por cento e se eu atualizar a página, tanto a primeira como a segunda terão a altura da linha 200 e os outros parágrafos teriam 150. Sinta-se livre para usar combinador irmão geral para suas necessidades. 23. Considerações finais: Então eu estou deixando vocês com um estágio atual do site. Se você fez todos os exercícios que eu estava explicando, este é o estágio que você deveria ter neste momento. Portanto, há algumas coisas que ainda precisam ser adicionadas se compararmos com a versão final, que eu tenho no meu computador, você verá que ainda precisamos trabalhar nesta seção onde eu aplicá-lo vários fundos e de você pode encontrar todas as imagens no pacote. Há também alguns estilos no texto aqui. Então devemos aplicar aqui as imagens, devemos mudar o traçado de texto aqui. Então ainda tem lição de casa para você. Se você gostaria de comparar seu site a partir dos exercícios. Você pode abrir o arquivo PNG. Não está no pacote, então você verá todos os detalhes completamente. Claro, você está convidado para experimentar com CSS que eu preparei para você. Você pode alterar os valores. Você pode usar as técnicas criativas que acabei de mostrar para vários fins. Claro, você é mais do que bem-vindo para mostrar o que você inventou. Estou muito ansioso para acompanhar o seu progresso e ver o que você está inspirado. Por favor, publique seus trabalhos na seção da comunidade. Em geral, espero que você tenha se divertido e se familiarizado com as propriedades CSS.