Articles of css3

Rotação de CSS3 Animation

Não é possível obter essa imagem animada para funcionar, é suposto fazer uma rotação de 360 ​​graus. Eu acho que algo está errado com o CSS abaixo, pois ele fica parado. .image { float: left; margin: 0 auto; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; -webkit-animation-name: spin; -webkit-animation-duration: […]

Substituição de imagem de checkbox de seleção CSS puro

Eu tenho uma lista de checkbox em uma tabela. (um dos vários CB’s na fila)         Eu gostaria de replace a imagem da checkbox de seleção por um par de imagens personalizadas on / off e eu queria saber se alguém tinha algum melhor entendimento de como fazer isso com CSS? Eu […]

Círculo de Progresso CSS

Pesquisei este site para encontrar as barras de progresso, mas as que consegui encontrar mostram círculos animados que atingem o total de 100%. Eu gostaria que parasse em certas porcentagens, como na imagem abaixo. Existe alguma maneira que eu possa fazer isso usando apenas CSS?

O fundo gradiente CSS3 definido no corpo não estica, mas repete?

ok, o conteúdo dentro do totaliza 300px de altura. Se eu definir o plano de fundo do meu usando -webkit-gradient ou -moz-linear-gradient Então eu maximizo a minha janela (ou apenas a mais alta que 300px) o gradiente terá exatamente 300px de altura (a altura do conteúdo) e apenas repita para preencher o resto da janela. […]

O seletor CSS: not () deveria funcionar com descendentes distantes?

Aqui está a documentação oficial da pseudo-class CSS3 :not() : http://www.w3.org/TR/css3-selectors/#negation e o aprimoramento proposto dos Seletores de CSS Nível 4: http://dev.w3.org/csswg/selectors4/#negation Eu tenho procurado a implementação e suporte do navegador para :not() , mas os únicos exemplos que encontrei foram com um único elemento ou com um filho direto de um elemento, por exemplo: […]

Como fazer piscar / piscar texto com CSS 3?

Atualmente, tenho este código: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } Ele pisca, mas só pisca em “uma direção”. Quero dizer, isso só se desvanece, e então aparece de volta com a opacity: 1.0 […]

Sobreposição de preto transparente na imagem pairar com apenas CSS?

Eu estou tentando adicionar uma sobreposição preta transparente a uma imagem sempre que o mouse está pairando sobre a imagem com apenas CSS. Isso é possível? Eu tentei isso: http://jsfiddle.net/Zf5am/565/ Mas não consigo que o div apareça. .image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; […]

Como definir a opacidade em div pai e não afeta em div filho?

Ei eu estou procurando no google, mas não posso multar qualquer resposta perfeita Eu quero opacidade no pai DIV mas não Child DIV Exemplo HTML Hello I am child Css .parent{ background:url(‘../images/madu.jpg’) no-repeat 0 0; } .child{ Color:black; } Nota: – Eu quero background image em Parent Div não Color

Forma ondulada com css

Estou tentando recriar esta imagem com CSS: Eu não precisaria disso para repetir. Isso é o que eu comecei, mas tem apenas uma linha reta: #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; }

Como o fator flex-shrink em padding e border-box?

Digamos que temos um contêiner flex com largura de 400px. Dentro deste contêiner estão três itens flexíveis: :nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */ :nth-child(2) { flex: 0 1 200px; } :nth-child(3) { flex: 0 2 100px; } Portanto, a largura total dos itens flexíveis é de 600px e o […]