Tag: webdesign

Efeito Neon com CSS 3, SVG e um tiquinho de Javascript (Texto e Imagem)

O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?

ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.

Adicionando a Logo SVG

Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.

Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.

No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.

Opção de Exportar para Telas, no Adobe Illustrator CC

O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.

Montando o HTML

Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:

<div class="area_neon">
	<center>
		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
	</center>
</div>

Apenas isso.

Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.

Ficando algo similar a:

<div class="area_neon">
	<center>
		<svg class="neon_img" id="img_neon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.06 238.87"><path d="M189.39,53.25c9.32,0,16.87,7.85,16.87,17.54s-7.55,17.54-16.87,17.54-16.86-7.85-16.86-17.54,7.55-17.54,16.86-17.54m7.9,20.35a4.71,4.71,0,1,0-4.53-4.71,4.62,4.62,0,0,0,4.53,4.71m-7.9-26.35c-12.6,0-22.86,10.56-22.86,23.54s10.26,23.54,22.86,23.54,22.87-10.56,22.87-23.54S202,47.25,189.39,47.25Z"/><path d="M127,11.43c1.35,0,2.77,0,4.26,0,35.29.62,54.9,18.2,66,28.77,13.49,12.84,20.56,33,20.59,48.14,0,10.68-42.82,16-64.66,17.32-3.78.23-6.93.35-9.12.35-.59,0-1.1,0-1.55,0h-.41c-2.07,0-8.64.48-10.44,6.46-.32,1-1.23,6.3,2.46,6.3,1.3,0,3.17-.65,5.85-2.37a4.89,4.89,0,0,1,2.68-.89c4.62,0,6.69,8.54,5.11,9.14a2,2,0,0,1-.66.14c-1.25,0-1.54-1.8-1.56-4.17,0-1.4-1.78-2.23-3.59-2.23s-3.53.77-3.87,2.52c7.15,4.17,4.93,14.15,3.6,16.46-.3.53-.65.74-1,.74-1.14,0-2.18-2.4-1.19-3.17,1.29-1,3.47-3.36,2.28-6.13-1.09-2.52-2.4-3.86-4-3.86s-3.46,1.36-5.63,4.24c-1.56,2.05-2.59,2.81-3.86,2.81-2.26,0-5.25-2.45-13.19-4.32a20.2,20.2,0,0,0-4.66-.49,39.34,39.34,0,0,0-10.77,1.7c-19.4,5.66-43.45,25.47-33,59.46,5,16.33,16.27,22.2,27.42,22.2s22.05-5.79,26.72-12.88a15.84,15.84,0,0,0,1.65-3.22,31.73,31.73,0,0,0,1-3.51c1.78-7.59-.07-13.52-2.9-17.44-2.35-3.28-5.38-5.16-7.54-5.44,3.93,4.38-1.27,18.71-9.88,18.71a8.68,8.68,0,0,1-1-.06c-14-1.8-17-17.39-8.69-26.5a19.81,19.81,0,0,1,15-6.62,26.8,26.8,0,0,1,9.65,1.91,30.65,30.65,0,0,1,4.2,2c.41.24.8.49,1.19.76,11.21,7.84,13.5,30.64,3.89,47.88-6.57,11.8-18.72,21-37.41,21a63.65,63.65,0,0,1-7.51-.46c-1.1-.14-2.22-.3-3.36-.5-.51-.08-1-.16-1.55-.26A74.23,74.23,0,0,1,31.3,196.3C18.35,178.52,12.6,155,17.19,130.83,25.76,85.85,50.4,61,72.53,46.29a201.71,201.71,0,0,1,28.21-15.2c3.29-1.51-2.65-9.48-1.51-12.25,1.41-3.43,3.85-7.41,27.8-7.41m60.5,81.15c11.57,0,20.95-9.75,20.95-21.79S199.1,49,187.53,49s-20.95,9.75-20.95,21.79S176,92.58,187.53,92.58M127,5.43c-24.18,0-30.38,3.91-33.35,11.12-1.39,3.39-.07,6.87,1.1,10l.24.63A195.09,195.09,0,0,0,69.21,41.29C38,62,18.54,91.71,11.3,129.71c-4.73,24.85.79,50.41,15.15,70.13a80.46,80.46,0,0,0,50.06,32l1.27.22.4.07c1.32.22,2.51.4,3.64.53a68.58,68.58,0,0,0,8.23.51c18.86,0,34-8.54,42.66-24.06,11-19.83,8.39-45.86-5.7-55.71-.58-.41-1.12-.75-1.64-1.05a38.22,38.22,0,0,0-5-2.4,32.54,32.54,0,0,0-11.84-2.32,25.73,25.73,0,0,0-19.44,8.57,23.09,23.09,0,0,0-4.88,23.24c2.7,7.36,9,12.2,17.22,13.26a13.29,13.29,0,0,0,1.78.11c6,0,11.55-4,14.77-10.52a17.89,17.89,0,0,1-.29,7.33,24.29,24.29,0,0,1-.84,2.83,9.16,9.16,0,0,1-1,2c-3.25,4.94-12,10.18-21.71,10.18-7.38,0-17.13-3.12-21.69-18-3.56-11.62-2.91-22.08,1.94-31.08,5.2-9.64,15.3-17.44,27-20.86a33.17,33.17,0,0,1,9.09-1.46,14.3,14.3,0,0,1,3.28.33,47.43,47.43,0,0,1,8.41,2.82,15.44,15.44,0,0,0,6.16,1.66,8.84,8.84,0,0,0,4.83-1.44,8.36,8.36,0,0,0,.44,2.05,7.74,7.74,0,0,0,7.12,5.5,7.18,7.18,0,0,0,6.19-3.74,20.89,20.89,0,0,0,2.22-9.85,7.92,7.92,0,0,0,.78-.26c2.66-1,5.16-4,4.18-9.35a15.67,15.67,0,0,0-4.95-9c1.37,0,2.86-.13,4.43-.23,5.4-.33,24.35-1.68,41.4-5.27,13.47-2.84,28.92-7.45,28.9-18,0-15.51-7-37.75-22.46-52.48-10.14-9.65-31.24-29.74-70-30.42-1.5,0-3,0-4.36,0Zm60.5,81.15c-8.24,0-14.95-7.08-14.95-15.79S179.29,55,187.53,55s14.95,7.08,14.95,15.79-6.71,15.79-14.95,15.79Z"/></svg>
		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
	</center>
</div>

Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.

Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.

<link href="https://fonts.googleapis.com/css?family=Nunito:400" rel="stylesheet">

Trabalhando com o CSS

Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.

Leia os comentários no código para entender o seu funcionamento.

<style>
		/*
		Configuração do container
		onde ficará os Neons
		*/
		.area_neon{
			background-color: #0F0F0F;
			font-family: 'Nunito', sans-serif;
			
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			padding: 20px;
			padding-top: 40px;
			position: absolute;
		}
		
		/*
		Base do Neon apagado (TEXTO).
		Iremos simular um efeito as lâmpadas
		de neon apagadas.
		*/
		.area_neon h1.neon{
			font-weight: 400;
			font-size: 7em;
			
			/**
			O filtro BLUR deve ser mantido em 0, porque 
			iremos usa-lo quando ligado.
			Para a animação de transição funcionar
			corretamente, ele precisa ser declarado
			mesmo desligado.
			**/
			filter: blur(0);
			
			/**
			Para simular a lâmpada, colocaremos um
			contorno bem suave, para delimitar o
			objeto, porém com o fundo
			quase transparente
			**/
			-webkit-text-stroke: 1px rgba(255,255,255,0.1);
			color: rgba(255,255,255,0.1);
			
			/**
			O TextShadow e o BackgroundClip
			irá servir para colocar um efeito de 
			profundidade no objeto
			**/
			text-shadow: -5px 5px 5px black;
  			-webkit-background-clip: text;
			
			/**
			O Transition é responsável por
			adicionar uma sensação de animação
			entre os eventos.
			**/
			transition: all ease 1s;
		}
		
		/**Texto com o Neon Ligado**/
		.area_neon h1.neon.on{
			/**
			Será fundametal o desfoque para dar
			a sensação de luminosidade.
			**/
			filter: blur(1px);
			
			/**
			Um objeto com luz precisa possuir seu 
			centro branco, caso contrário, vai dar
			a sensação de que está apenas com um
			sombreamento e não com luz.
			
			Por isso, devemos manter a cor branca,
			que vai representar o centro luminoso,
			e a borda da cor que desejamos usar.
			
			O TextShadow será a luminosidade do
			ambiente vinda da luz do Neon.
			
			O contorno e a sombra deverão ser
			da cor que você escolher para o neon,
			mas a cor do texto deverá ser sempre
			branca.
			**/
			color: white;
			-webkit-text-stroke: 1px #00FFB3;
			text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
			-webkit-background-clip: none;
		}
		
		/**
		O neon para a imagem SVG terá que ser
		um pouco diferente, mas podemos
		manter a mesma lógica.
		**/
		.area_neon svg.neon_img{
			width: 50%;
			margin: 0 auto;
			
			/**
			Ao invés de usarmos color, usaremos 
			o parâmetro FILL para poder determinar a cor
			do objeto e o STROKE para a borda.
			
			Porém usaremos as mesmas lógicas
			usadas no Texto
			**/
			fill: rgba(255,255,255,0.1);
			stroke: rgba(255,255,255,0.1);
			
			filter: blur(0) drop-shadow(-5px 5px 5px black);
 			/**
			Usaremos o drop-shadow aplicado no filter,
			para poder ter o efeito similar ao do texto.
			**/
			
			transition: all ease 1s;
		}
		/**SVG com o neon Ligado**/
		.area_neon svg.neon_img.on{
			/**
			Aqui aplicamos a mesma lógica usada
			no texto, porém adaptada para o tipo de objeto.
			**/
			fill: white;
			stroke: #F0FF00;
			filter: blur(1px) drop-shadow(0 0 10px #F0FF00)  drop-shadow(0 0 200px #F0FF00) ;
		}
	</style>

Ligando o Neon

Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.

Para isso vamos criar a função turnOn():

<script>
function turnOn(){
	var texto = document.getElementById("texto_neon");
	texto.className = texto.className.concat(" on");

	var imagem = document.getElementById("img_neon");
	imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
	//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
}
</script>

Agora vamos testar?

Clique aqui para ver em uma nova aba

Você pode pegar o Código Completo deste tutorial diretamente no GitHub.

Download

Todavia, também podemos ter outros efeitos interessantes seguindo essa mesma lógica.

Feliz ano novo com Contagem Regressiva

Clique aqui para ver em uma nova aba

Sabre Jedi (liga/desliga) com Som

Clique aqui para ver em uma nova aba

Lembrando que todos os códigos demonstrados aqui podem ser baixados pelo GitHub.

Star

Deixe seu comentário e compartilhe este post. Curta a página do VelhoBit no Facebook! e entre para o grupo Design e Desenvolvimento.

24 de dezembro de 2017

O Ladrão de Templates Grátis
Outro dia andei discutindo com um rapaz pelo Twitter porque ele usa templates free, ou “piratas”, instala em um WordPress e assina como se ele fosse o designer (ou desenvolvedor) responsável. Isso se repete em todos os sites que ele fez, inclusive no seu próprio. Não fez nem questão de mudar uma cor ou uma forma. O problema é que essas pessoas revendem os sites para clientes. Alguns até compram, mas também somente para revender. A discussão começou por conta de uma notícia antiga, sobre o bispo que disse que, para manter seu blog, gasta mais de 107 mil reais por mês e ainda pediu ajuda dos seus seguidores para manter.

Você sabe quanto custa ser um designer? E quanto custa ser um programador? E pior! Sabe quantas pessoas fizeram faculdade (ou até autodidatas), estudaram muito, fizeram bons cursos e/ou leram bons livros? Pois é… mas para alguns, isso não tem valor.

Porém, esse rapaz não foi o primeiro a fazer esse tipo de trambicagem. Empresas estão se fortalecendo baseado nessa ideia absurda. Isso está acontecendo muito com gráficas rápidas, que resolvem vender sites para aumentar sua renda. O problema é que elas geralmente não fazem os sites, mas pegam templates grátis e trocam o “desenvolvido por”. E nem tomam o cuidado de disfarçar e no código, podemos até ver o nome dos templates.

Na imagem abaixo, vocês podem ver um detalhe de uma das conversas que eu tive com uma ex-aluna de mídias sociais que trabalhava em uma empresa que fazia esse tipo de “trabalho” (ocultei o nome e a foto porque ela não necessariamente é a responsável, mas uma funcionária).

Depois dessa conversa ela me bloqueou. Ela e seus colegas de trabalho. Porém, eu fui na página do Facebook deles e deixei uma mensagem “bonita”. Claro, que eles apagaram, aí eu deixava de novo. Mas na terceira vez fiz melhor. Resolvi colocar no Twitter dos clientes deles um link para o site original de onde eles pegavam os templates. Infelizmente, é comum que essas mesmas empresas que prestam esse serviço são quem tomam conta das mídias.

O Site de um rapaz, chamado Nilton Câmara (que foi a vítima), foi um dos maiores exemplos de cara de pau de uma prestadora de serviço da área de tecnologia. Realmente não mudaram nada, nem uma cor ou um símbolo, e ainda colocaram no canto: Website Design by Conhecimento Digital. Copyright 2012.

Afinal, qual o problema disso?

Primeiro lugar, vamos a questão ética. Você gostaria de comprar um iPhone 6 da Samsung? Eu sei que a pergunta parece absurda, mas é isso o que acontece. Simplesmente, ao invés de fazer um produto novo, está sendo terceirizado um serviço oferecido. Se você soubesse que poderia ter algo totalmente genérico a um preço muito mais baixo, ou até de graça, você pagaria por essa mão de obra inútil?

Ainda na questão ética, assinar um projeto de outra pessoa é certo? Imagina se eu assinasse um site feito por outra pessoa, um quadro feito por outro artista. Isso não seria correto e traria grandes problemas para o comprador, que acha que está adquirindo um produto original, quando na verdade, é genérico.

Segundo, os problemas legais. Terceirizar serviço (quarteirizar) oferecido é ilegal! Eu mesmo já processei uma empresa por isso, e ganhei, sem discussão. Não se pode oferecer um serviço e pagar outra empresa para fazer. Tanto que, no meu caso, resolveram mudar o nome e o tipo de serviço para consultoria. Além disso, isso fere os direitos de propriedade intelectual, que é irrevogável! Isso mesmo, não pode ser repassado para ninguém. A propriedade intelectual garante a autoria de projeto, o que é diferente dos direitos comerciais. O autor pode abrir mãos de seus direitos comerciais, mas não pode se abdicar do intelectual. Roubar a autoria do projeto de outro também é ilegal.

O que isso traz de ruim para o cliente e para a prestadora de serviços?

A contratante pode se sentir lesada, pois comprou, muitas vezes, um projeto original. Além disso, o leiaute de uma empresa, instituição ou órgão, deve seguir uma identidade corporativa que é definida em todos os projetos gráficos. O SEO desses templates geralmente não são dos melhores e a semelhança desse site com outros templates genéricos também não são bem trabalhados e podem dificultar o encontro do site pelo Google.

A prestadora de serviço, além do fato da ilegalidade, também está perdendo experiência e estabilidade no mercado. Tornar-se-á pouco confiável.

Mas como deve ser feito então?

Existem 3 formas corretas de trabalhar corretamente com isso:
1. Criar um Layout e Template Original;
2. Modificar um Template Free existente, dando devida referência ao template original e deixando claro ao cliente que é uma alteração;
3. Usar um template free ou pago, mas dar a devida referência ao autor e não ter nenhum lucro direto com isso.
O site da PortilloDesign usa um CMS próprio, criado por nós, que prentendemos abrir o código futuramente. Porém, também trabalhamos com outros CMSs em alguns clientes, onde todos os sites são montados primeiro no Photoshop e depois implementado no código referente ao CMS escolhido. Cada template é único e pensado para a necessidade e estética de cada cliente. Os layouts não aprovados são jogados na lixeira para que não sejam reaproveitados.

O blog The Pink Geeks usou um template modificado e as garotas colocaram no rodapé a assinatura junto com os criadores do template original, por exemplo. O Mesmo acontece com o site do E-Farsas, onde ele coloca: “Tema modificado do FabThemes.com”

Não tem problema nenhum em usar um template free, só deixe no rodapé o autor original e não cobre por algo autêntico, somente pela modificação que fizer. Não mude a autoria do trabalho, isso não vai desmerecer de forma algum o seu conteúdo. Todas as pessoas confiáveis precisam ser transparentes.

Concluindo

Não existe um real monitoramento, registro, fiscalização ou cadastro de empresas e profissionais de TI. Da mesma forma, não existe uma fiscalização sobre o que eles fazem. Existem muitas leis sendo criadas para defender pessoas que aparecem peladas na internet, ou um ou outro xingamento preconceituoso. Mas a parte de negócios continua sendo terra de ninguém. Pessoas disfarçadas de profissionais continuam tripudiando empresários e blogueiros que querem melhorar o seu trabalho.

Vale lembrar de que de forma alguma você pode pegar um template pronto e simplesmente revender, ou modificar e revender, se você foi contratado para fazer o site. Se a ideia é modificar algo pronto, então deixe isso claro e revelado como o serviço. Lembre-se que terceirização de serviço oferecido é ilegal e anti-ético.

Existe até uma ferramenta especializada em verificar se o site usa um template comum ou não, para WordPress:
http://www.wpthemedetector.com

Mas o que vocês acham disso? Tem uma opinião diferente sobre a ética nesse caso? Deixe sua opinião.
20 de janeiro de 2017