Baseado nos Cheat Sheets das linguagens de programação, nasceram os Widgets para o dashboard do MacOS que lhe ajudarão a ter uma melhor referência quenado estiver desenvolvendo uma aplicação. Por enquanto só estão disponíveis os de CSS e PHP, mas com certeza, logo estarão disponíveis para outras linguagens.
Via Anieto2K.
Recentemente estive pensando em uma forma de ocorrer uma maior “interação” com os usuários desse que diariamente lêem esse blog, e ontem cheguei a conclusão de que a partir de agora, você que tem vontade de escrever sobre WebStandards, HTML, XHTML, CSS, ASP, PHP, Ruby, Receita de bolo, e tudo mais relacionado a Desenvolvimento Web, estarei cedendo o espaço para você publicar aqui seus artigos. Aproveite que essa é a hora de você retirar aquele seu artigo empoeirado da gaveta e mandar aqui pra mim publicá-lo. Mas como nem tudo são flores, algumas regras básicas deverão ser seguidas:
Seguindo essas regras básicas, em no máximo 24 horas seu tutorial será publicado aqui no blog com os devidos créditos dados.
São 147 cores com seus respectivos códigos hexadecimais definidos de acordo com a especificação de cores das CSS3, coloquei os arquivos aqui para download em PNG e PDF.
Vi aqui: PageFace.
Antigamente para se fazer rollover em imagens utilizava-se de JavaScript, utilizando os eventos onMouseOver e onMouseOut, e também de 2 imagens separadas, mas com CSS, você simplesmente precisa de uma só imagem com os 2 estados, ode iremos deslocar a imagem para as coordenadas necessárias para que tenhamos o efeito de rollover. Utilizaremos a seguinte imagem nesse tutorial:
a.srollover {
display: block;
width: 22px;
height: 22px;
background: url("pbox_close.gif") 0 0 no-repeat;
text-decoration: none;
}
a:hover.srollover {
background-position: -22px 0;
}
Se repararem, a imagem possui 44 pixels de largura, mas no CSS eu só marquei 22 e posicionei a imagem a 0 pixels de sua margem, por que logo após, eu criei uma regra para que a imagem se desloque no eixo X 22 pixels para a esquerda, é onde acontece o efeito de rollover. O HTML fica da seguinte forma:
<a class="srollover" href="#"> </a>
Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive.
CSSFly é uma ferramenta online onde, além de você poder editar o HTML de qualquer página, pode também editar o CSS e ver as mofdificações em tempo real. Seu funcionamento é muito simples, ele abra um frame na página com o código a ser alterado e as modificações vão acontecendo no outro frame que está o site em tempo real. Se você quer fazer um teste, basta abrir qualquer site(pode testar aqui mesmo), e digitar o seguinte código na barra de endereços:
javascript:what=document.URL; var re2=new RegExp('http:\/\/','g'); what = what.replace(re2,'http://www.cssfly.net/t/'); top.location.href=what;
Ou se prefirir, visite o site e faça as edições por lá.
Com a utilização das CSS para formatar nossas páginas, a cada dia nós vamos descobrindo técnicas novas, e isso acaba nos oferendo um maior controle sobre nosso código sem sobrecarregar o HTML com várias classes e id’s desnecessários. Para conseguirmos essas melhoras, devemos utilizar de seletores, que desta forma podere-mos manipular um ou vários elementos que temos em nosso HTML. Sua função é semelhante as expressões regulares, onde os seletores nos permitem utilizar de caracteres especiais para nos referirmos a um elemento ou a vários deles.
| Seletor | Descrição |
| * | Selector universal, todos os elementos do CSS |
| E | E representa qualquer elemento do tipo E (span, p, …) |
| E F | Todos os elementos F que sejam descendentes de E |
| E > F | Todos os elementos F que sejam filhos de E |
| E:first-child | Desta forma podemos selecionar o primeiro elemento do tipo E |
| E:link , E:visited | Selecciona os elementos E que sejam links e que não foram visitados (:link) e os visitados (:visited) |
| E:active , E:hover , E:focus | Seleciona os elementos do tipo E, em suas correspondentes acões. |
| E:lang(c) | Todos elementos do tipo E que contenham o idioma (humano) especificado em (c). |
| E + F | Se trata de qualquer elemento F imediatamente depois do elemento do tipo E |
| E[foo] | Elementos do tipo E que contenham o atributo foo |
| E[foo=”exemplo”] | Elementos do tipo E que contenham o atributo foo igual a “exemplo” |
| E[foo~=”exemplo”] | Elementos do tipo E com o atributo foo contendo “exemplo”. Pode-se utilizar várias palavras separadas por espaços. ( ~ =ALT + 0126) |
| E[lang|=”pt”] | Similar ao exemplo anterior, a única diferença é que aqui se referirá a todos os elemento E que onde o atributo lang começa por “pt”. Por exemplo: “pt_BR”, “pt_PT”,… |
| E[foo$=”exemplo”] | Elementos do tipo E onde o atributo foo termina com “exemplo”. |
| DIV.exemplo | Todos los elementos DIV que sejam da la classe exemplo |
| E#myID | O elemento E onde sua ID é igual a myID |
Além desses seletores, poderemos fazer a utilização de vários outros, os chamados pseudo-elementos.
É o que propõe em seu site Katherine Angela Gallia, ela utiliza 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, ela utiliza-se do seguinte código:
<script language="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";
var css = '< '; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>';
document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>
Onde:
Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>
Até me deu vontade de fazer isso aqui no meu blog agora.
