segunda-feira, 21 de abril de 2008
Afastamento
Estou em um breve recesso no blog, por motivos pessoais, em breve voltarei com conteúdos hots, material novo e muito requerido...vlw galera!!!
quarta-feira, 9 de janeiro de 2008
Tabela de Cores HTML/CSS 2
Aew pessoal a segunda tabela de cores, essa é mais completa, ela tem os nomes de algumas cores que o css aceita, além de mais cores do que a outra....
vlw
vlwAplicando o CSS 1ª parte
Esse é o primeiro tutorial da serie, que irá ensinar a utilizar algumas propriedades do css, e a criar classes para enfeitar e agilizar seus sites...
Vamos iniciar criando uma classe e aplicando a um arquivo:
arquivo estilo.css:
fim do arquivo estilo.css.
arquivo index.html:
em breve mais tutoriais de css
Vamos iniciar criando uma classe e aplicando a um arquivo:
arquivo estilo.css:
fim do arquivo estilo.css.
arquivo index.html:
fim do arquivo index.html
o que entendemos:
a classe sempre inicia com um . e o nomee depois a{propriedade fecha a propriedade com ; e termina com }
a chamada de um arquivo de css externo é feita com o codigo:
em breve mais tutoriais de css
Bloquear Download de Imagem
Muitas vezes conteudos importantes, imagens que tenham direitos reservados, tem que ser preservadas e protegidas, com esse codigo podemos bloquear o salvamento da imagem:
Imagem sem bloqueio:
Código:
Imagem com bloqueio:
Código:
entao é isso ai pessoal código simples, e muito útil.
Imagem sem bloqueio:
Código:
Imagem com bloqueio:
Código:
entao é isso ai pessoal código simples, e muito útil.
Parceiros
As 10 dicas para um bom site!
- Colocar o nome e o logotipo em todas as páginas e fazer no logo um link para a página inicial (excepto na própria página inicial onde o logotipo não deve jamais ter um link para a própria página).
- Disponibilizar uma opção de pesquisa se o site tiver mais de 100 páginas.
- Escrever cabeçalhos e títulos simples e directos que expliquem claramente qual o conteúdo da página e que faça sentido quando é lido fora do contexto desta, através de uma busca.
- Estruturar a página para facilitar o scanning e ajudar os utilizadores a ignorar blocos maçadores da página num simples piscar de olhos: por exemplo através da utilização de agrupamentos e subtítulos a partir de uma longa lista poder-se-á chegar rapidamente a uma lista mais pequena e perceptivel.
- Em vez de colocar tudo sobre um produto ou um assunto numa única e infinita página, deve-se utilizar hipertexto para estruturar o espaço disponível na página inicial que disponibiliza uma visualização e várias páginas secundárias que focalizam-se no seu tema específico. O objectivo é permitir aos utilizadores evitar desperdiçar tempo nos sub-temas que não lhes interessam.
- Usar fotografias de produtos, mas evitar páginas cheias dessas mesmas fotografias com toda a família de produtos possíveis. Deve-se então ter uma pequena fotografia de cada produto numa página individual e fazer um link dessa fotografia para uma ou mais fotografias de maior dimensão que mostre mais detalhes adequados às necessidades dos utilizadores. Esta situação varia de acordo com o tipo de produto. Alguns produtos poderão ainda necessitar de fotografias com zoom ou rotativas. devendo estas opções ser remetidas para páginas secundárias. A primeira página que contém o produto deve ser rápida e limitada a um plano da fotografia reduzido.
- Utilizar uma imagem reduzida e relevante quando se preparam pequenas fotografias e imagens: em vez de simplesmente redimensionar a imagem original para uma pequena e ilegível fotografia, deve-se fazer um zoom dos detalhes mais relevantes e utilizar uma solução combinada de corte e redimensionamento.
- Utilizar link's com títulos para permitir ao utilizador, visualizar antecipadamente para onde se encaminhará cada link antes de clicar.
- Assegurar que todas as páginas importantes estão acessíveis aos utilizadores com deficiências, especialmente aos invisuais.
- Fazer o mesmo que os outros fazem: se a maioria dos grandes websites fizer algo de certa forma, devemos segui-los desde que os utilizadores esperem que o site funcione da mesma forma. Deve-se ter em conta que os utilizadores gastam a maioria do seu tempo noutros sites, e é ai que criam expectativas acerca do funcionamento da web.
terça-feira, 8 de janeiro de 2008
Propriedades CSS
background Define a cor de fundo da página
background-attachment Determina de a imagem será fixa ou não.
fixed Fixa a imagem de fundo.
background-image Define uma imagem de fundo na página, parágrafo ou texto.
url Indica o diretório e o nome do arquivo.
background-repeat Define a disposição que a imagem deverá ocupar no fundo.
no-repeat É posicionada no canto superior esquerdo.
repeat-x A imagem irá se repetir na horizontal.
repeat-y A imagem irá se repetir na vertical.
background-position Determina uma posição onde a imagem de fundo deve aparecer.
bottom Alinha a imagem de background na base.
center Centraliza a imagem de background.
left Alinha de background à imagem a esquerda.
right Alinha de background à imagem a direita.
top Alinha a imagem de background no topo.
centimeters (cm) Centímetros.
inches (in) Polegadas.
percentage (%) Porcentagem.
pointd (pt) Pontos.
pixels (px) Pixels.
border Define uma borda que irá envolver o objeto.
border-bottom Borda base.
border-bottom-color Cor da borda base.
border-bottom-style Estilo da borda base.
border-bottom-width Largura da borda base.
border-color Define a cor da borda.
border-collapse Efeito Collapse.
collapse Borda em alto relevo refinada.
border-left Borda esquerda.
border-left-color Cor da borda esquerda.
border-left-style Estilo da borda esquerda.
border-left-width Largura da borda esquerda.
border-right Borda direita.
border-right-color Cor da borda direita.
border-right-style Estilo da borda direita.
border-right-width Largura da borda direita.
border-style Define o estilo da borda.
solid Sólida.
dashed Tracejada.
dotted Pontilhada.
double Dupla.
groove Entalhada.
ridge Eriçada.
inset Baixo relevo.
outset Alto relevo.
none Sem borda.
border-top Borda topo.
border-top-color Cor da borda topo.
border-top-style Estilo da borda topo.
border-top-width Largura da borda topo.
border-width Especifica a espessura da borda.
thin Fina.
medium Média.
thick Grossa.
px Determina a espessura em pixels.
color Especifica a cor do texto.
cursor Altera o formato do cursor.
help Interrogação.
crosshair Cruz.
default Cursor padrão.
hand Mão padrão.
move Cruz com setas.
n-resite Seta para o norte.
ne-resize Seta para o nordeste.
e-resize Seta para o leste.
se-resize Seta para o sudeste.
s-resize Seta para o sul.
sw-resize Seta para o sudoeste.
w-resize Seta para o oeste.
nw-resize Seta para o noroeste.
text Inserção.
wait Ampulheta.
direction Define um sentido de leitura jogando o texto à margem direita ou esquerda.
ltr Da esquerda para a direita.
rtl Da direita para a esquerda.
filter Cria efeito visuais em objetos.
alpha Efeito de opacidade.
blur Efeito 3D.
chroma Filtra uma cor pré-definida do objeto.
dropshadow Efeito de sombreamento disfocado.
fliph Inverte a imagem do objeto horizontalmente.
flipv Inverte a imagem do objeto verticalmente.
glow Efeito de borramento.
gray Apresenta o objeto em tons de cinza.
invert Inverte as cores do objeto.
mask Efeito transparente negativa.
motion-blur Cria um efeito de velocidade ao objeto.
shadow Efeito sombreado.
wave Efeito de ondulação.
xray Filtro de cores semelhante ao gray.
float Define o objeto como flutuante.
left Objeto à esquerda.
right Objeto à direita.
none Mostra o objeto sem alteração.
font-family Seleciona o tipo da fonte.
Arial Arial.
Bookman Old Style Bookman Old Style.
Courier New Courier New.
MS Sans Serif MS Sans Serif.
Times New Roman Times New Roman.
Verdana Verdana.
etc, etc... E muitas outras...
font-size Muda o tamanho absoluto ou relativo da fonte.
xx-small Muito pequeno 2.
x-small Muito pequeno 1.
small Pequeno.
medium Médio.
large Grande.
x-large Muito grande 1.
xx-large Muito grande 2.
font-style Seleciona o estilo da fonte.
italic Italico.
normal Normal.
oblique Obliquo.
font-weight Define a espessura da fonte.
extra-bold Extra negrito.
bold Negrito.
semi-bold Semi negrito.
medium Médio.
semi-light Semi leve.
light Leve.
extra-light Extra leve.
font-variant Variação de tamanho das fontes caixa alta.
normal Normal.
small-caps Caixa alta pequena.
height Define a altura do objeto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
letter-spacing Define um espaço entre as letras.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
line-height Define a espessura da linha.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
percentage (%) Porcentagem.
margin Define uma margem equidistante entre o objeto e seus quatro lados.
margin-bottom Define uma margem da base.
margin-left Define uma margem esquerda.
margin-right Define uma margem direita.
margin-top Define uma margem de topo.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
padding Cria um espaçamento entre o objeto e as suas quatro bordas.
padding-bottom Espaço entre o objeto e a borda da base.
padding-left Espaço entre o objeto e a borda esquerda.
padding-right Espaço entre o objeto e a borda direita.
padding-top Espaço entre o objeto e a borda do topo.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
position Posicionamento de objetos.
absolute Posicionamento absoluto.
relative Posicionamento relativo.
Static Posicionamento Estático.
text-align Especifica o alinhamento do texto.
left Pelo lado esquesdo.
center Pelo centro.
right Pelo lado direito.
justify Justificado.
text-decoration Altera o atributo do texto.
none Nenhum.
underline Sublinhado.
overline Sobrelinha.
line-through Riscado.
italic Itálico.
text-indent Cria um parágrafo no início do texto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
text-transform Transformação do texto.
capitalize Converte a primeira letra de cada palavra em maiúscula.
lowercase Converte todo o texto em letras minúsculas.
upppercase Converte todo o texto em letras maiúsculas.
vertical-align Alinhamento vertical de objetos.
baseline Alinhamento pela base.
bottom
middle Alinhamento pelo meio.
percentage Especifica uma porcentagem vertical no alinhamento.
sub Cria um texto sub-escrito.
super Cria um texto sobre-escrito.
text-bottom
text-top
top Alinhamento pelo topo.
white-space Gerencia como o browser deve tratar os espaços em branco.
normal Espaços normais, condição default.
pre Manterá todos os espaços inseridos.
nowrap Elimina a quebra de linha.
writing-mode Gerencia o modo da escrita.
lr-tb Escrita da esquerda para a direita, do topo para baixo.
tb-rl Escrita do topo para baixo, da direita para a esquerda.
width Define a largura do objeto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
word-spacing Altera o espaço entre as palavras.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
background-attachment Determina de a imagem será fixa ou não.
fixed Fixa a imagem de fundo.
background-image Define uma imagem de fundo na página, parágrafo ou texto.
url Indica o diretório e o nome do arquivo.
background-repeat Define a disposição que a imagem deverá ocupar no fundo.
no-repeat É posicionada no canto superior esquerdo.
repeat-x A imagem irá se repetir na horizontal.
repeat-y A imagem irá se repetir na vertical.
background-position Determina uma posição onde a imagem de fundo deve aparecer.
bottom Alinha a imagem de background na base.
center Centraliza a imagem de background.
left Alinha de background à imagem a esquerda.
right Alinha de background à imagem a direita.
top Alinha a imagem de background no topo.
centimeters (cm) Centímetros.
inches (in) Polegadas.
percentage (%) Porcentagem.
pointd (pt) Pontos.
pixels (px) Pixels.
border Define uma borda que irá envolver o objeto.
border-bottom Borda base.
border-bottom-color Cor da borda base.
border-bottom-style Estilo da borda base.
border-bottom-width Largura da borda base.
border-color Define a cor da borda.
border-collapse Efeito Collapse.
collapse Borda em alto relevo refinada.
border-left Borda esquerda.
border-left-color Cor da borda esquerda.
border-left-style Estilo da borda esquerda.
border-left-width Largura da borda esquerda.
border-right Borda direita.
border-right-color Cor da borda direita.
border-right-style Estilo da borda direita.
border-right-width Largura da borda direita.
border-style Define o estilo da borda.
solid Sólida.
dashed Tracejada.
dotted Pontilhada.
double Dupla.
groove Entalhada.
ridge Eriçada.
inset Baixo relevo.
outset Alto relevo.
none Sem borda.
border-top Borda topo.
border-top-color Cor da borda topo.
border-top-style Estilo da borda topo.
border-top-width Largura da borda topo.
border-width Especifica a espessura da borda.
thin Fina.
medium Média.
thick Grossa.
px Determina a espessura em pixels.
color Especifica a cor do texto.
cursor Altera o formato do cursor.
help Interrogação.
crosshair Cruz.
default Cursor padrão.
hand Mão padrão.
move Cruz com setas.
n-resite Seta para o norte.
ne-resize Seta para o nordeste.
e-resize Seta para o leste.
se-resize Seta para o sudeste.
s-resize Seta para o sul.
sw-resize Seta para o sudoeste.
w-resize Seta para o oeste.
nw-resize Seta para o noroeste.
text Inserção.
wait Ampulheta.
direction Define um sentido de leitura jogando o texto à margem direita ou esquerda.
ltr Da esquerda para a direita.
rtl Da direita para a esquerda.
filter Cria efeito visuais em objetos.
alpha Efeito de opacidade.
blur Efeito 3D.
chroma Filtra uma cor pré-definida do objeto.
dropshadow Efeito de sombreamento disfocado.
fliph Inverte a imagem do objeto horizontalmente.
flipv Inverte a imagem do objeto verticalmente.
glow Efeito de borramento.
gray Apresenta o objeto em tons de cinza.
invert Inverte as cores do objeto.
mask Efeito transparente negativa.
motion-blur Cria um efeito de velocidade ao objeto.
shadow Efeito sombreado.
wave Efeito de ondulação.
xray Filtro de cores semelhante ao gray.
float Define o objeto como flutuante.
left Objeto à esquerda.
right Objeto à direita.
none Mostra o objeto sem alteração.
font-family Seleciona o tipo da fonte.
Arial Arial.
Bookman Old Style Bookman Old Style.
Courier New Courier New.
MS Sans Serif MS Sans Serif.
Times New Roman Times New Roman.
Verdana Verdana.
etc, etc... E muitas outras...
font-size Muda o tamanho absoluto ou relativo da fonte.
xx-small Muito pequeno 2.
x-small Muito pequeno 1.
small Pequeno.
medium Médio.
large Grande.
x-large Muito grande 1.
xx-large Muito grande 2.
font-style Seleciona o estilo da fonte.
italic Italico.
normal Normal.
oblique Obliquo.
font-weight Define a espessura da fonte.
extra-bold Extra negrito.
bold Negrito.
semi-bold Semi negrito.
medium Médio.
semi-light Semi leve.
light Leve.
extra-light Extra leve.
font-variant Variação de tamanho das fontes caixa alta.
normal Normal.
small-caps Caixa alta pequena.
height Define a altura do objeto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
letter-spacing Define um espaço entre as letras.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
line-height Define a espessura da linha.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
percentage (%) Porcentagem.
margin Define uma margem equidistante entre o objeto e seus quatro lados.
margin-bottom Define uma margem da base.
margin-left Define uma margem esquerda.
margin-right Define uma margem direita.
margin-top Define uma margem de topo.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
padding Cria um espaçamento entre o objeto e as suas quatro bordas.
padding-bottom Espaço entre o objeto e a borda da base.
padding-left Espaço entre o objeto e a borda esquerda.
padding-right Espaço entre o objeto e a borda direita.
padding-top Espaço entre o objeto e a borda do topo.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
position Posicionamento de objetos.
absolute Posicionamento absoluto.
relative Posicionamento relativo.
Static Posicionamento Estático.
text-align Especifica o alinhamento do texto.
left Pelo lado esquesdo.
center Pelo centro.
right Pelo lado direito.
justify Justificado.
text-decoration Altera o atributo do texto.
none Nenhum.
underline Sublinhado.
overline Sobrelinha.
line-through Riscado.
italic Itálico.
text-indent Cria um parágrafo no início do texto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
text-transform Transformação do texto.
capitalize Converte a primeira letra de cada palavra em maiúscula.
lowercase Converte todo o texto em letras minúsculas.
upppercase Converte todo o texto em letras maiúsculas.
vertical-align Alinhamento vertical de objetos.
baseline Alinhamento pela base.
bottom
middle Alinhamento pelo meio.
percentage Especifica uma porcentagem vertical no alinhamento.
sub Cria um texto sub-escrito.
super Cria um texto sobre-escrito.
text-bottom
text-top
top Alinhamento pelo topo.
white-space Gerencia como o browser deve tratar os espaços em branco.
normal Espaços normais, condição default.
pre Manterá todos os espaços inseridos.
nowrap Elimina a quebra de linha.
writing-mode Gerencia o modo da escrita.
lr-tb Escrita da esquerda para a direita, do topo para baixo.
tb-rl Escrita do topo para baixo, da direita para a esquerda.
width Define a largura do objeto.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
word-spacing Altera o espaço entre as palavras.
points (pt) Pontos.
inches (in) Polegadas.
centimeters(cm) Centímetros.
pixels (px) Pixels.
Sistema Comércio Online
Este sistema ainda não está acabado. Ele possui uma ampla administração, nela podemos modificar o texto que aparecera ali no meio, adicionar os produtos em promoção, lançamento ou produto normal.na parte do lado esquerdo no topo vai o logo do site ao lado o nome, embaixo vai o menu com efeitos em java script, que ainda não adicionei pois estou trabalhando primeiro na dministração, o estilo é todo em css e ele conta com 5 temas customizaveis... ficando ao gosto do cliente... o sistema é praticamente todo em php e utilizando banco de dados MySQL, alguns efeitos em css e javascript. Por inquanto é isso pessoal, estou trabalhando em novidades para o blog!!!
Assinar:
Postagens (Atom)
