Trabalhando com Sprites no CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 41 Min 34 Seg Tempo restante da oferta: 01 41 34 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Trabalhando com Sprites no CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Trabalhando com Sprites no CSS Veja como trabalhar com sprites no CSS. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/06113144/css-sprites.png) Olá , Web Developers! Hoje veremos como trabalhar com sprites no CSS. Se você não sabe o que é, no vídeo abaixo eu explico o que são Sprites e quais suas vantagens: ## O Sprite Nós vamos utilizar a seguinte imagem como nosso Sprite, que possui vários logos de programas feitos com Electron. ![](https://dkrn4sk0rn31v.cloudfront.net/2018/05/01101448/desktop-apps.png) [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Preparando a base Primeiro precisamos criar uma classe que será a base do nosso sprite. Essa classe será repetida em todo lugar que quisermos usar o sprite. Vamos dar o nome de `tw-sprite`. Para que ela possa ficar na mesma linha que outros elementos e também podermos alterar suas dimensões, vamos deixar com `display: inline-block`. Vamos indicar a nossa imagem como `background-image` e também indicar que não queremos que ela se repita. ```css .tw-sprite{ display: inline-block; background-image: url("url da imagem"); background-repeat: no-repeat; } ``` Podemos chamar essa classe em qualquer lugar que quisermos chamar nossa imagem, como na seguinte `div` por exemplo: ```html ``` ## Indicando a imagem - Dimensões Agora já temos uma base para começar a usar a nossa imagem. Mas agora precisamos indicar qual das imagens queremos usar. Para isso nós precisamos criar uma segunda classe que, em conjunto com a primeira classe que criamos, irá indicar exatamente imagem que queremos exibir. Vamos supor que queremos o logo do GitHub. Vamos criar uma classe que vai se chamar `tw-sprite-github`. Então nossa `div` vai ficar assim: ```html ``` Na segunda classe nós iremos primeiro indicar a largura e altura da imagem com as propriedades `width` e `height`. Você pode ver o resultado brincando com o exemplo interativo a seguir: ## Indicando a imagem - Posição Além do tamanho, também precisamos mover a posição da imagem para podermos indicar a imagem que queremos. Para isso utilizamos a propriedade `background-position`, que nos permite mover a imagem que estamos usando no `background-image`. Você pode ver o resultado brincando com o exemplo interativo a seguir: Como queremos a imagem do GitHub, nossa classe ficará com os seguintes valores: ```css .tw-sprite-github{ width: 70px; height: 70px; background-position: -340px -150px; } ``` ## Conclusão Claro que este é apenas um exemplo para mostrar como funciona a criação de Sprites com CSS. Por ser muito trabalhoso e manual (principalmente se precisar ficar adicionando novas imagens), há várias ferramentas em que inserimos as imagens que queremos. A ferramenta já junta todas as imagens em um único arquivo e gera as classes CSS de acordo com nossas instruções. Há ferramentas online e outras que você pode instalar diretamente do `npm`. Abaixo uma lista de ferramentas para criação de Sprites CSS: - [https://spritegen.website-performance.org/](https://spritegen.website-performance.org/ "https://spritegen.website-performance.org/") - [http://www.spritecow.com/](http://www.spritecow.com/ "http://www.spritecow.com/") - [https://www.npmjs.com/package/sprity](https://www.npmjs.com/package/sprity "https://www.npmjs.com/package/sprity") Até a próxima! [ ![Android - Criação de aplicativos para SmartWatch com o Android Wear](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/android.svg) Curso Android - Criação de aplicativos para SmartWatch com o Android Wear Conhecer o curso ](https://www.treinaweb.com.br/curso/desenvolvimento-de-aplicativos-para-smartwatch-com-android-wear-completo) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Sprite ](https://www.treinaweb.com.br/blog/tag/sprite) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Trabalhando com eventos no NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-eventos-no-nestjs) Neste artigo vamos aprender a utilizar os eventos com o NestJS, criando um exemplo onde vamos simular o envio de e-mails. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Trabalhando com Scheduled Tasks no Spring Boot ](https://www.treinaweb.com.br/blog/trabalhando-com-scheduled-tasks-no-spring-boot) Descubra o poder das Scheduled Tasks no Spring Boot. Aprenda a criar, configurar e aprimorar tarefas agendadas em Java com o Spring Framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/form-html5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Trabalhando com formulários no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-formularios-no-html) No artigo de hoje, veremos um recurso muito utilizado pelos desenvolvedores front-end e presente no nosso dia a dia, formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Trabalhando com funções na Golang ](https://www.treinaweb.com.br/blog/trabalhando-com-funcoes-na-golang) Neste artigo vamos aprender sobre as funções na Golang. Veremos o que são, qual a sua importância em nossos programas e como utilizá-las. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/capa-tag-ancora-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Trabalhando com a tag âncora no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html) Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/DOM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com JavaScript no navegador ](https://www.treinaweb.com.br/blog/trabalhando-com-javascript-no-navegador) Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/ARRAYS-OBJETOS-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript) Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com corrotinas, canais e explorando um pouco mais o scheduler de corrotinas do Swoole ](https://www.treinaweb.com.br/blog/trabalhando-com-corrotinas-canais-e-explorando-um-pouco-mais-o-scheduler-de-corrotinas-do-swoole) Neste artigo trabalharemos com os conceitos fundamentais de corrotinas, canais, defer etc, também exploraremos algumas opções do scheduler como, por exemplo, fazê-lo operar de forma preemptiva. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com Sockets no ReactPHP ](https://www.treinaweb.com.br/blog/trabalhando-com-sockets-no-reactphp) Veremos neste artigo como usar o componente de socket do ReactPHP para criar um chat pelo terminal. Além disso, veremos as bases para a construção de servidores TCP/IP. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **01h 41min 34s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58