O grande papel do desenvolvedor Front-End, na minha opinião, é traduzir em tags html, folhas de estilos e programação Javascript ou até mesmo uma linguagem backside, aquilo que o designer de interface criou e espera estar disponível a clicks e à leitura dos usuários. Ao meu ver, este é o nosso grande trabalho, recriar interfaces de forma adaptada aos diversos browsers de mercado e às diversas possibilidades tecnológicas que temos na web respeitando os limites dos padrões online e a essência da criação visual.
Com a “quase” padronização entre browsers, as infinitas possibilidades Front-End e a atualização do html, nós teremos a chance de ampliar conhecimento saindo do estigma de “recortes de imagens” ou criadores de códigos não planejados e nada semânticos. Já comentei algo a respeito em outro artigo e reforço a mensagem neste, pois o assunto é novas tecnologias e novo aprendizado, sendo assim, esta questão de mercado também deverá vir à tona quando o desenvolvimento web começar a exigir o uso do HTML5 e seus companheiros.
De fontes não pertencentes ao grupo das WebFonts à sombras e gradientes, o CSS3 promete revolucionar e dar ao desenvolvedor ainda mais possibilidades de traduzir elementos visuais em códigos dentro de folhas de estilo diminuindo consideravelmente o “recorte de imagens”.
De antemão, eu alerto: não vamos sair por aí já utilizando essas possibilidades, salvo em casos de testes, pois as devidas documentações normativas ainda estão sendo escritas pela W3C e muitos browsers ainda não conseguem renderizar algumas propriedades.
Afinal o que vamos poder realizar com o CSS3?!
Primeiramente, enfatizo duas das novas possibilidades do CSS3 já descritas aqui no Tableless – o uso das propriedades “font-face” e do “background gradient”.
Imaginou poder colocar em seu website uma fonte da família “Butter” e fazer um gradiente radial sem precisar recortar imagens de repetição? Pois estas duas propriedades nos auxiliarão nesta missão. Abaixo, o link para os dois artigos – tutoriais criados pelo Diego falando melhor sobre o assunto:
@font-face – https://tableless.com.br/font-face-fonts-externas-na-web
Gradientes em CSS3 – https://tableless.com.br/gradientes-em-css
No seletor “background”, duas novas possibilidades que prometem resolver parte dos problemas que tínhamos com layouts e vários tipos de imagens de fundo são – o uso de múltiplos background’s e a inserção de dimensões para imagens de fundo. Dessa maneira, com o CSS3 vamos poder adicionar mais de uma url de uma imagem de fundo para um mesmo elemento:
E especificar o tamanho de imagens de fundo:
Textos poderão receber fontes “não padrão” utilizando a propriedade @font-face, anteriormente comentada, e poderão também receber a propriedade “text-shadow” que adicionará sombra ao texto e será declarada da seguinte forma:
Além de famílias de fontes e sombra, ainda serão permitidas algumas propriedades relacionadas ao redimensionamento de elementos que contenham textos, como div’s, por exemplo, permitindo adicionar reticências automaticamente a textos que vão além das dimensões do elemento onde estão contidos, como na declaração abaixo de exemplo:
As bordas também ganharão novas propriedades com grande expectativa para as bordas arredondadas. Além desta propriedade, as bordas poderão receber url de imagens como valores, tanto para top, bottom, left e right, quanto para o cantos. Exemplos das propriedades e valores para bordas:
ex 1:
ex 2:
As cores também poderão ser declaradas não apenas em números hexadecimais, mas também em RGB e RGBA, além de valores para HSL e HSLA. Exemplo:
Para finalizar essa breve introdução ao que nos será possível realizar com a chegada do CSS3, tão importante quanto as demais propriedades, será a propriedade “column”, que vai permitir ao desenvolvedor já estabelecer em quantas colunas um determinado conteúdo deverá ser divido, bem como o espaçamento e a largura que existirá entre elas. Esta propriedade, por enquanto, é aceita apenas pelo Firefox e pelo Safari. As declarações serão feitas desta forma:
Ao que tudo indica, nosso trabalho tende a se direcionar muito mais a arquitetura das propriedades que utilizaremos nas folhas de estilo buscando fazer uma tradução perfeita das interfaces criadas pelos designers, do que à adição desenfreada de “slices” em PSD’s.
Essas novidades ainda estão em estudo, testes e em padronização pela W3C, de qualquer forma, vale já começar a se familiarizar com que está por vir, principalmente no que diz respeito aos companheiros do HTML5 que prometem revolucionar o “jeito de se fazer websites”.