Postado por Marcus Antonius - 21 dez, 2010. em
css Pesquisando como centralizar uma div, achei esse post muito interessante no CSS no lanche.
No exemplo, é utilizado uma div com o id “container”, esse será o elemento que iremos centralizar na página. Observem a seguinte marcação HTML:
1
2
3
4
5
6
7
8
9
10
| <div id="distance"></div>
<div id="container">
<h1>Centralizar div na horizontal e vertical com float e clear - crossbrowser</h1>
<p>
Esse box fica no meio do browser em relação a seu viewpoint.<br />
O conteúdo não desaparece quando o viewpoint é redimensionado e fica menor que o box.
</p>
</div> |
Leia mais…
Tags:css
Postado por Marcus Antonius - 26 nov, 2010. em
css Muitas vezes recebemos aquele layout cheio de curvas e fontes bem caprichadas que fogem completamente das fontes web padrões e aí pensamos: “Caramba, como vamos montar isso?! Será que eu vou ter que criar uma imagem para cada título que possuí essa bendita fonte?!”
Daí o Emanuel Pessoa me mostrou uma solução muito interessante no site Font Squirrel. Além de possuir várias fontes ele ainda te dá a opção de você enviar sua própria fonte e adaptar para funcionar em qualquer site.
Leia mais…
Tags:browser, css
Postado por Marcus Antonius - 15 abr, 2010. em
css Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o “CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando”. De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.
A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.
Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.
Leia mais…
Tags:css3
Postado por Marcus Antonius - 25 set, 2009. em
css Resolvi reviver esse post tirado do meu antigo blog e coloquei aqui. É sempre bom ter um guia pra todas as vezes que agente esquece alguma coisa nas folhas de estilo.
Então vamos ao trabalho!
As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:
1. Importadas ou lincadas;
2. Incorporadas;
3. Inline.
Folha de estilo externa
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da tag <> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada abaixo:
Leia mais…
Tags:css
