A Sitepoint disponibilizou para download GRATUITO um pdf do livro THE PHOTOSHOP ANTHOLOGY: 101 Web Design Tips, Tricks & Techniques, completo com quase 300 páginas. O arquivo está disponibilizado agora, vai ficar lá por tempo limitado. Então anda logo e baixa um para você, dei uma passada de olho rápido, e o conteúdo é muito bom, tanto para quem está começando quanto para os photoshopers de longa data!
Enjoy!!!!
O post de hoje é fora do CSS. Já fiz muito artigo.. he. Vou dar só uma pausa neles.
Esse artigo é uma lista dos meus brushes favoritos. Aqui eu coloquei só trinta e três, mas deve ter pelo menos uns 50. A maioria eu peguei no search do deviantART, e sempre que preciso de mais o primeiro lugar que eu visito é lá.
Se eu baixar novos eu posto aqui para vocês. ;)
Só mais uma coisa, esse artigo eu fiz para uma nova amiga que vive falando que não entende os artigos de CSS, Silvia: olha, tutorial não vai dar não, mas pelo menos uns brushes eu te recomendo!!!! ;)
Visitem a minina no deviantART dela (que tem montagens ótimas) e no seu blog.
ps.: A maioria dos brushes são compatíveis só com as versões acima do Photoshop 7.
A propriedade de opacidade do CSS3 pode ser usada em cima de imagens ou fundos escuros para que possamos destacar algum outro conteúdo, como textos, formulários ou menus.
Como a maioria das propriedades do CSS3, essa também ainda não funciona nos navegadores mais antigos ou em outros que não seguem o padão W3C, por isso não é muito recomendado em alguns casos. Veja a lista de compatibilidades abaixo:
Funciona:
» Firefox 2 e 3beta4
» Safari 3.0 win e Safari 3.1 win
» Opera 9.5beta
Não funciona:
» IE 5.5, IE 6 e IE 7 (com filtros)
» IE 8beta1
» Konqueror 3.5.7
Essa propriedade pode ser aplicada à todos os elementos da página. Seu valor fica entre 0.0 e 1.0 sendo 0.0 completamente transparente.
Agora mostrarei um exemplo simples. O arquivo fonte pode ser baixado aqui (arquivo .zip).
<div id="container">
<div class="opacidade" />
<div class="txt">
<h1>Opacidade CSS3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sapien odio, elementum ut, bibendum sed, laoreet vel, tortor. Nulla sed dui et lorem pellentesque varius.</p>
</div>
</div>
O código HTML deve posuir uma div vazia para o efeito de opacidade e a div do conteúdo ("txt") com o que você quiser dentro. Criei a div "container" para melhor visualização do conteúdo.
.opacidade {
background:#FFF;
bottom:10px;
height:118px;
padding:10px;
position:absolute;
right:10px;
width:174px;
}
.opacidade {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.70;
}
.txt {
background:transparent;
padding:10px;
position:absolute;
right:0;
top:0;
}
No CSS, dexei os estilos para o efeito da transparência em um bloco separado apenas para o código ficar mais organizado. Mas isso não é obrigatório. A propriedade "opacity" funciona para os navegadores que seguem os padrões W3C; o filtro criado é para que funcione nos navegadores IE e seu valor varia de 0 à 100; e "-moz-opacity" é para os navegadores Mozilla e seus valores vão de 0.00 à 0.100.
Já não é difícil achar esse efeito nos sites atuais, vi esse efeito mais usado com bibliotecas Ajax em galerias ou alertas.
Aqui detalhei apenas um jeito de se fazer esse efeito. Os outros que eu conheço é usando uma imagem png, ou já fazer a imagem com o quadrado transparente. Nenhuma delas está errada, mas usando imagem png tem que fazer alguns hacks para que funcione em todos os navegadores.
Esse efeito é muito bom para compor o design da página, mas não com um uso exagerado.
Pegando embalo no artigo Link estilizado para e-mails (mailto), achei um site que disponibiliza ícones para download para diferenciar um link do outro. Achei interessante, que na tabela não mostra apenas o mailto mas outros esquemas de URI (nem sabia que tinham outros e nem que tinham esse nome).
Ele tem ícones para as extensõe também. Vale a pena baixar o pacote que está em .zip.
O endereço do site é: Iconize Textlinks with CSS.
Aproveitem!
Um presentinho: nesse link tem um tutorial passo-a-passo para usar esses ícones nos links. (Em inglês).
Em relação a links, acredito que a melhor maneira de se chamar atenção para ele é com o uso de imagem. Claro que isso não é usual no meio de textos, falo de links de parceiros ou de outros sites como Orkut. Acho melhor o uso de uma imagenzinha, um ícone com texto ou sozinho.
Estou fazendo o possível para a divulgação do meu blog, e lembrei de um site que divulga "Etiquetas" dos sites cadastrados nele. Acho que esse site não é atualizado há tempos, pelo menos tentei mandar várias vezes alguns sites para lá e não tive sucesso, mas pelo menos ele tem uma ferramenta de criação bem legal.
No site tem um "buttonmaker" que faz etiquetas e disponibiliza para download na hora.
Você pode escolher as cores de fundo, borda e fonte. Dividi-lo em duas partes ou deixa-lo inteiro. Tem como escolher também o estilo de fonte, mas isso já é pré-definido no site, as opções que ele tem são boas, dependendo do tamanho do texto.
No topo da ferramenta, ainda tem um link de histórico com as criações recentes, para usar como base.
Então fica a dica para quem não tem o seu ainda.
[]'s! =)
ps.: Obrigada André pelo post no seu blog!! Fiquei muito contente!!! xD
