19
Criando o efeito fadeOut com jquery.
Veja o exemplo em funcionamento.
Download do codigo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fadeOut com jquery</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#imagem').fadeOut(2000);
});
</script>
</head>
<body>
<div id="teste">
<img id="imagem" src="imagens/foto.jpg" />
</div>
</body>
</html> |
Tags:
fadeOut,
javascript,
jquery
17
Criando o efeito fadeIn com jquery.
Veja o exemplo em funcionamento.
Download do codigo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fadeIn com jquery</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#imagem').hide();
$('#imagem').fadeIn(2000);
});
</script>
</head>
<body>
<div id="teste">
<img id="imagem" src="imagens/foto.jpg" />
</div>
</body>
</html> |
Tags:
fadein,
javascript,
jquery
14
Filled under: Web Design | Friday, November 14th, 2008 |
Formulário com background
Segue abaixo o código para se criar um formulário com background.
Veja o formulário em funcionamento aqui.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
| <!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>
<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> |
Tags:
background,
css,
formulario
21
Filled under: Web Design | Monday, April 21st, 2008 |
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.
Tags:
Adobe,
fireworks
23
Filled under: Web Design | Monday, July 23rd, 2007 |
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!
04
Filled under: Web Design | Wednesday, October 4th, 2006 |
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 
23
Filled under: Web Design | Wednesday, August 23rd, 2006 |
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
16
Filled under: Web Design | Sunday, July 16th, 2006 |
