Descompactar urls com Long URL Please

Urls compactadas tem como principal uso poupar espaço, principalmente em redes sociais, em que há um limite de carácteres por mensagem. Porém nem sempre esse artifício é utilizado com boas intenções, sendo muitas vezes arriscado clicar em qualquer link encontrado por ai.

Long URL Please é um complemento para firefox que tem a função de mostrar o endereço original escondido por trás da maioria desses links.



A sua utilização é bem simples, basta instalar que ele faz o resto sozinho.
Para baixar o Long URL Please acesse:

• https://addons.mozilla.org/pt-BR/firefox/addon/9549/.

Dica via: @softonic_br em http://long url-please.softonic.com.br/

Continuar lendo ... "Descompactar urls com Long URL Please"

Efeito mouse hover em Li pai de menu drop down

-Nota: "Este tutorial visa personalizar um menu drop down já pronto, fazendo com que o 'Li pai'(Menu Pai) dos submenus fique destacado quando estivermos com 'mouse hover' sobre os submenus"

Para explicar melhor o que iremos fazer seguem duas imagens:

A primeira é como geralmente se comporta esse tipo de menu. Note que o menu About não apresenta a imagem quando navegamos pelos seus submenus:



Já a segunda é o nosso objetivo, ou seja, o menu About(Li pai) mostra uma imagem quando navegamos pelos submenus:



Lembrando que esse tutorial foi baseado no modelo de menu drop down ensinado por Maujor.
Mãos à obra!

1-Na primeira parte definimos a imagem que aparecerá no estado mouse hover sobre todos os links do menu:

Créditos: 10calco.blogspot.com

#drop-down ul li:hover a {
background-image: url(...imagem do estado mouse hover...);
}

...
...

2-Na segunda parte vamos enganar o css, fazendo com que a imagem acima não apareça nos submenus.
Digamos que cada item do nosso menu apresente um degrade azul como background. Então no código abaixo vamos definir esse mesmo degrade aos submenus.
Se não fizermos isso, quando colocarmos o mouse sobre o menu pai a imagem do estado mouse hover aparecerá sobre todos os itens do submenu:

#drop-down li ul a {
background-image: url(Ex: degrade_azul.jpg) !important;
}

...
...

3-Por último mostramos a imagem do estado mouse hover novamente, mas dessa vez ela aparecerá somente enquanto estivermos com o mouse sobre cada item do submenu:

#drop-down li ul a:hover {
background-image: url(...imagem do estado mouse hover...) !important;
}

Créditos: 10calco.blogspot.com
O resultado será semelhante ao mostrado na segunda imagem postada nesse artigo.
Note que foi declarado !important nas duas últimas partes do código, caso contrário ele não funcionará como previsto.

Caso seja necessário redimensionar alguma das imagens usadas veja Redimensionar imagens com CSS.

Continuar lendo ... "Efeito mouse hover em Li pai de menu drop down"