Curso Web Design | As propriedades do CSS3 que você não pode deixar de conhecer

---

As propriedades do CSS3 que você não pode deixar de conhecer Posted: 02 May 2013 06:47 AM PDT Você deve ter lido várias vezes aqui no Blog do Webdesign sobre a importância do CSS3, certo? Provavelmente leu os outros posts sobre o assunto, praticou os tutoriais…  mas será que conhece bem as novas propriedades da linguagem responsável pelos estilos das suas páginas web? Afinal, o conhecimento e o uso dessas propriedades é essencial para quem quer criar muito utilizando poucas imagens e mais códigos e melhorar sensivelmente o visual de suas páginas! O CSS3 chegou causando um alvoroço muito grande no mundo do web design, pois ele vai muito além de alterar cores, fontes e espaçamentos. Com CSS3 é possível criar sites responsivos com a técnica media queries (adaptando os sites para os diversos dispositivos, como já postei aqui), assim como mostrar elementos em três dimensões utilizando 3D Transforms (das quais ainda irei escrever qualquer dia desses). E não para por aqui, há muito mais novidades. Claro, nem tudo são flores. Lembre-se sempre que os sites ainda podem não aparecer idênticos em todos os navegadores. Os recursos do CSS3 vem sendo incorporado aos poucos nos navegadores mais resistentes a mudanças, mas já houve um grande salto nos últimos meses. Embora uma ou outra funcionalidade do CSS3  ainda não apareçam no Internet Explorer, (sempre ele), aos poucos algumas delas vão dando as caras no navegador da Microsoft. E embora a maioria delas ainda possa requerer um prefixo específico do fornecedor, você ainda assim poderá usá-las livremente em seus projetos. A propriedade Border-Radius Facilmente, podemos dizer que a propriedade Border-Radius era a mais popular do CSS3 quando do seu surgimento, uma espécie de carro-chefe das mudanças e novidades do CSS3. Afinal ela criava cantos redondos em objetos com cantos quadrados, uma verdadeira revolução na época (quem é web designer há algum tempo lembra que os cantos redondos eram feitos com imagens!). Embora fosse uma verdadeira sensação à época, inicialmente muitos web designers ficaram aterrorizados com o fato do código só se tornar funcional em alguns navegadores e com a ideia de que um código CSS pudesse ser apresentado de forma diferente de um navegador para outro. A verdade é que hoje muitos “vilões” responsáveis por esse terror já implementaram a sintaxe oficial, como o navegador Safari, a partir de sua versão 5.0 e o internet Explorer, a partir de sua versão 9.0. Portanto, vamos conhecer o código responsável por esse atributo, onde o valor de Radius é o valor da circunferência, aqui representada em 04 pixels: -Webkit- border -radius:  4px ; -Moz- border -radius:  4px ;   border -radius:  4px ; Círculos Você pode não saber disso, mas também podemos criar círculos com esta propriedade: -Moz- border -radius:  50px ; -Webkit- border -radius:  50px ;  border -radius:  50px ; A propriedade Box-Shadow Em seguida, temos a “quase onipresente” propriedade Box-Shadow , que permite que você aplique uma sombra à caixa, dando imediata profundidade aos seus elementos. Apesar do recursos ser ótimo, use com moderação: cuidado para não tornar tudo muito desagradável ao exagerar nos valores definidos! Originalmente, a propriedade Box-Shadow aceita quatro parâmetros: x-offset (posição do x)  y-offset (posição do Y) blur (desfoque) color of shadow (cor da sombra) -Webkit-box-shadow:  1px  1px  3px  # 292929 ; -Moz-box-shadow:  1px  1px  3px  # 292929 ; box-shadow:  1px  1px  3px  # 292929 ; O que muitos não percebem é que você pode aplicar mais de uma caixa sombreada de cada vez. Isto pode levar a alguns efeitos muito interessantes. Na imagem seguinte, eu uso uma sombra azul e verde para ampliar cada sombra: -Webkit-box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ;   -Moz-box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ;   box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ; Sombras inteligentes Através da aplicação de sombras para as pseudo-classes :: antes e :: depois , podemos criar algumas perspectivas muito interessantes. Aqui está uma de exemplo para você testar: O HTML: <div class="box">   <img src="webdesign.jpg" alt="Tutorial" />   </div> O CSS: .box:antes {      content: '';      position: absolute;      z-index: -1; /* esconde a sombra abaixo da imagem */      /* A sombra*/      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);      -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                      width: 70%;       left: 15%; /* metade dos 30% restantes (veja o width acima) */      height: 100px;      bottom bottom:  0;   } A propriedade Text-Shadow A propriedade Text-Shadow (Sombra do Texto) é muito semelhante a Box-Shadow , ela deve ser aplicada para texto, e recebe os mesmos quatro parâmetros: x-offset (posição do x) y-offset (posição do Y) blur (desfoque) color of shadow (cor da sombra) h1 {      text-shadow: 0 1px 0 white;      color: #292929;   } Contorno de texto Mais uma vez, a propriedade é muito parecida com a Box-Shadow, nela podemos aplicar várias sombras usando uma vírgula como separador. Por exemplo, digamos que queremos criar um efeito de contorno para o texto. Enquanto webkit oferece um efeito de contorno, podemos incrementar o código para que seja visto da mesma maneira em diferentes navegadores (embora não fique tão bonito) usando o método a seguir : body { background: white; }   h1 {      text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;      color: white;   } A  Propriedade Transition Talvez a contribuição mais excitante do CSS3 seja a capacidade de aplicar as animações a elementos sem o uso do JavaScript. Para que você possa visualizar o exemplo, vamos imitar um efeito comum, onde uma vez que você passe o mouse sobre um link, o texto irá deslizar para a direita. O HTML: < ul >      < li >         < a  href = "#" >  Passe o mouse sobre mim  </ a >      </ li >      < li >         < a  href = "#" >  Passe o mouse sobre mim   </ a >      </ li >      < li >         < a  href = "#" >  Passe o mouse sobre mim   </ a >      </ li >      < li >         < a  href = "#" >  Passe o mouse sobre mim   </ a >      </ li >   </ ul > O CSS: ul a {      -webkit-transition: padding .4s;       -moz-transition: padding .4s;      -o-transition: padding .4s;      transition: padding .4s;   }   a:hover {       padding-left: 6px;     } A Transition possui três parâmetros: A propriedade de transição. (Defina este valor para todos , se necessário) A duração O tipo de flexibilização A razão pela qual não se aplicam diretamente a transição para o estado Hover (sobre) é porque, se o fizéssemos, a animação só teria efeito durante o mouseover, ou seja, a passagem do mouse sobre o objeto. Ao tirar o mouse de cima do link, o elemento deve retornar imediatamente ao seu estado inicial. Com tantos recursos e funcionalidades surgindo todos os dias, os profissionais tem cada vez mais a necessidade de estudar CSS. Portanto, para aproveitar as novas técnicas de CSS que ainda não são suportadas em todos os browsers – garantindo a ótima experiência para os usuários – é necessário saber os fundamentos dessa linguagem poderosa.  Portanto, bons estudos! Não pare de praticar! Estas são somente algumas dicas para que você possa expandir o seu universo de conhecimentos sobre o assunto. Futuramente, retornarei ao assunto e mostrarei mais propriedades interessantes. Se você tem dicas sobre posts, quer opinar criticar ou elogiar, não deixe de postar seus comentários no espaço abaixo, eles são importantes para nós. Estamos atentos e dispostos a melhorar cada mais o conteúdo do Blog. Até a próxima postagem!

Como transformar seus ícones em uma fonte web Posted: 02 May 2013 06:41 AM PDT Se você está criando um layout para web, é comum deparar-se com um velho problema: na hora de visualizar ou ampliar os ícones em navegador web, seja na tela do computador ou na tela de um Smartphone ou um Tablet, você percebe que eles perderam alguma qualidade na visualização. Por outro lado, a parte do texto está perfeita, com contornos e cores bem delineados. A solução para esse problema? Transformar os ícones em uma fonte! Então que tal conhecer um método prático e útil de fazer isso para melhorar a qualidade dos seus trabalhos? Pois hoje o Blog Web Design vai te ensinar como. Visualizar imagens e ícones com qualidade perfeita é um desafio, principalmente nos dias de hoje em que os usuário utilizam diferentes formas de acessar um site e abusam do recurso de zoom, ampliando detalhes que na maioria das vezes expõem algumas imperfeições de nossos trabalhos. Muitas vezes, é necessário até mesmo criar imagens de tamanho duplo, para exibi-las na metade do seu tamanho usando regras CSS, mas isso apenas disfarça as imperfeições em uma tela Retina no tamanho normal. Assim que o usuário começar a utilizar o zoom, a indefinição voltará a aparecer. Neste tutorial, veremos como transformar ícones de vetor em uma fonte web usando um ótimo aplicativo da web (e o melhor: gratuito) chamado IcoMoon e depois usar os arquivos da fonte gerada em uma página web com CSS.  As vantagens da utilização de um ícone como fonte Um ícone transformado em fonte tem várias vantagens sobre as imagens bitmap, além de nitidez da imagem. Posso citar algumas: Adequação: Um ícone transformado em fonte será muito menor em tamanho do que uma série de imagens, especialmente se você usou imagens de tamanho duplo para telas Retina. E uma vez que a fonte é carregada, seus ícones aparecerão instantaneamente, sem a necessidade de esperar o tempo de baixar as imagens. Escalabilidade: um ícone de fonte pode ser ajustado para qualquer tamanho, definindo o atributo de font-size no CSS. Isso permite que você a experimentar com diferentes tamanhos enquanto que, para imagens de bitmap, você teria que produzir um arquivo de imagem em cada tamanho. Flexibilidade: efeitos de texto podem ser facilmente aplicados ao seu ícone, incluindo cores, sombras e estados de rolagem. Eles também terão uma boa visibilidade contra qualquer cor ou imagem de fundo. Compatibilidade: fontes da web são suportados por todos os navegadores modernos e navegadores antigos, mesmo o Internet Explorer versão 6 e anteriores. Bom, depois de todas essas vantagens, você ainda tem dúvida de que transformar os seus ícones em fontes é uma grande idéia? Então, que tal começarmos nosso tutorial? Preparando os ícones Para começar, você precisa criar ou editar os ícones em um programa de desenho vetorial que pode ser exportado para o formato SVG, como o Corel Draw, Illustrator ou Inkscape. Geralmente criar é a melhor pedida, mas se está sem tempo, poderá baixar algumas coleções na web e editar no seu programa favorito, decidindo depois quais irá utilizar. Enquanto você está projetando os ícones, você pode trabalhar com as cores que você deseja, mas os ícones devem ter uma cor sólida. Certifique-se de cada um deles fique com aproximadamente o mesmo tamanho. Ter um ícone muito mais alto ou mais largo do que o outro irá tornar mais difícil a construção de uma fonte consistente. Se necessário, faça ajustes na largura e na altura do ícone para que ele corresponda aos outros. “Limpe” o vetor Verifique cada ícone cuidadosamente para ter certeza que não tem imperfeições – como mencionado anteriormente, detalhes que parecem OK em tamanhos menores podem esconder pequenos defeitos quando o zoom for utilizado. Remova os pontos irregulares que encontrar em cada um deles. Lembre-se: em vetor, menos é mais! Quanto menos pontos, mais 'limpo' e perfeito ficará seu desenho. No Illustrator, por exemplo, isso pode ser feito utilizando a ferramenta Caneta e o painel Pathfinder para unir elementos sobrepostos, com a opção Remover ponto de Ancoragem (-) para remover elementos desnecessários do ícone. No Corel Draw, isso pode ser feito com a ferramenta Forma, dando um duplo clique para excluir um ponto e ainda clicando diretamente sobre eles para editá-los. O princípio fundamental é garantir que o seu ícone possa ser visualizado em pequenas escalas. Simplifique tanto quanto possível e procure deixar as formas bem cuidadas e com um acabamento caprichado. Exporte para SVG Agora, selecione um ícone, copie e cole-o em um novo documento (de, por exemplo, 200 × 200 pixels). Se necessário, dimensione o ícone para que ele possa se encaixar. Como sugestão, ative a visualização as réguas do programa e crie linhas-guia para facilitar o seu trabalho.  Importante: Não esqueça que a cor do ícone deve ser sempre preta sobre um fundo branco. Agora, escolha Arquivo > Salvar como e salve o ícone como um arquivo SVG (no Corel, isso é feito através do comando Exportar). Se você ainda não sabe o que é SVG, explico: é uma sigla para Scalable Vector Graphics ou, em português, Vetor Gráfico Redimensionável. Um arquivo SVG é basicamente um mapa em XML que descreve matematicamente uma figura gráfica bidimensional. Funciona como um conjunto de instruções numéricas para realizar um desenho, que são convertidas em imagens por um programa capaz de interpreta-lo (como um browser, por exemplo). Simplificando muito, SVG é um formato de figuras vetoriais que pode ser interpretado por navegadores. Ainda dedicarei um Post sobre o assunto, mas por enquanto você pode ler mais sobre o SVG aqui. Voltando ao nosso tutorial, use as configurações padrão para o SVG. Depois de ter feito isso para todos os ícones que deseja, você está pronto para criar a sua própria fonte. 4. Importe para o IcoMoon Abra o aplicativo web IcoMoon . Para importar um ícone, clique no botão “Import Icons" (Importar ícones) e, em seguida, selecione os arquivos SVG que você deseja adicionar – você pode adicionar vários arquivos de uma só vez. Após esta etapa, eles irão aparecer em  "Your Custom Icons."  (Seus Ícones Personalizados) destacados em amarelo, indicando que farão parte da fonte que você irá criar. Exporte a fonte Você pode clicar no botão “Edit” (Editar) se você deseja ajustar a posição do ícone, o seu dimensionamento ou rotação. Use o botão “Save Copy” (Salvar Cópia) para criar variações do ícone (por exemplo, uma imagem espelhada). Adicione também um nome significativo para o ícone, afinal o usaremos na hora de gerar o nome de classe para ele no CSS. Quando estiver pronto, clique no botão “Font” na parte inferior da tela para começar a gerar a sua fonte. É também o lugar onde você vai associar o ícone a um caractere, por exemplo, se o seu conjunto de ícones será o de seis imagens de uma bola girando, você pode atribuir o caracteres "q", "w", "e", "r", "t" e "y" para os seis quadros. Nas preferências, escolha um nome para a sua fonte. Faça o download dos arquivos Clique em “Download” para baixar o pacote de fontes para a sua máquina. Irá aparecer uma subpasta contendo as próprias fontes (em WOFF, EOT e formatos TTF), bem como uma amostra de páginas HTML e o CSS correspondente. Há ainda um arquivo JavaScript com uma solução se você precisar de alguma informação de suporte ao IE 6 ou 7. Para adicionar as fontes para seu projeto, copie as fontes da subpasta para o seu site. Você pode copiar e colar o CSS do documento style.css em um arquivo CSS do seu próprio site, mas sugiro que  renomeie-o como fonts.css e o mantenha como um arquivo CSS separado. Em seguida, você precisa adicionar uma referência a esse arquivo CSS no arquivo HTML usando o seguinte link: <link rel="stylesheet" href="fonts.css" /> No elemento @ font-face  do arquivo CSS, você vai precisar alterar a URL de referência para a nova localização relativa das fontes, ou você pode simplesmente deixar a pasta de fontes na sua pasta de folhas de estilo. Como invocar a fonte Há duas maneiras de se fazer referência a fonte personalizada, seja por seu caráter (unicode ou nome) ou pelo nome da classe. O primeiro exemplo usa a condição data-icon do HTML5 : <div aria-hidden="true" data-icon="&#x67;"></div> Aqui, a classe é usada para definir o tamanho da fonte. A aria-hidden aqui mostrada será a referência para garantir que o caractere não seja "lido" por programas leitores de tela. O segundo método usa um elemento span: <span aria-hidden="true"></span> Este método é útil quando você deseja que o símbolo seja utilizado em linha com texto normal. Se você quiser fazer um link no ícone, você pode "embrulhar" tudo em um href : <a href="http://www.seusite.com.br"  data-icon="&#x73;"></a> Aqui, eu adicionei a classe iconlink  e adicionei um estado em foco: a.icone_link { font-family: 'sua_fonte_icone'; text-decoration:none; color: #666666; } a.icone_link:hover { text-decoration:none; color: #999999; } Outras sugestões Como acabamos de descobrir com o estado em foco, mudar a cor do ícone é tão fácil como definir da propriedade de cor em nosso CSS. Alterar o tamanho também é tão fácil quanto definir a propriedade font-size. Você também pode definir outras propriedades, como a sombra de texto e transparência. Todos, é claro,  mantendo a resolução da independência de uma fonte. Experimente esse método, tente, faça experiências e eu garanto que você nunca mais vai querer usar ícones em bitmaps novamente! (Ok, eu posso estar exagerando, mas se você tiver tempo e paciência e quiser um site com ícones em alta qualidade, vai considerar ter todo esse trabalho). Gostou da dica? Tem outra sugestão de site para transformar ícones em fontes? Deixe-nos saber nos comentários. Não se esqueça de Curtir se gostou do post e também de recomendá-lo aos seus amigos web designers. O Blog web design agradece a sua audiência e aguarda sua visita aqui no próximo post!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610