CSS´S DINÂMICOSAndré Paulovich | João Paulo
André Paulovich@andrepaulovichpaulovich@100loop.comwww.100loop.comwww.raptors.com.br
João Paulo@joaopsferreirajoao@100loop.comwww.100loop.comwww.joaopferreira.com
O que é CSS?• Permite separar a formatação visual do conteúdo• Podemos especificar a formatação para:   –   Todos os eleme...
Três formas de especificar o CSS1) HTML Inline style  <div style=“color: red; font-size: 18px”>Texto</div>2) Style dentro ...
SeletoresNome do elemento    div, p, td, table {}Definição por Id      #logo, #special {}Nome de classes    .header, .titl...
Dois principais tópicos sobre CSS     Seletores         .info {            Propriedades            background: #f3b500;   ...
Regras de escrita        Lista-de-Seletores {           Lista-de-Propriedades        }  Seletores        .header , .title ...
E O CSS3?
Exemplos de CSS3Text shadowBox shadowFont faceMulti columnTransitions
NavegadoresPrefixos experimentais-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, An...
Media QueriesPrefixos por browsers
Media QueriesPrefixos por browsers
SASS -SYNTACTICALLYAWESOME STYLESHEETS
Quem programa em Ruby?
gem install sass        Quem programa em Ruby?          Para nossa alegria...          Precisamos apenas instalá-lo.      ...
gem install sass        Quem programa em Ruby?
gem install sass        Passo final de instalação         gem install sass
É uma extensão do CSS3Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS.       Regras              ...
Variáveis            Resultado
DEMO
“Aninhamento”                Resultado
DEMO
Combinações              Resultado
DEMO
Herança de seletores               Resultado
DEMO
Funções extraslightenbackground-color: lighten($navbar-color, 20%);}darkenbackground-color: darken($navbar-color, 20%);}
PERGUNTAS?
CSS´s Dinâmicos - InfoTech 2012
Próximos SlideShares
Carregando em…5
×

CSS´s Dinâmicos - InfoTech 2012

585 visualizações

Publicada em

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.

  • Ahh, agora entendi! O SASS no caso gera o CSS, correto? Eu pensava que era uma nova extensão.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Olá Ivomar, após instalar o Ruby... você vai precisar usar o comando 'sass --watch seuarquivo.sass:nomedoarquivoquevaigerar.css'. Rode este comando no prompt do windows e deixe-o aberto. Fazendo isso, sempre que você modificar o arquivo SASS ele vai recompilar e gerar um novo CSS para você.

    http://www.100loop.com/destaque/como-usar-sass-syntactically-awesome-stylesheets-no-windows/

    Leia este artigo para compreender melhor.
    um abraço,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Após a instalação. Qual o procedimento a fazer para o CSS ler o SASS?
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

CSS´s Dinâmicos - InfoTech 2012

  1. 1. CSS´S DINÂMICOSAndré Paulovich | João Paulo
  2. 2. André Paulovich@andrepaulovichpaulovich@100loop.comwww.100loop.comwww.raptors.com.br
  3. 3. João Paulo@joaopsferreirajoao@100loop.comwww.100loop.comwww.joaopferreira.com
  4. 4. 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
  5. 5. Três formas de especificar o CSS1) 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”/>
  6. 6. SeletoresNome do elemento div, p, td, table {}Definição por Id #logo, #special {}Nome de classes .header, .title {}Combinação dos 3 tipos table #logo .special {}
  7. 7. Dois principais tópicos sobre CSS Seletores .info { Propriedades background: #f3b500; text-align: center; border: solid 1px #f3b500; }
  8. 8. Regras de escrita Lista-de-Seletores { Lista-de-Propriedades } Seletores .header , .title { color: #f3b500; font-size: 10px; Background: #FF0033; }
  9. 9. E O CSS3?
  10. 10. Exemplos de CSS3Text shadowBox shadowFont faceMulti columnTransitions
  11. 11. NavegadoresPrefixos experimentais-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android
  12. 12. Media QueriesPrefixos por browsers
  13. 13. Media QueriesPrefixos por browsers
  14. 14. SASS -SYNTACTICALLYAWESOME STYLESHEETS
  15. 15. Quem programa em Ruby?
  16. 16. gem install sass Quem programa em Ruby? Para nossa alegria... Precisamos apenas instalá-lo. http://rubyinstaller.org
  17. 17. gem install sass Quem programa em Ruby?
  18. 18. gem install sass Passo final de instalação gem install sass
  19. 19. É uma extensão do CSS3Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS. Regras Variáveis aninhadas CSS Herança de Combinações seletores
  20. 20. Variáveis Resultado
  21. 21. DEMO
  22. 22. “Aninhamento” Resultado
  23. 23. DEMO
  24. 24. Combinações Resultado
  25. 25. DEMO
  26. 26. Herança de seletores Resultado
  27. 27. DEMO
  28. 28. Funções extraslightenbackground-color: lighten($navbar-color, 20%);}darkenbackground-color: darken($navbar-color, 20%);}
  29. 29. PERGUNTAS?

×