Tutorial - Alguns exemplos de CSS3 + HTML5

Atenção use por sua conta e risco

Se você gostou pode colocar ou usar alguns destes códigos em seu blog ou postagem. Para isso você terá que editar o modelo que usa no Blogspot e acrescentar os códigos a seguir:
Vá no seu painel de administração do Blogspot e abra a edição do "Modelo", em seguida clique em "Editar HTML", na janela que se abriu, marque a a CAIXA "Expandir modelos de widgets", agora use "CTRL+F" e mande localizar a tag "/head", a busca deverá encontrar apenas uma tag desta, agora vem a parte fácil, basta copiar todo o código da caixa "ABAIXO" e colar (ATENÇÃO) acima da tag "/head", salve ou visualize seu modelo, se não apareceu nenhum erro poderá fechar a edição do modelo e começar a usar as novas formatações em suas postagens.



Agora vou deixar para vocês alguns exemplos de uso para os "estilos ou styles" que você acabou de adicionar ao seu modelo.

Nos itens a seguir tem um exemplo visível funcional e uma caixa com o código para que você possa usar em suas postagens, claro que você deve mudar os endereços de links, imagens, etc... para que fiquem de acordo com as suas necessidades.

Exemplo 01


sudo add-apt-repository ppa:upubuntu-com/ppa  ENTER 
sudo apt-get update  ENTER 
sudo apt-get install package-converter  ENTER 

Exemplo 02



Exemplo 03







Exemplo 04



Exemplo 05



Exemplo 06


Isso é possível ???


Com o seu texto digitado aqui,
podemos rotacionar o mesmo em tempo de execução,
com isso podemos dar vida a nossas páginas de forma
fácil e bastante intuitiva para os habitantes da TERRA!
                                         By Virmal_divx

Exemplo 07


Usando Colunas


Dia e noite em frente ao monitor, um desfile de informação, sobre o teclado meus dedos escravizados, ombros cansados, olhos fixos mente viajando sem notar.

O som do cooler em minha mente, a estática a minha frente, ao meu redor nada muda, sensação de desconforto em meu coração, minha alma clama por liberdade.

Não há felicidade numa vida assim, mas algo em mim se satisfaz com isso, não sei o que é, mas preciso de tudo isso, muitos não acreditam, outros criticam, nem ligo.

Rezo para que tais dias acabem, Mas também para que eu possa, continuar em contato com a tecnologia, da qual vivo e na qual me desenvolvo, já nem sei mai.s

Sigo em frente, sentado nesta cadeira, seja em casa ou no escritório, sem saber se é o caminho certo, mas sei que é o meu caminho, sei que é o que faço de melhor.


Exemplo 08


Inserindo navegação por teclas - Acessibilidade



Informações Pessoais SHIFT + ALT + N
SHIFT + ALT + E
SHIFT + ALT + M


Visitar o artigo Acessibilidade com o Atributo accesskey


Exemplo 09


Galeria de imagens/links


Exemplo 10


Eu sou uma listagem


  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Exemplo 11


"p"


"h1"


"h2"


"big"

"huge"

"giany"


"super-huge"

"ds3"

"ultra"

"mega"

"master"

Exemplo 12


"Fundo Vermelho"

Exemplo 13


"Letras Brancas"

Exemplo 14


Usando "caixa"

Isso é só um gostinho!!!

Você pode combinar as tags, criar outras, acrescentar mais estilos, sendo assim o ESTUDO é o limite, por isso dedique um pouco de seu tempo para aprender um pouco mais dessa linguagem que permite não só postagens bonitinhas e com algumas firulas, mas se você for verificar um pouco mais a fundo verá que é possível construir Games e Aplicativos para Desktop, Notebooks, Tablet e Celulares, ou seja, é multiplataforma.

Até a Próxima!!!


0 comentários:

Copyright © 2013 O Espaço do Software Livre