<\/p>\n
Firefox<\/a>, Safari e Chrome<\/a> j\u00e1 implementaram propriedades do CSS3<\/strong>. Para que funcionem, \u00e9 necess\u00e1rio adicionarmos os prefixos -moz<\/strong> (para renderiza\u00e7\u00e3o no Firefox) e -webkit<\/strong> (para renderiza\u00e7\u00e3o nos navegadores Chrome e Safari). Ambos s\u00e3o solu\u00e7\u00f5es propriet\u00e1rias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3. Recomendo que leia tamb\u00e9m os seguintes artigos<\/strong>:<\/p>\n Com a propriedade Como acontece com margens, bordas, etc. no CSS h\u00e1 propriedades individuais para cada canto que deseja arredondar, veja alguns exemplos abaixo: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n Criamos sombras em CSS<\/strong> com uso da propriedade Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n Para fazer o efeito utilizamos a propriedade Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n Segundo pesquisas de usabilidade as pessoas t\u00eam dificuldades de ler textos onde as linhas s\u00e3o 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\u00e1 \u00e9 poss\u00edvel. As colunas podem ser substituidas por divs flutuadas. Aqui algumas propriedades.<\/p>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\n<\/div>\n 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\u00e3o ocorre com CSS3. O uso de CSS3 permite ao desenvolvedor inserir m\u00faltiplas imagens<\/strong> por elemento simplesmente separando por v\u00edrgula a propriedade Observe o exemplo abaixo:<\/p>\n Os valores depois de Lorem Ipsum is simply dummy text of the printing.<\/p>\n<\/blockquote>\n<\/div>\n Box model especifica quais propriedades da folha de estilo ser\u00e3o somadas para definir o tamanho do elemento. Ao aplicar a largura( Ao usar o O conte\u00fado da DIV tem uma largura de 250px e padding de 10px, ou seja, a largura total \u00e9 de 270px (largura do conte\u00fado mais espa\u00e7amento esquerda e direita do padding)<\/p>\n<\/div>\n Largura de 250px e padding de 10px, mas o preenchimento agora \u00e9 dentro da \u00e1rea de conte\u00fado, largura total \u00e9 250px<\/p>\n<\/div>\n Utilizado para aplicar um espa\u00e7amento em volta de um elemento HTML. Sua vantagem \u00e9 de n\u00e3o alterar o tamanho do Box Model fazendo com que o elemento acabe ocupando mais espa\u00e7os por causa da borda. Isso acontece quando utilizamos a propriedade Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n J\u00e1 imaginou criar um fundo gradiente sem usar imagens<\/strong>? Com CSS3 isso \u00e9 totalmente poss\u00edvel. Perceba que para usar o efeito no Safari e no Chrome foi necess\u00e1rio alterar um pouco o c\u00f3digo.<\/p>\n Um exemplo de uso pode ser visto abaixo: Para o efeito funcionar no Chorme temos que alterar algumas coisas como mostrado abaixo:<\/p>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/p>\n<\/div>\n O efeito funciona apenas para usu\u00e1rios do Firefox ou Safari 4. Aqui podemos trabalhar com transi\u00e7\u00e3o e rota\u00e7\u00e3o podendo definir quantas vezes o elemento far\u00e1 isso.<\/p>\n No exemplo abaixo primeiramente definimos uma cor para o link. Depois definimos uma cor e a propriedade que ser\u00e1 animada. Por \u00faltimo quanto tempo deve ter a anima\u00e7\u00e3o. Ao colocar o mouse sobre o link perceba que o fundo aparece de uma forma mais sutil.<\/p>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum<\/a><\/p>\n<\/div>\n Este artigo foi escrito baseado no original Top 10 CSS3 commands<\/a> com algumas altera\u00e7\u00f5es.<\/p>\n Recomendo a leitura do artigo Aplicando Progressive Enhancement no CSS<\/a> para tirar mais proveito das propriedades CSS.<\/p>\n Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":" CSS3 Firefox, Safari e Chrome j\u00e1 implementaram propriedades do CSS3. Para que funcionem, \u00e9 necess\u00e1rio adicionarmos os prefixos -moz (para renderiza\u00e7\u00e3o no Firefox) e -webkit (para renderiza\u00e7\u00e3o nos navegadores Chrome e Safari). Ambos s\u00e3o solu\u00e7\u00f5es propriet\u00e1rias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[45,38],"class_list":["post-1194","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-css3"],"yoast_head":"\n
\n<\/p>\n\n
1. Arredondar cantos de divs<\/h2>\n
border radius<\/code> conseguimos arredondar cantos de dvis. Dessa forma muitos desenvolvedores podem deixar de lado a estrutura de tabelas complexas e imagens para alcan\u00e7ar tal efeito.<\/p>\n
\n-moz-border-top-right-radius: 3px;<\/code> arredonda em 3px o canto superior direito
\n-moz-border-top-left-radius: 3px;<\/code> arredonda em 3px o canto superior esquerdo.<\/p>\n\r\n#div1 {\r\nborder: 1px solid #699;\r\n-moz-border-radius: 20px;\r\n-webkit-border-radius: 20px;\r\n}\r\n<\/pre>\n2. Sombras em divs<\/h2>\n
box-shadow<\/code>. Um exemplo seria: box-shadow: 2px -3px 4px #000<\/code>. Os quatros valores passados s\u00e3o respectivamente: deslocamento horizontal da sombra(2px<\/strong>), deslocamento vertical(-3px<\/strong>), faz um “borr\u00e3o” na sombra, um esfuma\u00e7ado(4px<\/strong>) e por \u00faltimo a cor da sombra(#000<\/strong>).<\/p>\n\r\n#div2 {\r\nborder:1px solid #699;\r\n-moz-box-shadow: 5px 5px 5px #b6ebf7;\r\n-webkit-box-shadow: 5px 5px 5px #b6ebf7;\r\n}\r\n<\/pre>\n3. Transpar\u00eancia<\/h2>\n
background-color<\/code> mais o valor rgba()<\/code> que \u00e9 uma extens\u00e3o do famoso modo de cores RGB. O comando rgba()<\/code> \u00e9 composto por 4 valores, por exemplo, rgba(255, 125, 0, 0.5);<\/code> os tr\u00eas primeiros s\u00e3o valores em RGB que s\u00e3o respectivamente vermelho, verde e azul. Os valores podem ser de 0 a 255. O \u00faltimo valor \u00e9 a transpar\u00eancia que varia de 0 at\u00e9 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transpar\u00eancia do 50%.<\/p>\n\r\n#div3 {\r\nbackground-color: #6e8eb9;\r\n}\r\nbody:last-child #div3 {\r\nbackground-color: rgba(110, 142, 185, .4);\r\n}\r\n<\/pre>\n4. Colunas<\/h2>\n
column-count:<\/code>define o n\u00famero de colunas
\ncolumn-gap:<\/code> cria um espa\u00e7o entre as colunas (padding)
\ncolumn-rule:<\/code> define a estiliza\u00e7\u00e3o da borda que ficar\u00e1 entre as colunas.<\/p>\n\r\n#div4 {\r\n\/* borda inserida para facilitar o entedimento *\/\r\nborder: 1px solid #699;\r\n-moz-column-count: 2;\r\n-moz-column-gap: 20px;\r\n-moz-column-rule: 1px solid #6e8eb9;\r\n\r\n-webkit-column-count: 2;\r\n-webkit-column-gap: 20px;\r\n-webkit-column-rule: 1px solid #6e8eb9;\r\n}\r\n<\/pre>\n5. V\u00e1rias imagens de fundo<\/h2>\n
background<\/code>.<\/p>\nbackground:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;<\/code><\/p>\nno-repeat<\/code> significam a posi\u00e7\u00e3o da imagem. O primeiro representa a posi\u00e7\u00e3o da imagem na horizontal, j\u00e1 o segundo valor \u00e9 a posi\u00e7\u00e3o da imagem na vertical.<\/p>\n\r\n#div5 blockquote{\r\n\/* retira qualquer imagem de fundo e adiciona espacamento de 20px\r\nna na parte superior e inferior do elemento *\/\r\nbackground:none;\r\npadding:0 20px;\r\n}\r\n\r\nbody:last-child #div5 blockquote p{\r\nbackground:none\r\n}\r\n\r\n\/* hack para navegadores Microsoft*\/\r\n\/* inserindo as imagens *\/\r\nbody:last-child #div5 blockquote{\r\nbackground:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;\r\n}\r\n<\/pre>\n\n
6. Box-sizing \u2013 box model<\/h2>\n
width<\/code>) em uma div<\/code> e depois uma borda, ou um espa\u00e7amento (padding<\/code>) esse valores s\u00e3o somados ao tamanho inicial do elemento tornando ele maior.<\/p>\nbox-sizing<\/code> o uso da propriedade padding<\/code>, por exemplo, pode ser aplicado dentro do tamanho definido no width<\/code>. A propriedade \u00e9 aplicada para dentro do elemento e n\u00e3o para fora. Ao inv\u00e9s de somar com o valor definido no width<\/code> ele diminui. Recomendo observar os exemplos para um melhor entendimento da propriedade box-sizing<\/code>.<\/p>\n\r\n#div6 {\r\nbackground:#b6ebf7;\r\nwidth: 200px;\r\npadding: 10px;\r\n-moz-box-sizing: content-box;\r\n\/* para o IE8 *\/\r\nbox-sizing: content-box;\r\n-webkit-box-sizing: content-box;\r\n}\r\n<\/pre>\n\r\n#div6b {\r\nbackground:#b6ebf7;\r\nwidth: 200px;\r\npadding: 10px;\r\n-moz-box-sizing: border-box;\r\n\/*para o IE8 *\/\r\nbox-sizing: border-box;\r\n-webkit-box-sizing: border-box;\r\n}\r\n<\/pre>\n7. Outline<\/h2>\n
border<\/code>.<\/p>\noutline:<\/code> cria uma borda adicional
\noutline-offset:<\/code> utilizado para mover o contorno para dentro ou fora. Valores negativos movem para dentro do elemento.<\/p>\n\r\n#div7 {\r\nborder: 1px solid #000;\r\n\/*borda adicional*\/\r\noutline: 1px solid #FF0000;\r\n\/*utilizado para mover o contorno para dentro ou fora*\/\r\noutline-offset: -9px;\r\n}\r\n<\/pre>\n8. Fundo com gradientes<\/h2>\n
\nlinear-gradient(bottom, #b6ebf7, #fff 50%)<\/code>. linear<\/code> \u00e9 o tipo do gradiente, bottom<\/code> \u00e9 o inicio do nosso gradiente, #b6ebf7 e #fff s\u00e3o as cores usadas, 50% quanto que o gradiente ocupara do elemento.<\/p>\ngradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));<\/code><\/p>\nlinear<\/code> \u00e9 o tipo, left<\/code> e bottom<\/code> \u00e9 o inicio do gradiente, left<\/code> e top<\/code> o final, color-stop<\/code> define a cor de inicio e fim.<\/p>\n\r\n#div8 {\r\nbackground: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%);\r\nbackground: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));\r\n}\r\n<\/pre>\n9. Rotacionando elementos<\/h2>\n
rotate<\/code>: permite a rota\u00e7\u00e3o de elementos. O valor passado rotaciona o elemento em sentido hor\u00e1rio.<\/p>\n\r\n#div9 {\r\n-moz-transform: rotate(2deg);\r\n-webkit-transform: rotate(2deg);\r\n}\r\n<\/pre>\n10. Anima\u00e7\u00e3o<\/h2>\n
\r\n.div a {\r\ncolor: #0f0;\r\n}\r\n\r\n#div10 a:hover {\r\ncolor: #0f0;\r\n-moz-transition-property: color;\r\n-webkit-transition-property: color;\r\n}\r\n\r\n#div10 a:hover {\r\ncolor: #0f0;\r\n-moz-transition-property: color;\r\n-webkit-transition-property: color;\r\n-moz-transition-duration: 0.5s;\r\n-webkit-transition-duration: 0.5s;\r\n}\r\n\r\n\r\n#div10 a:hover {\r\ncolor:#31801f;\r\n-moz-transition-property: color;\r\n-webkit-transition-property: color;\r\n-moz-transition-duration: 0.5s;\r\n-webkit-transition-duration: 0.5s;\r\n-moz-transition-timing-function: ease;\r\n-webkit-transition-timing-function: ease;\r\n}\r\n<\/pre>\n