DES 84 - Blog of DES84 Website

A ideia do resize na verdade é meio que criar uma mascara, uma area de visualização da imagem, assim ao passar o mouse sobre a imagem mostraria a tag <img> por completo, assim como segue o conceito abaixo:

O Codigo para a inserção da imagem já com o efeito de resize é bem simples e não joge muito do que temos hoje em webStandard:

<a href=”#”><img src=”image.jpg”  alt=”my image” /></a>

Veja o exemplo rodando ok na Demo page.

O estágio default em css para as imagens pequenas, thumbnails, é algo em torno do código abaixo, podendo, é claro, ser alterado de acordo com a necessidade do projeto:

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;       
}
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}

Usando posicionamento absoluto podemos então criar o nosso ‘fake crop’ na imagem, cada imagem deve ter um estilo proprio para o crop e mudando o posicionamento em top e left de acordo com a necessidade.

ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}
ul#thumbs li#image1 a img{
    top:-28px;
    left:-55px;   
}   
ul#thumbs li#image2 a img{
    top:-18px;
    left:-48px;   
}   
ul#thumbs li#image3 a img{
    top:-21px;
    left:-30px;   
}

e Finalmente para ativar o resize colocamos o codigo hover que vai fazer a imagem aparece toda:

ul#thumbs a:hover{
    overflow:visible;
    z-index:1000;
    border:none;       
}

Bom proveito a todos e qualquer dúvida não deixem de ler o post original que segue o link abaixo:

Link: Resize holover image with CSS

Como em um passe de mágica, ou um pouco menos lento que isso, espalharam-se pela internet os danados, e facilitadores, CSS Grids ou melhores nomeados de CSS Frameworks. No inicio desse processo todo eu comecei testando o 960Grid System e o Blue Print, muito bons mesmo, cada um nas suas especialidades. Hoje rodando pelos blogs da vida para animar a começar criar, o que foi dificil, encontrei um post muito interessante sobre os diversos tipos de CSS Frameworks encontrados pela rede.

No site Hidden Pixels .com encontrei uma lista bem completa para com os mais conhecidos frameworks de CSS da net, vale a pena baixar alguns testar e usar essa facilidade para montar layouts em XHTML.

Link: CSS Frameworks

Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.

Usando de um menu simples feito em lista (ul):

<ul class="kwicks" > 
     <li id="kwick1"></li> 
     <li id="kwick2"></li> 
     <li id="kwick3"></li> 
     <li id="kwick4"></li> 
</ul>

O estilo voce faz como preferir respeitando as config abaixo:

.kwicks li{ 
     float: left; 
     width: 125px; 
     height: 100px; 
     margin-right: 5px; 
}

e por fim so ativar o plugin na classe ‘Kwicks’ colocada na tag ‘ul’:

$().ready(function() {
    $(’.kwicks’).kwicks({
        max : 205,
        spacing : 5
    });
});

Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:

Kwicks uncompressed
Kwicks packed

Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais".  Cya.

Link: Kwicks for jQuery

Parece hilário falarmos de cross browse hoje em dia com tantas diferenças que conseguimos encontrar na interpretação do codigo XHTML e CSS. Dia após dia me deparo com outros ‘problemas’, identifico soluções - mas que são sempre paleativas. Encontrei hoje de manhã uma referência em um dos meus feeds para o site do Anthony Short e diretamente em um post com nome muito interessante e chamativo: How to get Cross Browser Compatibility Every Time. O engraçado que dessa vez não é somente um monte de ‘achismos’, existe uma lógica muito boa no texto, vale a pena conferir e ver se você anda fazendo tudo certinho ou erradinho por ai eheh.

Link original: How to get Cross Browser Compatibility Every Time

Cada dia que passa fico mais impressionado com os poderes do jQuery. Hoje pesquisando mais sobre o infeliz encontrei algo muito interessante, um menu dropdown com multiplas opções, colunas e sub opções. Complicado de imaginar isso sem ver funcionando. O addict do jQuery tem 47k, incluindo a biblioteca base e ainda é XHTML válido.

Acesse o link do post original no labs do Gíva para fazer download do Dropdown. Link e print abaixo:

Link: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

Olá novamente. Hoje a tarde me deparei com um grande amigo atualizando seu blog, que prefiro não dizer qual era ou o nome do programa, e fiquei indignado com a burocracia - se é que se pode chamar assim - para adicionar ou editar um post. Fiquei por alguns minutos convencendo o infeliz do amigo a trocar para o WordPress até que deu certo.

No site do Lynda.com tem uma série de video aulas sobre a nova versão do WordPress (2.5.1) para iniciantes e mesmo para os mais familiarizados com a versão anterior. Alguns videos, os mais básicos, são free. Link segue abaixo para interessados. Luv XHTML, Luv WordPress.

Link: Lynda WordPress Training

Até mesmo para a criação web, que parece ser uma coisa muito “eu-pc-cliente”, existe as tão buscadas BOAS MANEIRAS. O uso abusivo de DIVs e IDs, Classes e mais classes por XHTML Coders inexperientes faz o pablinho aqui ficar com gosto de sangue na boca de tanta raiva ehehe. O XHTML é o standard do stardand da web, deve ser um codigo inteligente, reutilizavel e uniforme, sendo esse último o mais importante.

Para tanto, Alen Grakalic escreveu um artigo já faz um bom tempo falando sobre a utilização adequada do heading, pois não existe certo ou errado na web, existe funcional ou não. Essas tags são basicamente utilizadas para se por titulos e hieraquizar – espero que essa palavra exista – os textos na sua página.

Como exemplo podemos fazer uma ordenação da seguinte forma:

H1 – TITULO DO SITE
H2 – TITULO DO POST
H3 – SUB-TITULO DO POST
H4 – RESUMO BREVE DO POST

Atéééééééé o H6, o último existente de acordo com a W3C. O artigo do Alen Grakalic no CSSGLOBE.com ficou muito legal, pequeno mas esclarecedor. Segue o link do post original abaixo.

Link: How to use heading in HTML

Lendo meus inumero feeds encontrei um artigo bem legal sobre fontes que estão em Macs e Pcs e que assim podem ser usadas no CSS, o artigo foi retirado do site 3.7design e o link segue abaixo.

Link: 8 Fontes que você provavelmente não usa no css.

Uma coisa bem legal, muito mais facilitadora para os programadores que pra nos designers, é a facilidade que o CSS dá de colocarmos referencias / icones ou o que quiser chamar dependendo da extensão que for direcionar o href. Se o link for para uma imagem podemos fazer um estilo proprio para ele, o mesmo acontece para outros tipos de formatos para onde o link vai. O exemplo é muito fácil e fazer e entender, abaixo o link.

Link: Ask the CSS Guy

Acredito que tudo no CSS tudo é muito importante e por isso já explico esse “quase” do titulo do post. Mas como está no site <td> segue as seis mais importantes dicas e tecnicas do CSS.

Link: The 6 Most Important CSS Techniques You Need To Know