Dicas para CSS

Finalmente me livro da preguiça e venho criar esse tópico que tem como ideal dividir ideias, dicas, comentários e afins sobre CSS.



A primeira coisa que queria chamar atenção é sobre a visibilidade na página. Se vê muitos CSS por ai onde a cor da fonte acaba se misturando ao fundo, prejudicando assim a leitura de muitas coisas na página; ou até então se usa cores muito fortes tanto na fonte quanto no fundo e, literalmente, fazem os olhos doerem e você não enxerga nada devia a uma cegeira momentânea D: Texturas em demasiado, ainda mais no fundoBase, atrapalham também definir uma cor para a fonte que ressalte e deixe a leitura fácil.
Exemplos:


- Fundo editado onde a cor de fonte usada aparece em partes e em outras não


- Fonte e fundo, ambos em tons muitos escuros onde quase não se tem visibilidade do conteúdo da página


--


E vamos voltar ao caso das texturas ou patterns [coisinha complicada essa ê_é].
Sei que ninguém aqui é design proficional -- muito menos minha pessoa -- mas senso todo mundo tem. Por isso sempre sejam cuidadosos em trabalhar com texturas/patterns no fundo das suas páginas, usem elementos que combinem e nada de forma exagerada nem carregada.
Se achar que ficou muito cheio, use tons claros e harmoniosos que passem mais calma e deixe tudo mais equalizado e seja fácil depois achar uma cor para a fonte que destaque.
E é claro que até para CSS mais limpos tem seus limites...
Exemplos:


- FundoDegradê listrado e fundoBase abstratro, sem combinação de cores ou qualquer elemento


- Já, ao contrário do exemplo de cima, boa escolha nos dois itens, harmônicos e uma cor que destaque na fonte

Uma ideia legal que acho é trabalhar somente o fundo degradê, deixar ele para repetir na página toda e usar o fundo base/sombra como uma cor base transparente fazendo com que a imagem de fundo fique menos visível e onde o conteúdo da página vai fique mais fácil de se trabalhar. ^^
Exemplo:


- fundobase/sombra com semitransparência no preto, deixando o fundo bem leve

Então... o nível de transparência irá variar conforme seu gosto ou com o fundo que estará usando na página.


--


E já que falei de transparência vamos continuar nisso 8D
Esses fundo transparentes, para quem não sabe, são somente imagens em PNG que suportam a transparência, coisa que outros formatos como o típico JPG não consegue manter e o GIF que consegue, mas deixa a qualidade ruim (pelo menos comigo e_e').
Nomalmente eu vou lá, crio um arquivo 100x100px ou menor, deixo ele com uma transparência legal, upo... e acabo usando essa mesma imagem em vários CSS. Muito útil ^^



Por enquanto é só, tá tarde x_x'
Mas tudo isso já deixa claro que o conteúdo da página deve ser respeitado, não deixando que o visual interfira nisso.

Volto depois com alguns códigos interessantes... Também espero que vocês compartilhem ideias, dicas, códigos diversos para CSS, porque há infinitas possibilidades de se editarem esses códigos e deixarem suas páginas pessoais ainda mais legais \o/



- Os exemplos mostrados são sim de CSS randons do AS... mas não comprometi de forma alguma seus usuários ou criadores, espero que entendam, não estou menospresandoo trabalho de ninguém porque até meus css próprios eu usei para demostrar algum desses erros. Qualquer coisa, avise e eu removerei.

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]

MEND3

Obrigada ^^

Mas acho que muitos poucos aqui saem inventando tags ou mesmo ultilizando outros diferentes do que são passados no arquivo CSS disponibilizado no site... por isso vou reunir alguns legais e trazer para cá.

Queria agradecer por ter me chamado a atenção para o CSS 3. Dei uma olha e achei coisas muito legais \o/

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]

E como prometido venho trazer alguns códigos \o/

Primeiro queria abrir a mente de vocês para o mundo do CSS que hoje é muito ultilizado, ainda mais quando se fala de design, pois essa é uma forma de se personalizar de mil maneiras uma página. E não é só mudando cores, alterando fundos ou imagens que se pode editar uma página usando o CSS; bordas, tipos de fontes, cursores entre outros podem ser muito bem modificados apenas com um código adicionado ao CSS.
Por isso você não deve se limitar apenas em alterar as cores e fundos do arquivo CSS que é disponibilizado aqui no A. S., você pode criar fundos coloridos onde antes não tinha, links que mudam de cor onde antes não mudavam, fontes diferentes em negrito ou itálico... e por ai vai.

Em primeiro lugar vamos começar com as Bordas que são muito usadas aqui e tem várias alterações.

Normalmente você só vê algo como: border-top: 1px solid #000000. Onde "border-top" estaria definindo que você quer uma borda contornando somente a parte superior, e "solid" seria o estilo definido para essa borda. (nessas horas, quem sabe inglês ajuda bastante u_u)
Mas ai você tem uma ideia louca "Quero uma borda tracejada somete do lado esquerdo". FÁCIL amigo 8D
Altere "top" para "left" - isso muda o lugar a ser contornado
Altere "solid" para "dashed" - e isso muda o estilo da sua borda
>
border-left: 1px dashed #000 - e você teria sua borda tracejada dolado esquerdo, simples né?!


Conclui-se então que você pode ter uma borda nos quatro cantos (podendo usar mais de um ao mesmo tempo) ou um contorno total:
border - contorna totalmente
border-top - contorno superior
border-bottom - contorno inferior
border-left - do lado esquerdo
border-right - do lado direito


E os estilos das suas bordas também podem ser modificadas:
solid - solida, simples ___________________
dotted - pontinhada .................................
dashed - tracejada - - - - - - - - - - - - - - - - -
outset - alto relevo
inset - baixo relevo - o oposto de outset
double - borda dupla
groove - efeito esculpido [?] - semelhante a inset
ridge - oposto ao groove
[mas acho melhor você verem por sí mesmo cada estilo, sou ruim para explicar e_e'']


--


Agora, um tipo de borda que achei muito interessante foi essa que arredonda os cantos, tanto do fundo quanto das bordas simples ultilizadas, é o -moz-border-radius e já vi alguns usando ele por aqui no AS. É uma pena que o IE ainda não ofereceu suporte para ele e sóem navegadores mas recentes é possível visualizar a alteração i-i
Exemplo:


Como podem ver os cantos superiores foram arredondados *-* para que isso seja feito é fácil, basta adicionar o código junto a parte no CSS que você quer alterar. No exemplo ai eu inseri no menu esquerdo, o que resultou nisso:



Eu adicionei -moz-border-radius: 10px 10px 0 0; para que os cantos superiores do background ficassem arredondados e border-radius: 10px 10px 0 0; para que o border também ficasse arredondado.
Você pode deixar da forma que quiser, mais intenso ou menos intenso as curvas, e você faz isso definindo os valores: -moz-border-radius: 10px 10px 0 0;
Como podem ver existem 4 valores, cada um deles define um dos cantos no background na ordem: canto esquerdo superior, canto direito superior, canto direito inferior e canto esquedo inferior. E cada um pode ser atribuido um valor diferente dos demais.
Exemplo:


Usei algo como: -moz-border-radius: 10px 30px 30px 0


--


DICA

Um lugar onde adorei usar esse recurso do efeito arredondado nas bordas foi naquela parte do menu onde, quando se passa o link, há uma alteração de fundo e cor de fonte:





Como podem ver, é bem simples, só usar o código no #nav a:hover com um valor único que irá definir para os 4 cantos.







-__- Por enquanto é só, depois venho falar de como esse "a:hover"pode ser ultilizado em mais lugares.


Espero que tenham gostado e dúvidas é só perguntar o/







- Exemplos tirados de CSS de minha prórpia autoria.

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]

o tamanho da imagem do AS tanto de fundo, quando de topo é 850px.

Nuss! brigada!

tava fzendo com 850 de logo e 540 fundo!^^"

então não vai acontecer o q flei msm aumentando a resolução ne?

{ Fanfics / Family / Galeria fórum / Galeria / <3 }


Set- Soo-chan gatenhaaa *-*

Olha, resolução é a qualidade da imagem, quanto maior for, mais "linhas" terá. O tamanho é o que conta, se você colocar no fundo uma imagem maior que 850px ela irá cobrir uma área maior que a desejada, ou seja, irá aparecer do tamanho EXATO que você fez. Já no topo isso não acontece porque o site já está predestinado a enquadrar e cortar a imagem para ficar do tamanho de 850px. ^^

Se estiver falando da parte dos fundos mesmo (fundoDegradê e/ou fundoBase) é só você ultiliza repeat que a imagem vai se repetindo e cobrindo toda a área dela, assim:

background: url(linkdireitodaimagem) repeat;



Já no Cimalogo/banner, há um limite de 850px de largura... de altura é opcional sendo editado no CSS esse valor

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]

Erika-San, eu queria saber uma coisa, como se faz pra deixar o fundo parado? Tipo, eu não queria que ele se repitisse um em baixo do outro, queria deixa-lo parado. Como se faz?

Agradeço.

Uma das coisas que quero postar aqui e ainda não o fiz, mas vai agora \o/

Para deixar o fundo fixo é só acrecentar fixed após a o link entre parênteses da imagem do fundo:

background: url(linkdaimagem) repeat center top fixed;

ou também adcionar outra opção de código

background-attachment: fixed;

FOR THE HORDE

_ _ _ _

GALERIA
[Betas Design | FAQ | Regras]