[CSS]: Criar efeito "Onclick" com Css

<div align="center"> <img border="0" height="200" src="http://www.paroquiasjb.org/images/pagina/20110617151351/icone_email.jpg" width="200" /> </div> Eu estava fuçando na internet e achei uma dica/função em css muito legal!<br /> este estilo cria um efeito de "OnClick", ou seja,<br /> quando a pessoa clica no link que está utilizando a classe, dará o efeito.<br /> <br /> <style> exemplo:focus { outline:2px solid #c30; color:#00f !important; background:transparent !important; text-decoration:underline; } exemplo:active { outline:2px solid #c30; color:#00f !important; background:transparent !important; text-decoration:underline; } </style> Exemplo:<br /> <br /> <a href="#"><exemplo>Clique Aqui</exemplo></a><br /><br /><br /><br /> <br /> <br /> <br /> <span style="font-size: large;"><b>Como Utilizar ?</b></span><br /> Adicione o código abaixo no css do seu blog,<br /> caso seja blogspot, adicione antes do <style><br /> <code> <span style="font-family: monospace;"></span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>a:focus</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>text-decoration:underline;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>outline:2px solid #c30;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color:#00f !important; </span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background:transparent !important;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br /> <span style="font-family: monospace;">a:active </span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>text-decoration:underline;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>outline:2px solid #c30;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color:#00f !important; </span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background:transparent !important;</span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br /> <span style="font-family: monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br /> </code> E é pronto, está instalado em seu blog! <br /> dúvidas ?, comente!<br /> abraços, até a próxima.

[CSS]: Criar efeito "Onclick" com Css

Eu estava fuçando na internet e achei uma dica/função em css muito legal! este estilo cria um efeito de "OnClick", ou seja, q...

Mais informações »

[CSS]: Aprendendo CSS Aula #1

<div class="separator" style="clear: both; text-align: center;"> <a href="http://algoritmizando.com/wp-content/uploads/2011/03/css-dicas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://algoritmizando.com/wp-content/uploads/2011/03/css-dicas.png" width="200" /></a></div> <br /> Olá, eu estou começando esta seção sobre lições de CSS,<br /> Primeiramente, explicarei os principais assuntos referente a linguagem,<br /> e também mostrarei alguns exemplos do mesmo. <br /> <br /> <br /> <b>Sumário:</b><br /> - <a href="#significa">Oque significa a tag CSS</a><br /> - <a href="#quando">Quando e como deve aplicar CSS</a><br /> - <a href="#testar">Como testo os códigos CSS</a><br /> - <a href="#manipular">Manipulação de unidades em CSS</a><br /> - <a href="#criar">Criando folhas de estilo em CSS</a><br /> <br /> <br /> <br /> <br /> <b>♦ <a name="significa"><font size='4'>Oque significa a tag "CSS" ?</font></a></b><br /> Há tag CSS, significa "<b style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">Cascading Style Sheets" </b><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">é uma linguagem de estilo,</span><br /> <span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">ou seja, que dá estilo as coisas, ela é mais utilizada em</span><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;"> páginas </span><a href="http://suyanwdacio.blogspot.com/search/label/Html" style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">HTML </a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">, </span><a href="http://suyanwdacio.blogspot.com/search/label/Php" style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;">PHP</a><span style="background-color: white; font-family: sans-serif; font-size: 13px; line-height: 19px;"> etc..</span><br /> <br /> <br /> <br /> <br /> <br /> <b>♦ <a name="quando"><font size='4'>Quando e Como devo aplicar "CSS" ?</font></a></b><br /> O Cascading Style Sheets ou CSS, deve ser usado quando você está  criando<br /> uma página e deseja criar um bom design, ele deve ser aplicado entre as seguintes tags:<br /> <code> <style><br /> /* seu código css */<br /></style> </code><br /> <br /> Caso você queira colocar algo em comentário, basta você colocar<b><span style="color: red;"> /*</span></b>  e para fechar <span style="color: red;">*/</span><br /> oque você colocar entre /*  e */ serão ignorados pelo servidor, assim você pode nomear<br /> partes de seu código para você poder entende-lo depois.<br /> <br /> <br /> <br /> <br /> <br /> <b>♦ </b><b><a name="testar"><font size='4'>Como testo códigos "CSS" ?</font></a></b><br /> Os códigos CSS podem ser testados em seu computador por uma página <a href="http://suyanwdacio.blogspot.com/search/label/Html">Html</a>.<br /> vou mostrar um exemplo de código muito fácil em CSS:<br /> <code> <html><br /> <head><title>Exemplo utilização CSS(Aula #1)</title></head><br /> <style><br /> body<br /> {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #000000;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>color: #FFFFFF;<br /> }<br /> </style><br /> Olá, notem que a função "background-color: #000000" coloca a cor do background(fundo) na cor preta, <br /><br /> e a função "color: #FFFFFF" coloca o texto na cor branca.<br /> </html></code>Para visualizar o exemplo acima, basta você abrir o bloco de notas do seu computador<br /> e salvar com a extensão <i>.html</i>, e depois abra o mesmo.<br /> <br /> <br /> <br /> <br /> <br /> <b>♦ <a name="manipular"><font size='4'>Manipulação de unidades em CSS</font></a></b><br /> No CSS cada valor tem sua especificação, por exemplo pixels, pontuação,<br /> abaixo irei mostrar na tabela abaixo os mais usados:<br /> <br /> <table border="1%" cellspacing="1" style="border-collapse: collapse;"> <tbody> <tr><td style="background-color: lightblue;"><b>Unidade:</b></td><td style="background-color: lightblue;"><b>Descrição:</b></td></tr> <tr><td>%</td><td>Porcentagem</td></tr> <tr><td>in</td><td>Polegada</td></tr> <tr><td>cm</td><td>Centímetro</td></tr> <tr><td>mm</td><td>Milímetro</td></tr> <tr><td>em</td><td>Significa "Igual", exemplo:"font-size: 1em;", será interpretado, "o tamanho da fonte será o tamanho atual multiplicado por 1"</td></tr> <tr><td>mm</td><td>Milímetro</td></tr> <tr><td>ex</td><td>é a altura de uma fonte(a altura x é normalmente a metade do tamanho dela.</td></tr> <tr><td>pt</td><td>Ponto(um ponto é o mesmo que 1/172 polegadas).</td></tr> <tr><td>pc</td><td>Pica(um pc é o mesmo que 12 pontos)</td></tr> <tr><td>px</td><td>Pixel(Um ponto na tela do computador</td></tr> </tbody></table> <br /> A maioria dos dados desta tabela foi escrita por min, algumas foram retiradas do <a href="http://ww.w3schools.com/">W3Schools</a>.<br /> cada valor acima pode ser usado da seguinte maneira:<br /> <br /> <code> <html><br /> <head><title>Exemplo utilização CSS(Aula #1)</title></head><br /> <style><br /> body<br /> {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 10px; /* 10 pixels */<br /> }<br /> </style><br /> Aqui se coloca-se um texto para testarmos o nosso código.<br /> </html></code><br /> O código acima coloca todo o texto que está na página ficar em 10 pixels.<br /> notem-se que se utiliza assim:<br /> <br /> <code> <span class="Apple-tab-span" style="white-space: pre;"> </span>font-size:     10px;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>   |<span class="Apple-tab-span" style="white-space: pre;"> </span>| |________|> Unidade, no caso pixels<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>   |<span class="Apple-tab-span" style="white-space: pre;"> </span>| <span class="Apple-tab-span" style="white-space: pre;"> </span><br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>   |<span class="Apple-tab-span" style="white-space: pre;"> </span>|__________|> Número/valor<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>   |___________________|> função que irá ser usada</code>Acima você irá conseguir entender melhor,<br /> lembrando que as unidades acima se aplicam somente em tamanho, largura, altura, posições.<br /> As unidades não se aplicam em cores!<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <b>♦ <a name="criar"><font size='4'>Criando folhas de estilo em CSS..</font></a></b><br /> Para criar funções em CSS, você pode  colocar:<br /> <code>.nome_da_sua_funcao<br />{<br />        // oque fazer<br />}</code> <br /> <br /> Para utiliza-las, é simples, basta:<br /> <code> <div class='nome_da_sua_funcao'><br /> Oi, este é um texto como exemplo.<br /></div> </code><br /> <br /> Vou mostrar um estilo que coloca o background da frase em rosa, muito legal: <br /> <br /> <br /> <code> <style><br /> .pinkground<br /> {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>background: #FF0FFF;<br /> }<br /> </style><br /> <br /><br /> <div class="pinkground"><br /> Aqui se coloca-se um texto para testarmos o nosso código.</div></code> O código funcionaria desta maneira: <style> .pinkground { background: #FF0FFF; } </style> <br /> <div class="pinkground"> Aqui se coloca-se um texto para testarmos o nosso código.</div> <br /> e fica por hoje nossa primeira aula sobre css,<br /> por enquanto eu expliquei a lógica e ensino que é bem necessário<br /> para aprender. logo postarei a segunda aula, abraços.

[CSS]: Aprendendo CSS Aula #1

Olá, eu estou começando esta seção sobre lições de CSS, Primeiramente, explicarei os principais assuntos referente a linguagem, e també...

Mais informações »

[PHP]: Listar diretório com imagens

<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.nerdnanet.com/wp-content/uploads/2011/12/php1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="http://www.nerdnanet.com/wp-content/uploads/2011/12/php1.png" width="200" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> Saudações,<br /> Há algum tempo atras, eu criei uma função que exibi-se o diretório(<a href="http://suyanwdacio.blogspot.com/2012/01/php-funcao-para-listar-o-diretorio.html" target="_blank">Função para exibir diretório</a>),<br /> agora criei uma página na internet que exibe as pastas e arquivos. muito útil.<br /> <br /> <b>ScreenShot:</b><br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaOv6Xe5-FSmuk8oRUPzzCBlA5ZTHmXtybCY70tiFas_2cmHGpSAlRu7QEYAfIjmVUY5JvbpSF_EOJ-wysUQX8oLl-0zEFm0ZC-pPS_Unh2xv2Ky2GrgYel_wpWoy_h_fhfeE8m4ceJ8/s1600/diretorio.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaOv6Xe5-FSmuk8oRUPzzCBlA5ZTHmXtybCY70tiFas_2cmHGpSAlRu7QEYAfIjmVUY5JvbpSF_EOJ-wysUQX8oLl-0zEFm0ZC-pPS_Unh2xv2Ky2GrgYel_wpWoy_h_fhfeE8m4ceJ8/s1600/diretorio.PNG" /></a><br /> <br /> como vocês podem notar, as pastas tem esta imagem: <img src="http://images-2.findicons.com/files/icons/765/xedia/128/folder.png" width="18" />,<br /> agora os arquivos, tem esta imagem:<img src="http://images-5.findicons.com/files/icons/2166/oxygen/48/document_import.png" width="18" />, muito simples de usar.<br /> <br /> <b>Como Instalar:</b><br /> Coloque o script abaixo na pasta que queira exibir o diretório,<br /> ai é só acessar ela :)<br /> <br /> <b>Download</b><br /> <a href="http://pastebin.com/48Av2mjJ" target="_blank">Pastebin</a><br /> <a href="http://suyann.6te.net/Blog/dir.php" target="_blank">Preview</a><br /> <br /> Abraços, até a próxima.

[PHP]: Listar diretório com imagens

Saudações, Há algum tempo atras, eu criei uma função que exibi-se o diretório( Função para exibir diretório ), agora criei uma página...

Mais informações »

[CSS]: Efeito neon (Blogger/Orkut)

<div style="text-align: center;"> <img height="133" src="http://static.freepik.com/free-photo/electronics-industry-neon-white-background-spiral_3106003.jpg" width="200" /></div> <div style="text-align: center;"> <br /></div> Título: Como criar textos com efeito neon (Blogger/Orkut)<br /> <br /> Se você irá por no blogger, você tem que fazer uma classe em CSS:<br /> <code><br /> #menu{}<br /> #menu:hover<br /> {<br />         text-shadow: 0px 0px 10px #00FF00;<br /> }<br /> </code><br /> <style> #menu{} #menu:hover { text-shadow: 0px 0px .3em #00FF00; } </style><br /> No exemplo acima, o link ficará com efeito neon, veja:<br /> passe o mause encima do link:<br /> <div class="menu"> <a href="http://www.blogger.com/post-create.g?blogID=6606968305992689300#" id="menu">Link</a></div> <br /> Viu como é fácil ?<br /> Agora, caso você queria colocar no Blogspot(blogger),<br /> é só ir no Design ~> Editar Html e procurar por <b>a:hover</b>,<br /> substitui tudo que está dentro por:<br /> <code><br /> text-shadow: 0px 0px .3em #00FF00;<br /> </code><br /> <br /> Mais se você queira colocar em um post do orkut é um pouco diferente,<br /> <code><br /> <p style='text-shadow: 0px 0px  .3em #00FF00;'> Meu Texto </p><br /> </code><br /> Ficando:<br /> <div style="text-shadow: 0px 0px .3em #00FF00;"> Meu Texto </div> <br /> Agora, se você quiser mudar a cor do neon, é só mudar esta parte da linha <b>00FF00</b>,<br /> você pode conseguir as cores aqui: <a href="http://www.ufpa.br/dicas/htm/htm-cor2.htm">http://www.ufpa.br/dicas/htm/htm-cor2.htm</a>.<br /> <br /> Abraços,

[CSS]: Efeito neon (Blogger/Orkut)

Título: Como criar textos com efeito neon (Blogger/Orkut) Se você irá por no blogger, você tem que fazer uma classe em CSS: #menu{} ...

Mais informações »