GTIVIDEOAULAS | Seu portal de video aulas » Css http://gtivideoaulas.com Web, Zend Framework, PHP , Linux, mysql, css, javascript, design e muito mais Mon, 16 Jan 2012 01:06:37 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS – Molduras efeitos em imagens de galeria http://gtivideoaulas.com/css-molduras-efeitos-em-imagens-de-galeria http://gtivideoaulas.com/css-molduras-efeitos-em-imagens-de-galeria#comments Tue, 23 Feb 2010 18:46:53 +0000 Felipe Girotti http://gtivideoaulas.com/?p=429 Continue reading →]]>

Beleza galera, aqui veremos uns efeitos legais com images png transparentes que servem de molduras apara as imagens

Download arquivos
Site de referência

CSS – Efeitos em galeria de imagens from Felipe Girotti on Vimeo.

Código da video aula HTML

<!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=utf-8" />
<title>Galeria</title>
<link rel="stylesheet" type="text/css" href="galeria.css" />
<!--[if lt IE 7]>
<style type="text/css">

 ul li span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->
</head>

<body>
<div class="icons">
	<ul>
		<li><span></span><img src="images/inverno.jpg" height="80" width="100" /></li>
		<li><span></span><img src="images/montanha.jpg" height="80" width="100" /></li>
		<li><span></span><img src="images/ninfeia.jpg" height="80" width="100" /></li>
		<li><span></span><img src="images/porsol.jpg" height="80" width="100" /></li>
	</ul>
</div>
<div class="molduras">
<ul>
		<li><span></span><img src="images/inverno.jpg" height="120" width="172" /></li>
		<li><span></span><img src="images/montanha.jpg" height="120" width="172 "/></li>
		<li><span></span><img src="images/ninfeia.jpg"  height="120" width="172" /></li>
		<li><span></span><img src="images/porsol.jpg"  height="120" width="172" /></li>
	</ul>
</div>
<div class="mol">
<ul>
		<li><span></span><img src="images/inverno.jpg" height="120" width="172" /></li>
		<li><span></span><img src="images/montanha.jpg" height="120" width="172 "/></li>
		<li><span></span><img src="images/ninfeia.jpg"  height="120" width="172" /></li>
		<li><span></span><img src="images/porsol.jpg"  height="120" width="172" /></li>
	</ul>
</div>

</body>
</html>

Código da video aula CSS

*{margin:0;padding:0}
.icons{ padding:10px;}
.icons ul{ list-style:none;}
.icons li{ padding:4px;width:110px; height:90px;float:left;position:relative;margin:10px;display:inline;}
.icons ul li img{ padding:3px;border:1px solid #c0c0c0;}
.icons ul li span{position:absolute; left:50px; top:-8px; height:21px; width:28px; background:url(images/pin.png) no-repeat;display:block;}
.molduras{ padding:10px;clear:both;}
.molduras ul{ list-style:none;}
.molduras li{ padding:4px;width:200px; height:150px;float:left;position:relative;margin:10px;display:inline;}
.molduras ul li span{position:absolute;top:-5px; left:-1px;  height:134px; width:181px; background:url(images/brush-border.png) no-repeat;display:block;}

.mol{ padding:10px;clear:both;}
.mol ul{ list-style:none;}
.mol li{ padding:4px;width:200px; height:150px;float:left;position:relative;margin:10px;display:inline;}
.mol li img{ padding:3px;}
.mol ul li span{position:absolute;top:-13px; left:-10px;  height:72px; width:122px; background:url(images/floral-corner.png) no-repeat;display:block;}
]]> http://gtivideoaulas.com/css-molduras-efeitos-em-imagens-de-galeria/feed 5 CSS – Links personalizados http://gtivideoaulas.com/css-links-personalizados http://gtivideoaulas.com/css-links-personalizados#comments Mon, 14 Sep 2009 03:02:10 +0000 Felipe Girotti http://gtivideoaulas.com/?p=308

css Beleza galera, veremos hoje como colocar links personalizados em um página, tirando o sublinhado, mudando a cor, fazendo um menu horizontal, e colocando vários links diferentes em uma única página.

]]> http://gtivideoaulas.com/css-links-personalizados/feed 0 CSS – Doctype e modes http://gtivideoaulas.com/css-doctype-e-modes http://gtivideoaulas.com/css-doctype-e-modes#comments Mon, 01 Jun 2009 23:26:38 +0000 Felipe Girotti http://gtivideoaulas.com/?p=192 Continue reading →]]>

cssBeleza galéra Felipe Girotti com mais uma video aula, hoje vamos falar um pouco sobre o doctype: o que é , onde vai , pra que serve, e falaremos também sobre modes dos navegadores. Existem dois modes o quirks (modo antigo), e o santadard ou strict que é o modo atual em que o navegador le corretamente o box model.
Na tabela abaixo, você pode conferir o comportamento dos browsers com Doctype e sem Doctype:

Navegador S / DOCTYPE Com DOCTYPE
IE6 Quirks Strict
IE7 Quirks Strict
Mozila Strict Strict
Opera Strict Strict

Doctype e modes

]]> http://gtivideoaulas.com/css-doctype-e-modes/feed 0 CSS-Bug internet explorer 6 http://gtivideoaulas.com/css-bug-internet-explorer-6 http://gtivideoaulas.com/css-bug-internet-explorer-6#comments Thu, 23 Apr 2009 20:55:39 +0000 Felipe Girotti http://gtivideoaulas.com/?p=149

cssBeleza gálera, mais uma video aula de css, mostrando como resolver o bug do iex6,(O PIOR NAVEGADOR) quando colocamos float e margin no mesmo elemento.

]]> http://gtivideoaulas.com/css-bug-internet-explorer-6/feed 1 CSS-Tabeless e menu estilizado http://gtivideoaulas.com/css-tabeless-e-menu-estilizado http://gtivideoaulas.com/css-tabeless-e-menu-estilizado#comments Sun, 08 Mar 2009 10:45:18 +0000 Felipe Girotti http://gtivideoaulas.com/?p=101 Continue reading →]]>

cssBeleza galéra Felipe Girotti com mais uma video aula. Hoje vamos ver um pouco sobre CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata.Para aprender mais sobre CSS eu indico o site do maujor(Mauricio Samy Silva).Usem a criatividade


]]> http://gtivideoaulas.com/css-tabeless-e-menu-estilizado/feed 2