CSS

Construsite BrasilCriação de sites


HIERARQUIA DOS PONTOS MAIS IMPORTANTES HOJE EM UM SITE:

IMPACTO VISUAL

IDENTIFICAÇÃO VISUAL

AMBIENTAÇÃO E CONFORTABILIDADE

VISÃO DO TODO

1ºNAVEGABILIDADE

VISUAL

LEITURA DA INFORMAÇÃO

VISÃO FRAGMENTADA

2ºFUNÇÃOVISUAL

CONTEÚDO

3º


FUNCIONA?

4ºHIERARQUIA DOS PONTO MAIS IMPORTANTES HOJE EM UM SITE:

A VERDADEIRA FUNÇÃO DE UM SITE COMEÇA NO

PRIMEIRO IMPÁCTO ATÉ A ÚLTIMA AÇÃO DO USUÁRIO.

MUNDO CONTEMPORÂNEO

MAIOR IMPORTÂNCIA ESTÉTICA

O FUNCIONAR NÃO SE LIMITA APENAS EM AÇÕES

DO USUÁRIO É TÃO IMPORTANTE QUANDO O

VISUAL


CSS FOI CRIADO PARA FACILITAR E CENTRALIZAR e o mais óbvio

FAZER O ESTILO

FUNÇÕES ATUAIS:

HTML = CONTEÚDOCSS = ESTILO


AMBIENTAÇÃO

VALOR

Arial, Verdana, sans-serif

#FFF

20% 10% 15% 10%

SELETOR

h1

.class

#div

PROPRIEDADE

font-family:

color:

padding:

TROCANDO EM MIÚDOS

seletor {propriedade: valor;}


FORMAS DE APLICAÇÃO DE ESTILO

EXTERNAMENTE

<link href=”style.css” rel=”stylesheet” type=”text/css” />

INTERNAMENTE

<style type=”text/css”>

seletor {propriedade:valor;}

</style>

EM LINHA (INLINE)

<h1 style=”font-size:20px; color:#FFF; border:solid 1px ”>Construsite Brasil</h1>

PADRÃO CONSTRUSITE

NUNCA

NUNCA É DE MAIS PRA NÓS DESENVOLVEDORES! TODA REGRA TEM SUA EXCEÇÃO!


| HOME | QUEM SOMOS | SERVIÇOS | CONTATO HOME | QUEM SOMOS | SERVIÇOS | CONTATO

PSEUDOCLASSES:

PROBLEMA: Você deseja criar um menu com borda de separação somente entre os elementos. Você define a propriedade border-left na lista:

li { border-left:solid 1px #333; } li:first-child { border-left:none; }

SOLUÇÃO: Você define a poseudoclasse :first-child no seletor li.Você define a propriedade border-left com o valor none.

A PSEUDOCLASSE :LAST-CHILD FOI IMPLEMENTADA EM CSS3*ver as novas pseudoclasses no livro CSS Cookbook pg.: 76-77.


PSEUDOELEMENTOS:

::FIRST-LETTER

::FIRST-LINE

::BEFORE

::AFTER


REDUZIR E REAPROVEITAR


backgrond: url(img.jpg) top center no-repeat #333;

backgrond-repeat: no-repeat;

backgrond-color: #333;

backgrond-position: top center;

EXEMPLO DE PROPRIEDADE ABREVIADA:

backgrond-image: url(img.jpg);


CSS RETROATIVO


EXEMPLO DE PROPRIEDADE ABREVIADA:

PROPRIEDADE ABREVIADA TEM MAIS RELEVÂNCIA.

QUANDO NÃO UTILIZAR?

TEMOS UM BOTÃO COM UM ÍCONE, COMO NO EXEMPLO

ABAIXO, PORÉM EXISTE UMA VARIAÇÃO DE COR.

PODEMOS REAPROVEITAR O MESMO ÍCONE MUDANDO

APENAS O BACKGROUND-COLOR.

botão

botão

<a href=”#” class=”bt green”>botão</a>

<a href=”#” class=”bt red”>botão</a>

.bt {

background-image:url(img.jpg);

background-position: top left;

background-repeat:

padding:10px 10px 10px 30px;

}

.green {

background-color: green;

}

.red {

background-color: red;

}


EVITEM UTILIZAR HERANÇA

.content h2 {}

.title {}

<div class=”content”>

<h2 class=”title”>Lorem ipsum</h2>

<p>Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Donec interdum

bibendum porta. Nulla congue cursus dolor

at facilisis. Nunc nisl lorem, gravida

at fringilla sed, mattis id ligula. Cras

eget nunc velit, in luctus ligula. Vivamus

fringilla dapibus gravida. Nulla vel lacus

sit amet tellus condimentum interdum a

vitae quam. Morbi sit amet urna est, at

ullamcorper ligula.</p>

</div> REUTILIZAÇÃO DO CÓDIGO ATRAVÉS DA CLASSE

DIFÍCIL REUTILIZAÇÃO DO CÓDIGO


EVITE UTILIZAR IDS PARA ESTILIZAÇÃO

#submit {}

.bt {}

enviar enviar

SE EXISTIR MAIS DE UM BOTÃO COM ESTILOS IGUAIS O ID NÃO PODERÁ SER REUTILIZADO.

Utilize classes ao invés de criar seletores semelhantes, diminui o tamanho e ajuda o estilo a ser reaproveitado.

ID NÃO PODE SER UTILIZADO MAIS DE UMA VEZ NUMA MESMA PÁGINA!


REUTILIZE SEUS CÓDIGOS!utilize classes

botão

botão

botão

<a href=”#” class=”bt”>botão</a>

<a href=”#” class=”bt yellow”>botão</a>

<a href=”#” class=”bt red”>botão</a>

Sempre relacionem imagem, estrutura e estilo ao nomear.


.bt {padding:20px, backgroud:#FFF; color: blue;}

.yellow { background: yellow;}

.red { background: red;}

.btBorder { border:solid 4px #333;}

</style>botão <a href=”#” class=”bt red btBorder”>botão</a>

“Uma boa nomeclatura vale ouro”. BERNARD DE LUNA


VANTAGENS DA UTILIZAÇÃO DE SPRITES

RETROATIVIDADE

APENAS UMA REQUISIÇÃO AO SERVIDOR

CENTRALIZAÇÃO DAS IMAGENS

MELHOR MANIPULAÇÃO, AUMENTANDO A PRODUTIVIDADE


UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS

HTML

CSS

estruturar

estilizar

comportar a informação escrita(hipertextualidade)

comportar a informação visual(criar interação visual)



IMAGENS DE ÍCONES, BOTÕES, MARCADORES, SETAS, ETC.

SÃO INFORMAÇÕES VISUAIS



- DEVEMOS CRIAR PÁGINAS QUE SOBRE TUDO CARREGUEM INFORMAÇÃO. - DEVEMOS CRIAR ELEMENTOS QUE MANTENHAM A RESPONSABILIDADE COM A ACESSIBILIDADE, NAVEGABILIDADE E VISIBILIDADE AOS MECANISMOS DE BUSCA ORGÂNICA.



EXEMPLO SIMPLES:

<input type=”submit” value=”enviar”>

Enviar

Botão normalComo foi projetado

pelo designer



É INTERESSANTE REMOVER OU DEFINIR O VALUE COMO NULO?



SE NÃO DEFINIRMOS VALUE COMO NULO:

En-





MANTENDO A ESTRUTURA BÁSICA:

- O GOOGLE AGRADECE

- OS LEITORES DE TELA AGRADECEM

- A ACESSIBILIDADE AGRADECE





input[type=”submit”] {

width:50px;

height:50px;

background: url(bt.jpg) top center;

text-indent:9999px;

overflow:hidden;

}

</style>

Ocultar elementos que transbordam

Recuo de texto

OBS.: PODEMOS UTILIZAR A MESMA TÉCNICA EM QUAISQUER OUTROS ELEMENTOS, COMO CONTROLES DE SLIDE,

PAGERS, SETAS. ASSIM MANTEMOS A INFORMAÇÃO ESCRITA E A VISUAL.




Como foi projetado pelo designer


PADRONIZAÇÃO DE ESCRITA E RELAÇÃO ENTRE NOMENCLATURAS

elementoSecao

Exemplos:

#slideshow

.slideImages

.slideNav

.slidePrev

.slideNext

.slidePager

. . .


SEMPRE RELACIONEM IMAGEM, ESTRUTURA E ESTILO AO NOMEAR.

.slideNav slideNav.jpg

.slidePager slidePager.jpg . .


PADRONIZAÇÃO DE ESCRITA E RELAÇÃO ENTRE NOMENCLATURAS

seletor {

[fonte e propriedades de texto]

[plano de fundo]

[tamanho]

[bordas]

[espaçamentos]

[posicionamento]

}


CSS VALIDO É SEMPRE IMPORTANTE

CSS Validation ServiceW3Chttp://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/



UM NOVO CONCEITO COM NOVOS RECURSOS


OLD RADIO

PURE CSS3

20 ThINGS I LEARNED ABOUT BROwSERS AND ThE wEB

OUR SOLAR SYSTEM

CAN hAZ UR CURSOR?

EXEMPLOS:

https://developer.mozilla.org/en-US/demos/detail/old-radio/launch

http://www.20thingsilearned.com/en-US/html/3

http://neography.com/experiment/circles/solarsystem/

http://lab.simurai.com/monster/

http://lab.simurai.com/monster/


border-radius

transition

transform

background

text-shadow / box-shadow

RGBA

content

NOVOS PARÂMETROS QUE VAMOSUTILIZAR COM MAIS FREQUÊNCIA:

background-color:

rgba(0,181,173,0.74);

alpha

HEX: #FFFFFF

RGB: 255,255,255

ur(img01.jpg), url(img02.jpg)ur(img03.jpg), url(img04);


30minutos

PORQUE UTILIZAR UM FRAMEWORK COMO O LESS?

5minutos

sem framework com framework

83% +

produtividade

=


Créditos


www.construsitebrasil.com

Marcos CésarDesenvolvedor front-end e Designer

Material elaborado por:


Referêcias6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/

Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010.

Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006).

Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta.

W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess

Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/

Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/

CSS3 Generator. Disponível em: http://css3generator.com/

http://www.pinceladasdaweb.com.br/blog/2011/06/30/tabela-semantica-html5/

Documents

CSS