Forem: Sara Gomes

Forem: Sara Gomes The latest articles on Forem by Sara Gomes (@sgomesdev). https://forem.com/sgomesdev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F789256%2Fe786ff85-c22c-41ed-989e-f684e7a680ac.jpg Forem: Sara Gomes https://forem.com/sgomesdev en Limitando texto com com 3 pontinhos Sara Gomes Mon, 21 Feb 2022 01:09:03 +0000 https://forem.com/sgomesdev/limitando-texto-com-com-3-pontinhos-46gf https://forem.com/sgomesdev/limitando-texto-com-com-3-pontinhos-46gf <h2> Olá, pessoal 👋🏻 </h2> <p>Neste artigo vamos falar sobre a importância de usar as reticências (mais conhecido 3 pontinhos), no CSS e não de forma escrita manualmente no HTML.</p> <p>Para exemplificar, vou usar um card responsivo com um textinho em Mussum Ipsum. Inicialmente o card terá largura máxima de 490px, porém, ele é responsivo e poderá ter seu tamanho reduzido para que se adapte a qualquer tipo de tela.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjys2fq0n115yecbhurny.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjys2fq0n115yecbhurny.png" alt="Card: Meu primeiro artigo" width="800" height="798"></a></p> <p>Note que conforme o card é reduzido, as palavras que não cabem mais em suas respectivas linhas são empurradas para a próxima linha, e por esse motivo que devemos adicionar as reticências dinamicamente pelo CSS.</p> <h2> Limitando linha única </h2> <p>Com o card já montado com título e descrição, vamos ver o exemplo de como usar as reticências limitando o texto em apenas uma linha.</p> <p>Neste exemplo usei a classe "card-text" para estilizar o parágrafo do card.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>.card-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8vjr1ojz13ogl0n0q8jz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8vjr1ojz13ogl0n0q8jz.png" alt="Limitando linha única" width="800" height="746"></a></p> <h2> Limitando Múltiplas linhas </h2> <p>Agora se o assunto for limitar em múltiplas linhas, você pode usar o código a seguir:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>.card-text { display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; -webkit-box-orient: vertical; } </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8zrb25l8i99f1m8pf15y.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8zrb25l8i99f1m8pf15y.png" alt="Limitando Multiplas linhas" width="800" height="771"></a></p> <p>Defini o número de linhas que eu quis limitar, que nesse caso foram 3, usando a propriedade "-webkit-line-clamp".</p> <p>Você pode brincar com o código e testar limitando com as reticências, e escolhendo o número de linhas que desejar.</p> <p><iframe height="600" src="https://codepen.io/saragomesdev/embed/zYPpgVo?height=600&default-tab=result&embed-version=2"> </iframe> </p> <p>Essas foram as dicas, espero que tenham te ajudado. :)</p> css html braziliandevs 5 jogos gratuitos para praticar CSS Sara Gomes Thu, 17 Feb 2022 20:39:35 +0000 https://forem.com/sgomesdev/5-jogos-gratuitos-para-praticar-css-4pa7 https://forem.com/sgomesdev/5-jogos-gratuitos-para-praticar-css-4pa7 <h2> Olá, pessoal 👋🏻 </h2> <p>Para o post de hoje, eu separei 5 jogos gratuitos para você praticar CSS.</p> <p>Por aqui você vai encontrar guias sobre Flexbox, Grid, Seletores no CSS, e tudo isso enquanto se diverte jogando.</p> <h2> 1. Flexbox Froggy </h2> <p>Nesse primeiro jogo você precisará levar os sapinhos aos seus destinos. Contará com <u>24 fases</u> e <u>3 níveis de dificuldade</u>, que vai desde o iniciante com dicas sobre cada propriedade do Flexbox, até o experiente que são níveis sem dicas.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2qyx9gz2x00xmnlsgcb.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2qyx9gz2x00xmnlsgcb.png" alt="Flexbox Froggy" width="800" height="459"></a></p> <p>Encontre esse jogo clicando <a href="https://flexboxfroggy.com/" rel="noopener noreferrer">aqui</a>.</p> <h2> 2. CSS Diner </h2> <p>Nosso segundo jogo é sobre os seletores no CSS. O CSS Diner é composto por <u>32 níveis</u> e, possui exemplos de como cada seletor funciona.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnaph84wtahwxdeb0n6t2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnaph84wtahwxdeb0n6t2.png" alt="CSS Diner" width="800" height="418"></a></p> <p>Encontre esse jogo clicando <a href="https://flukeout.github.io/" rel="noopener noreferrer">aqui</a>.</p> <h2> 3. Flexbox Defense </h2> <p>Já o terceiro jogo dessa lista, é também para praticar as propriedades do Flexbox. Só que agora você precisará posicionar bem as suas torres, usando os alinhamentos, para defendê-las. O jogo conta com <u>12 fases</u>.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnn4wluiiray3np2i0fb1.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnn4wluiiray3np2i0fb1.png" alt="Flexbox Defense" width="800" height="462"></a></p> <p>Encontre esse jogo clicando <a href="http://www.flexboxdefense.com/" rel="noopener noreferrer">aqui</a>.</p> <h2> 4. Grid Garden </h2> <p>O quarto jogo é o Grid Garden. Nele você pode praticar sobre as propriedades do Grid no CSS. Esse jogo conta com <u>28 fases</u>, onde você vai precisar direcionar as cenourinhas e cultivá-las.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0t6dhcm70wuacuoqmb5c.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0t6dhcm70wuacuoqmb5c.png" alt="Grid Garden" width="800" height="477"></a></p> <p>Encontre esse jogo clicando <a href="https://cssgridgarden.com/" rel="noopener noreferrer">aqui</a>.</p> <h2> 5. Flexbox Zombies </h2> <p>Chegamos então ao quinto jogo. Flexbox Zombies é um jogo de sobrevivência contra os ataques de zumbis que conta com <u>12 capítulos</u>, sendo <u>cada capitulo de múltiplas fases</u> e, um guia no aprendizado das propriedades do Flexbox.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79rk1b28hz2p99hnrkzw.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F79rk1b28hz2p99hnrkzw.png" alt="Flexbox Zombies" width="800" height="488"></a></p> <p>Encontre esse jogo clicando <a href="https://mastery.games/flexboxzombies/" rel="noopener noreferrer">aqui</a>.</p> <h2> Conclusão </h2> <p>Por enquanto essas são as indicações de jogos sobre CSS que eu queria passar para vocês. Espero que tenham gostado!</p> <p>Sintam-se a vontade para comentar quais desses jogos você já conhecia e, se já jogou algum, quais desses você já zerou.</p> <p>Obrigada por ler!</p> beginners css braziliandevs gamedev Centralizando as coisas com Flexbox Sara Gomes Mon, 14 Feb 2022 01:41:09 +0000 https://forem.com/sgomesdev/centralizando-as-coisas-com-flexbox-gjp https://forem.com/sgomesdev/centralizando-as-coisas-com-flexbox-gjp <h2> Olá, pessoal 👋🏻 </h2> <p>Hoje eu vim com uma dica rápida de como centralizar as coisas no CSS usando o Flexbox. Continua aqui comigo que eu já vou te mostrar como funciona esse tal alinhamento.</p> <h2> Iniciando com Flexbox </h2> <p>Nesse exemplo usaremos duas div's. A div mais externa de cor cinza, eu vou chamar de "container" ou "elemento pai", já a div mais interna de cor rosa, eu vou chamar de "box" ou "filho imediato" da div pai. </p> <p>Dito isso, vamos inicializar o Flexbox <strong>inserindo</strong> a propriedade "<strong>display: flex"</strong> <strong>no container</strong>. Nesse momento, nada mudará visualmente, mas agora todos os filhos imediatos poderão receber os efeitos do Flexbox (No nosso caso, o filho é apenas a box rosa).</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzi7hnq1e2o2x4lox5vb.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzi7hnq1e2o2x4lox5vb.png" alt="display-flex" width="800" height="466"></a></p> <h2> Centralizando na horizontal </h2> <p>Agora, ainda <strong>no container</strong>, vamos adicionar a propriedade "<strong>justify-content: center</strong>", para alinha a box ao centro horizontal do elemento pai. </p> <p>Perceba que as propriedades do Flexbox precisam ser obrigatoriamente definidas no elemento pai, e assim os efeitos serão refletidos nos elementos <strong>filhos imediatos</strong> desse container. </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5y8geke41wpi9zotlg5o.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5y8geke41wpi9zotlg5o.png" alt="justify-content" width="800" height="734"></a></p> <h2> Centralizando na vertical </h2> <p>E o último passo para que a nossa box fique perfeitamente alinhada ao centro do container, usaremos a propriedade "<strong>align-items: center;</strong>" também <strong>no container</strong> para centralizar a box na vertical.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Froqt5shibi3faazyw75b.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Froqt5shibi3faazyw75b.png" alt="align-items" width="800" height="798"></a></p> <h2> Código do projeto </h2> <h3> HTML: </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><div class="container"> <div class="box">🤙🏻</div> </div> </code></pre> </div> <h3> CSS: </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>.container { border: 3px solid #888; height: 100px; width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; } .box { height: 100px; width: 100px; background-color: #fe46a5; margin: 2px; padding: 2px 8px; border-radius: 4px; font-size: 40px; color: white; display: flex; justify-content: center; align-items: center; } </code></pre> </div> <h2> Conclusão </h2> <p>O Flexbox facilita demais a nossa vida com as questões de alinhamentos pois, não precisamos mais ficar calculando a distância das bordas do elemento pai até o centro para alinhar o elemento filho. O Flexbox já faz isso automaticamente com apenas 3 definições de propriedades.</p> <p>Mas fique esperto, essas propriedades de alinhamentos podem ter seus efeitos alterados conforme a definição de direção do Flexbox, pois os alinhamentos são feitos a partir do eixo principal definido por essa direção que por padrão é o "<strong>flex-direction: row</strong>".</p> <p><a href="https://codepen.io/saragomesdev/pen/JjOyGVw?editors=1100" rel="noopener noreferrer">Veja o código desse alinhamento no Codepen.</a></p> css flexbox braziliandevs html Definição e propriedades de cores no CSS Sara Gomes Thu, 10 Feb 2022 22:28:56 +0000 https://forem.com/sgomesdev/definicao-e-propriedades-de-cores-no-css-485g https://forem.com/sgomesdev/definicao-e-propriedades-de-cores-no-css-485g <h2> Definindo as cores </h2> <p>No CSS as cores podem ser definidas por Nome, Código hexadecimal e/ou Código RGB.</p> <p>Exemplo:<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpdtmum8lpye73cf51s1.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpdtmum8lpye73cf51s1.png" alt="Definindo as Cores" width="800" height="267"></a></p> <p>OBS: códigos hexadecimais sempre devem ser iniciados por "#".</p> <h2> Colorindo um botão </h2> <p>A partir daqui, vamos usar de exemplo um simples botão que já tem suas cores pré-definidas pelo próprio navegador.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5pbd2gj78qhw634k6bl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc5pbd2gj78qhw634k6bl.png" alt="botão" width="228" height="100"></a> </p> <p>E para colorir esse botão, passaremos pelas seguintes propriedades de CSS...</p> <h2> background-color </h2> <p>Com a propriedade "background-color" podemos mudar as cores de fundo dos elementos HTML.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdro80l03r9qxkk9wi6vl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdro80l03r9qxkk9wi6vl.png" alt="background-color" width="800" height="405"></a> </p> <h2> color </h2> <p>Já a propriedade "color" nos permite alterar as cores dos textos nos elementos HTML.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmi321ocuay9gekhoxhl6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmi321ocuay9gekhoxhl6.png" alt="color" width="800" height="416"></a></p> <h2> border-color </h2> <p>Também podemos mudar as cores das bordas dos elementos usando a propriedade "border-color", mas <strong>atenção</strong>, para você conseguir ver essa cor refletir, <strong>o elemento precisa ter a largura da borda e o tipo já definidos</strong> por você ou pelo navegador.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghoprlgxpi1klhcvgrap.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghoprlgxpi1klhcvgrap.png" alt="border-color" width="770" height="304"></a> </p> <h2> border </h2> <p>Falando ainda sobre a borda, também podemos unir todas as propriedades de bordas, que mencionei, em uma única propriedade. A abreviação será "border".</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fajs38nj3ka7qiu2e0fle.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fajs38nj3ka7qiu2e0fle.png" alt="border" width="800" height="466"></a> </p> <h2> outline-color </h2> <p>A propriedade "outline-color" é muito parecida com a propriedade de borda, porém, o outline serve para marcar/contornar o elemento que está em foco na página caso o usuário queira passar pelos itens usando o teclado e não o mouse.</p> <p>Assim como a borda, o outline-color também precisa da definição da largura e do tipo do contorno para assim refletir a cor. A sua abreviação é "outline".</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4nlekx6uxmnmr84h7u9m.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4nlekx6uxmnmr84h7u9m.png" alt="outline-color" width="800" height="395"></a> </p> <h2> outline </h2> <p>Normalmente as cores de outline ficam ocultas no código e apenas são visíveis quando o elemento de fato estiver em foco na página, de acordo com a navegação do usuário.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnp28lwpv1a2yif1hz06w.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnp28lwpv1a2yif1hz06w.png" alt="outline" width="800" height="453"></a> </p> <h2> Dica Bônus: </h2> <h3> outline-offset </h3> <p>A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjkq07x183ge0uhl6j2mb.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjkq07x183ge0uhl6j2mb.png" alt="outline-offset" width="800" height="481"></a></p> <p>Código do botão:</p> <p>HTML:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><button>Colora-me</button> </code></pre> </div> <p>CSS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>button { padding: 10px 15px; font-size: 16px; border-radius: 4px; /* cores */ background-color: #ef2db2; color: #fff; border: 4px solid #c6128d; outline: 2px solid #5a34e8; outline-offset: 3px; } </code></pre> </div> <h3> Links úteis e referência: </h3> <p><a href="https://codepen.io/saragomesdev/pen/WNXppLJ" rel="noopener noreferrer">Veja o código desse projeto no Codepen</a></p> <p>Documentação CSS:<br> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS" rel="noopener noreferrer">MDN Web Docs</a><br> <a href="//w3schools.com/css/">w3schools</a></p> <h4> Obrigada por ler! </h4> html css webdev braziliandevs