Articles of css3

Forma de triângulo com imagem de fundo

Eu estou trabalhando em um projeto que pede dois triângulos para armazenar imagens de fundo e ser links. Aqui está a minha simulação de como eu gostaria dos dois triângulos. Atualmente, tenho apenas dois divs que abrangem os 900 x 600 com cada triângulo como uma imagem de plano de fundo. A questão que estou […]

Ordenação de declarações CSS específicas do fornecedor

Acho que já escrevi algo como o seguinte mil vezes: .foo { border-radius: 10px; /* W3C */ -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ } Mas só agora eu pensei se a ordem deles é importante? Eu sei que entre -moz-* e -webkit-* isso não importa, já que no máximo 1 deles […]

Efeito de focalização: expanda a borda inferior

Estou tentando obter um efeito de transição na borda que a borda expande em foco. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ”; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; } CSS IS AWESOME Eu […]

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 […]

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 # […]

Por que o seletor h3: nth-child (1): contains (‘a’) funciona?

Eu verifico este seletor: h3:nth-child(1):contains(‘a’) seletor não funciona? Eu verifico isto em firefinder e não retorno nada (não informação que há zero elementos) Então verifique isso: h3:nth-child(1) e retorna h3, então o seletor é quase bom, mas algo com esse texto (h3 tem texto ‘a’) dá errado.

Como posso selecionar um enésimo filho sem conhecer o elemento pai?

Não consigo descobrir uma maneira de selecionar o enésimo elemento, último elemento ou primeiro elemento nos casos em que não conheço o elemento pai. existe nth-child , mas apenas para crianças, por exemplo: One Two p:last-child seleciona o parágrafo “Dois” e p:first-child seleciona o parágrafo “Um”. Mas e quando eu tenho código dynamic e não […]