» Arquivo do blogue » Estilizando o curso de CSS Avançado Niquelao Estilizando o curso de CSS Avançado 8 de Novembro de 2009, por Rumoroso Há uns dias estive em Saragoça a dar um curso sobre CSS avançado (incluído no catálogo de cursos da CTIC ). Como é lógico, e especialmente por se tratar de um curso sobre folhas de estilo e técnicas avançadas, preparei a apresentação em rumoslide (como 95% dos utilizadores lhe chamam, no final ficará com esse nome).

A questão é que a extensão do temário (ou o tempo apertado) fez com que ficasse com vontade de comentar algum detalhe sobre os estilos que empreguei na apresentação . Precisamente para isso pus-me a escrever este artigo (bem, e também para retomar o hábito de escrever periodicamente no blogue). Como é lógico, o início é o início, pelo que hoje é a vez da capa : Da capa o que quero comentar é o que fiz com o título da apresentação . A minha ideia era destacar ambas as palavras ( CSS e avançado ), tentando fazê-lo com suficiente ênfase individual para cada uma, mas cuidando que não perdessem a sua união.

Para isso, entre outras coisas, joguei com o tamanho e a cor das fontes (grande e clara vs menor e escura) e com a sua posição (sobreposição parcial). Primeiro, o código HTML que utilizei:

CSS Avançado

E a seguir o CSS e a sua explicação: h1 { font-size: 7em; color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } A ideia foi estilizar primeiro as letras CSS do cabeçalho.

Como o resto do texto está incluído num span , pode aplicar-se um estilo genérico para o h1 para depois compensar o efeito sobre este. Assim, declarei um tamanho de fonte suficientemente vistoso (7em), uma cor que combinasse de forma adequada com o resto dos estilos empregues e que não fosse demasiado intensa, a altura de linha e o estilo itálico. Além disso, apliquei-lhe umas margens, tendo em conta que queria separá-lo da esquerda em 20% da largura total.

Por fim, pus-lhe uma linha inferior de 3px (a cor herda-a da tipografia). Juntamente com estes estilos, como a sobreposição de palavras a consegui com posicionamento absoluto (mais adiante comento isso), recorri a inicializar as coordenadas dos descendentes do cabeçalho posicionando-o em relativo.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

O controlo sobre o que transborda (overflow: hidden) acrescentei-o a posteriori (porque vi que o resultado ficava elegante) após estilizar o resto do cabeçalho. Com isto consegue-se que a parte inferior da palavra avançado oculte ao sobressair sobre os limites do h1 . A seguir estilizei a palavra avançado : h1 :first-child { font-size: .5em; font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } Para evitar a marcação adicional joguei com os seletores.

O termo avançado está no primeiro elemento descendente do h1 , pelo que a seleção se realiza mediante a pseudoclasse :first-child . Primeiro, alterar as propriedades da fonte (reduzir tamanho, alterar cor e eliminar o itálico).

A sobreposição fiz através de posicionamento absoluto (as coordenadas tomam-se em relação à posição do h1 ao lhe ter declarado posicionamento relativo a este). Por fim, dei-lhe um toque extra jogando com a sua opacidade (recorri às propriedades com prefixos específicos que permitem que se veja corretamente nas versões mais atuais dos navegadores). E agora a pergunta: como consegui o efeito do degradê branco?. A resposta é simples e baseia-se no seguinte código: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } O span vazio que acrescentei (e que de certeza que a alguns já soava estranho) é o que se encarrega deste efeito.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Na realidade a ideia é simples. Pode conseguir-se o efeito pondo sobre o texto uma imagem png com um degradê de cor que vá de branco a transparente (o branco é pelo fundo da página). Para isso selecionei o span mediante um seletor contextual (é o span que vai atrás de outro span , pelo que span + span ), posicionei-o em absoluto e fiz com que ocupasse 100% da largura e altura do cabeçalho (ao posicionar o span , passa a admitir dimensões).

Depois acrescentei-lhe a imagem do degradê como fundo alinhado na parte inferior (como é uma imagem estreita, fiz com que se repetisse sobre o eixo x). E pronto… O resto dos estilos aplicados à capa (rodapé e logótipo) mantêm-se constantes ao longo dos diapositivos da apresentação. Em geral são bastante simples, pelo que os comentarei rapidamente (talvez os detalhe quando mencionar os estilos de outras secções em artigos posteriores).

Dizer que o rodapé é um contentor genérico que inclui uma lista (à qual retirei os bullets). Pus-lhe uma cor de fundo intensa próxima do laranja CTIC e uma imagem (também de fundo) colocada à direita.

Além disso, posicionei-o fixed na parte inferior do ecrã porque não queria que se deslocasse com o scroll vertical (isto serviu-me de exemplo durante o curso). Quanto ao logótipo, é um svg incluído no elemento object . O que fiz foi posicioná-lo em absoluto lá em cima e mantê-lo assim durante toda a apresentação. Em breve comentarei alguns outros exemplos de estilo que apliquei ao longo da apresentação, como por exemplo, a forma como consegui o fundo bicolor com as letras CSS, etc.

Estilizando o curso de CSS Avançado Categoria: CSS —> 3 comentários Estilizando o curso de CSS Avançado 8 de Novembro de 2009 […] Texto completo em Niquelao : Estilizando o curso de CSS Avançado […] Niquelao » Arquivo do blogue » Outro toque de estilo no Curso de CSS 11 de Novembro de 2009 […] já fiz na entrada anterior (estilizando o curso de CSS Avançado), vou continuar a comentar algum dos estilos que utilizei na apresentação do curso de CSS para Saragoça[…] Outro toque de estilo no Curso de CSS 12 de Novembro de 2009 […] já fiz na entrada anterior (estilizando o curso de CSS Avançado), vou continuar a comentar algum dos estilos que utilizei na apresentação do curso de CSS […] Podes fazer um acompanhamento dos comentários graças ao feed RSS 2.0 .

Também podes enviar um trackback do teu site. Artigo anterior: The best… made with CSS Artigo seguinte: Outro toque de estilo no Curso de CSS —> —> —> Esta obra está sob uma licença de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.