Ruan Carlos » CSS http://ruancarlos.com.br/Blog Desenvolvimento Thu, 12 Jan 2012 22:29:22 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Estilizando Input File com CSS http://ruancarlos.com.br/Blog/estilizando-input-file-com-css/ http://ruancarlos.com.br/Blog/estilizando-input-file-com-css/#comments Thu, 02 Jul 2009 18:07:49 +0000 Ruan Carlos http://ruancarlos.com.br/Blog/?p=223 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.

< ?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.

< ?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.

]]> http://ruancarlos.com.br/Blog/estilizando-input-file-com-css/feed/ 26 Criando balões com CSS | Tutorial CSS http://ruancarlos.com.br/Blog/criando-baloes-com-css-tutorial-css/ http://ruancarlos.com.br/Blog/criando-baloes-com-css-tutorial-css/#comments Tue, 30 Jun 2009 00:15:56 +0000 Ruan Carlos http://ruancarlos.com.br/Blog/?p=214 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

]]> http://ruancarlos.com.br/Blog/criando-baloes-com-css-tutorial-css/feed/ 1 5 maneiras de incrementar suas imagens com CSS | CSS http://ruancarlos.com.br/Blog/5-maneiras-de-incrementar-suas-imagens-com-css/ http://ruancarlos.com.br/Blog/5-maneiras-de-incrementar-suas-imagens-com-css/#comments Tue, 14 Apr 2009 15:42:10 +0000 Ruan Carlos http://ruancarlos.com.br/Blog/?p=104 Aqui estão algumas dicas de como incrementar suas imagens, geralmente estes efeitos são feitos no Photo Shop, porém é muito tedioso e trabalhoso fazer isso a longo prazo. Estas técnicas a seguir vão lhe ajudar a amenizar esta dor rsrs :) . É claro que se você tiver mais técnicas sobre este assunto você poderá compartilhar conosco.

Drop Shadow Effect | Efeitos de sombra

Adiciona uma sombra usando uma imagem de fundo com algum padding.
Demo

<img class="shadow" src="sample.jpg" alt="" />
img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}[/pre]

<h2>Double Border Effect | Efeitos de bordas duplas</h2>
Esta técnica é bem comum, criamos bordas duplas fazendo o seguinte:
<a href="http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm" target="_blank">Demo</a>

1
1img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

Framed Image Effect | Efeitos moldura em imagens

Este efeito é bem legal, a primeira vez que o vi achei que era feito tudo em Photo Shop e depois feito MAP da imagem (engano meu rsrs =)), você poderá ter uma descrição melhor dele no www.webdesignerwall.com. Este efeito basicamente coloca uma camada transparente em cima da imagem. Caso tenha problemas com o IE6 (quem não tem?) você pode ver este tutorial do sohtanaka.com.
Demo

<div class="frame-block">
	<span> </span>
	<img src="sample.jpg" alt="" /></div>
.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

Watermark Effect | Efeitos marca de água

Você pode adicionar uma marca de água a uma imagem diminuindo a opacidade da imagem de cima, passando assim a aparecer mais a imagem de baixo. Este efeito é apensa visual, para implementar uma proteção você terá que olhar este tutorial CSS Watermark Tutorial (em breve em PT-Br aqui).
Demo

<div class="transp-block">
	<img class="transparent" src="sample.jpg" alt="" /></div>
.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	filter:alpha(opacity=75);
	opacity:.75;
}

Image with Caption | Imagem com caption – legenda

Adicionar uma rápida legenda com posicionamento absoluto e transparência. Caso deseje fazer isso com jQuery você poderá ver um post meu que fala sobre isso que é o Captions em Imagens com Captify | jQuery plugin
Demo

<div class="img-desc">
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite></div>
.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

Nota:
Post original – O autor do post detem todos os direitos intelectuais dos códigos e exemplos, por isso não foram traduzidos. Site do autor

]]> http://ruancarlos.com.br/Blog/5-maneiras-de-incrementar-suas-imagens-com-css/feed/ 7