74
votos
Aceito
Qual é a diferença entre SASS e SCSS
São duas sintaxes diferentes do SASS com as mesmas funcionalidades. O SASS era originalmente a sintaxe oficial e ela é um pouco diferente da sintaxe do CSS, sem chaves e pontos e virgulas. A sintaxe ...
66
votos
Aceito
Para que serve a declaração "!important"?
A declaração !important serve para forçar o CSS a usar a propriedade descrita nessa linha.
O CSS funciona por hierarquias, uma cascata de regras que obedecem a prioridades. Por exemplo uma propriedade ...
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-...
59
votos
Aceito
O que é DOM, Render Tree e Node?
DOM
Domain Object Model.
Em palavras bem simples o DOM é um grande objeto hierárquico com diversos elementos formando uma árvore. Nele você encontra todos os elementos existentes no modelo que ele se ...
58
votos
Aceito
<br> está obsoleto?
Não, não está obsoleto.
O elemento <br> define uma nova quebra de linha em textos, não em layouts. Semanticamente falando, tal elemento jamais deveria ser utilizado como estrutura do layout. ...
56
votos
Aceito
Por que não é recomendado usar "_" (underscore) em HTML/CSS?
A especificação de 1996 do CSS1 não permitia underscore em nomes de classes ou IDS, a não ser que elas estivessem "escapadas"
p.#minha\_id {
color: #fff;
}
O CSS2 (publicado em 1998) proibiu o uso ...
55
votos
Aceito
Como descobrir se uma cor hexadecimal é escura ou clara?
Calculando luminosidade
A solução já vem do próprio W3:
https://www.w3.org/TR/AERT#color-contrast
Mais especificamente com esta fórmula:
( R * 299 + G * 587 + B * 114) / 1000
Ela retorna a ...
54
votos
Aceito
Reduzir o tamanho de uma imagem e manter a proporção com CSS
Falta o valor auto para o width e height. Assim a escala é feita conforme largura ou altura (o que atingir primeiro) e a proporção é feita automaticamente.
.container img {
max-width:200px;
...
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 ...
50
votos
Aceito
Por que é recomendado utilizar a unidade "em" ao invés de "px" para fontes?
Na verdade, não "é recomendado utilizar a unidade “em” ao invés de “px” para fontes". O fundamental é entender como funciona cada medida, para saber em que casos se aplica.
Tem casos em que o em é ...
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-...
49
votos
Aceito
Como aplicar readonly em um select?
Pode desabilitar os eventos do mouse, teclado e touch do select usando apenas css, assim o campo terá apenas a aparência e comportamento de desabilitado, porém ele continuará habilitado.
pointer-...
47
votos
Aceito
Qual a diferença entre display:none e visibility:hidden?
display:none retira o elemento do layout da página. Mas você ainda pode continuar manipulando ele no DOM.
visibility:hidden deixa de mostrar o elemento, ou seja, ele deixa de ser visível na página mas ...
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;...
45
votos
Quando usar position absolute ou relative em CSS?
Definição
A propriedade de CSS position define regras alternativas para posicionar elementos, tendo sido projetada para ser útil na criação de animações via script.
A mesma é geralmente utilizada em ...
43
votos
Aceito
Quando usar position absolute ou relative em CSS?
Isso confunde muita gente porque a propriedade position define duas coisas: como o elemento se comporta em relação aos seus ancestrais na hierarquia, e como seus descendentes poderão se comportar em ...
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;
...
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);
...
34
votos
Aceito
Input type="password" com o olho de mostrar senha
Usando jquery, faça o seguinte:
$( "#olho" ).mousedown(function() {
$("#senha").attr("type", "text");
});
$( "#olho" ).mouseup(function() {
$("#senha").attr("type", "password");
});
Exemplo ...
33
votos
Aceito
Qual a diferença entre padding e margin no CSS?
A grosso modo a grande diferença é:
Margin / Margem - Espaçamento fora do conteúdo.
Padding / Preenchimento - Espaçamento dentro dos limites do conteúdo.
Os estilos dos elementos HTML estão ...
31
votos
Para que serve a declaração "!important"?
A finalidade o !important é sobrepor as Regras de precedência.
Exemplo do funcionamento:
HTML
<p id="a" class="azul">teste</p>
CSS
#a{ color: red;}
.azul{ color: blue !important;}
...
31
votos
Aceito
Como remover auto complete de input do google Chrome?
Como dito aqui e aqui, parece que atualmente o Google Chrome ignora qualquer tipo de atributo autocomplete="off", por mais que isso pareça estranho.
Então uma solução (alternativa) para fazer com que ...
31
votos
Como poderia fazer um pacman mexendo a boca com CSS puro?
Seguem exemplos apenas com CSS.
Opção 1: Feita com border-radius
Nessa opção não precisa usar position relative ou absolute, nem precisa de colocar as divs dentro de um container São apenas duas ...
29
votos
Aceito
O que devo usar no CSS, id ou class?
Se você usar IDs, o CSS Lint irá acusar o seu CSS de quebrar a regra "Disallow IDs in selectors" (Proibir ID's em seletores).
Não é à toa que o slogan do CSS Lint é "Will hurt your feelings" ("Irá ...
29
votos
Aceito
O que significa o sinal de + no CSS?
Esse seletor + em CSS é chamado de Adjacent sibling selector.
O sinal de + (Adjacent Selector) no CSS me lembra muito o método siblings do jQuery, que tem a finalidade de pegar um elemento irmão. No ...
29
votos
Aceito
O que significa o asterisco em "* {}" no CSS?
* é chamado de seletor universal. Esse seletor representa todos os elementos serão afetados pelas definições de estilo ali colocadas.
Por exemplo, eu costumo usar muito pra poder aplicar uma ...
28
votos
Aceito
Como funciona sistema de grid?
O que são grids CSS:
Grids CSS nada mais são que a "simulação" de uma estrutura tabular por meio de divs. Se você começou a mexer com internet na época de IE6 e afins, deve lembrar que tabelas eram ...
28
votos
O que é DOM, Render Tree e Node?
HTML
<div>
<p>Um parágrafo em cima.</p>
<p>Outro <span>embaixo</span>.</p>
<p>E mais um</p>
</div>
DOM
div
-- p
-- p
-...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
css × 8401html × 4906
javascript × 2193
jquery × 1154
css3 × 985
html5 × 918
twitter-bootstrap × 591
php × 507
bootstrap × 170
bootstrap-3 × 161
front-end × 138
bootstrap-4 × 132
div × 130
layout-responsivo × 128
menu × 109
wordpress × 92
flexbox × 83
imagem × 76
sass × 74
aplicação-web × 69
angularjs × 64
mobile × 63
svg × 63
angular × 62
css-hover × 61