Articles of css

CSS 3 slide da transição à esquerda

Existe uma solução cross-browser para produzir uma transição slide-in apenas com CSS, sem javascript? Abaixo está um exemplo do conteúdo html:

Como usar CSS (e JavaScript?) Para criar um fundo desfocado e “fosco”?

Eu estou tentando criar uma aparência fosca estilo iOS 7 com HTML5, CSS3 e JavaScript, que pode funcionar em navegadores webkit. Tecnicamente, dado o seguinte HTML: #partial-overlay { width: 100%; height: 20px; background: rgba(255, 255, 255, .2); /* TODO frost */ position: fixed; top: 0; left: 0; } To my left is a red box […]

Alternativa CSS Calc

Eu estou tentando alterar dinamicamente a largura de uma div usando CSS e não jquery. O código a seguir funcionará nos seguintes navegadores: http://caniuse.com/calc /* Firefox */ width: -moz-calc(100% – 500px); /* WebKit */ width: -webkit-calc(100% – 500px); /* Opera */ width: -o-calc(100% – 500px); /* Standard */ width: calc(100% – 500px); Eu quero também […]

CSS: defina uma cor de fundo que seja 50% da largura da janela

Tentando obter um plano de fundo em uma página que é “dividida em dois”; duas colors em lados opostos (aparentemente feitas definindo uma background-color padrão na tag body , em seguida, aplicando outra em uma div que estica a largura inteira da janela). Eu cheguei a uma solução, mas infelizmente a propriedade de background-size não […]

Obtenha a largura do dispositivo em javascript

Existe uma maneira de obter a largura do dispositivo de usuários, em oposição à largura da porta de visualização, usando javascript? Consultas de mídia CSS oferecem isso, como posso dizer @media screen and (max-width:640px) { /* … */ } e @media screen and (max-device-width:960px) { /* … */ } Isso é útil quando estou segmentando […]

Qualquer maneira de limitar o comprimento da fronteira?

Existe alguma maneira de limitar o comprimento de uma borda. Eu tenho um que tem uma borda inferior, mas eu quero adicionar uma borda à esquerda do que só se estende a metade do caminho. Existe alguma maneira de fazer isso sem adicionar elementos extras na página?

Qual é o propósito do símbolo ‘@’ no CSS?

Eu apenas deparei com essa questão e notei que o usuário está usando alguma notação que eu nunca vi antes: @font-face { /* CSS HERE */ } Então este símbolo @ é algo novo em CSS3, ou algo antigo que de alguma forma eu esqueci? É algo parecido com onde você usa um ID # […]

: not () selector não se comportando da mesma forma entre o Safari e o Chrome / Firefox

Estou tendo muita dificuldade em descobrir por que o código a seguir é exibido em azul no Safari, mas em vermelho no Chrome e no Firefox. em:not(div) { color: red } em:not(p div) { color: blue } FOO https://jsfiddle.net/hzcLpf9L/ Aparentemente, parece que o Chrome e o Firefox não suportam :not() seletores CSS com vários níveis […]

Opacidade CSS apenas para a cor de fundo e não para o texto?

Posso atribuir a propriedade de opacity à propriedade background de uma div apenas e não ao texto nela? Eu tentei: background: #CCC; opacity: 0.6; mas isso não altera a opacidade.

Por que o seletor .foo a: link, .foo a: visited {} sobrescreve um seletor: hover, a: active {} em CSS?

Exemplo de código: http://jsfiddle.net/RuQNP/ Foo a:link, a:visited { color: blue; } a:hover, a:active { color: red; } .foo a:link, .foo a:visited { color: green; } /* A possible fix */ /* .foo a:hover, .foo a:active { color: red; } */ Example O que eu estava esperando: O link apareceria vermelho ao passar o mouse. O […]