Opera logo com CSS3
Postado por: Pedro Rogério em
A cada dia fico mais surpreendido com o que os desenvolvedores andam aprontando com CSS. E dessa vez um desenvolvedor chamado David Dessandro desenvolveu o logo do Opera totalmente com HTML e CSS3. O que fico impressionado é que a marcação HTML é muito simples:
<div id="opera-logo">
<div class="light-shadow"></div>
<div class="dark-shadow"></div>
<div class="outer-edge"></div>
<div class="highlight"></div>
<div class="fill"></div>
<div class="inner-edge"></div>
<div class="inside"></div>
<div class="counter"></div>
</div>
Com isso podemos ver que a cada dia o CSS está mais poderoso:
#opera-logo {
height: 512px;
width: 512px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#opera-logo div { position: absolute; }
#opera-logo .outer-edge {
width: 440px;
height: 470px;
background: #800;
background: -moz-linear-gradient(-90deg, #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
top: 20px;
left: 36px;
border-radius: 220px;
-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;
}
#opera-logo .highlight {
width: 436px;
height: 466px;
background: #d40009;
background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
top: 22px;
left: 38px;
-moz-border-radius: 218px/233px;
-webkit-border-radius: 218px 233px;
border-radius: 218px/233px;
}
#opera-logo .fill {
width: 436px;
height: 456px;
background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000) );
top: 30px;
left: 38px;
-moz-border-radius: 218px/228px;
-webkit-border-radius: 218px 228px;
border-radius: 218px/228px;
}
#opera-logo .inner-edge {
width: 198px;
height: 396px;
background: #d20000;
background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
left: 158px;
top: 56px;
-moz-border-radius: 99px/170px;
-webkit-border-radius: 99px 170px;
border-radius: 99px/170px;
}
#opera-logo .inside {
width: 192px;
height: 390px;
background: #b80000;
background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
left: 161px;
top: 59px;
-moz-border-radius: 96px/170px;
-webkit-border-radius: 96px 170px;
border-radius: 96px/170px;
}
#opera-logo .counter {
width: 164px;
height: 368px;
background: #FFF;
left: 174px;
top: 71px;
-moz-border-radius: 82px/170px;
-webkit-border-radius: 82px 170px;
border-radius: 82px/170px;
}
#opera-logo .light-shadow {
left: 106px;
top: 344px;
height: 50px;
width: 304px;
-moz-border-radius: 152px/25px;
-webkit-border-radius: 152px 25px;
border-radius: 152px/25px;
-moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
}
#opera-logo .dark-shadow {
left: 146px;
top: 325px;
height: 70px;
width: 220px;
-moz-border-radius: 110px/35px;
-webkit-border-radius: 110px 35px;
border-radius: 110px/35px;
-moz-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
-webkit-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
}
Observe o resultado final e aproveite e compare com o logo em formato de imagem.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Se então isso é possível podemos logo logo desenvolveremos softwares onde iremos criar imagens através de css e html a serem renderizadas em browsers de maneira mais intuitiva e acredito mais leve.
Dando exemplo um Dreamweaver onde você cria a imagem e ele já gera todo o html e css dessa imagem sem usar um único pixel bitmap.
obs: logico se tratando de algo automatizado vai gerar códigos as vezes desnecessários, mas é coisa para se imaginar
Cara como pode?
Muito Bom mesmo!
Ficamos impressionados aqui e cada vez mais apaixonados por CSS.
Abraço!
Acho bacana como exemplo do que pode ser feito com o CSS3, mas discordo do @Nil Tojal.
Criar logos em HTML e CSS só porque “dá pra fazer”, além de gerar código desnecessário, como foi citado, faria o desenvolvedor perder muito tempo em algo que pode ser resolvido em simplesmente exportar uma imagem.
Com certeza é uma ferramenta poderosa se o objetivo é diminuir o número de requisições no servidor, mas cada caso deve ser avaliado separadamente.
Oi Gabriel blz… então, ai no caso eu não acho que é so porque da para fazer, imagine você no caso de imagens simples, o ganho de economia de transferência de dados numa rede, eu estava avaliando a imagem em png so ela deu 43 kb enquanto o logo em css e html somente deu quase 7kb olha o ganho ai, e a qualidade gráfica praticamente é a mesma, ai você me diz que se cria muita linhas e eu concordo, mas se existir uma IDE que faça esses códigos quase que automaticamente pelo menos esse bloco de códigos eu não vejo problema. vale ai o ganho na rede e no carregamento da pagina.
Abraços
É verdade Nil, uma IDE seria ótimo pra evitar perda de tempo desenvolvendo imagens com código.
Mas é como eu disse, cada caso tem que ser avaliado separadamente. Se for compensar fazer as imagens utilizando CSS pra aumentar o ganho em carregamento e transferência, não vejo mal algum.
Topa fazer uma IDE pra ajudar a galera? hahaha.
Eu conto o milagre mas não revelo o santo….
Ainda não tenho capacidade para isso. Mas sei que existem muitos por aqui que o tem. a ideia foi lançada!!!!
É com este intuito que a W3C criou o padrão SVG, e muitas ferramentas das atuais já exportam para este formato (Corel Draw, etc). Uma pena ainda os browsers não terem dado muita atenção a ela…
Abraços..
Realmente é muito legal, a parte do gradiente infelizmente foi feita usando ferramentas proprietárias já que não existe um padrão ainda para isso.
Se quiser conferir um que ficou ainda melhor (usando só padrões abertos): http://helmersworks.com/demo/opera_logo.html
Abs.
Social comments and analytics for this post…
This post was mentioned on Twitter by pinceladasdaweb: Opera logo com CSS3: http://migre.me/nFog Sem imagens…
Legal! mas dá um trabalho da p#
Impressionante mesmo!! como que pode!! que evolução do css!!
Dá trabalho, mas o resultado é muito bom!!
Show de bola ! Tomara que todos os browser suportem o CSS3, ouviu IE ! ^___^
PUT A KEEP ARE YOU, FOOL DEL!
Minha cabeça explodiu aqui!
XD
hahahaha, para variar, tinha que dar pau no IECA!!!!!
Vi que no código tem “hack’s” de browser mozilla e web-kit, ou seja, só funciona se o seu navegador usar uma dessas engines, nem podemos cupar o ie nesse caso, já que esses hack’s não fazem parte do padrão w3c/css.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cssnolanche.com.br%2Flab%2Fopera-logo%2F&profile=css3&usermedium=all&warning=1&lang=pt-BR
na verdade não são hacks, sao as implementações dos padrões pela mozila e webkit, mas como ainda não estão definidos completamente(a especificação do css3 não ta pronta), ele usam o -nomeengine-propriedade para não dar probelmas com codigos futuros, exemplo é o radius que no mozila foi implementado de um jeito(no estado que estava a especificação na época) e na webkit foi implementado de outro(feita mais recentimente).
Realmente interessante. Arte CSS.
Outra coisa: pensar em ignorar imagens só porque CSS está com poder de fazer maior parte delass é o tanto quanto ridiculo, perde-se tempo, a marcação fica cheia de gambiarra, os arquivos CSS ficam maiores, enfim… acredito que esse nao é o proposito do CSS
[...] quem duvidava do que o CSS era capaz, já mostrei aqui o desenvolvimento do logo do Opera somente com CSS. E dessa vez, o desenvolvedor Sean Martell criou uma gota de chuva com puro CSS. Ou se prefirir, o [...]
Excelente, aliás alguém já viu Homer Simpsom só com CSS tbm?
muito fera!!!
Abss…
Na verdade, você pode melhorar o logo no Opera (Ele é o navegador que realmente usa CSS3, sem extensões como webkit e moz). E de existirem esses browsers mencionados, o IE4 já poderia fazer isso usando Microsoft filters!
Actually you can make it look better on Opera, (it uses real CSS3 without extensions like webkit or moz). And even before all these browsers exist, IE4 could do it using Microsoft filters!
[...] desenvolvedores estão se superando cada vez mais. Depois de mostrar aqui o logo do Opera, uma gota de chuva com CSS, e o mais interessante de todos, o logo do Internet Explorer totalmente [...]
Alguem ja ouviu falar do SVG?
como ñ sei muito desse trabalho aprendi q e bom a gente invntar coisas novas pra serem desenvolvidas de uma maneira deferente como as pessoas de hoje ñ tem criações acho muito bom a gente se reiventar….coisas do ´passado
Incrível! E o melhor de tudo, é que mesmo dando Zoom no navegador, a logo não distorce. É a a nova forma de vetorizar, na web.