Para aqueles, que como eu adora o Gimp, segue 5 links bacanas com tutoriais do Gimp, para aguçar nossa criatividade e habilidades com ele.
Quem tiver outros links, pode colocar nos cometários.
Inté ++ Pessoal
Categorias: Design · Software-Livre · Tutoriais
Etiquetado: gimp, Links, Tutoriais
Enfim daqui a 7 dias vai sair a nova versão(beta) do nosso querido InkScape, a versão 0.47 terá de novidade:
Confira as útimas noticias e faça o downalod da nova versão no site oficial da comunidade brasileira.
Inté ++ pessoal!
Categorias: Design · GNU/Linux · Software-Livre
Etiquetado: editor de imagem, inkscape
Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao IE6 e ao Opera. Falando em IE6(esta porcaria), o efeito do :active tem uma pequena diferença dos outros navegadores, no IE6 quando a imagem for clicada ela irá ampliar normal, mas quando o botão do mouse deixar de ser pressionado a imagem permanece ampliada e nos outros navegadores(Firefox, Opera, Safari, Chrome, IE7…) a imagem some para o usúario escolher outra, não consegui descobrir um jeito para consertar isso, se alguem descobrir é só falar ai nos comentários que eu adicionarei com os devidor créditos!
Bom vamos ao que interessa…
A estrutura do arquivo (X)HTML ficaria assim:
[...] <div id="galeria"> <small>Clique na miniatura para aumentar a imagem</small><br /><br /> <a class="thumb" href="#thumb"> <img src="imagens/thumb_image1.jpg" alt="" /> <span> <img src="imagens/1.jpg" alt="" /> </span> </a> </div> [...]
Onde dentro do <a> vai ficar as duas imagens, o thumbnail(miniatura) e imagem com tamanho maior(recomendo 400×300, ou aproximado),o thumbnail será a imagem clicada que recebe um link “cego” a imagem maior fica dentro de um <span> onde será feito a “mágica” com css, para aparecer quando for chamada, segue a “mágica”
Arquivo CSS:
*{padding:0;margin:0;}/*deixar margem e padding dos elementos com padrão zerado*/
small{font-size:12px; font-weight:bold;color:#333;}/*formata a mensagem de como visualizar as imagens*/
#galeria{background-color:#9FCBFF;position:relative;width:720px;margin:25px auto;padding:10px;text-align:center;}/*div pai, que englobará as imagens*/
a.thumb img{background-color:#fff;border: 1px solid #999;padding:3px;}/*estiliza as miniaturas*/
a.thumb span{position:absolute;background-color: #000;padding: 10px;left:-10000px;visibility: hidden;color: black;text-decoration: none;}/*começa a mágica*/
a.thumb:active span{visibility:visible;top: 50px;left: 120px;z-index: 50;}/*termina a mágica!*/
As declarações CSS principais para o efeito são:
a.thumb span:
a.thumb:active span:
Categorias: (x)html/css · Desenvolvimento · Design · Navegadores · Tableless · Tutoriais · Web Standards
Etiquetado: css, Tutoriais
Olá pessoal, alguns meses atrás eu estava sofrendo pra pra fazer um formulário de envio de dados de um form para o email de um cliente através de uma area do site, consegui enfim! Então vou compartilhar nesse post o desenvolvimento de um formulário de contato simples para seu site, utilizando a função mail() do php, com validação de campos(inclusive de email), sem spam e com estilização em css.
Irei dividir em 3 partes:
Vamos começar então, com a construção do form em (X)HTML:
contato.php
<!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" lang="pt-br">
<head>
<meta name="author" content="Marcelo Torres" />
<meta http-equiv="content-type" content="text/html; charset=iso-utf-8" />
<title>Formulário de contato em PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="contato.php" method="post">
<fieldset>
<legend>Entre em contato</legend>
<small>*Campos de Preenchimentos Obrigatório</small><br />
<?php include("enviar.php")?>
<label for="nome"> * Seu nome:</label>
<input id="nome" name="nome" size="31" type="text" value="<?echo $nome ;?>" /><br />
<label for="email">* Seu email:</label>
<input id="email" name="email" size="31" type="text" value="<?echo $email ;?>" /><br />
<label for="assunto">* Assunto:</label>
<input id="assunto" maxlength="50" name="assunto" size="15" type="text" value="<?echo $assunto ;?>" /><br />
<label for="mensagem">* Mensagem:</label><br />
<textarea id="mensagem" cols="53" rows="5" name="mensagem"><?echo $mensagem;?></textarea><br />
<input name="enviar" type="submit" value="Enviar" class="botao"/>
<input name="cancelar" type="reset" value="Limpar" class="botao"/>
<p>Formulário de contato em PHP, por <a title="blog do autor" href="http://marcelowd.wordpress.com">Marcelo Torres</p>
</fieldset>
</form>
</body>
</html>
Nota I: o value tem um echo em php com as variáveis( que nós iremos ver ainda), para no caso de um erro na validação do form, os dados digitados continuar nos campos, para que o usuário não tenha que digitar denovo.
Nota II: o comando “<?php include(“enviar.php”)?>”, está incluindo o arquivo
enviar.php, onde estão localizados, as validações dos campos e é claro o script para envio para seu email, vamos fazer este arquivo então.
enviar.php
<?php /*Variaveis do Formulario*/ $nome = trim(@$_POST['nome']);/*recebe os dados digitados no campo "nome"*/ $email = trim(@$_POST['email']);/*recebe os dados digitados no campo "email"*/ $assunto_user = trim(@$_POST['assunto']);/*recebe os dados digitados no campo "assunto"*/ $mensagem = trim(@$_POST['mensagem']);/*recebe os dados digitados no campo "mensagem"*/ $enviar = @$_POST['enviar'];/*Botão enviar*/ /*variavel que contará os erros*/ $erros = 1; /*transforma em variavel global, a variã¡vel email*/ global $email; if($enviar)/*Se o botão enviar for pressionado, faça...*/ { /*Verifica campo "nome" vazio*/ if($nome == "") { $erros++; echo "<small class=\"erro\">O Campo nome esta vazio</small><br />"; } elseif(is_numeric($nome))/*verifica se foi digitado número no campo*/ { $erros++; echo "<small class=\"erro\">Você digitou numero no campo nome</small><br />"; } /*Verifica campo "email" vazio*/ if($email == "") { $erros++; echo "<small class=\"erro\">O Campo email está vazio</small><br />"; } /*Verifica campo "assunto" vazio*/ if($assunto_user == "") { $erros++; echo "<small class=\"erro\">O Campo assunto esté vazio</small><br />"; } /*Verifica campo mensagem vazio*/ if($mensagem == "") { $erros++; echo "<small class=\"erro\">O Campo mensagem esté vazio</small><br />"; } /*verifica email, se digitado incorretamente*/ $email = str_replace (" ", "", $email); $email = str_replace ("/", "", $email); $email = str_replace ("@.", "@", $email); $email = str_replace (".@", "@", $email); $email = str_replace (",", ".", $email); $email = str_replace (";", ".", $email); if(strlen($email)<8 || substr_count($email, "@")!=1 || substr_count($email, ".")==0) { $erros++; echo "<small class=\"erro\">Por favor, digite seu <b>e-mail</b> corretamente.</small><br />"; } if($erros <= 1)/*se não tiver algum erro continuara abaixo, se tiver é exibido as messagens configuradas acima*/ { /*Configuramos o e-mail para o qual serão enviadas as informações*/ $seuemail = "seuemail@exemplo.com";/*email de destino*/ $assunto = "contato do site";/*assunto padrão do email(não o digitado pelo úsuario)*/ /*Configuramos os cabeçalhos do e-mail*/ $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n";/*para o envio com formatação HTML. Charset po ser iso-8859-1 também*/ $headers .= "From: $seuemail \r\n";/*Para "seu email"*/ /*Configuramos o conteúdo do e-mail*/ $conteudo = "<strong>Nome:</strong> $nome<br />";/*vai para o seu email o que foi digitado no campo "nome"*/ $conteudo .= "<strong>Email:</strong> $email<br />";/*vai para o seu email o que foi digitado no campo "email"*/ $conteudo .= "<strong>Assunto:</strong> $assunto_user<br />";/*vai para o seu email o que foi digitado no campo "assunto"*/ $conteudo .= "<strong>Mensagem:</strong> $mensagem<br />";/*vai para o seu email o que foi digitado no campo "mensagem"*/ /*Enviando o e-mail...*/ $enviando = mail($seuemail, $assunto, $conteudo, $headers); /*verifica se o e-mail foi enviado com sucesso*/ if($enviando) { echo "Mensagem enviada com sucesso!"; echo "<script>alert(\"Mensagem enviada com sucesso!\")</script>"; echo "<script>window.location = \"index.php\"</script>"; } else{/*seu ouve algum erro...*/ echo "<p><b>$nome</b><br />Ouve um erro no envio, desculpe-nos pelo transtorno!!!</p>"; } } } ?>
Sem notas dessa vez, os comentários(em verde) explicam tudo :).
Agora vamos a parte divertida, o CSS, :D
style.css
*{padding:0; margin:0;}/*reset de margem e espaçamento para todos os elementos*/
body{letter-spacing:2px;font-size:13px;color:#333;line-height:36px;}
fieldset{width:500px;padding:20px;margin:50px;}
input{width:350px;font-size:18px;color:#333;border:solid 1px #333;}
input.botao{width:100px;}
small{color:#008800;}
small.erro{color:#f00;}
Categorias: (x)html/css · Desenvolvimento · Design · PHP · Tableless · Tutoriais · Web Standards
Etiquetado: PHP, Tutoriais
Continuando a “saga sem fim” dos addons para Firefox, nesse 4ª “episódio” mostrarei mais 3 complementos interessante para turbinar sua raposa, lá vai então:
Como usar?
Para acessá-lo e/ou escondê-lo, basta clicar no icone que fica na parte direita da barra de status.
O Flashblock é muito util para usuários que não tem internet banda-larga, pois como o próprio nome diz, ele bloqueia todo conteudo em flash que está na página, evitando assim o carregamento desnecessário do mesmo, e consequentemete diminuindo o tempo de carregamento da página.
Como usar?
Para visualizar o conteudo basta clicar sobre o logotipo do flash, que se encontrará no lugar do flash bloqueado.
O ColorZilla permite capturar qualquer cor de uma página, ele disponibiliza o código em HSV, RGB e Hexadecimal, bem util para nós que sempre buscamos aquela tonalidade perfeita!
Como usar?
Para capturar a cor, basta clicar no icone do lado esquerdo da barra de status(onde tem um conta-gotas) e depois clicar no local desejado, feito isso clique 2 vezes novamente no icone, que aparecerá uma paleta com a cor selecionada e as cores semelhantes, além é claro dos códigos das cores.
Veja Também:
Categorias: Cores · Design · Navegadores · Software-Livre
Etiquetado: addons, firefox, Navegadores, plugins
Ultimos posts
