Pseudonerd » Web Design

fadeOut() jquery

mario — Tue, 19 May 2009 17:19:47 +0000

Criando o efeito fadeOut com jquery.

Veja o exemplo em funcionamento.

Download do codigo.

 


    fadeOut com jquery
    
 
 
    <script type="text/javascript">
    $(document).ready(function() {
 
 
		$('#imagem').fadeOut(2000);
 
 
 
 
	});
 
 
	script>

Não existem posts relacionados.

fadeIn() jquery

mario — Mon, 18 May 2009 02:11:23 +0000

Criando o efeito fadeIn com jquery.

Veja o exemplo em funcionamento.

Download do codigo.



fadeIn com jquery

 
<script type="text/javascript">
$(document).ready(function() {
 
$('#imagem').hide();
$('#imagem').fadeIn(2000);
 
});
 
script>

Não existem posts relacionados.

Formulário com background

mario — Fri, 14 Nov 2008 13:26:03 +0000

Formulário com background

Segue abaixo o código para se criar um formulário com background.

Veja o formulário em funcionamento aqui.


 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <title>Turn postcard photo into a comment form</title>
 
    <style type="text/css">
 
        .commentForm
 
        {
 
            width: 497px;
 
            height: 324px;
 
            position: relative;
 
            background-image: url( 'comment_form.jpg' );
 
            background-repeat: no-repeat;
 
        }
 
        .commentForm input[type="text"], .commentForm textarea
 
        {
 
            width: 210px;
 
            left: 32px;
 
            position: absolute;
 
            background-repeat: no-repeat;
 
            border-width:0px;
 
            font-weight:bold;
 
            font-family:Arial, Sans-Serif;
 
            font-size:0.9em;
 
        }
 
        .nameField
 
        {
 
            top: 44px;
 
            height: 22px;
 
            background-image: url( 'name_bkg.jpg' );
 
        }
 
        .emailField
 
        {
 
            top: 90px;
 
            height: 22px;
 
            background-image: url( 'email_bkg.jpg' );
 
        }
 
        .websiteField
 
        {
 
            top: 133px;
 
            height: 22px;
 
            background-image: url( 'website_bkg.jpg' );
 
        }
 
        .commentField
 
        {
 
            top: 178px;
 
            height:122px;
 
            background-image: url( 'comment_bkg.jpg' );
 
        }
 
        .sendButton
 
        {
 
               position:absolute;
 
               top:268px;
 
               left:362px;
 
               width:100px;
 
               height:30px;
 
               border:solid 2px #000000;
 
               background-color:#7c6852;
 
               color:#e1cdae;
 
        }
 
    </style>
 
    <script type="text/javascript">
 
        function CommentSent()
 
        {
 
            alert("You successfully pressed the button :)");
 
        }
 
    </script>
 
</head>
 
<body>
 
    <div class="commentForm">
 
        <input type="text" id="nameField" class="nameField" />
 
        <input type="text" id="emailField" class="emailField" />
 
        <input type="text" id="websiteField" class="websiteField" />
 
        <textarea id="commentField" class="commentField" cols="10" rows="5"></textarea>
 
        <input type="submit" id="sendButton" value="Send" class="sendButton" onclick="CommentSent()" />
 
    </div>
 
</body>
 
</html>

Não existem posts relacionados.

Adobe Video Workshop

fmarassatto — Mon, 21 Apr 2008 22:08:52 +0000

Navegando por ai encontrei essa seção maravilhosa no site da Adobe. É possível encontrar diversos vídeos de quase todos os programas da Adobe, são ‘mini tutoriais’ ou mesmo vídeos explicativos.
Inlcui Fireworks, Photoshop, Illustrator, Dreamweaver, InDesign e etc (tudo CS3). Tudo dividido por assunto, programa, ou seja, fantástico.

Todos os vídeos estão em inglês. Vale muito a pena dar uma olhada.

http://www.adobe.com/designcenter/video_workshop/

Abraços.

Não existem posts relacionados.

Adobe Kuler

fmarassatto — Mon, 23 Jul 2007 01:26:59 +0000

Meio tarde, mas é sempre bom divulgar.
Há uns meses atrás a Adobe apresentou o Kuler, um site que permite criar suas próprias paletas de cores, compartilhar também consultar as mais populares. Vale a pena fazer uma visita, há muitas combinações de cores que ficaram ótimas!

Site: http://kuler.adobe.com

Na seção Tutorial, ensinam como ‘usar’ o site começando pela apresentação, passando pela criação da própria paleta de cores e como salvá-la.
(só pela apresentação é legal visitar o tutorial hehehe ficou “animal”)

Até mais!

Não existem posts relacionados.

Estudo das Cores

fmarassatto — Wed, 04 Oct 2006 23:20:59 +0000

Fundamental quando se trata de Web Design.
Vamos falar um pouco sobre cores, não eu claro, mas deixarei alguns links muito interessantes para dar uma estudada nessa matéria. Será abordado desde as primeiras noções do estudo das cores, passando por cores primárias, secundárias terciárias….policromia, até chegar em aplicações à Comunicação em Marketing.
Aproveitem

COLOR IN MOTION
Maria Claudia Cortes - site em flash, muito bom.

ESTUDO DAS CORES
Mint-webdesign – simples e interessante, feito com material da Wikipedia

COLORS, EXPRESSIONS AND SENSANTIONS
Site - conteudo geral

A PSICODÂMICA DAS CORES NA CRIAÇÃO DE SITES
Dan Brito - matéria publicada no site iMastes

TEORIA DAS CORES
Leonardo daVinci - Livro para download (do site comunidadeWEB)

Pra começar ta bom né, bom estudo

Não existem posts relacionados.

Teclas de Atalho

fmarassatto — Wed, 23 Aug 2006 23:16:37 +0000

Dei uma pesquisada na net, e achei uma lista muito boa de atalhos do Fireworks, ajuda muito isso.
Conforme for usando é inevitável decora-los.
Sugestões enviem um e-mail: blog.firewind@gmail.com
Abraços…
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Teclas de atalho – Ferramentas

Ferramenta Ponteiro: V ou 0
Ferramenta Selecionar secundário: A ou 1
Ferramenta Dimensionar: Q
Ferramenta Cortar: C
Ferramenta Moldura da caixa de seleção: M
Ferramenta Laço: L
Ferramenta Varinha mágica: W
Ferramenta Pincel: B
Ferramenta Lápis: B ( 2 vezes )
Ferramenta Borracha: E
Ferramenta Embaçar: R
Ferramenta Carimbo: S
Ferramenta Conta-gotas: I
Ferramenta Lata de tinta: G
Ferramenta Linha: N
Ferramenta Caneta: P
Ferramenta Retângulo: U
Ferramenta Texto: T
Ferramenta Forma livre: O
Ferramenta Faca: Y
Ferramenta Ponto ativo retangular: J
Ferramenta Fatia: K
Ocultar fatias e pontos ativos: 2
Mostrar fatias e pontos ativos: 2
Definir traço padrão/cores de preenchimento: D
Trocar traço/cores de preenchimento: X
Modo de tela padrão: F
Modo tela cheia com menus: F ( 2 vezes )
Modo tela cheia: F ( 3 vezes )
Ferramenta Mão: H
Ferramenta Zoom: Z

Teclas de atalho – Menus
Arquivo

Novo: Ctrl+N
Abrir: Ctrl+O
Fechar: Ctrl+W
Salvar: Ctrl+S
Salvar como: Ctrl+Shift+S
Importar: Ctrl+R
Exportar: Ctrl+Shift+R
Visualizar exportação: Ctrl+Shift+X
Imprimir: Ctrl+P
Sair: Ctrl+Q

Editar

Desfazer: Ctrl+Z
Refazer: Ctrl+Y
Localizar e Substituir: Ctrl+F
Recortar: Ctrl+X
Copiar: Ctrl+C
Copiar código HTML…: Ctrl+Alt+C
Colar: Ctrl+V
Limpar: Backspace
Colar em: Ctrl+Shift+V
Colar atributos: Ctrl+Alt+Shift+V
Duplicar: Ctrl+Alt+D
Clonar: Ctrl+Shift+D
Preferências: Ctrl+U

Exibir

Aumentar: Ctrl+=
Reduzir: Ctrl+-
Ajustar seleção: Ctrl+Alt+0
Ajustar tudo: Ctrl+0
Tela inteira: Ctrl+K
Ocultar seleção: Ctrl+L
Mostrar tudo: Ctrl+Shift+L
Réguas: Ctrl+Alt+R
Guia de fatia: Ctrl+Alt+Shift+ç
Ocultar bordas: F9
Ocultar painéis: F4

Selecionar

Selecionar tudo: Ctrl+A
Cancelar seleção: Ctrl+D
Selecionar principal: Ctrl+Right
Selecionar secundário: Ctrl+Left
Selecionar inverso: Ctrl+Shift+I

Modificar

Nivelar seleção: Ctrl+Alt+Shift+Z
Mesclar para baixo: Ctrl+E
Agrupar: Ctrl+G
Desagrupar: Ctrl+Shift+G

Texto

Anexar ao traçado: Ctrl+Shift+Y
Converter para traçados: Ctrl+Shift+P
Verificar a ortografia: Shift+F7

Comandos

Não possui teclas de atalho

Filtros

Repetir filtro: Ctrl+Alt+Shift+X

Janela

Nova janela: Ctrl+Alt+N
Ferramentas: Ctrl+F2
Propriedades: Ctrl+F3
Resultados: Alt+F1
Otimizar: F6
Camadas: F2
Molduras: Shift+F2
Histórico: Shift+F10
Estilos: Shift+F11
Biblioteca: F11
URL: Alt+Shift+F10
Misturador de cores: Shift+F9
Exemplos de cores: Ctrl+F9
Informações: Alt+Shift+F12
Comportamentos: Shift+F3
Localizar e Substituir: Ctrl+F

Ajuda

Usando o Fireworks: F1

Não existem posts relacionados.

Links Uteis

fmarassatto — Sun, 16 Jul 2006 16:49:25 +0000

Aew!! Mudei de endereço, por dois motivos: uma 2 é feio e esse axei mais legal, tamebem pelo endereço.

Espero que de certo XD, estarei com esse post aqi ainda, vale a pensa ficar com ele ai.

Fontes
http://www.dafont.com/
http://www.netfontes.com.br
http://www.beautifulfonts.com/
http://www.misprintedtype.com/v3/fonts.php

Hospedagem de Imagens
http://www.imageshack.us/

Hospedagem de Arquivos
http://www.rapidshare.de/
http://www.4shared.com/
http://www.oxyshare.com/
http://www.depositfiles.com/
http://www.openbloc.com/

Banco de Imagens
http://www.sxc.hu/
http://www.photocase.com/
http://www.freephotostation.com/
http://www.freedpi.com/
http://www.freefoto.com/
http://www.photorack.net/
http://www.zurb.com/zurbphotos/
http://photobank.net-poland.com/
http://www.fotofree.org/
http://gallery.hd.org/
http://www.woophy.com/
http://www.visipix.com/
http://www.unprofound.com/
http://www.animalpicturesarchive.com/
http://www.fotoimpact.ro/
http://www.freemediagoo.com/

Plugins
Um Pacote com 6.63Mb, plugins:
Alguns plugins do pacote:
. Flexify 1.7.5
. Flood
. Freebies
. Gliterato 1.0.0
. Ink 1.7.0
. Lunar Cell 1.4.0
. Melancholytron 1.0.2, Mr
. Contrast 1.0.0
. Solar Cell 1.3.0.
http://rapidshare.de/files/24511985/pacote_de_plugins_para_fireworks_mx2004.zip.html

EyeCandy 4000
http://www.hipermasters.com/?secao=fireworks&categoria=plugins&download=305

EyeCandy 3000
http://www.hipermasters.com/?secao=fireworks&categoria=plugins&download=306

Update Fireworks MX 2004
http://www.hipermasters.com/?secao=fireworks&categoria=plugins&download=316

Tutoriais
http://www.fireblog.site.br.com/
http://www.imasters.com.br
http://www.mxstudio.com.br
http://www.conexaomx.com.br/

Texturas
http://www.fireblog.site.br.com/arquivos/downloads/BT-Texture_Pack_11.rar

Renders (1600)
http://s12.invisionfree.com/GoldDesign/index.php?showtopic=786

Styles
http://www.mxstudio.com.br/views.download.php?act=file&opt=view&cid=2&fid=109

Instalando Plugins e Texturas
faz o seguinte, no Fireworks 8:
Extrai o Pacote (somente as pastas, nada compactado) para esse local:C:\Arquivos de programas\Macromedia\Fireworks 8\Plug-Ins
As texturas para:C:\Arquivos de programas\Macromedia\Fireworks 8\Configuration\Textures
Reinicie o Fireworks.
O Eye Candy e o Xenofex é soh instalar, ja vem com a senha no arquivo txt.
Para usar os plugins: Filters->Eye Candy 4000Filters-> Flaming PearEh só usar a criatividade

Maiores dúvidas enviem email para fmarassatto@gmail.com

Todos os links foram testados e podem usar sem problema
Postei poucos mas que uso bastante e podem confiar.
Espero que sirva pra alguma coisa hehe
Abraços!!t+…

Não existem posts relacionados.