Articles of css

Vídeo em HTML5 – Porcentagem carregada?

Alguém sabe qual evento ou propriedade preciso consultar para obter um valor percentual do valor que um vídeo HTML5 carregou? Eu quero desenhar uma barra “carregada” com estilo CSS cuja largura representa essa figura. Assim como o You Tube ou qualquer outro player de vídeo. Então, assim como o tube, um vídeo será reproduzido, mesmo […]

Tamanho da fonte em relação à resolução da canvas do usuário?

Eu tenho um site fluido e o menu tem 20% de sua largura. Eu quero que o tamanho da fonte do menu seja medido corretamente para que ele caiba sempre na largura da checkbox e nunca passe para a próxima linha. Eu estava pensando em usar “em” como uma unidade, mas é relativo ao tamanho […]

CSS @ font-face – o que significa “src: local (‘☺’)”?

Estou usando o @font-face pela primeira vez e baixei um font-kit do fontsquirrel O código que eles recomendam inserir no meu CSS é: @font-face { font-family: ‘junctionregularRegular’; src: url(‘Junction-webfont.eot’); src: local(‘☺’), url(‘Junction-webfont.woff’) format(‘woff’), url(‘Junction-webfont.ttf’) format(‘truetype’), url(‘Junction-webfont.svg#webfontoNEpZXy2’) format(‘svg’); } Agora, a carinha sorridente me deixou perplexa. Mas o mesmo acontece com o número de URLs no […]

Diferença entre posicionamento estático e relativo

Em CSS, qual é a diferença entre posicionamento estático (padrão) e posicionamento relativo?

Existe uma maneira de usar o SVG como conteúdo em um pseudoelemento: antes ou: depois

Eu quero colocar algumas imagens SVG antes de alguns elementos selecionados. Estou usando o JQuery, mas isso é irrelevante. Eu gostaria de ter o elemento antes de ser como: #mydiv:before { content:”<svg.. code here”; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } Se eu fizer isso como mostrado acima, basta exibir a string. Eu verifiquei […]

Selecione inputs e inputs de texto em HTML – Melhor maneira de fazer a mesma largura?

Eu tenho uma forma simples assim (apenas para fins ilustrativos) … Name Country Australia USA Meu método de layout usando CSS é o seguinte … form { width: 500px; } form .input-row { display: block; width: 100%; height: auto; clear: both; overflow: hidden; /* stretch to contain floated children */ margin-bottom: 10px; } form .input-row […]

Remover o brilho de textinput / textarea do Safari / Chrome

Eu estou querendo saber se é possível remover o brilho azul e amarelo padrão quando clico em uma área de input de texto / texto usando CSS?

Corrigir problema de tamanho de fonte no Mobile Safari (iPhone), onde o texto é processado de forma inconsistente e algumas fonts são maiores do que outras?

Nosso site renderiza com tamanhos de fonte inconsistentes no Safari móvel – e, até onde podemos dizer, apenas o Mobile Safari. Isso nos impressionou muito. Analisamos o site com o Firebug e as áreas incorretas estão herdando os estilos corretos, mas as fonts ainda são renderizadas com os tamanhos incorretos. 1) Visite http://www.panabee.com . 2) […]

Webfont Suavização e Antialiasing no Firefox e Opera

Tenho alguns webfonts personalizados no meu site e uso coisas como //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; para estilizar minha saída de renderização. Isso funciona muito bem no Safari e no Chrome. Eu tenho bordas mais nítidas e linhas mais finas. Existe alguma maneira de fazer coisas assim no Firefox? Ou ópera?

Como selecionar um label para “email” em CSS?

HTML: {t _your_email}: CSS: label { display: block; width: 156px; cursor: pointer; padding-right: 6px; padding-bottom: 1px; } Eu quero fazer um novo CSS para o label de e-mail, pois não é para ser tão grande.