css´s dinâmicos - infotech 2012
DESCRIPTION
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.TRANSCRIPT
CSS´S DINÂMICOS
André Paulovich | João Paulo
@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?
