Perguntas com a tag [css3]

Usa-se o termo CSS3 para se referir às propriedades e seletores do CSS adicionados após o nível 2.1 da especificação. Utilize esta tag para perguntas sobre os novos módulos do CSS.

Filtrar por
Ordenado por
Com tags
81 votos
4 respostas
10mil visitas

É possível fazer um tooltip com CSS puro?

É possível fazer um tooltip com CSS puro? Ou seja, sem jQuery, sem Javascript, mas somente com CSS. Por exemplo, quero fazer isso baseando no seguinte elemento: <a href="#" data-tooltip="Meu ...
Wallace Vizerra's user avatar
76 votos
18 respostas
191mil visitas

Qual a melhor forma de centralizar um elemento vertical e horizontalmente?

Qual a melhor forma (por "melhor" eu quero dizer: com maior compatibilidade possível entre browsers e o mais simples possível) de posicionar um elemento no centro da página, vertical e horizontalmente ...
Kazzkiq's user avatar
  • 12mil
39 votos
1 resposta
6mil visitas

Qual seletor CSS tem prioridade?

Tenho o seguinte código HTML e CSS: #element p{color:blue;} .element p{color:red;} div p{color:pink;} div.element p{color:yellow;} div[name="element"] p{color:purple;} div p:...
Ricardo Mota's user avatar
  • 2.941
36 votos
3 respostas
16mil visitas

Como fazer uma barra de progresso que vá de 0 a 100% somente com CSS?

Estou desenvolvendo uma página onde tem uma barra de progresso e preciso fazer que ela inicie do 0 e vá ao 100%. Porém preciso fazer somente com CSS e, além disso, necessito que quando ela chegar ao ...
Maurício Krüger's user avatar
30 votos
4 respostas
81mil visitas

Como estilizar um input do tipo "file"?

Tenho essa estrutura: <section id="cadastro" class="cadastroVersao pg-i"> <div class="titulo"> <h1><i class="icon-clientes"></i>Cadastro de versão</h1&...
Guilherme Laureano's user avatar
30 votos
4 respostas
2mil visitas

É necessário adicionar prefixos em algumas propriedades do CSS?

Em muitos códigos são adicionados os prefixos de compatibilidade dos navegadores em atributos do CSS. Exemplo: .exemplo { -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -o-...
Evandro's user avatar
  • 465
29 votos
10 respostas
85mil visitas

Como fazer um <div> ocupar toda a largura da página mas deixar uma lacuna de alguns pixels de cada lado em CSS?

Estou tentando fazer um cabeçalho que deveria preencher toda a largura da página, mas deixando uma lacuna de 5px em cada lado. Por exemplo: | ::::::::::::::: | | ::::::::::::::: | Nesse caso os ...
Zignd's user avatar
  • 6.931
28 votos
5 respostas
9mil visitas

Com CSS é possível colocar 2 cores em 1 letra? Ou metade do texto com uma cor diferente?

Gostaria de saber se com CSS tem como deixar apenas metade de uma letra, ou metade de uma palavra, com outra cor e a outra metade com outra? Seria possível chegar nesse resultado da imagem abaixo só ...
hugocsl's user avatar
  • 66,8mil
27 votos
2 respostas
3mil visitas

O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

Sempre usei o n combinado com o seletor nth-child ou nth-last-child no CSS, porém eu ainda não consegui entender direito o seu significado. Por exemplo: p:nth-child(3n+0) { background: red; }...
Wallace Vizerra's user avatar
27 votos
2 respostas
21mil visitas

Alguma maneira de estilizar elemento "pai" com CSS

Olá, existe alguma maneira de selecionar o elemento pai de outro elemento com CSS? Para ser mais especifico, estou estudando em localhost usando a plataforma de fóruns phpBB3, quando uma mensagem é ...
Wagner''s user avatar
  • 1.221
26 votos
1 resposta
77mil visitas

Como estilizar a barra de rolagem?

Boas, Tenho perdido algum tempo à procura de soluções para isto mas não encontro, tenho uma scrollbar e gostava de diminuir o seu tamanho. Alguém me pode indicar algum site ou me dizer o que é ...
Bruno Gibellino's user avatar
21 votos
6 respostas
17mil visitas

Como criar formas geométricas usando CSS?

Como posso fazer as formas geométricas abaixo utilizando preferencialmente CSS? Caso não seja possível fazer utilizando somente CSS também aceito respostas com outros métodos.
Tiago P.C's user avatar
  • 1.150
20 votos
2 respostas
1mil visitas

Como fazer botão Inclinado?

Estou usando img mas não é uma boa prática, então gostaria de usar um button com algum atributo css. É possivel?
fronthendy's user avatar
20 votos
1 resposta
16mil visitas

Como funciona o "position: sticky"?

O sticky é um novo valor da propriedade position e eu li um pouco e entendi que com ele é possível criarmos elementos HTML que se comportam em um momento como position: fixed e em outro como position: ...
Syzoth's user avatar
  • 100mil
18 votos
1 resposta
8mil visitas

Como funciona o Cubic-Bezier em Animações com CSS?

Quando vamos fazer uma animação com CSS temos vários parâmetros que podemos usar. Ex: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-...
hugocsl's user avatar
  • 66,8mil
18 votos
2 respostas
961 visitas

Por que usar/não usar * box-sizing?

Já li muito a respeito de debates entre usar ou não usar a propriedade box-sizing: border-box; da seguinte maneira: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-...
celsomtrindade's user avatar
17 votos
3 respostas
7mil visitas

Como fazer um marquee sem a tag <marquee>?

Estou precisando usar um marquee, mas como todos estão falando que marquee é uma coisa pré-histórica e não deve ser usado mais, estou em dúvida quanto ao que usar no lugar dele. No site da MDN fala ...
Josimara's user avatar
  • 1.947
16 votos
2 respostas
17mil visitas

Usar @media, @media screen and ou @media only screen and Tem alguma diferença?

Queria saber se tem alguma diferença no css ao usar um desses media queries, Exemplo A: @media(max-width:770px) { .texto{ color:red } } Exemplo B: @media screen and (max-width: ...
Renan's user avatar
  • 743
16 votos
1 resposta
9mil visitas

Mostrar imagem sob outra com hover css

Como faço para que quando eu passe o mouse sob uma imagem, apareça uma outra por cima com opacidade... Por exemplo: Tenho uma div com a imagem da capa de um filme, quando eu passar o mouse sob a div, ...
Charles Fay's user avatar
  • 1.197
16 votos
2 respostas
455 visitas

Como fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?

Imagine que eu tenha uma situação onde eu precise estilizar vários links da minha página, mas só os links que terminem em .html, porém reparei que ao tentar pegar o atributo href, eu só consigo pegar ...
hugocsl's user avatar
  • 66,8mil
15 votos
1 resposta
317 visitas

É possível fazer um box de texto com border radius negativa?

Gostaria quer fazer essa curva negativa usando CSS ou Jquery, é possível?
Marcelo Ronkenoli's user avatar
15 votos
2 respostas
433 visitas

O que são Variable Fonts? Como trabalhar com elas no CSS?

Tenho escutado bastante o termo Variable Fonts, e que esse seria um novo padrão que a Web deve adotar como um todo em breve... Não sei se isso realmente procede, mas parece que esse novo "...
hugocsl's user avatar
  • 66,8mil
15 votos
3 respostas
1mil visitas

Navegação scroll em Bullets

Estou desenvolvendo um site one page scroll e queria que cada link e (bullets) que eu clicasse ficasse ativo referente a página que eu estou. Esse é o exemplo que estou fazendo o script do scroll não ...
dann's user avatar
  • 527
14 votos
3 respostas
3mil visitas

Como fazer um spinner puro em css?

É possível fazer um spinner com CSS puro, sem Javascript ? <div class="main spinner"> O que é Lorem Ipsum? Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de ...
Marcelo Batista's user avatar
14 votos
3 respostas
2mil visitas

Porque não consigo centralizar imagem usando 'text-align:center'? [duplicada]

Segue o código abaixo: HTML <div class="panel panel-default" style="height:400px"> <div class="panel-body"> <div class="form-group"> <div class="col-xs-6"> &...
Matheus Miranda's user avatar
14 votos
4 respostas
32mil visitas

Como fazer uma coluna ocupar o restante do espaço disponível?

Gostaria de por dois blocos dentro de uma div de tamanho paralelo, um com tamanho fixo, e outro que coubesse exatamente no espaço restante. Por exemplo : div#container { width: 50%; /* este ...
Danillo Eder's user avatar
14 votos
1 resposta
10mil visitas

O que é -webkit-transform? Para que serve?

Então, direto eu encontro nos CSSs isso -webkit-transform, mas não tenho ideia do que é ou para que serve e deus também não sabe me responder: Eu ficaria eternamente grato se alguém pudesse me ...
Andrey Hartung's user avatar
14 votos
2 respostas
795 visitas

Qual a diferença entre "Css resolution" e "Pixel resolution"

Gostaria de saber por que um @media(max-width: 400px) é aplicado em um celular que tem 1440px/2960px? Como isso realmente funciona ? Eu encontrei um site com essa informação, que o celular tem ...
John Covv's user avatar
  • 377
14 votos
1 resposta
744 visitas

O que são propriedades lógicas no CSS?

Recentemente encontrei o conceito de "propriedades lógicas no CSS". Ao que me parece, é um novo sistema de se criar o CSS de forma lógica, e não física (direção e posições fixas, digamos assim). No ...
Luiz Felipe's user avatar
  • 36,3mil
14 votos
2 respostas
2mil visitas

Para que serve e como usar o "display: contents" do CSS?

Recentemente vi que existe um novo tipo de display no CSS o display: contents, mas não entendi direito a intenção de uso dele? https://developer.mozilla.org/pt-BR/docs/Web/CSS/display Ele parece ser ...
hugocsl's user avatar
  • 66,8mil
13 votos
2 respostas
44mil visitas

Alterar a cor do "placeholder" sem afectar a cor do "value"

Em HTML5, podemos fazer uso do atributo placeholder (Inglês) com vista a dar ao utilizador uma dica sobre o tipo de dados que determinado campo aceita. Para evitar confusões entre dados realmente ...
Zuul's user avatar
  • 35,7mil
13 votos
1 resposta
4mil visitas

O que significa o "--" especificado no :root do CSS do Bootstrap?

É só uma dúvida que surgiu quando bisbilhotava o CSS do Bootstrap, isso é algo que desconheço e não achei resposta no google sobre isso... Vai um trecho do código: :root { --blue: #007bff; ...
Samuel Mota's user avatar
13 votos
2 respostas
1mil visitas

Pra que serve a propriedade clip?

Estava dando uma olhada em um código onde ensinava algumas técnicas para criar uma tabela responsiva. Me deparei com o uso da propriedade clip, seguida do valor rect(0 0 0 0);. Então me surgiu essa ...
Wallace Vizerra's user avatar
13 votos
2 respostas
2mil visitas

Qual é utilidade da pseudo classe :root?

Estou aprendendo sobre pseudo classes estruturais, mas ainda não encontrei um artigo sobre essa pseudo classe, e tbm só encontro em inglês.
Gilmar Santos's user avatar
13 votos
1 resposta
2mil visitas

Diferença entre pseudo-classe (dois pontos :) e pseudo-elemento (duplo dois pontos :: ) em CSS

Gostaria de saber quais são as diferenças entre estes dois conceitos do CSS, a fim de entender e apontar o que é um, e o que pode ser o outro. Por exemplo: :hover, ::before. O que eu já entendi até ...
Ale's user avatar
  • 2.532
13 votos
2 respostas
706 visitas

Usar "left: -9999px" ao invés de "display: none"? Mas por quê?

Eu comecei a me questionar sobre esse assunto a pouco tempo atrás. Li em algum artigo, que não lembro qual é, que por "questão de visibilidade" ao invés de usar display: none ou visibility: hidden ...
Wallace Vizerra's user avatar
13 votos
3 respostas
1mil visitas

Como fazer um container flex ter a largura dos divs internos?

Boa tarde, estou criando um layout com height:100% onde tenho 2 grupos, e dentro de cada grupo alinho as DIVs verticalmente e se alguma DIV não couber no height máximo ou houver resize da página, ele ...
ErickV's user avatar
  • 373
12 votos
5 respostas
25mil visitas

Como utilizar @import em um arquivo CSS?

Dentro de um arquivo estilo.css estou usando a opção @import url() para chamar outro arquivo CSS. Por exemplo: @import url("/css/fonts.css") Tanto o arquivo quanto o caminho estão corretos e mesmo ...
HeltonSS's user avatar
  • 393
12 votos
2 respostas
6mil visitas

Setas utilizando apenas CSS

Gostaria de saber, se é possível, efetuar a seguinte seta, utilizando apenas CSS: Costumo efetuar outros tipos de setas, utilizando CSS, porém sempre que me debato com casos igual a este, onde a seta ...
helderburato's user avatar
  • 1.019
12 votos
2 respostas
216 visitas

Por que o CSS tem tantas unidades de medidas?

Após aparecer a janelinha de auto-complete, me deparei com o seguinte: e logo me questionei: por que o CSS tem tantas unidades de medidas diferentes?
CypherPotato's user avatar
  • 11,7mil
12 votos
2 respostas
2mil visitas

Qual a diferença entre Animation e Transition CSS

Qual a diferença entre as propriedades animation: e transition: do CSS?
Andrey Hartung's user avatar
12 votos
1 resposta
5mil visitas

Os pseudo elementos ::after e ::before funcionam em quais elementos?

Gostaria de saber se existe alguma documentação ou artigo que diga onde exatamente podemos usar ::after e ::before Já vi que na tag <img> por exemplo não funciona. Acredito que não funciona ...
hugocsl's user avatar
  • 66,8mil
11 votos
3 respostas
833 visitas

Operadores de CSS com @

Como havia perguntado sobre o operador @media, fiquei curioso, pois vi outros operadores que iniciavam com @ e gostaria de entender para que serve operadores assim, e quais existem.
PGuardini's user avatar
  • 327
11 votos
1 resposta
3mil visitas

O que significa o seletor CSS :first-child e :last-child?

Tenho um código usando jQuery que se baseava nos seletores CSS :first-child e :last-child (e que funcionou por um bom tempo), para obter o primeiro input e o último input dentro de um grupo contendo ...
Miguel Angelo's user avatar
  • 29,2mil
11 votos
3 respostas
4mil visitas

Calculo automático em caixa de texto

Bom dia. Existe alguma forma de quando o usuário digitar isso em uma caixa de texto: Um script executar a conta automaticamente e resultar, neste caso, =1 ? É importante também que ele faça isso com ...
Samir Braga's user avatar
  • 10,1mil
11 votos
3 respostas
937 visitas

Com CSS é possível animar o text-decoration?

Recentemente vi essa animação feita com SVG, Mas fiquei me perguntando, será que é possível animar o text-decoration-style: wavy no :hover de forma a conseguir o mesmo resultado? body { ...
hugocsl's user avatar
  • 66,8mil
11 votos
1 resposta
562 visitas

O que é e como funciona o Pós-Processamento de CSS?

O que seria um pós-processamento de CSS? Eu já tinha ouvido falar em CSS pré-processado, como o Gulp faz quando compila um SASS em CSS. Mas recentemente escutei o termo CSS pós-processado e fiquei sem ...
hugocsl's user avatar
  • 66,8mil
10 votos
4 respostas
2mil visitas

Como deixar um layout preparado para todas as resoluções

Sei que parece confuso, existe algum meio para que um layout fique "preparado" para ficar visível de forma responsiva quando o cliente redimensionar o navegador e para qualquer dispositivo?
adventistapr's user avatar
  • 5.278
10 votos
3 respostas
1mil visitas

Com CSS da para cortar um texto? Tipo um efeito de texto cortado ou fonte quebrada?

Eu estava querendo cria um texto para poder usar como uma tag <h2> no site. A ideia é que o elemento continue como um texto, não quero uma imagem, pois quero manter o texto semântico e acessível....
hugocsl's user avatar
  • 66,8mil
10 votos
5 respostas
20mil visitas

Como não aplicar opacidade em um elemento filho?

Eu tenho uma div com opacidade aplicada, porém essa div possui elemento filho. Eu não quero que seja aplicada opacidade a esses elementos filhos, teria alguma maneira de resolver isso? Exemplo: http:/...
Denis Bernardo's user avatar

1
2 3 4 5
40