css´s dinâmicos - infotech 2012

CSS´S DINÂMICOS

André Paulovich | João Paulo

@andrepaulovich paulovich@100loop.comwww.100loop.comwww.raptors.com.br

André Paulovich

@joaopsferreirajoao@100loop.comwww.100loop.comwww.joaopferreira.com

João Paulo

O que é CSS?

• Permite separar a formatação visual do conteúdo• Podemos especificar a formatação para:

– Todos os elementos de um determinado tipo– Para um elemento com um determinado id– Todos os elementos com uma determinada classe– E combinações destas três formas acima

Três formas de especificar o CSS

1) HTML Inline style<div style=“color: red; font-size: 18px”>Texto</div>

2) Style dentro do Head<style type=“text/css”>Configurações de CSS</style>

3) Usando a tag link <link rel=“stylesheet” type=“text/css” href=“arquivo.css”/>

Nome do elementodiv, p, td, table {}

Definição por Id#logo, #special {}

Nome de classes.header, .title {}

Combinação dos 3 tipostable #logo .special {}

Seletores

Dois principais tópicos sobre CSS

.info { background: #f3b500; text-align: center; border: solid 1px #f3b500;}

PropriedadesSeletores

.header , .title { color: #f3b500;font-size: 10px;Background: #FF0033;

}

Regras de escrita

Lista-de-Seletores { Lista-de-Propriedades}

Seletores

E O CSS3?

Text shadowBox shadowFont faceMulti columnTransitions

Exemplos de CSS3

Prefixos experimentais

-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android

Navegadores

Prefixos por browsers

Media Queries

Prefixos por browsers

Media Queries

SASS -SYNTACTICALLY AWESOME STYLESHEETS

Quem programa em Ruby?

Quem programa em Ruby?

gem install sass

Para nossa alegria... Precisamos apenas instalá-lo.

http://rubyinstaller.org

Quem programa em Ruby?

gem install sass

Passo final de instalação

gem install sass

gem install sass

É uma extensão do CSS3

Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS.

CSS

Regras aninhadas

Variáveis

CombinaçõesHerança de seletores

Variáveis

Resultado

DEMO

“Aninhamento”

Resultado

DEMO

Combinações

Resultado

DEMO

Herança de seletores

Resultado

DEMO

Funções extras

background-color: lighten($navbar-color, 20%);}

lighten

background-color: darken($navbar-color, 20%);}

darken

PERGUNTAS?