Novas respostas marcadas com a tag css3
1
Inicialmente, creio que não.
Como visto na MDN, que traduzi (elementarmente) abaixo, a informação é de que o componente é estilizado e exibido pelo navegador, e não conseguimos alterá-los. Não obstante, cada navegador exibe conforme seus próprios padrões de interface.
A apresentação do elemento pode variar substancialmente de um navegador e/ou plataforma ...
respondida 2 horas atrás
Marcos Alexandre
1.00211 medalhas de ouro77 medalhas de prata1919 medalhas de bronze
0
Eu verifico sempre a compatibilidade desses pseudo-elementos de CSS pela documentação da Mozilla, lá está falando que há suporte no Safari na versão 4 e no Safari IOS na versão 3.
O Internet Explorer não oferece suporte para estilização da scrollbar.
Com relação ao seu código me parece estar correto, apenas utilizaria background no lugar de background-color, ...
1
Html =>
<html>
<head><link rel="stylesheet" href="style.css"></head>
<body>
<ul class="nav-area">
<li id="go">
<a href="#">Cadeiras, Bancos e Banquetas</a>
<div id="fds">
<div class=&...
0
A propriedade left pode ser usada também.
Se usar left: 0; o footer/div, vai ocupar toda a margem esquerda, sem deixar espaços.
1
Se eu intendi bem seu problema, sua solução seria apenas alterar a trigger para atualizar o preço, remova a trigger do botão e adicione a trigger no evento de click do checkbox, algo como:
document.querySelector("input[type='checkbox']").addEventListener("click", function(){
var doisReais = document.querySelectorAll('input[...
0
Olá.
Você colocou a tag <link> dentro da tag <title>.
Deixe assim:
<head>
<title>Título</title>
<link rel="stylesheet" href="style.css">
</head>
0
Use o ambiente.setAttribute('class', '...'); para alterar a cor de fundo. Você pode selecionar todos os elementos que possuem a classe yellow, e verificar se existe alguma elemento com essa classe fazendo um .length. Depois com um simples if, você decide se adicionaremos a classe day ou night dependendo se algum elemento ainda possui a classe yellow.
Veja o ...
respondida 12/02 às 23:53
Cmte Cardeal
3.42444 medalhas de ouro1212 medalhas de prata3030 medalhas de bronze
1
Nesse caso, podemos usar somente o JavaScript e trabalhar o background sem alterar o arquivo CSS. Podemos estilizar e alterar a cor apenas alterando uma variável no código JavaScript.
Podemos ajustar a propriedade do background do input via JavaScript usando style.setProperty('background', ...);. O segundo parâmetro que iremos passar será uma template-string ...
respondida 11/02 às 5:16
Cmte Cardeal
3.42444 medalhas de ouro1212 medalhas de prata3030 medalhas de bronze
0
Para as media queries funcionarem você deve ter essa tag no head do seu HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-3
Essa sintaxe relativamente nova, eu achei um artigo https://css-tricks.com/no-comma-color-functions-in-css/, aonde menciona que as novas funções (e.g, lab, lch, and color), vão funcionar com a nova sintaxe, porém, abandonar a velha função seria necessario um update tem bilhões de sites provavelmente, então nenhum browser abandonaria o velho formato.
Então ...
2
Complementando a resposta do @RicardoPontual ...
Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.
Isso:
rgb(0, 128, 255)
rgba(0, 128, 255, 0.5)
hsl(198, 38% 50%)
hsla(198, 28%, 50%, 0.5)
Pode ser escrito como:
rgb(0 128 255)
rgb(0 ...
respondida 9/02 às 18:26
Cmte Cardeal
3.42444 medalhas de ouro1212 medalhas de prata3030 medalhas de bronze
2
Existem várias sintaxes para o RGB/RGBA como mostra documentação sobre color value:
* Hexadecimal syntax */
#3a30 /* 0% opaque green */
#3A3F /* full opaque green */
#33aa3300 /* 0% opaque green */
#33AA3380 /* 50% opaque green */
/* Functional syntax */
rgba(51, 170, 51, .1) /* ...
respondida 9/02 às 18:17
Ricardo Pontual
18,6mil11 medalhas de ouro2222 medalhas de prata5252 medalhas de bronze
-3
$('.bg_bullets a div').click(function(){
$('.bg_bullets a div').each(function(){
$('.bg_bullets a div').removeClass('active');
}); //remove todas as classes active dos bullets.
$(this).addClass('active'); //adiciona classe active no elemento clicado
}); //evento do clique , provavelmente você já tem um porem pode usar dessa forma se quiser.
....
1
Coloca um container pai por fora do loop da section class="mp4" e coloca na section {width: calc(100% / 3)} por exemplo. Sendo que o container pai sim seria em flex.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.pai {
display: flex;
flex-wrap: wrap;
}
.mp4 {
width: calc(100% / 3);
box-sizing: border-box;
...
respondida 3/02 às 10:35
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
0
Cara no BG do próprio elemento vc não consegue, mas se vc colocar esse bg em um pseudo-elemento vc pode usar transform: scale(1.15) para aumentar em 15%
Segue aqui um exemplo didático
li {
padding: 30px;
border-radius: 15px;
position: relative;
display: inline-block;
}
li::before {
background: url(https://unsplash.it/100/100) no-repeat;
...
respondida 2/02 às 20:31
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
0
Cara isso acontece pq vc não usou uma classe de alinhamento vertical explícita para o container flex .main
No container de classe .main vc tem que declara align-items: flex-start;, assim vc sobrescreve o compartamento default que é stratch para flex-start e evita esse problema.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
...
respondida 1/02 às 18:19
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
-1
Maria Eduarda, esse mundo do layout é bem complexo devido ao numero de dispositivos e navegadores existentes, por isso existem frameworks que facilitam sua vida, mas a título de estudo para fazer esse modelo básico você deve pensar no agrupamento de objetos no form.
Antigamente usava-se muito a tag TABLE para este tipo de formulario, mas hoje para ficar mais ...
-6
Bom dia, recomendo que utilize o Bootstrap. Depois que você pega a noção básica ele facilita muito sua vida, sem falar que em questões de design/aparência ele fica muito bonito também. Deixei um exemplo no JSFiddle para você ter uma ideia.
Demo: https://jsfiddle.net/g5m6x3k1/
Outra coisa é que acho desnecessário essa label em cima, já que no placeholder do ...
0
Vamos lá, reproduzi o seu cenário no seguinte link:
https://stackblitz.com/edit/js-fqw7ue?file=style.css
Não sei se entendi muito bem, mas a div onde temos a "{userMessage}" tem a classe balao ao qual você se referiu... Observe que alterei os elementos:
font-family e font-size dela... Era essa sua questão?
Ideia: se não quiser seguir pelo caminho ...
2
Os event listeners dragstart, drag e dragend são registados apenas para os elementos card existentes no DOM. Quando novos elementos card são adicionados ao DOM, eles não têm quaisquer event listener registados e por isso não se comportam como os outros.
Para resolver isto, tal como o Augusto sugeriu, terá que registar esses event listeners sempre que ...
-2
Ou você adiciona no CSS do botão: border-bottom-left-radius: 30px; ou você dá overflow:hidden na div da calculadora, assim o botão não vai ficar por cima.
respondida 28/01 às 20:03
Maurício Krüger
2.55422 medalhas de ouro2121 medalhas de prata4848 medalhas de bronze
0
Na verdade você não precisa colocar a borda atrás de nada, o que é preciso é fazer uma curva na borda inferior-esquerda do botão, para isto precisa utilizar CSS:
Este arredondaria todas as bordas:
border-radius: 30px
assim tambem arredondaria todas as bordas mas de forma diferente:
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-...
1
Faltou apenas registrar os eventos dragstart, drag e dragend junto ao novo cartão criado na função creatCard(), o código existente apenas registra esses eventos aos cartões criados no HTML.
//seleciona todos os elementos 'card' do HTML
const cards = document.querySelectorAll('.card');
//seleciona todas as 'dropzones'do HTML
const dropzones = document....
respondida 28/01 às 19:40
Augusto Vasques
12,2mil55 medalhas de ouro1717 medalhas de prata4141 medalhas de bronze
0
Olá, amigo! Ao que me parece você está tentando modificar o texto com esse seletor:
#alert-message > span > span {
display: inline-block;
font-family: 'Montserrat';
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
Com isso, na verdade, está alterando o texto de um span filho de outro span que é filho da div. Tente alterar ...
As 50 principais respostas recentes são incluídas
Tags relacionadas
css3 × 1915css × 964
html5 × 952
html × 576
javascript × 335
jquery × 217
twitter-bootstrap × 108
bootstrap-3 × 72
php × 56
layout-responsivo × 47
bootstrap-4 × 44
front-end × 38
flexbox × 38
css-hover × 34
animação × 24
media-queries × 24
bootstrap × 23
sass × 19
css-animations × 19
css-font-face × 18
wordpress × 15
css-transições × 15
svg × 14
grid × 14
ui × 13