Efeito 3D com CSS

Fala galera. Depois do post criando logos com css, não parei por lá e continuei a pesquisa, até que cheguei nesse site. Aí eu falei, perai, já são duas da manhã, eu to sonhando né?! Não!! O cara fez um 3D com puro CSS! Sem flash, sem javascript mano. Vale a pena conferir.

Aqui tem uma breve explicação de como funciona, agora nesse aqui que 'tá' o bicho, nos mínimos detalhes. Impressionante.

Logos feitos com CSS. Como assim???

Você não está sonhando não amigo, é isso mesmo. Logo feito com puro CSS. Os caras estão se superando. Saca alguns exemplos aí:

JQuery Logo

Olympic Logo

BMW Logo

Ví o assunto no CSSnolanche e fui mais a fundo e fiquei impressionado. Uma gota com degradê e o caramba a quatro, e o código.

Esse é o logo de um aplicativo do Mozilla.

Agora vamos ao HTML, que é muito simples: 

< div class="logo">
   < div class="raindrop0">

   < div class="raindrop1">
   < div class="raindrop2">
   < div class="raindrop3">
   < div class="raindrop4">
   < div class="raindrop5">
   < div class="raindrop6">
   < div class="raindrop7">
   < div class="raindrop8">
< /div>

Agora o CSS:

.logo {
    position: relative;
    width: 256px;
    height: 256px;
    margin: 20px auto;
}

.raindrop0 {
    position: absolute;
    top: 64%;
    left: 0px;
    width: 100%;
    height: 50%;
    -moz-border-radius: 100%;
    background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner, 
rgba(0,0,0,0) 0%, rgba(0,105,149,0.4) 37%, rgba(80,80,80,0.1) 47%, rgba(80,80,80,0) 58%);
}

.raindrop1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    background: transparent -moz-radial-gradient(20% 20%, rgba(255,255,255,1) 22%,
rgba(255,255,255,0.2) 30%, rgba(74,193,186,0.5) 45%, rgba(0,168,243,0.7) 65%,
rgba(255,255,255,1) 100%);
}

.raindrop2 {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    background: transparent -moz-radial-gradient(30% 55%, circle cover,
rgba(0,105,149,0) 70%, rgba(0,105,149,0.8) 80%);
}

.raindrop3 {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    background: transparent -moz-radial-gradient(50% 10%, ellipse cover,
rgba(0,105,149,0) 73%, rgba(0,105,149,0.3) 80%);
}

.raindrop4 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    -moz-box-shadow:inset rgba(124, 197, 238, 1) 0px 0px 48px;
}

.raindrop5 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    background: transparent -moz-radial-gradient(30% 30%, ellipse cover,

rgba(0,105,149,0) 50%, rgba(255,255,255,0.9) 72%, rgba(255,255,255,0.6) 90%);
}

.raindrop6 {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: 60%;
    -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
    background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner,

rgba(145,240,234,0.8) 6%, rgba(145,240,234,0.1) 25%, rgba(145,240,234,0) 30%);
}

.raindrop7 {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 75%;
    height: 55%;
    -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
    background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner,

rgba(255,255,255,1) 6%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 30%);
}

.raindrop8 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -moz-border-radius-bottomright: 100%;
    -moz-border-radius-topright: 100%;
    -moz-border-radius-bottomleft: 100%;
    -moz-box-shadow:inset rgba(191, 235, 255, 0.8) 0px 0px 12px;
}














*UPDATE 30/07 12h
E tem mais galera, o símbolo do IE totalmente em CSS.

Agora veja a renderização nos browsers...

O desenvolvedor é o Andreas Jacob e aqui é a fonte das imagens.

Imagine programas de vetores esportando em CSS3, cara, é o futuro!

via (cssnolanche)

CSS3 | Usando fonts externas

Tipografia web sempre foi difícil de lidar, vários aspectos eram levados em consideração. Mas o sonho de todos que trabalham com web virou realidade. Agora é possível sim utilizar uma fonte externa, mesmo o usuário não tendo aquela fonte, ele irá visualizá-la.

O texto abaixo é originalmente do tableless.com.br.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
  font-family: helveticaneue;
  src: url('HelveticaNeueLTStd-UltLt.otf');
}
Na primeira linha você dá um nome para a Font que você está  importando. Pode
ser qualquer nome.

Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}
Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o
browser carrega primeiramente o texto com a font padrão do sistema e
logo depois monta o texto com as fonts corretas. Nada de outro mundo
para quem utiliza imagens para substituir textos. Mesmo assim, pode ser
um incomodo para alguns.
Suponhamos que você queira oferecer a font para os que não a tem
disponivel no sistema, mas para que o site carregue mais rápido, queira
utilizar a cópia local do sistema do usuário caso ele a tenha instalado:
@font-face {
  font-family: helveticaneue;
  src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Anúncios Criativos | Edição #2

---

---

---

---

Tudo é uma questão de marketing... e otimismo.

Quem não conhece essa história?!

"Dizem que havia um cego sentado na calçada, com um boné a seus pés e um pedaço de madeira que, escrito com giz branco, "Por favor, ajude-me, sou cego". Um publicitário da área de criação que passava em frente a ele, parou e viu umas poucas moedas no boné.

Sem pedir licença, pegou o cartaz, virou-o, pegou o giz e escreveu outro anúncio. Voltou a colocar o pedaço de madeira aos pés do cego e foi embora. Pela tarde o publicitário voltou a passar em frente ao cego que pedia esmola. Agora, o seu boné estava cheio de notas e moedas.

O cego reconheceu as pisadas e lhe perguntou se havia sido ele quem reescreveu seu cartaz, sobretudo querendo saber o que havia colocado. O publicitário respondeu: "Nada que não esteja de acordo com o seu anúncio, mas com outras palavras". Sorriu e continuou seu caminho.

O cego nunca soube, mas seu novo cartaz dizia: "Hoje é Primavera, e não posso vê-la". Mudemos a estratégia quando não nos acontece alguma coisa... Se for verdade que nada é perfeito, também é verdade que tudo pode ser melhorado." (Autor desconhecido)

Você sabe o que é Branding?

Muita gente não sabe o que é Branding, inclusive eu. Nesse mundo onde o inglês predomina, branding (ou Brand management,do inglês, em português também Gestão de Marcas) é o trabalho para se construir e gerenciar uma marca no mercado, gestão de marca.

"A construção de uma marca forte para um produto, um linha de produtos ou serviços é consequência de um relacionamento satisfatório com o mercado-alvo. Quando esta identificação positiva se torna forte o bastante, a marca passa a valer mais do que o próprio produto oferecido. Branding é como é chamado o conjunto de práticas e técnicas que visam a construção e o fortalecimento de uma marca.

Sua execução não é tomada apenas por ações de marketing que posicionam a marca e divulgam a marca no mercado, mas também por ações internas na empresa, transmitindo, para todos os interessados, a imagem pretendida.

Objetivo do branding é entre outros aumentar o brand equity (em português: equidade de marca ou ativo de marca) - o valor monetário da marca e assim aumentar o valor da empresa em si.

Este trabalho é feito por profissionais e agências especializados em marketing, administração, semiótica, design gráfico e arquitetura, que visam desenvolver positivamente a reputação de marcas, produtos e organizações e alinhá-las com os objetivos organizacionais e o público almejado." [Wikipédia]

Continuando...

"A Gestão de uma Marca está relacionada com a criação e a manutenção da confiança, o que implica o cumprimento de promessas. As melhores Marcas, as de maior sucesso são completamente coerentes, Cada aspecto do que são e do que fazem reforça tudo o resto.

Quem vê de fora, a construção de uma marca parece algo simples. Implica a frequente, irritante e por vezes obsessiva repetição de uma afirmação simples, e muitas vezes extravagante, expressa por meio de uma frase atractiva “slogan”, alguma cores e um logótipo distintivo, colocado mais ou menos ao acaso por todo o lado. Na verdade se olharmos com maior atenção, constatamos que o processo de construção não é tão simples. Existem muito géneros de marcas, de bens de grande consumo como a Coca-Cola, as marcas tradicionalmente divididas entre Marcas B2B (de empresa para empresa) e as Marcas B2C (de empresa para o consumidor); as marcas institucionais, etc. Todas estas divisões e subdivisões, e com outras mais que não referi, não é de admirar que a Gestão de Marcas quando analisada de forma mais concreta seja extremamente complexa.

Não é fácil construir uma marca de sucesso, muitas marcas novas falham (morrem mesmo à nascença, ou prematuramente). Assim a Gestão de Marca é acima de tudo a criação e a manutenção de confiança. As melhores Marcas são geridas de forma completamente coerente, cada aspecto do são e de como se relacionam reforçam a Marca. As melhores Marcas têm uma consistência que é construída e mantida por pessoas no interior da sua organização, totalmente absorvidas por aquilo que a Marca simboliza."

Agora já temos uma base, certo?!

Uma história para refletir

Certo dia no ônibus, um senhor puxou assunto comigo. Trabalhava no ramo de hotelaria, história não faltava pro cara. Mais até que ele disse algo interessante.

"Certa vez, um rapaz foi preencher uma vaga numa multinacional, e a única vaga era de faxineiro. Ele passou em todos os quesitos porém não no último: o entrevistador disse que ele teria que ter e-mail, mas ele não tinha, e não ficou com a vaga.

Saiu de cabeça baixa e avistou um vender de laranjas. Perguntou-lhe quanto custava, era 1 R$ o pacote, e ele tinha 2 R$ em mãos, assim comprou 2 pacotes. Logo mais adiante, alguém que passava do seu lado perguntou se ele estava vendendo. Ele afirmou que sim e que custava 2 R$ o pacote. Venda feita, ele pensou: Eu tinha 2 R$ e em menos de 10 minutos fiquei com 4 R$. É isso, vou vender laranja!

E assim ele começou, um bom tempo se passou e acreditem, ele estava dominando o mercado da laranja e estava milionário. Foi quando conheceu outro milionário, líder do mercado da exportação, que lhe propôs uma fusão, e assim, eles seriam bilionários. O 'laranjeiro' topou e quando o 'exportador' pediu seu e-mail ele disse que não tinha. Ficou indignado, perguntou o por que de um milionário não ter um simples e-mail, e o 'laranjeiro' apenas lhe respondeu: porque se eu tivesse um e-mail, eu seria faxineiro!"

Se é verdadeira ou não, desconheço, mais que é interessante, é! =D

Anúncios Criativos | Edição #1

Vou começar uma seção por aqui. Serão semanalmente 5 anúncios criativos. Alguns novos, alguns velhos, mais a criatividade não tem idade certo?! Portanto espero que vocês apreciem... sem moderação!



---



---



---



---

Logomarca ou logotipo?

Afinal, o certo é logomarca ou logotipo? Primeiramente vamos aos seus respectivos significados:

Logomarca é um neologismo usado de forma empírica e genérica, para designar logotipo, símbolo ou marca, sem que haja consenso nem precisão absoluta ao que ele se refere, se apenas ao símbolo, ao logotipo ou ao sinal misto (combinação de ambos). O seu uso está popularizado no Brasil e o termo consta do dicionário Aurélio e é considerado correto pela Lingüística. No entanto,
termo é visto como inadequado por diversos designers por não possuir a necessária precisão.

Em seu livro "O Efeito Multiplicador do Design", a designer Ana Luísa Escorel discute o termo logomarca. Ela lembra que a palavra logos, vem do grego significando conhecimento e também palavra. E, embora a etimologia coloque como correlato mais apurado de logos em português os
termos estudo ou lógica, a designer afirma que logomarca significa “palavra-marca” o que, na opinião dela, não faz sentido. Ela defende ainda que os brasileiros deveriam adotar os termos utilizados no resto do mundo. Essa atitude no entanto não é difundida entre os que não são profissionais da área de design que usam o termo coloquialmente por acharem os outros termos incompletos.

"Curioso que áreas tão afeitas à moda e à terminologia usada internacionalmente para tudo o que diz respeito aos assuntos do setor, como a publicidade, o marketing e mesmo o design gráfico, desprezem as designações corretas, presentes nos artigos publicados pelas revistas especializadas do primeiro mundo. Nelas as palavras logotype, logo ou symbol pontuam cada página, para lembrar apenas os países de língua inglesa."

_(Ana Luísa Escorel - Em O Efeito Multiplicador do Design - Editora Senac, pág. 56)


Logotipo, ou logótipo, refere-se à forma particular como o nome da marca é representado graficamente, pela escolha ou desenho de uma tipografia específica. É um dos elementos gráficos de composição de uma marca, algumas vezes é o único, tornando-se a principal representação gráfica da mesma. A expressão costuma ser confundida com o neologismo logomarca, cuja imprecisão e incorreção costumam ser questionados pelos designers e estudiosos do design gráfico.

Logotipo é uma assinatura institucional, a representação gráfica da marca. Por isso ela deverá aparecer em todas as peças gráficas feitas para a empresa. Como toda assinatura, o logotipo precisa seguir um padrão visual que a torna reconhecida onde quer que ela seja estampada.Usar corretamente o logotipo é uma das ações obrigatórias para o reforço da imagem e da personalidade da empresa. O logotipo da Coca-Cola. A marca Sony ao grafar a sua marca, utiliza apenas a forma particular como o nome da marca é representado graficamente - o logotipo, prescindindo da utilização de qualquer outro elemento gráfico adicional (símbolo) para compor a marca. Ao contrário da SONY, a Wikipédia, utiliza simultaneamente um símbolo e um logotipo para grafar a sua marca.

“O símbolo e o logotipo são formas de grafar a marca, de torná-la visualmente tangível. É comum as pessoas se referirem ao símbolo como marca. Diz-se freqüentemente: a marca da Coca-Cola ou da Fiat, quando, na verdade, a intenção é a referência ao logotipo da Coca-Cola ou da Fiat. Da mesma maneira, símbolos também são chamados de marcas e também é comum se ouvir referência à marca da Volkswagen ou da Mercedes-Benz, quando a designação correta seria símbolo (...). Logos em grego quer dizer conhecimento, e também palavra. Typos quer dizer padrão e também grafia. Portanto, grafia-da-palavra ou palavra-padrão.”

_(Ana Luiza Escorel - "O Efeito Multiplicador do Design" - Editora Senac, pág. 56)

Muitos dizem que logotipo é uma marca representada através da tipologia, logo, logomarca seria um símbolo. Porém, a Copa-Cola é uma marca que apresenta tipologia, e não deixa de ser um símbolo.

A Shell é uma marca representada por um símbolo, a concha, porém também é utilizado a tipologia embaixo da concha, tipologia e simbolo juntos. Eaí, logomarca ou logotipo?

Já ouvir falar também que a marca seria um produto X da empresa Y. A Coca-Cola possui a marca Sprite, logo sprite é a marca da coca-cola. Só ouvi, ainda não entendi essa tese.

Esse assunto é muito pano pra manga, eu sempre disse logotipo, até que um instrutor de criação e design da Impacta disse que poderia ser relativo logomarca e logotipo.

Hoje eu não digo logotipo nem logomarca, prefiro ficar com identidade visual.

Como seria nossa vida sem msn?

Um exemplo seria no trabalho...