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
Upcoming SlideShare
Loading in...5
×

CSS´s Dinâmicos - InfoTech 2012

423

Published on

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.

3 Comments
0 Likes
Statistics
Notes
  • Ahh, agora entendi! O SASS no caso gera o CSS, correto? Eu pensava que era uma nova extensão.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Após a instalação. Qual o procedimento a fazer para o CSS ler o SASS?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
423
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide
  • Este modelo pode ser usado como arquivo de partida para apresentar materiais de treinamento em um cenário em grupo.SeçõesClique com o botão direito em um slide para adicionar seções. Seções podem ajudar a organizar slides ou a facilitar a colaboração entre vários autores.AnotaçõesUse a seção Anotações para anotações da apresentação ou para fornecer detalhes adicionais ao público. Exiba essas anotações no Modo de Exibição de Apresentação durante a sua apresentação. Considere o tamanho da fonte (importante para acessibilidade, visibilidade, gravação em vídeo e produção online)Cores coordenadas Preste atenção especial aos gráficos, tabelas e caixas de texto.Leve em consideração que os participantes irão imprimir em preto-e-branco ou escala de cinza. Execute uma impressão de teste para ter certeza de que as suas cores irão funcionar quando forem impressas em preto-e-branco puros e escala de cinza.Elementos gráficos, tabelas e gráficosMantenha a simplicidade: se possível, use estilos e cores consistentes e não confusos.Rotule todos os gráficos e tabelas.
  • Esta é outra opção para um slide de Visão Geral.
  • Esta é outra opção para um slide de Visão Geral.
  • As duas primeiras não são encorajadas, pois aumentam a transferência de dados.Faça somente a terceira opçãoEles são processados na ordem que é mostrada.
  • 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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×