propriedade margin

A propriedade margin do CSS define as dimensões das margens de um elemento CSS. Elas compõem as áreas verticais e horizontais entre os elementos. Caso os elementos não tenham margens em torno deles, eles vão encostar uns nos outros. Alguns elementos têm margens por padrão, ou seja, mesmo que você não adicione margem o elemento já é criado com margens. Cito como exemplo os elementos de cabeçalhos h1, h2… h6.

Abaixo um exemplo das margens em CSS

A propriedade margin em CSS define o espaço exterior entre os elementos. Compreende também o espaçamento entre os elementos e tela do navegador do usuário, por exemplo, o desenvolvedor deseja que um elemento fique a 20px do topo da página do usuário.

Como definir margens em CSS

As margens podem ser aplicadas nos quatros lados de um elemento HTML. Superior, direita, inferior e esquerda.

• margin -top: espaçamento para a parte superior;
• margin -right: espaçamento para o lado direito;
• margin -bottom: espaçamento para a parte inferior;
• margin -left: espaçamento para o lado esquerdo.

Esta propriedade CSS, assim como outras, aceita a sintaxe abreviada.

Margens iguais nos quatro lados do elemento.
margin: 30px;

Margem superior e inferior de 10px. Margem esquerda e direita de 15px.
margin: 10px 15px;

Margem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.
margin: 10px 15px 20px;

Margem superior de 5px. Margem direita de 10px. Margem inferior de 15px. Margem esquerda de 20px;
margin: 5px 10px 15px 20px;

Propriedade padding em CSS

A propriedade do CSS padding define o espaçamento entre o conteúdo e a borda de um elemento HTML. Esta borda por padrão não aparece para o usuário. É a área que delimita um elemento HTML. É o espaço horizontal e vertical em torno da área de conteúdo de um elemento, por exemplo, espaçamento entre as bordas de uma div e o parágrafo contido dentro da mesma.

Abaixo um exemplo da propriedade CSS padding

Repare que a propriedade padding ao contrário da propriedade margin define o espaçamento interno do elemento. NO exemplo acima com uso do padding conseguimos posicionar o texto dentro do elemento.

Como definir padding em CSS

Igual a propriedade margin podemos definir espaçamento diretamente para um lado do elemento:

• padding-top: espaçamento para a parte superior;
• padding-right: espaçamento para o lado direito;
• padding-bottom: espaçamento para a parte inferior;
• padding-left: espaçamento para o lado esquerdo.

A propriedade CSS padding , assim como outras e margin, aceita a sintaxe abreviada também.

Espaçamentos iguais nos quatro lados do elemento.
padding: 30px;
Margem superior e inferior de 10px. Margem esquerda e direita de 15px.
padding: 10px 15px;
Margem superior de 10px. Margem direita e esquerda de 15px. Margem inferior de 20 px.
padding: 10px 15px 20px;

Abaixo um exemplo mais completo

Concluindo, a margem define o espaço fora de seu box em relação a outros elementos, exemplo, espaço entre divs, espaço entre um elemento h2 e um parágrafo, etc. Já o padding define o espaço entre o elemento e o seu conteúdo, exemplo, distância da borda da div e seu conteúdo. Espero que com este arigo vocês tenham compreendido a diferença das duas propriedades, podendo assim utilizar de forma mais eficaz as duas propriedades.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Nenhum post relacionado

<div class="container">
	<div class="box"><div class="cover_pan"></div>
</div>

Aplicamos no elemento marcado com a class box uma imagem de fundo (404.png). Ela funcionará como uma máscara.

body {color: #fff; margin: 0;background: url(img/texture.png) repeat;}
.container {width: 960px;margin:50px auto; text-align: center; font: 13px/22px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #000;}
.box {
	background: url(img/404.png) no-repeat 0 0;
	border-bottom: 5px solid #000;
	height: 343px;
	margin-bottom: 25px;
 	padding-bottom: 50px;
}

O código CSS abaixo é responsável por fazer grande parte da animação. Definimos a imagem que será rolada no fundo, nesse caso a imagem covers.jpg, definimos o tempo da animação e que a mesma será de forma contínua, ficará em um loop infinito.

.cover_pan{
	background: #fff url(img/covers.jpg) repeat 1055px bottom;
	height: 343px;
	margin-left:1px;
	overflow: hidden;
	position: relative;
	width:99.5%;
	z-index: -1;

	-moz-animation-name: pan;
	-moz-animation-duration:40s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	-webkit-animation-name: pan;
	-webkit-animation-duration:40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

Esta é uma das implementações mais simples do código que você terá que aplicar. Estamos deslizando a posição de fundo. Cover_pan da direita para a esquerda.

@-moz-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

@-webkit-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

Você pode baixar arquivos usados neste tutorial para estudar.
Artigo Original.
Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• Suporte dos navegadores para propriedades CSS3
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS

CSS3 continua a ganhar a cada dia mais e mais popularidade, está presente na maioria dos sites de quem trabalha com web, apesar de ainda dizerem ser cedo para aprender e aplicar as CSS3, já que as propriedades e seletores não são totalmente suportadas por todos os navegadores.

Eu acredito que já pode ser utilizada, até porque a cada dia os navegadores estão mais compatíveis com as propriedades e seletores CSS3. Para dar uma idéia do que podemos conseguir com a nova versão das CSS, dê uma olhada nessas úteis ferramentas online utilizadas para gerar código CSS3.

CSS3 Button Maker

Ferramentas CSS3 Tricks

Crie um botão usando apenas CSS. Através dos botões, barras deslizantes contidas no painel principal do site você vai escolhendo o estilo desejado do botão. Em seguida você pode copiar o código fonte e usar em seus projetos

CSS3 Generator

Ferramentas CSS3, Tricks Generator

Selecione em uma lista a propriedade CSS3 desejada, preencha alguns parâmetros da propriedade selecionada e pronto, o aplicativo mostra o código gerado para você copiar e colar no arquivo de estilos do seu site. A visualização das mudanças é imediata.

CSS3 Please

Ferramentas CSS3 Please, edite as principais propriedades CSS3

Aqui você pode editar os valores das principais propriedades CSS3 que estão sublinhadas. Depois é só copiar e colar no seu arquivo de estilos CSS. O bom é que quando você alterar a propriedade por exemplo, -moz-box-shadow o aplicativo atualiza automaticamente a propriedade -webkit-box-shadow.

CSS3 Gradient Generator

Ferramentas CSS3, crie seu próprio Gradiente

Muitos não sabem, mas é possível criar efeitos de gradientes usando CSS. Veja esse simples gerador de gradiente CSS3.

CSS3 Transforms

Ferramentas CSS3 Westciv

Com essa ferramenta você pode fazer diversas transformações no conteúdo, tais como, rotação e inclinação. Ele também gera o código correspondente ao efeito escolhido.

CSS3 Selectors Test

Ferramentas CSS3 Selectors Test

Faça testes de seletores CSS3. A ferramenta executa automaticamente um grande número de testes que determinam se o seu navegador é compatível com um grande número de seletores CSS. Caso não seja compatível com um seletor especial, o mesmo é destacado. Você pode clicar em cada seletor CSS para ver os resultados, incluindo um pequeno exemplo e uma explicação para cada um dos testes.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• 10 efeitos com propriedades CSS3
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Suporte dos navegadores para propriedades CSS3
• Como criar um layout de 3 colunas com CSS
• Mostrar legenda ao passar o mouse sobre imagens
• Gerador online de gradiente CSS3
• Alterando cor da seleção padrão do texto com CSS3
• Exemplos de menus em CSS
• Comentários condicionais para o Internet Explorer

Propriedades CSS3	Suporte dos navegadores
	IE9	Firefox	Chrome	Safari	Opera
border-radius
box-shadow
border-image
text-shadow
word-wrap
@font-face
background-size
background-origin
transform
resize
box-sizing
outline-offset
column-count
column-gap
column-rule
@keyframes
animation
transition

Tabela original Propriedades CSS3 e navegadores compatíveis.

Me siga no Twitter e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Gerador online de gradiente CSS3
• Alterando cor da seleção padrão do texto com CSS3
• 10 efeitos com propriedades CSS3

Tutorial demonstrando como criar um Layout CSS com 3 colunas.

Existem dois tipos principais de layouts com CSS: largura fixa e de largura variável (conhecido também como, layout líquido ou layout fluido), esse último o site se ajusta ao tamanho da janela do navegador do usuário. Outra coisa que se pode fazer é deixar a coluna do conteúdo como uma largura variável e as colunas ao lado fixa. Nesse artigo vou mostrar como criar um layout fixo de 3 colunas.

Um usuário com uma resolução menor do que a largura do layout verá uma barra de rolagem na horizontal do seu navegador. Se a resolução do monitor for maior que a largura definida no layout aparecerá espaços vazios na tela. Neste caso é interessante que o desenvolvedor centralize o layout, para os espaços vazios aparecerem nos dois lados do site.

Vale lembrar também que, usando CSS para formatar as suas páginas, no lugar de tabelas, fica muito mais prático para alterar o layout do seu site, alteramos apenas pelo arquivo CSS, além disso, seu site irá carregar mais rápido.

Layout de três colunas é muito comum, já que permite deixar a navegação à esquerda, o conteúdo no meio, e a publicidade, links, logos… à direita.

Estrutura do HTML para três colunas

<div id="geral">
    <div id="cabecalho"></div>
    <div id="principal">
        <div id="conteudo-1"></div>
        <div id="conteudo-2">
            <div id="conteudo-2-1"></div>
            <div id="conteudo-2-2"></div>
        </div>
    </div>
    <div id="rodape"></div>
</div>

Acima temos a marcação necessária para a criação das três colunas. Repare que criamos uma div chamada de conteudo-2 que serve como um box para englobar as divs conteudo-2-1 e conteudo-2-2. A seguir detalhes da estrutura HTML usada.

Resultado da nossa marcação HTML

Agora dê uma olhada em como o navegador renderiza o documento sem estilos, apenas com nossa marcação HTML. Para facilitar a visualização inseri um pouco de conteúdo dentro das colunas.

Definindo a largura e cores de fundo das colunas

Agora vamos adicionar um pouco de CSS básico para tornar mais fácil o entendimento do que estamos fazendo. A seguir deixamos uma largura fixa igual a 960px e centralizamos horizontalmente o layout. Coloquei também algumas cores de fundo para facilitar a montagem do layout com 3 colunas.

body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#geral {
    width:960px;
    margin:0 auto;
    background:#ddd;
}
#cabecalho {
    background:#fdd;
}
# conteudo-1 {
    background:#bfb;
}
#conteudo-2-1 {
    background:#ddf;
}
#conteudo-2-2 {
    background:#dff;
}
#rodape {
    background:#ff9;
}

Veja como ficou nosso layout depois de definir a largura da div #geral. Todos os elementos são empilhados verticalmente em uma única coluna.

Criando as duas primeiras colunas

Para começar a criar as colunas, vamos definir a largura das divs #conteudo-1 e #conteudo-2 e flutuá-las em direções opostas, ou seja, uma para esquerda e outra para a direita.

#conteudo-1 {
    float:left;
    width:240px;
    background:#bfb;
}
#conteudo-2 {
    float:right;
    width:720px;
}

Veja como está funcionando nosso layout de 3 colunas.
O rodapé parece estranho, nesta fase, mas isso será corrigido mais tarde.

Deixando as colunas lado a lado

Para deixar os elementos #conteudo-2-1 e #conteudo-2-2 em colunas, tudo o que precisamos fazer é repetir o que fizemos antes, ou seja, dar as larguras aos elementos utilizando float em direções opostas, veja o código abaixo.

#conteudo-2-1 {
    float:left;
    width:480px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    width:240px;
    background:#dff;
}

Temos agora as três colunas que queríamos, #conteudo-1 para a esquerda, #conteudo-2-1 no meio, e #conteudo-2-2 para a direita.

Arrumando o rodapé, colocando o rodapé no seu lugar

A div do #rodape é exibida atualmente abaixo do #conteudo-1 , que não é onde queremos que fique. Existem diferentes formas de empurrá-la abaixo das três colunas, mas a maneira mais simples é usar clear: both.

Essa propriedade do CSS diz que não podemos ter elementos flutuando a esquerda e nem a direita desse elemento, no caso a div #rodape.

#rodape {
    clear:both;/*posicionando o rodape abaixo das outras divs*/
    background:#ff9;
}

Organizando os elementos do layout

Para tornar a página de demonstração final melhor de ser visualizada vamos dar uns espaçamentos utilizando a propriedade padding do CSS. Veja como ficou a folha de estilos. Atenção para as modificações feitas na largura (propriedade width:) das divs #conteudo-1 e #conteudo-2-2. Diminuímos a largura porque colocamos um espaçamento, caso não tivéssemos diminuído a largura desses elementos o layout “quebraria” (as colunas não ficariam uma ao lado da outra). Uma outra solução seria aumentar a largura da div #geral.

#cabecalho {
    padding:10px;
    background:#fdd;
}
# conteudo-1 {
    float:left;
     /* diminuimos a largura para não quebrar o layout.
      * valor antigo 220
      */
    width:210px;
    padding:10px;
    background:#bfb;
}
#conteudo-2-1 {
    float:left;
    width:460px;
    padding:10px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    /*diminuimos a largura para não quebrar o layout
    * valor antigo 220
    */
    width:200px;
    padding:10px;
    background:#dff;
}
#rodape {
    clear:both;
    padding:10px;
    background:#ff9;
}

Confira o resultado final do layout com 3 colunas.

Fique por dentro de todas atualizações aqui do site: Twitter: @kadunew
Abraço e até a próxima!

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Mostrar legenda ao passar o mouse sobre imagens

Exemplo

Você pode ver o resultado final desse tutorial na Página de Exemplo. O site DesignFlavr faz uso desse efeito, porém um pouco mais complexo.

HTML

<div class="imgefeito">
<a href="#">
	<img src="teste.jpg" alt="Daim Graffiti" />
	<span class="mais">Saiba Mais</span>
	<span class="desc">
		<strong>Lorem Ipsum</strong>
		Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.
	</span>
</a>
</div>

CSS

Abaixo a estilização da DIV que aloca todos os outros elementos.

.imgefeito {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgefeito a {
	text-decoration: none;
	float: left;
}
.imgefeito a:hover {
	cursor: pointer;
}

Estilização da imagem onde aparecerá o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.

.imgefeito a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}

Em seguida estilizamos o texto Saiba Mais e a “caixa” da legenda que será mostrada quando passarmos o mouse sobre o texto. Perceba o uso de um comando proprietário da Microsoft, -ms-filter para o efeito funcionar no Internet Explorer 8.

.imgefeito a .mais {
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 1.2em;
	color: #fff;
	background: #000;
	padding: 5px 10px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgefeito a:hover .desc{
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 615px;
	border-top: 1px solid #999;
}
.imgefeito a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}

Referências:
Sohtanaka e Aranea.Zuavra.

Como falei no artigo, esta técnica é muito útil para sites de galerias de imagens. Pelo fato da legenda aparecer sobre a imagem, conseguimos economizar espaço na página já que não precisamos deixar um espaço para a legenda. Fica aí a dica!

Quer ficar sabendo das atualizações aqui no Blog? Siga-me no Twitter: @kadunew

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• Ferramentas CSS3 online para Web Designers
• Como criar um layout de 3 colunas com CSS
• 10 efeitos com propriedades CSS3
• Exemplos de menus em CSS
• Comentários condicionais para o Internet Explorer
• Abreviando propriedades CSS
• Entendendo a especificidade CSS
• Centralizando layout com CSS – parte I
• Bug do Internet Explorer 6 (IE6) – fundo desaparecendo em listas

Quando estiver satisfeito com os ajustes que você fez, você pode simplesmente copiar o CSS gerado e colar na sua folha de estilos.

Você vai precisar de uma versão recente do Firefox, Chrome ou Safari para usar este gerador de Gradiente CSS3.

Link: Ultimate CSS Gradient Generator

Ferramentas semelhantes:

• CSS3 Gradient Generato;
• CSS Gradient Editor;
• Quick CSS3 Gradient Generator;
• Border Image Generator.

Abraço a todos e não esqueçam de me seguir no Twitter: @kadunew.

Isso vai interessar você também

• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Suporte dos navegadores para propriedades CSS3
• Alterando cor da seleção padrão do texto com CSS3
• 10 efeitos com propriedades CSS3

Esta técnica é uma bela forma de incrementar o design do seu website, apesar de não ser todo o visitante que verá o efeito, apenas os que selecionarem seu texto.

O efeito é alcançado com o pseudo-elemento ::selection. Veja o exemplo abaixo:

Código CSS:

p.vermelho::selection {
background:#FF0000;
color:#fff;
}
p.vermelho::-moz-selection {
background:#FF0000;
color:#fff;
}
p.vermelho::-webkit-selection {
background:#FF0000;
color:#fff;
}
p.laranja::selection {
background:#FF6600;
color:#fff;
}
p.laranja::-moz-selection {
background:#FF6600;
color:#fff;
}
p.laranja::-webkit-selection {
background:#FF6600;
color:#fff;
}

Isso vai interessar você também

• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Suporte dos navegadores para propriedades CSS3
• Gerador online de gradiente CSS3
• 10 efeitos com propriedades CSS3

Firefox, Safari e Chrome já implementaram propriedades do CSS3. Para que funcionem, é necessário adicionarmos os prefixos -moz (para renderização no Firefox) e -webkit (para renderização nos navegadores Chrome e Safari). Ambos são soluções proprietárias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3.

1. Arredondar cantos de divs

Com a propriedade border radius conseguimos arredondar cantos de dvis. Dessa forma muitos desenvolvedores podem deixar de lado a estrutura de tabelas complexas e imagens para alcançar tal efeito.

Como acontece com margens, bordas, etc. no CSS há propriedades individuais para cada canto que deseja arredondar, veja alguns exemplos abaixo:
-moz-border-radius-topright: 3px; arredonda em 3px o canto superior direito
-moz-border-radius-topleft: 3px; arredonda em 3px o canto superior esquerdo.

#div1 {
border: 1px solid #699;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

2. Sombras em divs

Criamos sombras em CSS com uso da propriedade box-shadow. Um exemplo seria: box-shadow: 2px -3px 4px #000. Os quatros valores passados são respectivamente: deslocamento horizontal da sombra(2px), deslocamento vertical(-3px), faz um “borrão” na sombra, um esfumaçado(4px) e por último a cor da sombra(#000).

#div2 {
border:1px solid #699;
-moz-box-shadow: 5px 5px 5px #b6ebf7;
-webkit-box-shadow: 5px 5px 5px #b6ebf7;
}

3. Transparência

Para fazer o efeito utilizamos a propriedade background-color mais o valor rgba() que é uma extensão do famoso modo de cores RGB. O comando rgba() é composto por 4 valores, por exemplo, rgba(255, 125, 0, 0.5); os três primeiros são valores em RGB que são respectivamente vermelho, verde e azul. Os valores podem ser de 0 a 255. O último valor é a transparência que varia de 0 até 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparência do 50%.

#div3 {
background-color: #6e8eb9;
}
body:last-child #div3 {
background-color: rgba(110, 142, 185, .4);
}

4. Colunas

Segundo pesquisas de usabilidade as pessoas têm dificuldades de ler textos onde as linhas são muito longas. Portanto, para aproveitar uma tela maior nada melhor que fazer seus textos em colunas, iguais aos jornais. E o melhor, com CSS isso já é possível. As colunas podem ser substituidas por divs flutuadas. Aqui algumas propriedades.

column-count:define o número de colunas
column-gap: cria um espaço entre as colunas (padding)
column-rule: define a estilização da borda que ficará entre as colunas.

#div4 {
/* borda inserida para facilitar o entedimento */
border: 1px solid #699;
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Várias imagens de fundo

Trabalhar com imagens de fundo sempre foi um pouco restrito quando se trata de CSS, devido ao fato de podermos inserir uma imagem de cada vez no fundo dos elementos. Isso não ocorre com CSS3. O uso de CSS3 permite ao desenvolvedor inserir múltiplas imagens por elemento simplesmente separando por vírgula a propriedade background.

Observe o exemplo abaixo:

background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;

Os valores depois de no-repeat significam a posição da imagem. O primeiro representa a posição da imagem na horizontal, já o segundo valor é a posição da imagem na vertical.

#div5 blockquote{
/* retira qualquer imagem de fundo e adiciona espacamento de 20px
na na parte superior e inferior do elemento */
background:none;
padding:0 20px;
}

body:last-child #div5 blockquote p{
background:none
}

/*  hack para navegadores Microsoft*/
/* inserindo as imagens */
body:last-child #div5 blockquote{
background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;
}

6. Box-sizing – box model

Box model especifica quais propriedades da folha de estilo serão somadas para definir o tamanho do elemento. Ao aplicar a largura(width) em uma div e depois uma borda, ou um espaçamento (padding) esse valores são somados ao tamanho inicial do elemento tornando ele maior.

Ao usar o box-sizing o uso da propriedade padding, por exemplo, pode ser aplicado dentro do tamanho definido no width. A propriedade é aplicada para dentro do elemento e não para fora. Ao invés de somar com o valor definido no width ele diminui. Recomendo observar os exemplos para um melhor entendimento da propriedade box-sizing.

#div6 {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: content-box;
/* para o IE8 */
box-sizing: content-box;
-webkit-box-sizing: content-box;
}

#div6b {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: border-box;
/*para o  IE8 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

7. Outline

Utilizado para aplicar um espaçamento em volta de um elemento HTML. Sua vantagem é de não alterar o tamanho do Box Model fazendo com que o elemento acabe ocupando mais espaços por causa da borda. Isso acontece quando utilizamos a propriedade border.

outline: cria uma borda adicional
outline-offset: utilizado para mover o contorno para dentro ou fora. Valores negativos movem para dentro do elemento.

#div7 {
border: 1px solid #000;
/*borda adicional*/
outline: 1px solid #FF0000;
/*utilizado para mover o contorno para dentro ou fora*/
outline-offset: -9px;
}

8. Fundo com gradientes

Já imaginou criar um fundo gradiente sem usar imagens? Com CSS3 isso é totalmente possível. Perceba que para usar o efeito no Safari e no Chrome foi necessário alterar um pouco o código.

Um exemplo de uso pode ser visto abaixo:
linear-gradient(bottom, #b6ebf7, #fff 50%). linear é o tipo do gradiente, bottom é o inicio do nosso gradiente, #b6ebf7 e #fff são as cores usadas, 50% quanto que o gradiente ocupara do elemento.

Para o efeito funcionar no Chorme temos que alterar algumas coisas como mostrado abaixo:

gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));

linear é o tipo, left e bottom é o inicio do gradiente, left e top o final, color-stop define a cor de inicio e fim.

#div8 {
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Rotacionando elementos

rotate: permite a rotação de elementos. O valor passado rotaciona o elemento em sentido horário.

#div9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

10. Animação

O efeito funciona apenas para usuários do Firefox ou Safari 4. Aqui podemos trabalhar com transição e rotação podendo definir quantas vezes o elemento fará isso.

No exemplo abaixo primeiramente definimos uma cor para o link. Depois definimos uma cor e a propriedade que será animada. Por último quanto tempo deve ter a animação. Ao colocar o mouse sobre o link perceba que o fundo aparece de uma forma mais sutil.

.div a {
color: #0f0;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}

#div10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Este artigo foi escrito baseado no original Top 10 CSS3 commands com algumas alterações.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• Ferramentas CSS3 online para Web Designers
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Suporte dos navegadores para propriedades CSS3
• Como criar um layout de 3 colunas com CSS
• Mostrar legenda ao passar o mouse sobre imagens
• Gerador online de gradiente CSS3
• Alterando cor da seleção padrão do texto com CSS3
• Exemplos de menus em CSS
• Comentários condicionais para o Internet Explorer

Abaixo um exemplo de sombra com uso de CSS.

Exemplo text-shadow

Se o seu navegador não tem suporte para essa propriedade segue a imagem de referência.

Para produzir esse efeito foi utilizada a seguinte regra de estilo.

text-shadow:3px 4px 2px #aaa;

Como você pode ver text-shadow aceita quatro valores:

1. 3px: Cordenada X (horizontal) da sombra em relação ao texto;
2. 4px: Cordenada Y (vertical) da sombra em relação ao texto;
3. 2px: O raio de desfocagem da sombra, isso significa que quanto maior o valor mais a sombra é “esticada”, causando um efeito de borrão;
4. #aaa: Cor da sombra. A cor pode ser especificado no inicio ou após o valor de desfoque.

Podemos trabalhar com múltiplas sombras, bastando apenas separar os valores da propriedade text-shadow por uma virgula. Segue abaixo dois exemplos de utilização de múltiplas sombras.

Exemplo 1

Exemplo text-shadow

Imagem de referência

Exemplo 2

Exemplo text-shadow

Imagem de referência

Uma outra forma de fazer sombras utilizando CSS é com o uso de propriedades de posicionamento position:.A técnica consiste em trabalhar com as propriedades top e left, por exemplo, para deslocar o texto da sombra.

Espero que tenham gostado.
Abraços e boa semana a todos!

Isso vai interessar você também

• Nenhum post relacionado