Skip to main content

Respostas interessantes marcadas com a tag

21 votos
Aceito

Por que o Bootstrap 4 usa "rem" e "em" no lugar de pixels?

Basicamente é devida a acessibilidade e controle do layout do design system. Usando medidas em REM / EM se o usuário mudar o tamanho da font root ele vai ter uma aumento homogêneo de todo o texto na ...
hugocsl's user avatar
  • 66,9mil
16 votos
Aceito

SASS e SCSS: por que usá-los em vez de CSS convencional?

Vou compartilhar o que conheço e algumas fontes sobre o assunto. O que elas fazem exatamente? LESS, SASS e SCSS são extensões do CSS, ou seja, de uma maneira bem simples, adicionam funcionalidades ao ...
Ricardo Pontual's user avatar
  • 23,2mil
9 votos

SASS e SCSS: por que usá-los em vez de CSS convencional?

Bom, podemos dizer que SCSS e SASS fazem tudo que o CSS deveria fazer e não faz. Aqui vai alguns exemplos: Fácil manutenção Imagine que tenho um site com uma determinada paleta de cores e preciso ...
Leandro Santiago Gomes's user avatar
7 votos

SASS e SCSS: por que usá-los em vez de CSS convencional?

Existe ainda um outro conceito que não foi abordado pelas outras resposta que é o aninhamento de seletores ou em inglês nested selector Essa prática é muito interessante na hora de criar componentes ...
hugocsl's user avatar
  • 66,9mil
6 votos
Aceito

Inserir um background dentro de um triângulo no canto de uma div

Existem várias formas de fazer isso e a mais simples e mais crossbrowser ao meu ver é colocar dois backgrounds em uma div, o primeiro bg do fundo é a imagem, e por cima dela eu tenho um linear-...
hugocsl's user avatar
  • 66,9mil
6 votos
Aceito

Problema em implementar icone do font awesome pelo css

Acrescente isto no seu CSS: font-weight: 900; Pelo que vejo, esse caractere só está disponível nessa fonte bold. Não entendi o motivo, vai ver é porque ele é f0da :D
bfavaretto's user avatar
  • 66,2mil
5 votos

Como fazer este efeito de transição usando CSS?

Ivan sim é possível resolver o problema só com CSS, mas vc tem que ter uma Estrutura de HTML + CSS que seja coerente. Digo, vc vc vai precisar de regras como :focus + div ou :target ~ div etc, então ...
hugocsl's user avatar
  • 66,9mil
5 votos
Aceito

Qual é a maneira correta de utilizar o operador "%" no Sass?

% é feito para criar um "placeholder" de CSS, e para utiliza-lo vc precisa fazer um @extend. Veja a documentação oficial do placeholder https://sass-lang.com/documentation/style-rules/placeholder-...
hugocsl's user avatar
  • 66,9mil
4 votos
Aceito

Como fazer um grid automático para medidas exatas usando SCSS?

Essa fórmula vai fazer a progressão das colunas em PX até 1272px $grid__cols: 12; @for $i from 1 through $grid__cols { .col-#{$i} { flex-basis: (1272 / ($grid__cols / $i) ) * 1px; } } OUTPUT ....
hugocsl's user avatar
  • 66,9mil
3 votos

Converter porcentagem em reais no input rage slider html5

Esse é bem mais um problema matemático que de informática, que pode ser resolvido com o seguinte cálculo: x = valorMinimo + porcentagem/100 * (valorMaximo-valorMinimo); Por exemplo, imagine que ...
Ricardo Pontual's user avatar
  • 23,2mil
3 votos

Ícone font awesome 5 não aparece ao ser chamado pelo css

Seu font-family está errado! Vcusou a Font Awesome 5 Free mas deveria ser a Font Awesome 5 Brands body { background-color: black; color: #fff; } .phone { position: relative; color: ...
hugocsl's user avatar
  • 66,9mil
2 votos
Aceito

Animação que revela elemento da esquerda para a direita

Seu CSS está com um problema na construção dessa classe. Isso: .multi-steps > li:after:last-child Deveria ser isso: .multi-steps > li:last-child:after Repare na posição do ::after Outro ...
hugocsl's user avatar
  • 66,9mil
2 votos
Aceito

Bug no Safari de uma animação CSS com keyframes

Conforme conversado nos comentários da pergunta segue a resposta. O Safari 12, conforme pode ser consultado no Caniuse, não precisa mais dos prefixos -webkit- nas animações, keyframes ou transition. ...
hugocsl's user avatar
  • 66,9mil
2 votos

Inserir um background dentro de um triângulo no canto de uma div

Pode usar a propriedade clip-path para exibir apenas uma parte do ::after. No exemplo abaixo recortei o ::after do elemento em forma de triângulo com 3 coordenadas. As coordenadas são responsivas em ...
Sam's user avatar
  • 80,8mil
2 votos

Centralizar um elemento com position absolute

Cara tentei simular aqui e aparentemente ele ficou alinhado, então tem algo a mais no seu código que está atrapalhando... Mas veja no exemplo abaixo que para centralizar um elemento absoluto vc tem ...
hugocsl's user avatar
  • 66,9mil
2 votos

Mudar de background VIDEO por tamanho de Tela?

Cara vc pode ter um simples @media para mostrar um e esconder o outro. .mobile { display: none; } @media (max-width:768px) { .mobile { display: block; } ....
hugocsl's user avatar
  • 66,9mil
1 voto
Aceito

Usar bootstrap com sass de forma semântica e seletiva

Desculpe a resposta "jogada", mas nesse arquivo do Bootstrap vc pode apagar os @imports que vc não quer. Depois que vc apagar os @imports que vc não quer vc precisa recompilar o .SCSS para gerar o ...
hugocsl's user avatar
  • 66,9mil
1 voto

SASS: Existem algum recurso para evitar repetições e linhas de códigos as variações de cores?

O Sass trabalha perfeitamente ao nosso favor para automatizar tarefas repetitivas. E para solucionar o problema de criação de classes, é preciso estabelecer alguns conhecimentos básicos. Primeiro, ...
Thiago Cunha's user avatar
  • 1.390
1 voto
Aceito

Dropdown em menu vertical com bootstrap 4

Para fazer o drop vc pode usar position:absolute, assim vc tira esse submenu do flow e ele não interfere nos outros elementos ao redor. Segue o código da imagem acima: .left { position: ...
hugocsl's user avatar
  • 66,9mil
1 voto
Aceito

Error BOOTSTRAP SASS _is not a color for `darken'

Olha é difícil explicar o porque do erro sem saber o que vc fez ai. Mas a documentação ajuda um pouco a esclarecer as coisas... Provavelmente vc mudou alguma Chave Obrigatória Por exemplo, nós ...
hugocsl's user avatar
  • 66,9mil
1 voto
Aceito

media querie scss

Uma maneira que eu encontrei de fazer isso, é utilizando @mixin e @for. Veja o código abaixo. @mixin medias($media){ $x: 100/12; $newWidth: $x; @for $var from 1 to 13 { .col-#{$...
dcalmeida's user avatar
  • 136
1 voto
Aceito

DIV perder o alinhamento se está com um numero de linhas diferentes

Acrescente o vertical-align:top no seu CSS. .div-project { background-color: #1d68a7; display: inline-block; border-radius: 12px; padding: 10px; text-align: left!important; margin-bottom: ...
Guilherme Rigotti's user avatar
1 voto
Aceito

Como acessar o arquivo styles.scss de dentro de um componente do Angular

Você já definiu o projeto Angular como sass? Você pode acessar a pasta do seu projeto, e digitar o seguinte comando. ng set defaults.styleExt scss Confira seu seu config está assim: "defaults": { ...
Pedro Magalhaes's user avatar
1 voto
Aceito

Media queries não está aplicando os css conforme width do dispositivo

O @media rule deve vir após o estilo normal. Basta alterar a ordem: .button-collapse{ background-color: transparent; border: none; color: white; outline: none; } @media (min-device-width: ...
Sam's user avatar
  • 80,8mil
1 voto
Aceito

Página não carrega arquivo SCSS

Para podermos compilar o arquivo .scss para .css precisa ter instalado o Ruby (essa é uma das formas). 1.Verifique se já tem instalado: ruby -v se retornar algo como: ruby 2.0.0p247 (2013-06-27 ...
David's user avatar
  • 4.303
1 voto

Problemas com atributo :not() do css

Cara eu acho que vc acabou complicando as coisas com o not() sem precisar. Veja no exemplo abaixo como vc pode corrigir o problema apenas voltando com a cor do texto no span assim -webkit-text-fill-...
hugocsl's user avatar
  • 66,9mil
1 voto

Problema em implementar icone do font awesome pelo css

Conforme a documentação para vc usar no ::before vc tem que ajustar algumas coisas. Vc vai precisar usar o fontawesome.js e não o .css pois só vai funcionar com a font no formato SVG. Depois vc tem ...
hugocsl's user avatar
  • 66,9mil

Only top scored, non community-wiki answers of a minimum length are eligible