Ir ao conteúdo

Estilizando Input File com CSS

julho 02, 09 por Ruan Carlos
Estilizando input do tipo file com css

Estilizando input do tipo file com css

Como prometido, mais um tutorial sobre CSS.

Não preciso citar os benefícios do CSS ou encher de linguiça aqui, vamos direto ao ponto.
Vamos criar um input do tipo file estilizado com CSS e um pouco de javascript (sem ele não há vida rsrs).

Veja o DEMO.

Para começar devemos preparar o HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?xml version="1.0" encoding="ISO-8859-1" ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Estilizando input file com css</title>
</head>
<body>
	<form>
		<div id="div-input-file">
			<input type="file" />
			<div id="div-input-falso"><input name="file-falso" type="text" id="file-falso" /></div>
		</div>
	</form>
</body>
</html>

Bom agora vamos adicionar alguns IDS e alguns Names por ai.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?xml version="1.0" encoding="ISO-8859-1" ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Estilizando input file com css</title>
</head>
<body>
	<form>
		<div id="div-input-file">
			<input name="file-original" type="file" size="30" id="file-original"/>
			<div id="div-input-falso"><input name="file-falso" type="text" id="file-falso" /></div>
		</div>
	</form>
</body>
</html>

Bom já deu para ter uma idéia de como vai ficar né? Agora falta o CSS e o Javascript básico.
No input file-original adicionamos o seguinte código javascript:

onchange="document.getElementById('file-falso').value = this.value;"

ficando assim:

<input name="file-original" type="file" size="30" id="file-original" onchange="document.getElementById('file-falso').value = this.value;"/>

Agora a mágica do CSS.

<style type="text/css">
#div-input-file{
	background:url(img/file.gif) no-repeat 100% 1px;
	height:28px;
	width:385px;
	margin:0px;
}
#div-input-file #file-original{
	opacity: 0.0;
	-moz-opacity: 0.0;
	filter: alpha(opacity=00);
	font-size:18px;
}
#div-input-falso{
	margin-top:-28px;
}
#div-input-falso #file-falso{
	width:265px;
	height:22px;
	font-size:18px;
	font-family: Verdana;
}
</style>

Agora é só baixar a imagem e colocar dentro da pasta img: file

Veja o DEMO.

Criando balões com CSS | Tutorial CSS

junho 29, 09 por Ruan Carlos
css-pin-balloon

css-pin-balloon

Oi, hoje iremos falar um pouco de CSS.

O site Janko é uma boa referência no assunto. Neste artigo ele cita como é feito os efeitos do site da Africa Tour 2008. Com códigos simples como:

#map { width:669px; height:351px; background-image:url('map.jpg'); position:relative;}
#map div { width: 120px; height:60px; position:absolute; cursor:pointer; background-repeat:no-repeat;}
<div id="map">
     <div id="america"></div>
     <div id="europe"></div>
     <div id="africa"></div>
     <div id="asia"></div>
     <div id="australia"></div>
     <div id="southAmerica"></div>
</div>

Dá para fazer um efeito muito legal.

Não vou traduzir este artigo desta vez. Mais estou preparando um novo sobre css bem legal, para você que gosta de estilizar sua página via gostar muito.

Site | Demo

review | 14º EDTED – Curitiba

junho 13, 09 por Ruan Carlos

A pedidos do Juarez do grupo de jQuery irei fazer uma review do que aconteceu no EDTED aqui de curitiba no dia 06/06/09.
A para quem não sabe o EDTED é o encontro de Design e Tecnologia Digital, do qual surgiu com a junção do ETI (encontro de TI) e o EWD (encontro de Web Designer) promovidos pela Arteccom que produz as revistas Web Design e TIDigital.

O 14º EDTED de Curitiba foi no dia 06/06/09, um dia que aqui em Curitiba não estava muito frio (se fosse na quinta anterior eu nem ia sair de casa rsrs) e o céu estava limpo, o encontro foi no hotel Bourbon, um dos mais chiques aqui de Curitiba (eu mesmo fiquei impressionado pois eu nunca tinha entrado nele).

No evento tinha 3 espaços, a de Design a de Tecnologia e a de Oficinas, como eu não sou designer eu segui a de tecnologia.

Fui o primeiro a chegar ao espaço de tecnologia, porém não o primeiro ao evento.

Logo na entrada do hotel me deparei com 7 seguranças, achei legal, porém não era para nós programadores, designer ou apaixonados por TI, eu até desconfiei um pouco, está certo que o futuro de Curitiba estava todo ali naquele prédio mais achei segurança demais para nós.

Pedi a informação para um dos seguranças e eles falaram que o encontro estaria sendo realizado no segundo andar e que era para eu subir pelas escadas (o problema deste lugar ali é que eu não achei elevadores para o evento, o que poderia prejudicar a acessibilidade de um cadeirante).

Após passar por uma cascata, um lindo saguão, um piano, e alguns degraus eu cheguei ao segundo piso aonde as meninas me recepcionaram para a identificação. Minha sorte é que o meu crachá já estava pronto e eu não tive que ficar na fila para confirmar pagamento e fazer a impressão do crachá (eu não paguei para ir lá, eu ganhei os ingressos – Obrigado Arteccom).

Crachá

Subi até o 3º piso para pegar meu Kit que continha em uma linda e resistente sacola, um par de revistas, claro que uma é a Webdesign e a outra a TIDIGITAL.

Louco para ganhar uns brindes né, desci nos estandes dos patrocinadores, :( ganhei apenas uma caneta da uol host.

Já que nos estandes não foi produtivo :) eu fui para o espaço tecnologia, e como fui o primeiro a chegar, tive o privilégio de escolher o lugar e tirar algumas fotos.

jsTree | Criando Tree Menu com jQuery

junho 05, 09 por Ruan Carlos

jstree

Olá pessoal, fazia um tempão que eu não postava aqui né, pois é anda corrido, mais no outro post eu falo mais sobre isso.

Hoje temos um plugin para fazer Menus em forma de Tree, sim é do mesmo jeito do Windows Explorer.

jsTree é mais um plugin jQuery que faz menus em forma de Tree, ele é completamente gratis (GPL e MIT) e suporta IE 6, FF, Safari 3, Opera 9 e Crome.

Ele pode receber os dados de um JSON ou estar pré definido no HTML mesmo.

Então vai lá, visita o site do criador, de uma bizoiada nos exemplos e se gostou da dica posta alguma coisa aqui (construtiva) e se não gostou, diga para qual caminho devemos ir para lhe agradar, prometo que vou fazer tudo o que eu posso para que isso aconteça.

Site | Demo

Efeito puff de fumaça | jQuery plugin

maio 27, 09 por Ruan Carlos

smokepuff

O site Gaya Design mudou se visual e achava que faltava alguma coisa para dar um “tchan” a mais, este efeito foi conquistado com a imagem de umas fabricasinha soltando fumaça, o público ao ver este efeito começaram a perguntar ao autor como ele fez foi então que seu autor desenvolveu o plugin puffing smoke que é nada mais nada menos um plugin do jquery que gera um efeito do tipo de nuvens de fumaça de fábricas (aqueles de joguinhos). Em seus exemplos ele também faz o mesmo a imagem do Mario e com o logo do WordPress.

Seu uso é fácil e simples como:

SmokeEffect.imgLocation = "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png";
SmokeEffect.smokeWidth = 80;
SmokeEffect.smokeHeight = 45;

De uma olhada lá.

Site | Demo

jCarousel | Carroceis com jQuery | Plugin

maio 18, 09 por Ruan Carlos

jcarousel

jCarousel é um plugin do jQuery para controlar listas de itens na horizontal ou na vertical. Os itens podem ser HTML estático ou com seu conteúdo carregado via (ou não) AJAX, você pode ir para frente ou para traz (com ou sem animação)

Site

Impromptu | Alertas bonitos com jQuery

maio 07, 09 por Ruan Carlos

impromptu

jQuery Impromptu é um plugin para ajudar a prover mais facilmente mensagens bonitas a usuários de seus sites. Seria mais ou menos uma boa substituição para um alerta, prompt ou um confirm. Este plugin não está interessado em subistituir um modal, apenas quer mostrar mensagens mais bonitas.

Ex:

$.prompt( msg , options )

Site

Breadcrumb Navigation | jQuery Plugin

maio 01, 09 por Ruan Carlos

breadcrumb

Breadcrumb Navigation é a famosa navegação estrutural ou navegação por migalhas de pão.

O plugin jquery jBreadCrumb faz com que este tipo de navegação fique com uma aparência diferenciada. Ao invés de controlar no servidor a quantidade de elementos que serão mostrado para o cliente em caso de navegações muito grande, ele faz a mesma encolher sendo feito no lado do cliente, por razões de SEO e usabilidade, alem de uma aparência bonita.

Este plugin é inteligente no sentido de que apenas faz o collapse baseado no tamanho do Breadcrumb. Ele usa uma imagem .png com sobreposição para atingir o efeito gradiente.

Alem do mais, ele é compativel com IE 6 e IE 7.

Site

styledButton | Botões do modo Gooogle | jQuery Plugin

abril 27, 09 por Ruan Carlos

styledbuttom

styledButton é um plugin do jQuery que transforma botões no estilo do google. Segundo o autor, ele não sabe como os engenheiros do google fizeram com os botões deles, mais que o styledButton se adaptam automaticamente aos paddings e outros estilos que se deseja usar.

Este plugin deve funcionar com qualquer elemento HTML embora seu autor apenas o testou em < span >.

Browsers suportados

Este plugin foi testado e funcionou em:

  • Opera 9.6x
  • Firefox 3
  • Firefox 2
  • Safari 4 beta
  • Safari 3
  • Safari 2
  • Internet Explorer 8 beta
  • Internet Explorer 7
  • Internet Explorer 6
  • Chrome
  • Adobe AIR 1.5+

Site do autor | Site do Plugin

imgAreaSelect | Selecionar área em uma imagem | jQuery plugin

abril 24, 09 por Ruan Carlos

imgareaselect

imgAreaSelect é um plugin do jQuery que lhe possibilita criar áreas selecionáveis em imagens, esta técnica é muito usada para cortar imagens.
Quando a área é selecionada você pode pegar as coordenadas X Y e aplicar muitas ações, tais como cortar ou implementar algum efeito.

Este plugin é muito flexível e oferece várias opções como:

  • Relação de aspecto
  • max height, max width
  • Opacidade
  • Se pode redimensionar ou não
  • Suporte a teclado
  • Funções de Callback e mais

Site | Demo