CSS: Alternative Style Sheets

Postado por: Pedro Rogério em
  • 15 jun
  • 3

Você sabia que um documento HTML não precisa necessariamente ter uma única folha de estilos? Você pode proporcionar ao usuário várias outras folhas de estilo em um único documento HTML para que o mesmo possa escolher a que melhor se adequa a seu gosto, ou partindo para o lado da acessibilidade, criar folhas de estilo de alto contraste que facilite a leitura de usuários com baixa visão.

Criar folhas de estilo alternativas não exige muito esforço e não tem segredo algum, você só vai encontrar dificuldade devido a alguns browsers que não suportam essa opção, mas, por exemplo, no firefox você pode ir até Exibir > Estilos da página e trocar as folhas de estilo dentre as disponíveis, se é que o site disponibiliza essa opção.

Para incluir folhas de estilos extras em seu site, basta utilizar da tag HTML <link>, com o atributo REL que deve conter o valor alternate e o atributo title:

<link rel="stylesheet" type="text/css" href="default.css" title="Default CSS" />
<link rel="alternate stylesheet" type="text/css" href="simple.css" title="Simple CSS" />
<link rel="alternate stylesheet" type="text/css" href="dark.css" title="Dark CSS" />

A primeira folha de estilos foi a que eu defini como padrão, as outras duas a seguir são as folhas de estilo alternativas, pois como podem observar, elas possuem o atributo re=”alternate stylesheet” e só serão carregadas se o usuário alterá-las no browser. Para que vocês entendam como isso funciona, dêem uma olhada no exemplo que criei para esse tutorial.

Style Switcher com jQuery

Postado por: Pedro Rogério em
  • 9 jun
  • 2

A jQuery proporciona uma forma muito simples de você desenvolver Style Switchers (troca de folhas de estilo) em seu site sem ter que digitar várias linhas de código. O exemplo que vou mostrar aqui ainda faz o uso de Cookies para que aquele CSS escolhido pelo usuáro possa ser carregado novamente quando o mesmo voltar a página.

Primeiramente você deve fazer o uso da biblioteca jQuery, e após criar suas folhas de estilo como desejar. Nesse exemplo vou utilizar 3 arquivos CSS que somente irão efetuar uma alteração na cor de fundo do layout, mas você pode definí-las como quiser.

<link rel="stylesheet" type="text/css" href="estilos.css" title="normal" />
<link rel="stylesheet" type="text/css" href="estilopreto.css" title="preto" />
<link rel="stylesheet" type="text/css" href="estilovermelho.css" title="vermelho" />

É muito importante você definir um título para suas folhas de estilo pois futuramente iremos chamá-las no JavaScript através do title das mesmas. O passo seguinte é o nosso HTML:

<ul>
	<li><a href="#" rel="normal" class="styleswitch">Estilo 1</a></li>
	<li><a href="#" rel="vermelho" class="styleswitch">Estilo 2</a></li>
	<li><a href="#" rel="preto" class="styleswitch">Estilo 3</a></li>
</ul>

Continuar lendo »

Inserir Flash em XHTML

Postado por: Pedro Rogério em
  • 20 mai
  • 18
Flash

A grade maioria dos desenvolvedores sabe que a tag embed caiu em desuso desde 2006 por se tratar de uma tag proprietária da Netscape, assim não obedecendo aos WebStandards.

É comum você ver por aí códigos que ainda utilizam embed, como no Youtube, vejam esse código de exemplo abaixo para entenderem o que estou dizendo:

<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/YV3gxkXpkno&hl=pt-br&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/YV3gxkXpkno&hl=pt-br&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

Esse código faz a utilização de embed, deixando assim seu HTML inválido. Uma forma simples e correta de escrita do mesmo código acima pode ser utilizada da forma abaixo:

Continuar lendo »

Cubo 3D com CSS

Postado por: Pedro Rogério em
  • 14 mai
  • 6

Você sabia que pode criar um cubo 3D utilizando modernas técnicas de CSS, sem a utilização de JavaScript, canvas, imagens ou SVG? Utilizando a propriedade transform e skew você pode criar cubos para formar um objeto 3D. Atualmente essa funcionalidade só funciona em browsers baseados no motor de renderização Gecko, especificamente no Firefox 3.5+, utilizando -moz-transform, e no Safari 3.2+, que utiliza Webkit, através de -webkit-transform.

Cubo 3D com CSS

Se você utiliza algum desses browsers, veja esse exemplo que preparei. Se você quer aprender a desenvolver um cubo semelhante a esse, basta dar uma olhada no tutorial que Paul Hayes desenvolveu.

O que é DHTML?

Postado por: Pedro Rogério em
  • 13 mai
  • 4
DHTML

A maioria dos desenvolvedores web, na verdade, não sabem, ou têm apenas uma vaga idéia do que significa o termo, portanto, vou tentar explicar da forma mais simples possível o que é DHTML. Quando a versão 4 dos browsers Netscape e Internet Explorer foi lançada ocorreu uma pequena revolução na Internet. Enquanto o suporte a CSS nesses browsers era precário estava nascendo uma nova união de tecnologias que iria revolucionar a forma de desenvolver páginas web. Foi então que no final dos anos 90 e início do ano 2000 nascia o DHTML (Dynamic HTML).

DHTML é a união das tecnologias HTML, Javascript e CSS aliado ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. Quando você efetua mudanças de estilo em elementos HTML e a mudança é registrada imediatamente sem o recarregamento da página, você está vendo um exemplo de DHTML. Você também pode fazer o usuário integarir com a página escondendo e mostrando elementos, mover elementos na página, mudar cores.

Continuar lendo »

Páginas:«12345678910...22»