Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Compactar meu CSS? Eu faço, mas se você não faz, tanto faz. Ou não.

    Confuso o título não é verdade? Foi mais pra botar algumas minhocas na sua cabeça, mas prepare-se para o restante do post, pois esse é bem interessante e surgiu com um post publicado pelo Diego Eis no Tableless, onde eu fiz um comentário, na minha opinião, pertinente, mas que alguns leitores de lá não concordaram e possuem opiniões diferentes.

    Do que se trata?

    Podemos dizer compactação, otimização, whatever, qualquer coisa, mas é uma opinião do Diego sobre criação de arquivos CSS e tudo mais. Ele comenta que não é necessário compactar seu CSS da seguinte forma:

    .minha-classe {
    	color:#900;
    	font-style:bold;
    	display:block;
    }
    

    Para esta forma:

    .minha-classe {color:#900;font-style:bold;display:block;}

    Feio isso hein

    Sim, sim. Concordo, mas eu comentei aqui no blog um tempo atrás sobre essa forma de implementação de CSS, seus motivos, entre outros, mas repito novamente.

    Motivos

    Imaginem você um site que possui MILHÕES de visitas. Não milhares, mas sim MILHÕES. Agora imagine esses milhões de visitas multiplicados pelos kbytes que eu consigo economizar escrevendo meu CSS daquela forma.

    Citei que em projeto em que eu participei, Globo.com e Videolog, projetos grandes, bem grandes, a economia ultrapassava os 20kb. Vieram falar que 20kb não é nada e carrega em 4 segundos numa conexão discada.

    E não é?

    Hmm… Sim, possivelmente sim. Mas vou citar um ponto importantíssimo que muitos dos desenvolvedores client-side que utilizam os padrões W3C, que é a economia de banda. Tráfego custa dinheiro e não é pouco. Se seu site tem 5mil visitas, 10mil, 20mil, você não precisa se preocupar muito, pois são “poucas” e sua hospedagem certamente cobre tal tráfego tranquilamente.

    E temos também o cache de CSS, que já fica armazenado na primeira visita. E isso ajuda bastante e diminui o tráfego.

    Pois sim, agora vamos aos fatos.

    Milhões de acessos é igual a milhões de kbytes carregados. Milhões de kbytes carregados é igual a bastante tráfego, que quando você economiza milhões de acessos x 20kb, pode ter certeza, você tem um ganho absurdo. Fato!

    E o Elcio concordou comigo plenamente e também o Diego comentou logo após um que eu fiz, concordou também, falando pra galera que o artigo é ais focado para projetos menores.

    Ahhhh sim. É verdade então Dulcetti

    Na minha opinião sim. Mas concordo que a leitura de um CSS todo numa linha é bizarro, mas te digo uma coisa, é costume. Meu primeiro contato foi negativo, mas depois, com o tempo, vi os resultados e foram satisfatórios e dei valor à isso e implemento assim desde hoje e estou acostumadíssimo. Tudo é questão de adaptação.

    E hoje eu escrevo meus CSSs desta forma, tanto em projetos grandes quanto pequenos, já que acostumei. Com isso, economizo para os projetos que escrevo, por mais que seja pouco, mas pra mim 1kb que seja economizado já é um ponto a se contar.

    Resumindo

    Bom, eu recomendo a escrita numa linha para economia, mas vai de cada um 😉 Mas concordo com um ponto no post do Diego, fazer isso com o HTML é meio que forçar a barra demais e acho que não vale tanto a pena. E eu também sou a favor da utilização de gzip, compactadores, etc, tendo duas versões, uma de desenvolvimento e outra pra produção, sendo essa segunda a compactada.

    Mas tem que tomar cuidado pra não dar merda, porque uma pequena confusão já basta para ferrar o projeto. Ainda mais se estiver trabalhando com mais de um cara. E fora que usar isso dentro de empresas grandes é difícil, pois existem pontos burocráticos e barreiras a se travessar.

    Finalizando

    Bom, é isso. Não quero forçar a barra de ninguém, muito menos criticar ao Diego, tanto que citei no primeiro comentário que eu fiz que aquela forma de desenvolver serve plenamente para projetos com menos tráfego, menores e tudo mais e sei que ele entendeu isso. Mas só é um ponto de vista meu, que já trabalhei com projetos bem grandes e tive que recorrer a tais recursos, por mais que contra minha vontade no início.

    Como eu disse, tudo é questão de adaptação. Portanto, antes de me criticarem, me mandarem a merda ou afins, perguntem, tentem saber porque isso, porque aquilo. Aí sim, depois vocês podem me xingar 😀

    Aquele abraço.

    ps: novamente, antes de acharem algo “burro” ou “errado”, procurem saber o porquê da utilização de tal forma, coisas burocráticas, etc. 😉

    [ 13/nov/2008 às 19:27hrs ] [ Por Bruno Dulcetti ] Comentários 23 Comentários |

    Categorias: CSS,Webstandards

    » Menus, navegações em listas realmente é necessário?

    Estava eu um dia desses, pensando nisso. Esta vendo meu código e parei pra pensar e me perguntei isso. Pensei sobre, pesquisei, vi que sempre falam as mesmas baboseiras, que menus são listas de links, etc, etc, etc.

    Tá beleza, menus se tratam de uma listagem de links, pensando por esse lado, tudo bem. Mas será que devemos pensar assim sempre? Eu acho que não e gostaria de saber sua opinião sobre minhas abordagens a seguir.

    Se menus são listas de links, então um layout é uma lista de colunas

    Meio bizarro pensar não é? Parece meio idiota, eu sei, mas eu sou meio toupeira, imbecil, entendam isso por favor. Mas pensem comigo: imaginem um post de um blog, como este modafoca aqui mesmo. Nele você possui uma porrada de parágrafos, certo? Escrevo um post, onde detalho algumas coisas e escrevo bastantes ou poucos parágrafos, não importa.

    Mas onde você que chegar Bruno?

    E imaginem um layout, onde você possua três colunas, como o Papo de Bêbado, por exemplo. Se são três colunas, então é uma listagem de três colunas, certo? Igualmente bizarro, mas fluindo nos pensamentos que vejo por ae, essa seria a teoria.

    Tá bom o modafoca, mas onde você quer chegar realmente?

    Ok, vamos lá. É meio ridículo ter uma listagem de parágrafos e de colunas, já que parágrafos possuem sua tag prioritária, o <p> e as colunas, apesar de não possuir uma tag específica, colocamos dentro de uma div. Até aí tá tudo certinho.

    Mas pensem comigo, os links também já não possuem a sua maldita tag específica? Sim, possui e você sabe disso e ela é a tag <a>.

    Com isso, eu lhe pergunto:

    Por que colocar menus numa lista?

    Para ficar mais organizado?

    Coloquem dentro de uma <div> que estarão organizados da mesma forma. E você ainda terá menos coisas com que se preocupar, principalmente pensando no modo IE. Temos problemas quando nossos links ficam como blocos dentro de uma lista. Facilmente contornado, sim, eu sei, mas podendo evitar isso, melhor, concorda?

    E vira e mexe eu não quero que meus menus fiquei na vertical e com um maldito bullet ao lado, quando eu não possuir CSS habilitado. E principalmente porque não quero eles em blocos quando forem números de um elemento de paginação.

    Mas ae é só você colocar fora de listas quando for paginação

    Sim, já pensei nisso, mas e o padrão? Onde fica? É padrão ou é podrão?

    Tudo bem que nos menus laterais, os links ficam como bloco e seria interessante eles ficarem numa lista, mas não sei se valeria a pena isso.

    Entendi Dulça. E você já aboliu o uso de menus em listas

    Ainda não. Estou estudando esta possibilidade e gostaria de saber a opinião de vocês, se estou viajando e tudo mais. Mas provavelmente eu deixarei de usar sim. A única vantagem que eu vejo, pelo menos quando estava escrevendo esse post modafoca, foi que tendo uma <li> englobando o link, temos mais um elemento para trabalharmos, colocarmos um background, entre outras características. Fora isso, ainda não vejo muita vantagem não.

    Finalizando

    Bom, é isso. Espero que, pelo menos, eu tenha encucado um pouco vocês e tenha feito vocês pensarem um pouco nisso. Posso tomar vaias, um esporro, ser xingado. Tem problema não, to aqui pra isso 😀 Mas queria levantar esse ponto com vocês.

    Aquele abraço.

    [ 29/out/2008 às 17:25hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: CSS,Webstandards

    » Rails Rumble 2008 – Eu participei

    Thumb da marca do Rails Rumble

    No final de semana retrasado eu tive a grande oportunidade de participar do Rails Rumble, que é um concurso mundial, onde os caboclos que se inscrevem tem que entregar um aplicativo criado em 48h. Meio louco mas é isso mesmo.

    Canário belga. Um aplicativo em 48h? Difícil hein.

    Um bocado sim. Mas esse é o objetivo. E a linguagem que todos tem que utilizar, obviamente, é Rails.

    E parece meio impossível você criar uma aplicação em apenas 48h, mas isso é possível sim, mas com um planejamento bem estruturado e uma ótima equipe e dedicada. Pelo menos nesse segundo ponto nosso time conseguiu cumprir 🙂

    Quem participou com você Dulcetti?

    Grupo trabalhando no projeto
    Galera fingindo que estava trabalhando

    Bom, a nossa equipe foi a January River, em homenagem a nossa cidade maravilhosa (deu pra perceber né?), e era composta pelos seguintes modafocas:

    Parece meio que uma gang, dois Brunos e dois Pellegrinos, mas foi mais ou menos isso mesmo 🙂

    E o projeto tio Dulça?

    Thumb do projeto Pic My Diet

    Entramos no embalo da Dieta Flash, que chegou a ser transmitida pelo Fantástico e tudo mais. Onde as pessoas tiram fotos do prato que comem e postam no flickr. Com isso, as pessoas olham, inclusive ela mesmo e vê o que comeu, melhorando sua alimentação.

    Meio bizarro, eu sei, mas fazer o que. Dizem que funciona mesmo.

    Estranho mesmo Bruno

    E aproveitamos essa idéia, que venho do modafoca Bruno Carvalho e criamos uma aplicação que não precisava mais depender do flickr. Você sobe sua foto e publica como se fosse um post de blog mesmo, ou como se fosse o flickr.

    Legal hein Dulça

    Bastante, mas infelizmente não deu pra implementar nem 30%, 40% do que planejamos. E tudo isso por culpa da organização e planejamento, que é extremamente importante para qualquer tipo de projeto. O que põe mais ainda na minha cabeça que o Scrum é um modelo perfeito para tal. Por mais que não seja por post-it, mas de qualquer forma temos que ter histórias escritas, elaboradas e um cronograma por elementos e não blocos macros.

    Mas isso é que é legal, pois aprendemos com nossos erros e tudo mais. A vida é assim e fico feliz por ter errado e aprendido com isso e meus camaradas também pensam assim. Os erros são para isso mesmo.

    Mas não pensem que o projeto acabou…

    Naturalmente que não acabou. Estamos melhorando, já metendo a mão no código e fazendo todas as features que planejamos e estamos provendo para o lançamento em breve. Os deixarei informado por aqui 😀

    E o resultado? Onde tá?

    Está aqui meu nobre. Dá uma olhada. Estamos bem na colocação de design, onde o Vinicius mandou muito bem. Estávamos em quinto na última vez que vi e em trigésimo no ranking das aplicações, dentre mais de 200. Lembrando que nem entregamos 30%, 40% do que planejamos.

    Finalizando

    Fica a grande experiência de participar de um projeto foda, de uma pressão absurda. Com isso, eu descobri que consigo trabalhar tranquilamente sobre pressão e sem perder o ritmo, pois dormi na Globo.com às 5h e porrada e acordei 9h, frenético pra terminar o projeto e com gás e vontade de dar certo.

    E foi assim com toda a equipe. E fica a lição pra mim e para todos, que planejamento é tudo. Meu camarada Walmar Andrade fala muito bem sobre isso. Vale a leitura.

    E aguardem o projeto, pois em breve estará no ar 😉 Aproveita e vota no Pic My Diet lá 😉

    [ 27/out/2008 às 22:54hrs ] [ Por Bruno Dulcetti ] Comentários 4 Comentários |

    Categorias: Artigos,Criações,CSS,Flash,Pessoais,Tecnologia,Videolog

    » CSS Naked Day. Mas eu não vou tirar meu CSS não.

    Logo CSS Naked Day

    Hoje é o CSS Naked Day, ou o Dia do CSS Nu. Já falei sobre ele uns dois anos atrás. É uma data onde você tira seu CSS e mostra para todo mundo que seu código é estruturado de forma correta e tudo mais.

    Mas por que você deixou seu site com CSS então Dulcetti?

    Cara, sigo na mesma idéia do Henrique, tanto que ano passado nem cheguei a fazer e comentar.

    Meu site é bem estruturado e pronto. Você duvida? Então tire o CSS e veja. Não vou retirar o meu CSS para outros verem que meu HTML é correto e estruturado, porque as pessoas que frequentam este blog estão querendo informação, conteúdo e ele aparece assim, todo sem estilo? O que o cara tem a ver com isso?

    Fora que a outra parte, os assinantes do meu Feed, praticamente boaGrandeMeteóricaModafoca parte é desenvolvedor e entende bem(será?) disso. E se quiserem confirmar, retirem o CSS pelo Firefox, Opera ou browser semelhante.

    Calma Bruno, calma…

    Relaxa, sem exaltações. O que me faria mudar de idéia talvez, seria porque eles estão linkando as pessoas que estão participando disso. Mas deixo pra lá, não vou deixar meu site “nu” por um link. 😉

    [ 09/abr/2008 às 10:43hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: CSS,Webstandards

    » Hover avançado com bordas em imagens

    Falae pessoal. Parece até mentira, mas estou aqui novamente, retornando aos meus tutoriais mirabolantes, fascinantes, geniais e extremamente úteis para todos.

    O assunto dessa vez é o mesmo que o tutorial anterior, que falei sobre borda interna em imagens com link. Mostrarei um efeito em links, com bordas, em imagens 😀

    E como não poderia deixar de ser, é um efeito que a equipe aqui da Globo.com pediu pro Vinicius, só que ele veio perguntar pra mim se era possível. E como nada é impossível para Mr. Dulcetti. Lá fui eu implementar o efeito. E como não poderia deixar de ser, funcionou. E o melhor, CROOOOOOOOOOSSBROWSER!!!!! Sensacional, sensacional. 😀

    Mas de novo bordas em imagens Bruno?

    Sim. De novo. Mas relaxem, é um efeito diferente do que eu fiz para o efeito de borda interna dos sites da Globo.com, e que eu creio que muitos já quiseram fazer e não conseguiram, etc.

    É um efeito normal, que poderia ser feito normalmente, como eu mostro na figura abaixo:

    Print do efeito errado

    Um efeito de hover na imagem, onde existe a troca de cor da borda do link. Sim, cor da borda do link e não da imagem. O IE infelizmente não aceita todos efeitos em elemento dentro do link no hover do próprio. Mas lógico que isso você sabia (assim espero).

    Ta blz Dulcetti. Mas o tutorial é sobre esse efeito ae?

    Quase. É o mesmo efeito, mudança de cor na borda do link e talz. Maaaaaas, a diferença é que não existe esta borda duplicada entre as fotos. Percebam que a largura é de 5px para todos os links, mas como ficam um do lado do outro, entre eles ficam o dobro, ou seja, 10px de borda.

    Print dos tamanhos errados

    Poréeeeem, o problema é que no hover eu só consigo pintar a borda de um link, fazendo com que continue preta, a borda do próximo link. Veja o exemplo errado.

    O problema disso tudo, é que eu não consigo mudar a cor da borda de um link, seja ele próximo ou anterior. Infelizmente não temos essa liberdade. Com isso, tínhamos esse problema e o pessoal não queria isso.

    Resumindo, eles queriam o efeito abaixo:

    Print do efeito correto

    Perceberam que não existe duplicação de borda entre os links? Fazer isso é mole, se não fosse a troca de cor das bordas. Bastava setar borda superior e esquerda na <ul> e inferior e direita na <li>.

    Mas como nem tudo são flores né meu povo, lá foi o Dulcetti aqui resolver essa pemba.

    Vale ressaltar também, que a borda é colorida no hover, mas a borda preta em cima some, “invadindo” a <li> de cima.

    Beleza Bruno. Começa logo então…

    Ok, ok. Vamos dar início ao efeito. Vamos primeiro ao HTML:

    <ul>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    </ul>
    

    Um código extremamente complicado, difícil de ser entendido, complexo, mas creio que você seja safo para entender sem que o Dulcetti aqui explique ok?

    Um bando de <li> com link dentro, com imagem dentro, dentro de uma <ul>. É basicamente isso.

    Agora vamos a parte maaaaais complicada, pra variar…

    Implementando o CSS do efeito…

    Sim. O CSS é a parte mais chatinha de fazer e ser entendida. Eu sempre acho que é a parte mais tenebrosa para um desenvolvedor web.

    Vamos ao código?

    img {border:0;}
    ul {background-color:#000;margin:0;padding:5px 0 0 5px;width:180px;}
    ul:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
    ul li {border-bottom:5px solid #000;border-right:5px solid #000;float:left;height:40px;width:40px;}

    Nada de muito complicado:

    • Retiramos a borda das imagens, isso porque quando ela recebe link, fica aquela borda azul linda em volta da imagem;
    • Depois colocamos o background da lista, zerando sua margem, colocamos um padding de 5px em volta da ul e finalizando com uma largura de 180px;
    • Essa técnica do after serve para os browsers, isso exclui o IE. Ela serve para quebrar o float de um elemento dentro do bloco, nesse caso as li’s
    • Adicionei borda na base e na lateral direita da li fechando o quadrante, float para ir pra esquerda, altura e largura de 40px;

    De início temos este resultado.

    Legal Bruno, mas cadê o hover?

    Calmae, muita calma nessa hora. Já deu pra ver o início do resultado, do nosso objetivo. Temos já a estrutura toda montada, li’s arrumadas e sem bug.

    Agora falta o principal… O hover.

    O tão falado e temido hover…

    Como já sabemos, o nosso grande amigo e preferido browser, vulgo IE, não aceita a pseudo-classe :hover.

    Okay, ele aceita, mas somente em links. Mas admita fã da Microsoft, esse é um dos maiores pecados do IE. Francamente…

    O mais correto era colocar a borda na imagem, como eu tinha dito, mas como citei, o hover no link não deixaria colocar borda na imagem. Portanto, tive que trabalhar em cima do link mesmo.

    Mas isso não é problema para Mr. Dulcetti.

    Dulcetti… Ta bom, anda logo com isso…

    Ok. Empolguei-me. Desculpe. Então vamos ao restante do CSS. Pasmem, são apenas mais duas linhas de código:

    ul li a, ul li a img {display:block;}
    ul li a:hover {border:5px solid #D2251C;margin:-5px 0 0 -5px;position:absolute;}

    Vamos a explicação:

    • A primeira linha é completamente difícil e complicada. Quase ninguém utilizou esta propriedade no CSS. Ela transforma o(s) elemento(s) em bloco(s). No nosso caso, link e imagem dentro do link. Precisamos disso para que a imagem não coloque akela margem automática quando não é bloco e para que o link funcione corretamente no nosso caso;
    • Agora a grande sacada. Nessa segunda linha, colocamos uma borda com cor vermelha e 5px de espessura. Damos uma margem negativa superior e a esquerda de 5px e colocamos o link com position absolute

    Vemos o resultado do efeito finalizado agora.

    Legal Bruno. Mas explica melhor…

    Seguinte: o link ficando com a borda vermelha de 5px, o que iria acontecer? O link, como bloco e com borda, iria acabar ficando dentro da “borda”, que na verdade é o padding preto da <ul>, formando uma borda dupla. Sendo que uma preta e a de dentro vermelha.

    Não queremos esse efeito. E para conseguirmos isso, colocamos a margem negativa do mesmo valor da borda, ou seja, 5px, fazendo com que o link ficasse colado na <ul>.

    Mas logicamente que a margem, somente, não era bastante para finalizarmos. No IE fica um samba do crioulo doido, enquanto no Firefox não pintava a borda da esquerda, por causa da borda da <li>, que é preta.

    Para resolvermos isso, colocamos o que? O temido position:absolute. Mas como as nossas <li>’s já possuem largura e altura, então não temos problema com isso, pq o tamanho ficará fixo, sem ser mexido.

    Resumindo…

    É isso. Um efeito simples, porém atrativo e que já recebi algumas dúvidas sobre como fazer e não vi nenhuma resposta, nenhum exemplo de como fazer isso.

    E como o código é bem curto, o efeito é simples e rápido, não precisou ficar escrevendo testamentos, etc. Tudo bem que eu poderia fazer outros exemplos, com bugs, etc, mas eu tenho certeza que eu iria terminar só ano que vem e ficaria gigantesco. Então tá bom assim mesmo e está aí. 😀

    Espero que gostem e que tenha sido útil. Aquele abraço e beijo na alcatra.

    [BBL]artigos, css, design, dicas, efeitos, web-standards, webstandards, xhtml[/BBL]

    [ 03/jan/2008 às 15:29hrs ] [ Por Bruno Dulcetti ] Comentários 28 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Resposta do Desafio: Como “cropar” uma foto com CSS

    Como prometido, estou aqui pra postar a “resposta” do “desafio” que postei ontem aqui no Blog.

    Algumas sugestões, soluções, bem próximas da que eu arrumei e achei melhor. Vou tentar explicar detalhadamente porque não utilizei tal solução, porque fiz dessa forma, o que não rola, suporte, etc.

    Sugestões

    O juliano postou uma solução com background, mas como eu disse depois, não é possível, pois o conteúdo é dinâmico, portanto, não rola colocar como background.

    A do Michael ficou um pouco extensa, com um span como se fosse uma “máscara”, mostrando somente a área necessária. Mas como sabemos, o IE não nos ajuda quase nunca 😛 e não funciona a pseudo-classe :hover, somente em link, mas somente alguns atributos são suportados.

    Sobral e Mico citaram o clip, mas como citei acima, o IE não suporta a pseudo-classe e somente alguns atributos são suportados, o que não é o caso do clip, infelizmente. Fora que o clip só funciona em elementos com position absolute ou fixed.

    A do Alisson ficou +ou- parecido com a que eu implementei, mas faltaram alguns detalhes, algumas mudanças, para que funcionasse perfeitamente.

    Primeira Solução

    Chega de conversa e vamos para a primeira solução. Nessa eu utilizei o clip, como o mico e o sobral citaram, mas como falei, preciso da pseudo-classe :hover funcionando perfeitamente no IE, com isso, tive que utilizar um arquivo .htc, que faz com que o IE aceite o hover em qualquer tag.

    Código HTML

    <div id="fotos">
    <a href="#" title="" class="cropFoto"><img src="thumb.jpg" alt="Foto" /></a>
    </div>

    Código CSS

    * {margin:0;padding:0;}

    body {padding:20px;}
    ul {list-style:none;}
    img {border:0;}

    #fotos {width:186px;}
    #fotos * {display:block;}

    #fotos .cropFoto {background-color:#E70202;height:116px;position:relative;}
    #fotos .cropFoto img {position:absolute;}
    #fotos .cropFoto:hover img {clip:rect(3px 183px 113px 3px);}

    Um código simples e curto. Não vou ficar detalhando coisas desnecessárias, somente o que eu acho relevante para o entendimento para um desenvolvedor intermediário, etc.

    O link recebe a classe cropFoto, com a cor de background que eu quero que fique a “borda” em volta da imagem. Recebe o valor de altura igual a altura da imagem e recebe um position relative.

    A imagem dentro do link recebe um position absolute, lembram que o clip só funciona em elementos com position absolute e fixed? Por isso que também tive que colocar o position relative dentro do link, para a imagem não se basear de acordo com o body, etc.

    Veja o exemplo funcionando.

    Para mais infos sobre position, visite o artigo que escrevi no imasters sobre o assunto.

    Tá Bruno, mas não funcionou no IE

    Exatamente. Graças a ele, precisamos utilizar a gambiarra que falei anteriormente, pra funcionar a pseudo-classe :hover. Percebam que só funciona em link, e estou utilizando em um link, mas mesmo assim não funcionou o clip. Ele só aceita alguns atributos no :hover

    É só anexarmos o csshover.htc no html, que funciona no IE. Baixe o arquivo .htc aqui e cole o código abaixo entre as tags <head> e </head>:

    Código HTML

    <!--[if IE]>
    <style type="text/css">
    body {behavior:url(csshover.htc);}
    </style>
    <![endif]-->

    Veja o exemplo correto funcionando.

    Legal Bruno, funcionou direitinho…

    Exatamente, mas sempre existe um porém. Temos vantagens em utilizar esse htc, pois teremos hover em todas as tags, mas, como nem tudo é perfeito, temos alguns problemas:

    • Esse é um projeto grande, com muito volume de informação, conteúdo, etc. Teremos uma quantidade considerável de imagens com esse efeito no hover;
    • Necessita que o servidor tenha o mime type configurado para ele: text/x-component
    • Ele faz uma busca por :hover em TODO o stylesheet da página. Onde ele achar o :hover, vai adicionar um evento javascript onmouseover para que o elemento se comporte da forma correta.
    • O problema é que esse processamento é no cliente e o tempo que ele leva para fazer isso vai depender do tamanho do CSS, do HTML, além do poder do computador do cara, ou seja, quanto maior o CSS e HTML, mais tempo para execução o efeito vai levar, e como o projeto é grande, queremos sempre a melhor forma, otimizar, etc.

    Por essas e outras, tive que buscar uma outra opção, modo, de implementar esse efeito, somente por CSS, sem colocar htc, js, nem nada.

    Segunda Solução

    Eis que surge uma idéia no início, meio bizarra pra utilizar como solução. E não é que deu certo? 😀

    O código HTML utilizado foi o mesmo do exemplo anterior. Abaixo segue o CSS:

    Código CSS

    * {margin:0;padding:0;}

    body {padding:20px;}
    ul {list-style:none;}
    img {border:0;}

    #fotos {width:186px;}
    #fotos * {display:block;}

    #fotos .cropFoto {overflow:hidden;height:116px;width:186px;}
    #fotos .cropFoto:hover {border:3px solid #E70202;height:110px;width:180px;}

    Veja este exemplo funcionando.

    Legal Bruno… Funcionou só com CSS né?

    Então, +ou-. Ainda não está 100%, porque dá um efeito que a imagem se move por causa da borda colocada no link.

    É um código bem simples, de fácil entendimento. A imagem o link estão como block, o link está com a largura e altura setada de acordo com o tamanho da imagem. Esse tamanho pode variar, dependendo da imagem, é só modificar no CSS pro tamanho da imagem.

    No hover do link, ele diminui 6px de altura e largura e ganha 3px de borda em volta dele, totalizando a mesma largura e altura.

    O overflow hidden do link serve pra que mesmo que a imagem seja maior que o link, o que é o caso no estado :hover, ela fique oculta, não quebrando o layout, etc.

    Entendi Bruno. E como resolvo pra ficar 100%, sem parecer que a imagem se move?

    Simples, apenas uma linha de CSS, colocando uma margem pra imagem, no hover do link:
    #fotos .cropFoto:hover img {margin:-3px 0 0 -3px;}

    Veja o exemplo final funcionando.

    Agora sim hein 😀 Graças a Deus, o IE aceita o atributo margin na pseudo-classe hover do link no CSS. 😉

    Conclusões

    Bom, é uma solução simples, tranqüila, mas que nem sempre vem a cabeça facilmente, rápido. Testei no IE 6, IE 7, Firefox, Opera, Firefox Mac, Safari e todos funcionaram perfeitamente, sem nenhuma diferença.

    Algumas coisas precisam de alguns detalhes pra funcionar, por exemplo, o display: block no link, na imagem também pra ficar correto, se fosse usar o clip, lembrar do position: absolute, lembrar do overflow: hidden, etc, etc, etc.

    Sempre tem essas pequenas coisas que são essenciais saber no CSS, que você pega com a prática.

    Finalizando

    Bom, é isso. Qualquer dúvida, correção ou solução melhor, é só comentar que eu posto aqui 😉

    Aquele abraço.

    [BBL]css, desafio, dicas, webstandards[/BBL]

    [ 26/jun/2007 às 15:58hrs ] [ Por Bruno Dulcetti ] Comentários 19 Comentários |

    Categorias: CSS,Webstandards

    » Desafio: Como “cropar” uma foto com CSS

    E ae pessoal.

    Hoje estou aqui com algo diferente. Estava semana passada aqui na Globo.com, implementando um novo projeto, o qual falarei em breve para vocês, quando acabei parando em um probleminha chato.

    Um novo efeito de over nos links que o pessoal de design fez no layout. É interessante, gostei, mas fiquei pensando um tempinho em como implementá-lo.

    Legal Bruno, mas qual é o desafio?

    Então. Vou apresentar o efeito. É como se fosse uma borda de 3px em volta de uma foto, mas só que interna, como se “cropasse” a foto. Veja abaixo:

    Exemplo do Efeito

    A largura é de 186px e continua com 186px com o hover do mouse, mas com uma borda de 3px. Se fosse só colocar a borda, seria fácil, porque era só diminuir o tamanho da foto no hover, mas como isso não poderia acontecer, tive que pensar em outra solução.

    Colocando somente a borda, a largura ficaria 192px, o que faria quebrar o grid, portanto, não adianta usar somente a borda.

    [UPDATE]
    O juliano postou uma forma de fazer, mas como background. Esse update é só pra realçar que tem q ser por imagem, pois o conteúdo é dinâmico e a imagem faz parte do conteúdo 😉

    Valew ae juliano.
    [/UPDATE]

    Finalizando

    Está lançado. Amanhã estarei publicando as duas soluções que achei. Lembrando que tem que ter suporte na maioria dos browsers, senão em todos 😀

    Alguém postando a solução, igual ou diferente, estarei postando amanhã também 😉

    Aquele abraço.

    Resposta no link http://www.brunodulcetti.com/blog/2007/06/26/resposta-do-desafio-como-cropar-uma-foto-com-css.html

    [BBL]css, desafio, dicas, webstandards[/BBL]

    [ 25/jun/2007 às 12:15hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: CSS,Webstandards

    Próxima Página »

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com