All Articles Dreamweaver
Criando texto grande com CSS3 no Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

Se você estiver usando o painel Estilos CSS para estilizar as suas páginas no Dreamweaver, então você vai estar ciente das restrições impostas a você no que diz respeito ao design. Cores sólidas, fontes padrão, formas bloco etc Todos interessante, mas não realmente desafiador capacidade CSS.

Portanto, neste artigo Im indo mostrar-lhe alguns CSS para adicionar aos seus estilos no Dreamweaver que realmente vai criar alguns grandes projetos.

Vamos começar criando uma Tag Div que conterá esse estilo seu estupendo prestes a criar.


Passo 1 - Adicionar uma Div PA

Começando com um documento HTML em branco abra o Painel de Inserção e configurá-lo para Layout. Desde o layout opções de escolha Desenhar Div PA.

Div drawn

Div desenhada


Use a ferramenta para desenhar uma Div PA (que é apenas uma tag div com um estilo # ID aplicada automaticamente contendo posição e parâmetros de tamanho). Use o Painel de propriedade para o tamanho da Div PA com Altura: 400px e Largura: 400px.


Passo 2 - Nome da Div PA

Abra o painel Elementos PA e re-nome do APDiv1 para MyStyle. Abra o painel de estilo CSS e você si mesmo que re-nomear o Div PA também re-nomes do MyStyle Estilo ID. Este é o estilo que você estará editando.


Passo 3 - Encontre o código CSS

Mude para a vista de Split para que você possa ver tanto a imagem quanto o youve código criado. Vá até a seção e você verá uma seção do código destacado rosa que diz MyStyle # {}. Este é o seu CSS e todas as configurações para ele que você está prestes a criar irá sentar-nos entre os dois {}.


Etapa 4 - Adicione um pouco de conteúdo

Para economizar tempo de digitação, copie e cole sobre um parágrafo de texto para o Div clicando no Div. AP desenhada na vista de estrutura, de modo que o cursor se torna ativo e pressionando Command-V para colar.

rounded corners

cantos arredondados


DICA: Aumente o tamanho raio para exatamente a metade de sua largura e altura (portanto, neste caso 200px) e previsão de novo .... Ei você começa um círculo perfeito!


Passo 6 - fundo gradiente

Adicionando um fundo gradiente é um efeito do desenho muito bom, porém você deve sempre ter em mente que nem todas as versões de todos os navegadores suportam isso. Assim, só nunca usá-lo para melhorar uma imagem. Sempre projetar coisas com vários navegadores em mente e ter um preenchimento sólido disponível também.

gradient background

fundo gradiente


O código a seguir irá criar esse fundo gradiente:

background-color: # 666666;

background-image:-moz-linear de gradiente (de cima, # 666666, # 333333 40,0%);

background-image:-webkit-linear de gradiente (de cima, # 666666, # 333333 40,0%);

background-image:-o-linear de gradiente (de cima, # 666666, # 333333 40,0%);

background-image:-ms-linear de gradiente (de cima, # 666666, # 333333 40,0%);

background-image: linear-gradiente (de cima, # 666666, # 333333 40,0%);


Testá-lo em alguns browsers, se você puder, para ver o efeito. Por último vamos adicionar alguns socos para o texto.


Passo 7 - Aumentar o Texto

Ive acrescentou Branco com o texto, para torná-lo destacar-se melhor contra o gradiente. Também Ive adicionou Drop Shadow ao texto. Tal como acontece com a sombra Gradiente só funciona com as versões mais recentes de navegadores da Web não confiar sempre nele.

drop shadow

drop shadow


Este código adiciona a Sombra Cor e soltar:

color: # FFFFFF;

text-shadow: 2px 2px 3px # 000000;


Passo 8 - Melhor Fonte?

Por fim, acrescentei uma melhor fonte e alguns padding, para criar algum espaço ao redor do texto.

Better text

Melhor texto


Ao acrescentar estas linhas:

font-weight: normal;

text-align: left;

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Aqui está o código que eu adicionei para conseguir isso. Mais uma vez vale a pena verificar sua compatibilidade do navegador para ver onde algum código não vai funcionar para alguns navegadores e tendo isso em mente quando você está projetando suas páginas.

Browsers estão sendo atualizadas o tempo todo para apoiar a CSS3 e HTML 5 para não ter muito medo de usá-los, basta estar atento. O que é mais não é apenas os navegadores tradicionais você é capaz de apontar para com este código como o Safari, Chrome e Firefox, etc Ele também funciona perfeitamente em iOS e Android também. Se isso não faz valer a pena, então o que será?



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: