Página de Conteúdo FlogVip/Boundaries

by raphaela tavares

Main Content

Tutorial básico para css

Olá pessoal, vou disponibilizar para vocês duas bases de css, e ensina-los como editar.

Programas requeridos: Bloco de notas

Importante você perceber que cada area diferente, recebe uma separação simbolica. /*------------Css---------*/, isto ajuda você deixar o css mais organizado, mais o principal é o que vem em seguida. Isso define onde os estilos de css serão aplicados. Por exemplo:

/*----- Titulo Boundaries ------*/ .titulo { font-family:"Verdana"; .... (etc)

O .titulo { Indica que será aplicado aos títulos da página. No caso do flogvip, será aplicado ao título escrito do fv. (não use acentos no css)

.subtitulo { font: 12px "Verdana"; .... (etc)

O .subtitulo { Indica que será aplicado aos subtítlos. No caso do flogvip é onde fica escrito Favoritos; Ultimas fotos e etc.

Muita atenção para um detalhe minimo que é impotantissimo. Certifique-se de que quando você começar uma parte, abra as chaves { e quando terminar , feche-as (}) Se você não fizer isso acontece-rá varios erros e o seu código ficará ilegível. Também ao final de cada estilo, separe-o com ponto e virgula. Segue o exemplo abaixo:

.subtitulo {
font: 0px Arial;
letter-spacing: 0px;
text-transform: none;
background: #edeed4;
width: 120px; }


Explorando as opções do css.


Font-family ou Font: fonte que você desejar;

(importante que essa fonte não seja fonte personalizada, apenas fontes do sistema operacional. Caso você coloque uma fonte personalizada, essa fonte só será visualizada em computadores que tenham a mesma fonte instalada, caso contrario será a fonte padrão do sistema)

Font-size: Tamanho da fonte em px; (pixels)

Font-style: é o estilo da fonte. Aqui você pode por italic, normal ou bold. Geralmente só funciona uma das opções;

Dica, pode-se resumir colocando assim:

font: 13px(tamanho) italic(estilo) Times New roman(fonte);

text-transform: uppercase/lowercase; Essa propriedade define a transformação do seu texto. Uppercase transforma qual quer escrita em CAPSLOCK, e lowercase permite que mesmo que você escreva em CAPSLOCK o texto apareça em fonte normal.

Margin-top/bottom/right/left: é apartir de onde começará ser escrito na caixa que você está editando. Valores em px. Lembre-se, quando for usar esse codigo, use cada um em uma linha. exemplo

margin-top: 17px; margin-right: 12px;

width: 19px ou 30%; Define largura da area que você está editando

heigth: 10px ou 40%; Define altura da area que você está editando. Se quiser que se ajuste automatico é só não colocar essa opção no seu css. (valores de exemplo)

border-top/bottom/right/left #000000: Cria uma borda visível na parte qual você inserir este código. Podemos inseri-las como sólido, como uma linha continua ou como um traçado. Exemplo:

border-top: 0px solid #000000; (borda continua na parte de cima. Top > alto)
border-bottom: 0px dotted #00000; (borda traçada, (falhada) na parte de baixo. Bottom > baixo)

Align: Alinhamento de caixas. Não funciona no flogvip, apenas em layouts pessoais

padding: 1px; Não sei bem ao certo como o flogvip lê, mais é um espaçamento entre linhas de escrita.

Text-align: center/justify/left; Alinhamento do texto dentro das caixas. Se você tiver criando uma 'table' para o post e inserir no seu css o texto ficará ajustado conforme vc colocar.

letter-spacing 3px; é o espaçamento entre as letras da area que você está editando.

Color: #000000; é a cor da fonte do lugar de onde você está editando. Esse código se obtem com programas de edição, todos programas da adobe oferece esse código de cores na caixa de cores.

background-color: #ffffff; é a cor do fundo do lugar de onde você está editando, Pode-se deixa-lo transparente inserindo transparent ou none, exemplo.

background-color: transparent;

-webkit-transition-duration: 10s; é a transformação de um link ou imagem quando você parar ou passar o mouse em cima. Segundos definem o tempo de transição de efeito até a foto normal.

-moz-tranzition-duration: 10s; bé a transformação de um link ou imagem quando você tira o mouse em cima. Ambos valores em segundos (10s/5s)

-webkit-filter: grayscale (50%); é o efeito que deixa as fotos das colunas do lado (flogvip) em escala de cinza. Ou seja, de você colocar 100% elas ficarão preto e branco, e quando passar o mouse, ficará colorida.

-moz-border-radius: 0px 0px 0px 0px; Isso serve para arredondar as quinas da area de onde vc está ditando, primeiro e segundo valor se refere as duas quinas de cima, e os dois ultimos as duas quinas de baixo

input,textarea, select { = Se dirige a caixas de texto que ficam disponível para que o visitante escreva. No caso do flogvip Caixa de comentários

.blockquote / .tab = são definições de post. Depende de como vc usar eles. Geralmente usamos blockquote para fundo de post, e definições de escrita. e tables para criar areas diferentes no post.

b = se refere a pré definição de post quando se usa como negrito

u = se refere a pré definição de post quando se usa em sublinhado

i = se refere a pré definição de post quando se usa italico

Sabendo isso você pode transformar qual quer css do jeito que você quiser, inserir ou retirar códigos. Abaixo disponibilizo duas css. Uma com a barra do fv em cima, e a outra em baixo. Lembre-se não remova o código na area de barra. Apenas altere os valores. O css que tem a barra do fv em baixo do título, nescesita-se que você hospede seu título e o coloque no css na area indicada. Por favor, os devidos créditos

Obs.:Crie um flogvip de testes, poste uma foto e coloque seu css. O 6te permite que você edite o css em um campo de texto no próprio site. V� salvando as alterações e toda vez que você salvar, atualize o flog. Assim você poderá ver onde você está editando e como está saindo.

Base css barra em baixo do título

Basse css barra em cima do título

Dean Campbell Winchester

Filho de Marry Campbell e John Winchester. Dean nasceu em 24 de Janeiro de 1979 (aquariano) em Lawrence - Kansas. Ele é o proprietário do famoso Chevy Impala 67 preto.

Samuel Campbell Winchester

Filho de Marry Campbell e John Winchester. Sam Nasceu em 2 de Maio de 1983 (taurino) em Lawrence - Kansas. Sensitivo e racional Sam é a única família ainda vivo de Dean.

Jensen Ross Ackles

Filho de Donna Joan Shaffer e Roger Alan Ackles. Jensen nasceu em 1 de março de 1978 (piciano) em Dallas - Texas. Após atuar em varias novelas e filmes a CW o convidou para representar Dean Winchester em SPNT

Jared Tristan Padalecki

Filho de Gerald R.Padalecki Sharon L Kramer. Jared nasceu em 19 de Julho de 1982 (câ nceriano) em San Antonio - Texas. Após fazer parte de grandes filmes, e participações em séries a CW o convidou para representar Sam Winchester em SPNT.

About us

More visited links