66
votos
Como estilizar um input do tipo "file"?
Muitos dos tutoriais encontrados pela internet sugerem a técnica de fake div, no qual o seletor de arquivo é ocultado com um display:none e então é criado um div com a aparência que gostaria. O lado ...
65
votos
Aceito
É possível fazer um tooltip com CSS puro?
Vou contribuir...
body {
margin: 30px;
}
a.tooltip {
text-decoration: none;
color: #000;
font-family: "Roboto";
font-size: 16px;
transition: all 0.4s ease;
-webkit-...
53
votos
Aceito
Qual seletor CSS tem prioridade?
Basicamente, a regra seguida é a da "especificidade":
https://www.w3.org/TR/css3-selectors/#specificity
A especificidade é calculada da seguinte forma:
O seletor universal * é ignorado.
a ...
52
votos
É possível fazer um tooltip com CSS puro?
Existe outra forma de fazer isso, onde você possua o elemento que irá receber o tooltip e um outro para "ser" o tooltip. Seria basicamente assim:
/*Desconsidere essa parte, é apenas para o ...
49
votos
Aceito
Como estilizar a barra de rolagem?
Para navegadores webkit (Chrome, Safari, Opera 15+):
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-...
47
votos
Aceito
Como fazer uma barra de progresso que vá de 0 a 100% somente com CSS?
Seria isso, jovem?
.progress{
height: 15px;
background-color: #777;
position: relative;
}
.progress .progress-bar{
position: absolute;
height: 100%;
background-color: #add555;...
41
votos
É possível fazer um tooltip com CSS puro?
Sim, é possível!
Podemos utilizar o atributo :after para isso, veja:
.wm-tooltip{
position:relative;
}
.wm-tooltip:after
{
background-color:rgba(0, 0, 0, .6);
color: white;
...
41
votos
Aceito
O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?
"nth" pode ser "traduzido" como "enésimo". "Enésimo" justamente porque é "n", ou seja, qualquer número. Quando você diz 3n, significa "a cada três", "5n" a cada cinco, e assim por diante. O + e - em ...
37
votos
Aceito
Com CSS é possível colocar 2 cores em 1 letra? Ou metade do texto com uma cor diferente?
O mais próximo que consegui foi usando background-clip: texte text-fill-color: transparent.
Veja:
.two-colors{
font-size: 160px;
background: linear-gradient(to right, blue 50%, red 0);
...
26
votos
Aceito
Alguma maneira de estilizar elemento "pai" com CSS
Não há atualmente nenhuma maneira de selecionar o pai de um elemento em CSS.
Nas especificações CSS, CSS2 e CSS3, não há nada nesse sentido, você vai ter que recorrer a JavaScript (ou jQuery, :has() ...
25
votos
Como fazer uma barra de progresso que vá de 0 a 100% somente com CSS?
Minha ideia segue a mesma da resposta do Wallace, com a alternativa de não precisar criar mais de um elemento html para tratar do visual de progresso "interno", a barrinha que vai aumentando a ...
22
votos
Aceito
Usar @media, @media screen and ou @media only screen and Tem alguma diferença?
Sim existem diferença, até pq nem toda a @media é screen, pode ser print por exemplo
@media(max-width:770px) {
.texto{
color:red
}
}
No exemplo acima significa que para qualquer ...
21
votos
Aceito
Mostrar imagem sob outra com hover css
Tem várias formas de fazer.
Eu optaria por colocar a imagem de play em um elemento ::after para não sujar o código html, por ser somente uma informação "visual" de que o elemento é um ...
21
votos
Aceito
O que significa o "--" especificado no :root do CSS do Bootstrap?
O :root CSS pseudo-class representa o elemento root da arvore do
documento. Aplicado ao HTML, :root representa o elemento <html> e é
idêntico ao seletor html, exceto que sua especificidade ...
20
votos
Aceito
Como fazer um marquee sem a tag <marquee>?
De fato a tag <marquee> é considerada obsoleta em HTML5, pois é um elemento focado em comportamento e aparência, e não na estrutura do conteúdo. Por isso, recomenda-se que algo semelhante seja ...
20
votos
É possível fazer um tooltip com CSS puro?
Minha ideia é usar o próprio atributo data-tooltip como seletor, e permitir usar em qualquer tipo de tag:
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
...
19
votos
Aceito
Como fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?
O seletor CSS de atributos segue o padrão:
[atributo operador valor i]
Onde:
atributo: é o atributo HTML do elemento
operador: é operador utilizado na comparação entre valor e o conteúdo do ...
18
votos
O que significa o seletor CSS :first-child e :last-child?
Pseudo-classes não funcionam assim
É comum fazer esta confusão sobre o significado dos seletores :first-child
e :last-child, também chamados de pseudo-classes, além de outras pseudo-classes
que ...
18
votos
Aceito
Setas utilizando apenas CSS
Usando CSS eu faria assim, estilizando do modo que quiser.
.seta {
position: absolute;
padding: 3rem; /* Arrow size */
box-shadow: 1px -1px 0 1px red inset;
-webkit-box-shadow:...
18
votos
Aceito
Como funciona o Cubic-Bezier em Animações com CSS?
TL;DR
Os quatro parâmetros definem os dois pontos de controle da Curva de Bézier, P1(x1, y1) e P2(x2, y2), para grau 3.
cubic-bezier(x1, y1, x2, y2)
A Curva de Bézier
A Curva de Bézier é uma forma ...
17
votos
Aceito
O que é -webkit-transform? Para que serve?
O transform é uma ferramenta de CSS moderna. Ela permite fazer zoom, dar perspectivas ou rodar elementos.
O prefixo -webkit- quer dizer que só os browsers que têm estrutura do webkit é que vão usar/...
17
votos
Aceito
Diferença entre pseudo-classe (dois pontos :) e pseudo-elemento (duplo dois pontos :: ) em CSS
Pseudo-classes são usadas para selecionar elementos que não podem ser expressados de outra forma a não ser usando atributos como: id's, classes (ou qualquer outro tipo de informação disponível através ...
17
votos
Com CSS é possível colocar 2 cores em 1 letra? Ou metade do texto com uma cor diferente?
Você pode usar um SVG com texto dentro dele.
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored">
&...
17
votos
Aceito
Por que o CSS tem tantas unidades de medidas?
É porque não temos só uma "mídia de exibição", vc pode ter que configurar uma página web para saída de impressão, como qualquer projeto tipográfico para vc ter mais controle do como um PX de tela vai ...
16
votos
Qual a melhor forma de centralizar um elemento vertical e horizontalmente?
Atualizando as respostas, já que temos novos métodos e a compatibilidade está maior, podemos usar o flexbox, que permite atingir o resultado com BEM menos código.
Veja como é simples:
.classe {
...
16
votos
Como criar formas geométricas usando CSS?
Use transform: rotate nos elementos filhos, e perspective, no elemento pais.
.a{
perspective:1000px;
text-align:center;
}
.b{
transform:rotateX(-60deg);
width:100px;
background:...
16
votos
Aceito
Como criar formas geométricas usando CSS?
De maneira mais simples e mais parecido com sua imagem:
.trapezio {
border-bottom: 70px solid #c1c1c1;
border-left: 30px solid transparent;
border-right: 15px solid transparent;
height: 0;
...
15
votos
Aceito
É possível fazer um box de texto com border radius negativa?
Sim é possivel fazer esse efeito, podes usar shape-outside:circle(); em browsers modernos.
Exemplo:
.wrapper {
width: 25%;
height: auto;
float: left;
margin-right:5rem;
-...
15
votos
Aceito
É possível criar com CSS um elemento tipo um Selo de Carta?
A propriedade border-image é ótima para isso.
Ela permite usar uma técnica chamada 9 patch, que recorta a imagem em quadrantes.
border-image: url( ) 20 20 20 20 round round;
/* imagem -^ ...
14
votos
Aceito
Como aplicar scrollbar somente no elemento tbody em uma tabela HTML?
Mude o display do thead e do tbody para block, defina o tamanho máximo do elemento tbody e o modifique a propriedade overflow-y para scroll.
thead, tbody{
display: block;
}
tbody{
overflow-y: ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
css3 × 1960css × 985
html5 × 982
html × 598
javascript × 348
jquery × 217
twitter-bootstrap × 107
bootstrap-3 × 72
php × 58
layout-responsivo × 49
front-end × 44
bootstrap-4 × 44
flexbox × 40
css-hover × 36
animação × 25
bootstrap × 23
media-queries × 23
css-animations × 22
sass × 19
css-font-face × 18
wordpress × 15
svg × 15
grid × 15
css-transições × 15
div × 13