Tutorial de como fazer css
Esse tutorial teve ajuda parcial do site >> CherryLuv.
Esse é o código base, mas é so molde então baixá-lo:: AQUI!.




/* ------------ Formatação da Fonte -------------- */

p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #ffd35b; >>> COR DA FONTE DO FLOG!
font-family: Arial;
line-height: 13px;
cursor: crosshair;
}

/* ----------------- Formatação do Link ------------------- */

a, a:link {
a, a:link{
color: #ffc21e; >>> COR DO LINK ANTES DE PASSAR O MOUSE
height:1px;
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
cursor: hand;
TEXT-DECORATION: none;
background-color: #fffaeb; >>> FUNDO DO LINK
}

a:hover {
color: #000000; >>> COR DO LINK QUANDO PASSA O MOUSE
height:1px;
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
cursor: hand;
TEXT-DECORATION: none;
background-color: #fffaeb; >>> FUNDO DO LINK
}


/* ----------------- Formatação de Estilos ---------------- */

b {color: #000000; TEXT-DECORATION: bold; cursor: n-resize;}

u {color: #ffffff TEXT-DECORATION: none; border-bottom: 0px dotted #ffce4a; cursor: n-resize;}

i {color: #cf9700; cursor: n-resize; TEXT-DECORATION: italic; border-bottom: #cf9700; }

ul {line-height: 100%; color: #cf9700; font-color: #cf9700; margin: 0 18;}



/* ------------------------------- Formatação das Caixas ---------------------------------- */ input, textarea, select
{font-family: Tahoma;
font-size: 11px;
color: #cf9700; >>> COR DA FONTE DENTRO DA CAIXINHA
border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
background-color: transparent; >>> COR DO FUNDO DA CAIXINHA
-moz-border-radius: 8px 8px 8px 8px; >>> TAMANHO POPORCIONAL
cursor: col-resize;
}

/* ------------------------------- Formatação de Tabelas ---------------------------------- */

.table1 { <<< POST (ONDE VC ESCREVE XUXU)SEU NOME)
color: #ffffff;
>>> COR DA FONTE DO COMENTARIO border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
width: 350px; >>> TAMANHO DO POST QUE DESEJAR
background-color: #ffcc42; >>> COR DO FUNDO DA POST
cursor: crosshair;
}

.table2 { <<< POST (ONDE VC ESCREVE XUXU)SEU COMENTARIO)
color: #ffffff;
>>> COR DA FONTE DO COMENTARIO border-bottom: 1px solid #ffc21e; >>> BORDA ABAIXO
border-top: 1px dashed 404040; >>> BORDA EM CIMA
border-left: 1px solid 404040; >>> BORDA LADO ESQUERDO
border-right: 1px solid #ffc21e; >>> BORDA LADO DIREITO
width: 350px; >>> TAMANHO DO POST QUE DESEJAR
background-color: #ffcc42; >>> COR DO FUNDO DA POST
cursor: crosshair;
}

================================


::PRESTE-ATENÇÃO::


Estilos: É o famoso Negrito, Sublinhado, e Itálico.

•No b{, onde está escrito: TEXT-DECORATION: bold;, é que o seu negrito ficará em negrito! Mas como assim? Por exemplo, se você colocar TEXT-DECORATION: none;, o seu negrito não ficará gordinho, apenas da cor que você escolheu! Entendeu?

•No Itálico a mesma coisa, se tiver: TEXT-DECORATION: italic; o seu itálico ficará 'caidinho'.

•No Underline, se tiver TEXT-DECORATION: underline; ele ficará com a linhazinha em baixo! ul{ O que é isso? o.o ' é tipo um parágrafo, não liguem para isso não, é raro usar isso! Eu nunca usei, ou seja, pode deixar como está! ^^

Link: É a configuração do seu link. 'a, a:link{' é a 'face' do seu link, sem estar com o mouse por cima. color: #66b0cd; é a cor do seu link, por exemplo, isso é um link, se você não colocar o mouse por cima, apenas vê-lo, ele está rosa certo? Isso que é o 'a, a:link{'! border-bottom: none; é uma linha que fica por baixo do link, se estiver sem em none; é porque está sem linha nenhuma, como o meu link, perceba que ele está sem linha nenhuma. Veja alguns exemplos:

Esse está com a configuração de border-bottom: 1px solid #000000; O 1px significa a grossura da linha.
Esse está com a configuração de border-bottom: 2px solid #000000; E o #000000 é a cor da linha!
Se quiser esse código para pôr no seu css, está aqui: border-bottom: 1px solid #000000;
Agora que você já sabe mudar a cor e agrossura da linhas, veja outros modelos:


Esse está com a configuração de border-bottom: 1px dashed #000000;

Esse está com a configuração de border-bottom: 1px dotted #000000;

Esse está com a configuração de border-bottom: 3px double #000000;
Atenção: Bordas Double tem que estar configurada em 3px para ela aparecer corretamente!


Fonte: É a sua fonte,

font-size: 11px; é o tamanho da fonte, geralmente varia de 9px à 12px.

color: #66b0cd; é a cor da sua fonte. font-family: verdana; é o nome

da fonte, as mais usadas são verdana, tahoma, arial.

cursor: crosshair; é o cursor que vai ficar no seu blog, não só em cima da

fonte, nas suas páginas todas. Abaixo você encontra o nome dos cursores do

sistema, é só passar o mouse em cima do nome:

cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur);
*Cursor personalizado*


================================

SEMPRE QUE HOSPEDAR O SEU CSS .. TEMINE O NOME ASSIM.

EX.: theup.css (pra funcionar tah! lembre-se disso)

E COLOQUE O LINK DO CSS HOSPEDADO AQUI::

< link media="screen" href="LINK DO SEU CSS AQUI" type="text/css" rel="stylesheet">

Copie esse código abaixo, e cole no post do seu flogvip e pronto seu flog tem css :D



------------------------------------------------------------------------------

FOTO COM EFEITO DE LUZ!

PARA QUEM TEM PHOTO.SHOP e ate mesmo o PHOTO.FILTRE



----------------------1° PASSO:--------------------

#1 Copie a foto desejada.

#2 Cole a foto.

#3 Posicione ela como desejado [editar normalmente!]

#2 Edite a foto [action se preferir]

#5 Aperte CTRL + A, depois CTRL + C e em seguida CTRL + V [ASSIM VAI SURGIR UMA NOVA CAMADA] depois e finalmente CTRL + A e apaguei a camada (CTRL + X)





----------------------2° PASSO:--------------------



#1 Aperto com o MOUSE o lado direito.

#2 Escolha "PINCEIS NATURAIS"

#3 Uso o pincel de "SUAVIDADE" [AKELE E USA PRA APAGAR AS COISAS/ NA FOTO A CIMA]

#4 Escolha uma cor FORTE .. (SE VC QUISER PODE USAR + DE 1 VIU)

#5 Depois aperte o Brushe normalmente.



----------------------3° PASSO:--------------------



#1 Agora Você vai nakele "Definir o modo de mesclagem da camada" [O DA FOTO A CIMA!]

#2 Escolha o modo de CLAREAR [Onde fica mais bonito,]

PS.: Os outros modos tambem pode ser usado, ficam bonitos de todos os jeitos, DEPENDEDO das cores ESCOLHIDAS.

#3 Agora sim, feito isso você ja pode salvar sua edição!

PS.: Fica melhor em PNG.



BOA SORTE ^^

Tutorial by*Al&ssa Ablle Gyllenhaal {DONA}






VOLTAR