Articles of css3

Como tematizar em lesscss

Como estou em um ciclo de pré-produção para desenvolver um aplicativo, frequentemente estou alterando o visual para convergir para o que será validado pelo cliente. Alguns visuais da mesma página (chame de temas) seriam interessantes de se manter para que eu possa apresentá-los rapidamente ao cliente. A maneira que eu encontrei é criar uma class […]

Como remover a margem de cada elemento que é o último elemento em uma linha?

Como remover a margem de cada da última coluna? Eu estou pedindo para cada que vem na última coluna quando eu tenho 9 e 3 em cada coluna. Eu não estou pedindo apenas para remover a margin do último item da última de um que eu já conheço :last-child { margin-right: 0 } E se […]

Alinhar texto na linha inclinada

É possível deixar o texto alinhado em uma linha inclinada ? o alinhamento deve seguir a imagem oblíqua inclinada com o suporte necessário para o IE9 +? Meu código de exemplo: img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet […]

Quais seletores CSS3 o jQuery realmente suporta, por exemplo: nth-last-child ()?

De acordo com http://api.jquery.com/category/selectors/ , podemos usar uma grande quantidade de seletores CSS no jQuery, mas por exemplo :nth-last-child() não é mencionado lá. No entanto, quando eu testar o seguinte (com jQuery 1.7.1 como do Google), ele realmente funciona no Firefox, Chrome e IE 9, mas não no IE 9 no modo de emulação do […]

Como você adiciona pseudo classs aos elementos usando jQuery?

Em CSS, quando você passa o mouse sobre um elemento, pode especificar exibições para ele usando a class pseudo: hover: .element_class_name:hover { /* stuff here */ } Como você pode usar o jquery para adicionar ou “ativar” esta pseudo-class? Normalmente, no jQuery, se você quiser adicionar uma class, você faria: $(this).addClass(“class_name”); Eu tentei “pairar”, mas […]

Canto inclinado na checkbox CSS

Eu tenho jogado com CSS por um curto período de tempo e estou tentando ter uma checkbox normal, mas com o canto superior esquerdo cortado em um ângulo de 45 graus. Nem uma pequena quantia; Eu estou olhando para um canto bastante grande nesse ângulo. Este efeito: Como devo fazer isso?

Atraso: Passe o mouse em CSS3?

Existe uma maneira de atrasar o evento: Hover sem usar o javascript? Eu sei que há uma maneira de atrasar animações, mas eu não vi nada em retardar o evento: Hover. Editado… Desculpe, eu deveria ter incluído isso para começar … Estou construindo um cardápio de filho-de-suckerfish. Eu gostaria de simular o que hoverIntent faz […]

Como reverter uma animação no mouse depois de passar o mouse

Então, é possível ter uma animação reversa no mouse, como: .class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } mas, ao usar a animação @keyframes, não consegui fazê-lo funcionar, por exemplo: .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: rotate(0deg);} } Qual é […]

Animações CSS com atraso para cada elemento filho

Eu estou tentando criar um efeito em cascata, aplicando uma animação para cada elemento filho. Eu queria saber se existe uma maneira melhor de fazer isso do que isso: .myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards; } .myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards; } .myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards; } […]

Transformação CSS3: girar; no IE9

Eu tenho um elemento que precisa ser vertical em um design que fiz. Eu tenho o css para isso funcionar em todos os navegadores, exceto o IE9. Eu usei o filtro para o IE7 e IE8: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Isso, no entanto, parece tornar meu elemento transparente no IE9 e a capa do CSS3 ‘tranform’ não parece […]