Articles of css3

CSS3 – Animação 3D Flip – IE10 transform-origin: preserve-3d workaround

Depois de olhar pelo blog de desenvolvedores do IE10, descobri que eles não suportam a configuração preserve-3d. Eles oferecem uma solução alternativa, mas não consigo fazê-lo funcionar. Meu exemplo abaixo funciona no Safari, Chrome e Firefox, mas não no IE10. Se alguém pudesse me ajudar a conseguir isso, ficaria muito grato. As checkboxs devem girar […]

css3 text-shadow no IE9

Existe uma maneira fácil de ter o css3 text-shadow trabalhando no IE9? Pelo menos uma única sombra de texto seria ótima. Eu acho que idealmente o IE8 é suportado também. Espero que exista um simples plugin jquery ou um arquivo .htc que olhe apenas para a propriedade css text-shadow de um elemento e o implemente […]

webkit-transform sobregrava a ordenação do z-index no Chrome 13

Atualizar Desculpem por não adicionar os detalhes menores que também colocamos vários elementos div sobrepostos uns aos outros com z-index . Depois de trabalhar mais com esse problema, parece que o webkit-transform realmente mexe com o z-index , e que o problema real não está relacionado às próprias animações. Finalizar atualização Eu estou atualmente em […]

Caixa de Seta com CSS

Como posso fazer essa checkbox no CSS? Eu vi alguns tutoriais que ensinam como criar checkboxs com setas, no entanto, no meu caso, nenhum desses tutoriais é adequado.

suporte de dimensionamento de checkbox no IE7

Acabei de descobrir o box-sizing: border-box da box-sizing: border-box propriedade CSS da box-sizing: border-box que resolve um monte de problemas de layout entre navegadores para mim. O único problema que tenho agora é que o IE7 não parece suportá-lo. Existe um hack para obter o IE7 para suportá-lo?

Você pode adicionar ruído a um gradiente CSS3?

É possível adicionar ruído a um gradiente em CSS? Aqui está o meu código para um gradiente radial: body { color: #575757; font: 14px/21px Arial, Helvetica, sans-serif; background-color: #2f3b4b; background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%); background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63)); } O que eu adicionaria a isso […]

Posso desaparecer em uma imagem de fundo (CSS: background-image) com jQuery?

Eu tenho um elemento div com texto e uma imagem de fundo, que é definida através da background-image propriedade CSS. É possível desvanecer na imagem de fundo via jQuery? div { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); border: 1px solid #666; height: 10em; } Text EDITAR Eu fiz um violino exemplificando meu cenário. […]

Webkit e salto arrastável jQuery

Como experiência, criei algumas divs e as rodei usando o CSS3. .items { position: absolute; cursor: pointer; background: #FFC400; -moz-box-shadow: 0px 0px 2px #E39900; -webkit-box-shadow: 1px 1px 2px #E39900; box-shadow: 0px 0px 2px #E39900; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } Eu então os coloquei aleatoriamente e os fiz arrastáveis ​​via jQuery. $(‘.items’).each(function() { $(this).css({ […]

Animação CSS3: exibição + opacidade

Eu tenho um problema com uma animação CSS3. .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } Este código só funciona se eu remover a mudança de display . Eu quero mudar a exibição logo após o […]

Texto embaçado depois de usar a transformação CSS: scale (); no Chrome

Parece que houve uma atualização recente no Google Chrome que causa texto desfocado depois de fazer uma transform: scale() . Especificamente, estou fazendo isso: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Se você visitar […]