CSS de cima para baixo – incluindo CSS3

Divulgação: Seu suporte ajuda a manter o site funcionando! Ganhamos uma taxa de indicação por alguns dos serviços que recomendamos nesta página.


Cascading Style Sheets, ou CSS, é a linguagem que torna a web bonita. Juntamente com HTML e JavaScript, é uma das tecnologias que todo desenvolvedor de front-end deve dominar.

Embora a Web esteja cheia de recursos para ajudá-lo a aprender CSS, se você é iniciante, pode ter dificuldade em separar ótimos recursos daqueles que estão bem.

Neste guia de recursos, fornecemos uma introdução básica ao que é CSS, do que ele é capaz, além dos recursos lançados na versão mais recente: CSS3.

Introdução ao CSS

Se você estiver pronto para participar, aqui está o que este guia cobre:

  • Introdução ao CSS: se você é novo em CSS, este é o lugar para começar. Esta seção fornece uma visão geral básica do CSS e aponta para outros ótimos recursos.
  • O que há de novo no CSS3: se você deseja pesquisar os módulos lançados no CSS3, consulte este tópico, onde aprenderá sobre consultas de mídia, dimensionamento de caixas, transformações em 3D, animações, layouts de várias colunas e muito mais.
  • Criando sites responsivos com CSS: hoje, os sites devem renderizar lindamente em um dispositivo de qualquer tamanho, e CSS é a linguagem que faz com que isso aconteça.
  • Como fazer botões da porta deslizante: uma cartilha sobre a combinação de jQuery com CSS para criar efeitos realmente interessantes.
  • Tudo sobre cores CSS: levante-se e vá com cores CSS. Esta seção inclui uma excelente referência de cores.
  • Escrevendo CSS eficiente:: ter páginas de carregamento rápido é mais importante do que nunca. Isso mostra como escrever CSS que pode reduzir significativamente o tempo de carregamento.
  • Mestre CSS Online: esses recursos fornecem um caminho para o domínio do CSS. Se você prefere um estilo de educação aprender a fazer, esta seção é para você.
  • Trabalhos surpreendentes de CSS: Procurando inspiração? Aqui, reunimos algumas das criações CSS mais incríveis da Web.
  • A palavra oficial no CSS3: agora que você conhece algum CSS e aprendeu quais módulos foram lançados no CSS3, é uma boa ideia se familiarizar com o W3C, a organização que impulsiona o desenvolvimento do CSS.
  • Leitura recomendada: se você preferir aprender com a ajuda de um e-book ou brochura, verifique nossa lista de livros recomendados, onde você certamente encontrará um título que desperte seu interesse.

Introdução ao CSS

Introdução ao CSS

CSS, ou Cascading Style Sheets, é a linguagem usada para determinar o estilo e a aparência de um site.

O conteúdo de um site, incluindo os cabeçalhos, parágrafos e imagens, é carregado de acordo com as instruções contidas em um documento HTML, e o CSS informa ao seu navegador como apresentar cada elemento desse documento HTML.

CSS é usado para fazer coisas como itens de posição em um site e para determinar coisas como cor de fundo, tamanho e estilo da borda, espaço entre um item e o próximo, família de fontes e muito mais.

O principal benefício do CSS é que cria uma separação entre o design de um site e o conteúdo do site. Ao separar o conteúdo da varredura de design, é possível fazer alterações em um site inteiro, ajustando apenas algumas regras CSS em um único arquivo CSS.

Três lugares para escrever regras CSS

Antes de escrever uma única linha de CSS, você precisa saber onde escrevê-la e como vinculá-la ao conteúdo HTML que está afetando. Existem três lugares diferentes nos quais você pode escrever CSS:

  • Folha de estilos externa: um documento criado exclusivamente para conter regras CSS que podem ser aplicadas a vários documentos HTML usando o elemento LINK no cabeçalho do documento HTML.
  • Folha de estilos interna: estilos CSS incorporados diretamente em um cabeçalho de documento HTML entre tags de elementos de estilo.
  • Estilos embutidos: estilos CSS adicionados a um único elemento HTML usando o atributo style no documento HTML.

Embora haja tempo e local para usar folhas de estilo internas e estilos em linha, a grande maioria dos Os estilos CSS são melhor aplicados usando uma folha de estilos externa.

Uma folha de estilo externa pode ser vinculada a qualquer número de documentos HTML, permitindo controlar a aparência de um site inteiro a partir de um único arquivo CSS.

Associando regras CSS a elementos HTML específicos

As regras CSS são construídas de duas partes: um seletor e uma declaração. Cada declaração também consiste em duas partes: uma propriedade e um valor.

  • Seletores identificar ou selecionar os elementos HTML aos quais a regra CSS deve ser aplicada.
  • Propriedades são nomes que descrevem o recurso que a regra abordará. Algumas propriedades CSS comumente usadas são margem, borda, cor de fundo, alinhamento de texto e estilo de fonte.
  • Valores descreva como uma propriedade deve aparecer. Se a propriedade em questão for margem, um valor comum pode ser 10 pixels.

Seletores e Especificidade

Muitas vezes, uma folha de estilos contém regras conflitantes para um único elemento HTML. O conceito de especificidade do seletor determinará quais regras serão aplicadas a cada elemento HTML.

Por exemplo, se uma lista de links estiver sendo usada para a navegação principal e listas adicionais forem apresentadas no corpo principal de uma página, a lista de navegação e as listas no corpo precisarão de conjuntos diferentes de regras CSS.

Caso contrário, o menu de navegação e a lista no corpo da página estarão sujeitos às mesmas regras de CSS.

Entender como os seletores de CSS funcionam é a chave para escrever regras que afetam os elementos HTML corretos.

Enquanto os seletores CSS mais comuns são os seletores de ID, classe e tag ou elemento, outros seletores, como atributos, seletores posicionais, pseudo-seletores e combinações de seletores, podem ser usados ​​para criar regras com maior especificidade..

Usos comuns do CSS

Existem muitas propriedades CSS aplicadas em praticamente todas as páginas de HTML. Familiarizar-se com essas propriedades CSS comuns permitirá que você lide com a maioria das tarefas de estilo e posicionamento.

Fonte de estilo

CSS pode ser usado para criar qualquer estilo de fonte desejado. Seja cor, tamanho, peso, altura da linha, alinhamento, maiúsculas e minúsculas, o próprio tipo de fonte ou decorações como sublinhados e tacadas que você deseja controlar, as propriedades CSS podem ser usadas para criar o efeito desejado.

Aplicando os princípios de especificidade, um estilo de fonte diferente pode ser aplicado a todos os elementos HTML de uma página.

The Box Model

O espaço ao redor de cada elemento HTML é melhor compreendido pensando no que é chamado de modelo de caixa:

Diagrama do Modelo de Caixa

O modelo de caixa consiste em três propriedades CSS: preenchimento, borda e margem. Essas propriedades podem ser aplicadas a qualquer elemento HTML. É mais fácil entender essas três propriedades a título de exemplo.

Considere o seguinte elemento de parágrafo HTML:

Um parágrafo de texto.

Qual seria o efeito de escrever a seguinte regra CSS?

p {
estofamento: 10 px;
borda: 1px sólido;
margem: 10 px;
}

O parágrafo aparecerá cercado por:

  • Primeiro, 10 pixels de preenchimento (espaço vazio) em todos os lados do texto do parágrafo,
  • Segundo, uma borda sólida de 1 pixel de largura ao redor do parágrafo e preenchimento,
  • Terceiro, 10 pixels de margem (espaço vazio) entre a borda e qualquer elemento adjacente.

Isso é conhecido como modelo de caixa. Cada elemento é encaixotado primeiro pelo espaço vazio chamado padding, depois por uma borda e, finalmente, pelo espaço vazio chamado margin.

Usando flutuadores

Os carros alegóricos são usados ​​para enviar elementos HTML para a esquerda ou direita de seu elemento pai, sem separá-los do fluxo geral do documento HTML. Juntamente com suas propriedades irmãs, elas são uma das melhores maneiras de criar layouts de sites.

Embora não tentemos cobrir tudo o que há para saber sobre carros alegóricos, é fundamental ter um entendimento básico de como eles funcionam quando você começa a aprender CSS.

É mais fácil entender as flutuações no contexto de um documento com processador de texto. Considere uma imagem em um documento de texto.

Normalmente, cada imagem fica localizada totalmente à direita, com o texto fluindo no lado esquerdo da imagem ou até a esquerda, com o texto fluindo no lado direito da imagem. No site, esse visual é realizado usando a propriedade float.

A propriedade float possui quatro valores aceitáveis: left, right, none e herdar. No caso do nosso exemplo acima:

  • Se a imagem estiver sujeita a uma regra CSS com a propriedade float e o valor à esquerda, ela será posicionada no lado esquerdo do elemento pai, com o texto fluindo no lado direito.
  • O valor correto teria o desempenho esperado.
  • Nenhum impediria o elemento de flutuar em qualquer direção.
  • Herdar levaria o elemento a herdar o valor flutuante aplicado ao elemento pai.

Os flutuadores são comumente usados ​​para criar menus de navegação no site. Normalmente, o menu de navegação do site consiste em uma lista não ordenada em HTML, com cada item da lista flutuado para a esquerda ou direita, resultando em itens de lista que aparecem próximos um do outro, em vez de empilhados em um estilo de lista com marcadores.

Por exemplo, um menu de navegação típico pode se parecer com isso em HTML:

  • Casa

  • Nossa loja

  • Sobre nós

  • Contate-Nos.

Sem nenhuma regra CSS, esse menu apareceria como uma lista com marcadores, com cada item aparecendo em uma nova linha. Para fazer com que cada item apareça em uma única linha horizontal a partir do lado esquerdo da página, a seguinte regra CSS pode ser usada.

li {
flutuar: esquerda;
}

Observe que, para simplificar este exemplo, usamos a tag do item de lista li como o seletor CSS. Na realidade, isso nunca seria feito. Normalmente, uma classe seria atribuída à própria lista ou a cada item da lista, e essa classe seria usada como seletor.

Limpar o flutuador

Outra propriedade frequentemente usada em conjunto com carros alegóricos é a propriedade clear. Quando um elemento é flutuado, todos os elementos subsequentes deslizam para cima e se alinham ao lado do elemento flutuante.

Nos casos em que você deseja que os elementos subsequentes iniciem abaixo do item flutuado, em vez de próximo a ele, é possível usar a propriedade clear para forçá-los a iniciar em uma nova linha.

Acabamos de arranhar a superfície do que pode ser feito com flutuadores e a propriedade clara, mas encontramos este excelente artigo do CSS-Tricks, que fornece uma visão detalhada deste tópico.

Usando a propriedade Position

A propriedade CSS position é outro método frequentemente usado para criar layouts de sites. Diferentemente da propriedade float, a propriedade position é frequentemente usada para quebrar elementos do fluxo natural de um documento HTML e ditar sua posição de maneira muito específica..

Dois valores podem ser usados ​​com a propriedade position: relativa e absoluta. Após aplicar um desses valores, propriedades adicionais, como superior, inferior, esquerda e direita, podem ser usadas para posicionar o elemento afetado de maneira muito específica.

Usar a propriedade position para criar layouts não é isento de riscos. Diferentemente da propriedade float, os elementos posicionados pela propriedade position se sobrepõem a outros itens, criando o potencial para mais problemas de tamanho de navegador e de porta de visualização.

No entanto, é uma propriedade amplamente usada no mundo do desenvolvimento de CSS, e você deve aprender o básico sobre o uso da propriedade position.

O que há de novo no CSS3

O que há de novo no CSS3

Enquanto CSS2 era uma única especificação, o CSS3 foi dividido em mais de cinquenta módulos diferentes, cada um em um estágio diferente de desenvolvimento e aceitação.

O trabalho em andamento no CSS3 é gerenciado pelo World Wide Web Consortium, ou o W3C, e eles oferecem um local centralizado onde você pode acompanhar todo o trabalho de padronização do CSS3 em andamento..

Embora o trabalho em vários módulos CSS3 esteja em andamento, muitos módulos já têm ampla aceitação e são amplamente utilizados por muitos sites. Aqui estão dez das propriedades CSS3 mais importantes que já conquistaram ampla aceitação e são suportadas por todos os navegadores modernos.

  • Embora a capacidade de criar simples animações é possível há muito tempo com JavaScript, agora é possível criar animações CSS usando uma sintaxe CSS mais simples.
  • o Cálculo A função agora disponível no CSS3 é extremamente útil para criar layouts responsivos. Ele pode ser usado para adicionar, subtrair, multiplicar ou dividir, e o resultado do cálculo é usado como o valor da propriedade.
  • Uma variedade de seletores avançados foram adicionados ao CSS3, permitindo um maior grau de especificidade ao selecionar elementos para regras CSS.
  • A adição de gradientes como um tipo de plano de fundo, capacitou os desenvolvedores de CSS a criar planos de fundo impressionantes que são baixados e exibidos rapidamente.
  • As propriedades de largura e altura aplicadas a um elemento não contêm preenchimento, borda e margem. Como resultado, preenchimento, margem e borda aumentam o tamanho de um elemento além da largura e altura especificadas. Isso há muito frustra os desenvolvedores de CSS que recorrem a matemática complexa para ajustar os layouts de sites. No entanto, com a nova propriedade de tamanho da caixa, a borda da caixa de valor pode ser aplicada, forçando o preenchimento, a borda e a margem dentro das restrições de largura e altura especificadas, simplificando o design dos layouts de página da web..
  • O CSS pode ser usado para aplicar bordas a qualquer elemento HTML e, com a propriedade border-image, é mais fácil do que nunca criar e usar uma borda personalizada. A sintaxe da propriedade em si é bastante complexa, mas depois que você pega o jeito, pode criar rapidamente bordas únicas para qualquer elemento em um site.
  • Consultas de mídia determine se a janela de visualização do dispositivo que está sendo usado para acessar um site atende a determinadas características especificadas. O módulo @media CSS3 é uma das principais ferramentas usadas para criar sites responsivos. Usando consultas de mídia, um desenvolvedor de CSS pode criar regras de CSS que são aplicadas apenas quando determinados recursos de mídia, como largura e altura da janela de exibição e recursos de exibição em cores, são atendidos. Dessa forma, os desenvolvedores de CSS podem reposicionar e redimensionar elementos ou ocultá-los todos juntos, com base nos resultados da consulta de mídia.
  • Usando vários fundos criar um efeito de fundo específico é mais fácil do que nunca com CSS3. Usando a propriedade background, várias imagens, cores e gradientes de fundo podem ser aplicados a qualquer elemento.
  • Usando colunas criar um layout inspirado em jornal é mais fácil do que nunca com a propriedade de colunas no CSS3. A propriedade pode ser usada para definir facilmente o número de colunas e a largura, criando um contêiner no qual o conteúdo flui facilmente de uma coluna para a seguinte. As colunas também são úteis para criar menus de navegação flexíveis.
  • Transformações 3D são possíveis pelo CSS3. Este é um assunto complexo a ser dominado, e você deve começar lendo sobre transformações CSS e, depois, trabalhando em alguns tutoriais.

Criando sites responsivos com CSS

Criando sites responsivos com CSS

Existem centenas, senão milhares, de tamanhos e resoluções de tela de dispositivos diferentes usados ​​todos os dias para acessar a Web e, como resultado, não é mais suficiente ter um único site em tamanho normal e um ou dois designs para dispositivos menores.

Hoje, seu site precisa estar visível em telas grandes, dispositivos pequenos e todos os tamanhos de viewport entre.

Para fazer isso, o CSS do seu site deve estar em conformidade com os três princípios básicos do design responsivo da web.

  • Primeiro, a espinha dorsal, ou grade, que define seu layout geral deve ser fluida.
  • Segundo, as imagens devem ser redimensionadas automaticamente para renderizar lindamente em qualquer dispositivo.
  • Terceiro, as consultas da mídia devem ser usadas para abordar os pontos em que o design original do fluido se decompõe.

Ao abordar um novo projeto de web design, muitos designers experientes começam com um primeiro celular técnica. Um site projetado com essa técnica começa com o design mais simples destinado à menor viewport e estilos adicionais são adicionados à medida que o tamanho da viewport aumenta.

A primeira técnica móvel oferece dois benefícios notáveis:

  • Primeiro, força o designer a identificar as funções essenciais do site e a usá-las como base para o design do site. Muitas vezes, um site em tamanho real contém conteúdo, como widgets, menus e outros, que não fazem parte do site quando são exibidos em um dispositivo móvel. Uma primeira abordagem móvel ajuda a garantir que o objetivo e a funcionalidade principais do site ocupem o centro do palco em todos os tamanhos de viewport.
  • Segundo, os visitantes do site que acessam o site a partir de um telefone celular baixam menos regras CSS e recursos do site. Se o site completo for o primeiro a carregar, um usuário móvel baixará muito mais recursos do que o necessário. A abordagem para dispositivos móveis primeiro carrega apenas os itens apropriados em um dispositivo móvel, salvando alguns dos dados preciosos do visitante e criando uma experiência mais rápida de carregamento de sites.

Aprendendo Design Responsivo

Uma das melhores maneiras de aprender técnicas de design responsivo é com um projeto de design responsivo simples. Ao criar seu primeiro design de site responsivo, você entenderá melhor os conceitos sobre os quais falamos.

Com o crescimento da popularidade dos layouts de estilo de coluna, surgiu um novo desafio para os designers de sites: o desafio de adaptar os layouts de coluna a dispositivos de todos os tamanhos.

Felizmente, existem recursos para ajudar iniciantes em CSS e desenvolvedores experientes a aprender como trabalhar com essa nova propriedade CSS em um ambiente responsivo.

Outra ótima maneira de começar a entender como os melhores desenvolvedores de CSS adaptam sites é olhar para um site responsivo, em vários tamanhos, lado a lado. Consultas de mídia é um site em que você pode ver centenas de designs de sites responsivos em vários tamanhos, tudo em uma tela.

Como fazer botões da porta deslizante

Como fazer botões da porta deslizante

Usando CSS, você pode criar ótimos botões – e poderosos -. Você pode fazer ainda mais com um pouco de jQuery.

Abaixo, mostraremos como capturar imagens simples de botões e configurá-las para usar como botões alternáveis ​​de todos os tamanhos em seu site. No final, você produzirá um código de botão reutilizável que poderá ser usado para gerar botões como estes.

Clique na imagem para alternar a animação.

Exemplo 1 dos botões da porta deslizante

Criando suas imagens

A técnica que vamos usar para criar esses botões é chamada CSS “porta deslizante”. Para configurar esses botões, precisamos de duas imagens para cada versão do botão – no nosso caso, duas imagens de botão preto e duas imagens de botão azul, quatro imagens no total.

Para criar essas imagens, começamos com imagens de botão sólidas.

Botão azul
Botão preto

O que precisamos fazer é dividir cada botão em duas imagens:

  • A imagem da esquerda será a mais estreita possível, enquanto captura o raio total dos cantos do botão.
  • A imagem da direita será a maior possível, na verdade, queremos usar um programa de manipulação de imagens para copiar o corpo do botão algumas vezes, para que possamos criar botões muito longos com a imagem..

Aqui estão as imagens com as quais terminaremos após cortá-las nos tamanhos apropriados:

Botão azul esquerdoBotão azul à direita
Botão preto esquerdoBotão preto à direita

Depois de criar todas as quatro imagens, você estará pronto para começar a codificar.

HTML do botão

Nosso botão HTML consistirá em três componentes: um invólucro div externo, um elemento âncora e um elemento de extensão.

Botão de texto

No bloco de código acima, todos os três elementos são divididos em linhas separadas, para que você possa ver mais facilmente o que está acontecendo.

No entanto, na prática, você provavelmente desejará mantê-los todos alinhados, especialmente se estiver usando um sistema de gerenciamento de conteúdo (CMS) como o WordPress, que inserirá tags de parágrafo após cada quebra de linha.

Adicionando imagens de botão

No momento, se você renderizar o bit de HTML do exemplo acima, tudo o que você verá é um link que diz “Texto do botão”. O próximo passo que queremos dar é adicionar a imagem do botão ao nosso código.

No entanto, antes de fazer isso, vamos adicionar um pouco de estilo ao invólucro div externo, para que possamos ver o que está acontecendo um pouco mais claramente.

.botão deslizante {
display: bloco embutido;
largura: auto;
margem: 20 px;
}

Esse trecho de código simplesmente adicionará um pouco de espaço ao redor do nosso botão e forçará a div contida a diminuir para o tamanho do link e do texto. Agora estamos prontos para adicionar nossas imagens de botão.

.link deslizante {
background-image: url (‘botão azul-right.png’);
tamanho do plano de fundo: automático 100%;
posição de fundo: direita;
repetição em segundo plano: sem repetição;
}
.texto deslizante {
background-image: url (‘botão azul-esquerdo.png’);
tamanho do plano de fundo: automático 100%;
posição de fundo: esquerda;
repetição em segundo plano: sem repetição;
}

Então agora adicionamos nossa imagem de botão. Infelizmente, ainda não há muito para ver. Além disso, se você aumentar o zoom e olhar atentamente, perceberá que a imagem da esquerda está na verdade apenas em cima da imagem da direita. Não é o efeito que estamos buscando.

Botão com defeito

Estilo de botão

Vamos adicionar um pouco de preenchimento ao redor do texto. Isso fará com que nosso botão pareça mais com um botão. Além disso, precisaremos alterar a exibição dos elementos de extensão e âncora para bloco embutido para fazer com que ambos respondam ao preenchimento e margem da maneira que desejamos..

.link deslizante {
display: bloco embutido;
}
.texto deslizante {
preenchimento: 20px;
display: bloco embutido;
}

Esse código dará ao nosso botão algum tamanho. No entanto, ainda temos o problema problemático de sobreposição entre as imagens esquerda e direita. O que precisamos fazer é usar a margem para mover a imagem da direita um pouco para a direita e, em seguida, aplicar a mesma margem negativa exata à imagem da esquerda.

.link deslizante {
margem esquerda: 17 px;
}
.texto deslizante {
margem esquerda: -17px;
}

O valor de 17 pixels é aplicável às nossas imagens de botão específicas. Se você estiver usando imagens diferentes, precisará ajustar esse valor por tentativa e erro até o botão parecer certo.

Antes de prosseguir, vamos também adicionar estilos ao texto do botão.

.texto deslizante {
cor: #fff;
tamanho da fonte: 14pt;
família de fontes: ‘Open-Sans’, Arial, sans-serif;
transformação de texto: maiúscula;
intensidade da fonte: Negrito;
alinhamento de texto: centro;
}

Neste ponto, nosso botão realmente se parece com um botão!

Bom botão

Efeito de foco do botão

No momento, se você passar o mouse sobre o botão, não há indicação visual de que o mouse está sobre o botão. Vamos corrigir isso adicionando um efeito de foco.

.texto deslizante: pairar, texto deslizante: ativo {
box-shadow: inserir 0 0 0 1000px rgba (255.255.255, .2);
}

Enquanto isso certamente funciona, é um pouco difícil. Primeiro, o efeito flutuante faz a transição para dentro e para fora com muita dureza. Segundo, se você colocar o botão em um fundo escuro, perceberá que o efeito de foco se estende além dos cantos arredondados do botão.

Podemos corrigir esses dois problemas com algumas linhas de código adicionadas ao elemento span.

.texto deslizante {
-propriedade de transição do webkit: box-shadow; / * Safari * /
-duração da transição do webkit: .2s; / * Safari * /
propriedade de transição: sombra de caixa;
duração da transição: .2s;
raio da borda: 12px;
}

Agora, nosso efeito de pairar fará a transição dentro e fora de duzentos centésimos de segundo – um pequeno alívio, mas o suficiente para tornar a transição suave. Segundo, a regra do raio da borda arredondará os cantos do efeito de foco para se ajustar à imagem.

Observe que o valor de 12 pixels que aplicamos ao raio da borda é específico da nossa imagem de botão. Se você estiver usando uma imagem diferente, precisará ajustar esse valor.

Imagens de botão de comutação

No momento, podemos adicionar um URL ao atributo href do elemento âncora e nossos botões funcionarão muito bem como links. No entanto, na parte superior desta postagem, havia um gif que demonstrava um efeito de alternância que alterava a imagem do botão. Vamos seguir o processo de criação de botões de alternância agora.

Primeiro, precisamos adicionar a nova imagem aos botões. A maneira como fazemos isso é adicionando as imagens do botão a uma nova classe e, em seguida, usando o jQuery para ativar e desativar a classe quando o botão é clicado..

Vamos começar com o CSS.

.botão atual .sliding-link {
background-image: url (‘botão-preto-direito.png’);
}
.texto atual do botão .sliding {
background-image: url (‘botão-esquerdo-esquerdo.png’);
}

No momento, o efeito de alternância não funciona. No entanto, se você adicionar manualmente o botão atual da classe à div do contêiner de botões, verá a segunda versão do seu botão.

Para alternar entre as duas versões do botão ao clicar, você precisará usar o jQuery para ativar e desativar a classe de botão atual do botão.

No entanto, antes de fazer isso, precisaremos decidir quais botões queremos alternar. Podemos fazer isso adicionando uma classe a qualquer botão que desejamos usar como botões de alternância. Vamos usar o botão de alternância da classe para esse fim.

Portanto, para designar qualquer botão como um botão de alternância, basta adicionar essa classe ao wrapper div externo:

Agora, podemos usar o jQuery para ativar e desativar a classe de botão atual desse botão.

$ (‘. botão de alternância’). click (function () {
$ (this) .toggleClass (‘botão atual’);
retorna falso;
});

Há algumas coisas acontecendo nesse código. Vamos passar por isso.

Primeiro, carregamos o jQuery das Google Hosted Libraries. Se o seu site já usa jQuery, você pode omitir o primeiro elemento de script.

O segundo elemento de script contém uma função jQuery simples.

A função observa qualquer elemento com o botão de alternância de classe. Quando qualquer elemento dessa classe é clicado, uma função é acionada ativando ou desativando o botão atual da classe para o elemento clicado.

Finalmente, a função retorna o valor false, que impede o comportamento padrão do link, que é recarregar a página, pois nosso atributo href do elemento âncora estará vazio em um botão de alternância.

Com esses bits de código adicionados, podemos alternar nosso botão para o conteúdo do nosso coração.

Clique na imagem para alternar a animação.

Exemplo 2 do botão da porta deslizante

O código fonte completo

Se você seguiu passo a passo, já criou uma versão completa do código-fonte para esses botões. No entanto, se você não está acompanhando, pode pegar o código-fonte completo do botão neste tutorial, copiando o código abaixo em um documento HTML.

Botões da porta deslizante

.botão deslizante {
display: bloco embutido;
largura: auto;
margem: 20 px;
}
.link deslizante {
background-image: url (‘botão azul-right.png’);
tamanho do plano de fundo: automático 100%;
posição de fundo: direita;
repetição em segundo plano: sem repetição;
display: bloco embutido;
margem esquerda: 17 px;
}
.texto deslizante {
background-image: url (‘botão azul-esquerdo.png’);
tamanho do plano de fundo: automático 100%;
posição de fundo: esquerda;
repetição em segundo plano: sem repetição;
display: bloco embutido;
preenchimento: 20px;
margem esquerda: -17px;
cor: #fff;
tamanho da fonte: 14pt;
família de fontes: ‘Open-Sans’, Arial, sans-serif;
transformação de texto: maiúscula;
intensidade da fonte: Negrito;
alinhamento de texto: centro;
-propriedade de transição do webkit: box-shadow; / * Safari * /
-duração da transição do webkit: .2s; / * Safari * /
propriedade de transição: sombra de caixa;
duração da transição: .2s;
raio da borda: 12px;
}
.texto deslizante: pairar, texto deslizante: ativo {
box-shadow: inserir 0 0 0 1000px rgba (255.255.255, .2);
}
.botão atual .sliding-link {
background-image: url (‘botão-preto-direito.png’);
}
.texto atual do botão .sliding {
background-image: url (‘botão-esquerdo-esquerdo.png’);
}


Botão de alternância

Botão Link

$ (‘. botão de alternância’). click (function () {
$ (this) .toggleClass (‘botão atual’);
retorna falso;
});

Colocando seu botão em bom uso

A última peça do quebra-cabeça é usar bem seus novos botões. Aqui estão algumas idéias para você começar:

  • Adicione um URL ao atributo href do elemento anchor e use o botão para vincular a qualquer página da web. Observe que, para fazer isso, você deseja omitir a classe de botão de alternância do wrapper div do botão.
  • Use jQuery ou JavaScript adicional para exibir ou ocultar informações adicionais quando o botão for alternado.
  • Se você estiver realmente ambicioso, use os botões para navegação no site e use o jQuery para determinar se a página atual corresponde ao URL do botão e alterne a classe do botão atual se os dois corresponderem..

Tudo sobre cores CSS

Tudo sobre cores CSS

Uma das coisas mais importantes – e potencialmente confusas – que podem ser especificadas com CSS é a cor. Quase todos os elementos em uma página da web podem ser coloridos usando CSS.

As propriedades de cores CSS

Um detalhe que frequentemente atrai novos desenvolvedores de front-end é a propriedade CSS color. O que o torna confuso é que a cor não controla o próprio elemento, mas o texto dentro do elemento.

A cor de um elemento em si (a caixa) geralmente será controlada pelas propriedades cor do plano de fundo, cor da borda ou de fundo e borda abreviada, que incluem informações de cores. Você também pode definir cores em uma sombra de caixa.

Normalmente, a cor de fundo de um elemento cobre o conteúdo, o preenchimento e a área da borda do elemento. Esse é o comportamento usual imaginado pelos criadores do padrão CSS. No entanto, existem maneiras de tornar o preenchimento e o conteúdo de cores diferentes.

Declarações de cores

Além das diferentes propriedades CSS que podem ser usadas para especificar uma cor, há três maneiras diferentes de identificar uma cor no CSS: RGB, valor hexadecimal ou nome.

/ * Todos os três terão a mesma cor. * /

.red-rgb {
cor de fundo: rgb (255, 0, 0);
}

.hex-vermelho {
cor de fundo: # ff0000;
}

.nome vermelho {
cor de fundo: vermelho;
}

O segundo (valor hexadecimal) é o mais comum, mas começaremos com RGB porque os valores hexadecimais não fazem sentido, a menos que você entenda como o RGB funciona.

Valores RGB

Monitores de computador, telas de televisão e outras telas semelhantes têm pixels. Em telas coloridas, cada pixel é dividido em três subpixels: vermelho, verde e azul.

Essas são as chamadas “cores primárias da luz”. Uma combinação dessas três cores em intensidades variadas pode ser usada para criar qualquer cor que o olho humano seja capaz de ver. Isso é conhecido como “mistura aditiva de cores”.

(Vale a pena saber que isso tem tudo a ver com o olho humano, e não com a própria luz.)

Telas de exibição diferentes têm recursos diferentes em termos da faixa de intensidades que cada sub-pixel pode produzir. Uma tela muito simples pode ter apenas duas intensidades para cada cor (desativada ou ativada), enquanto uma tela de alta qualidade pode ter muito mais gradações.

Como padrão, os computadores usam um intervalo de zero (0 – todo o caminho) a 255 (todo o caminho) para cada sub-pixel (por exemplo, 128 está no meio do caminho). São 256 intensidades possíveis para cada sub-pixel, o que significa que o valor de cada sub-pixel pode ser armazenado como um byte de 8 bits (2 8 = 256).

Como existem três cores, cada uma representada com 8 bits, o número total de cores que podem ser representadas dessa maneira é superior a 16 milhões (256 3 = 16.777.216).

Esse intervalo de cores pode ser representado simplesmente anotando o valor de cada sub-pixel, assim:

rgb (0, 128, 255)

Nesse exemplo, o sub-pixel vermelho está totalmente desligado, o sub-pixel verde está na metade do caminho e o sub-pixel azul está totalmente ligado. Essa cor fica assim:

Nesse sistema, o branco (todas as cores ativadas) é rgb (255, 255, 255) e o preto (todas as cores desativadas) é rgb (0, 0, 0).

As cores RGB também podem ser especificadas como porcentagens, usando um decimal não com um único dígito à direita:

rgb (0,0, 50,0, 100,0)

Esse uso não é muito comum.

Valores hexadecimais

Uma maneira mais compacta de escrever a mesma informação exata é usar valores hexadecimais. Um valor de cor hexadecimal é gravado com um sinal de hash (libra), seguido por seis caracteres hexadecimais, em três pares, como este:

# 0080ff

O primeiro par representa o valor vermelho, o segundo par representa o valor verde e o terceiro par representa o valor azul. Neste exemplo, 00 significa nenhum vermelho, 80 significa verde até a metade e ff significa azul até o primeiro. Portanto, essa é a mesma cor que rgb (0, 128, 255).

Isso pode parecer um pouco confuso se você não costuma usar números hexadecimais. Em nosso sistema decimal normal, cada dígito pode ter 10 valores (0-9). Na numeração hexadecimal, cada dígito possui 16 valores possíveis (0-9, a-f).

Isso torna possível representar todos os valores de 0 a 255 em dois dígitos, 0 a ff. Consulte este tutorial hexadecimal para obter mais informações.

Nesse sistema, branco é #ffffff e preto é # 000000.

Valores de cores hexadecimais são a maneira mais comum de especificar cores em CSS.

Nomes de cores CSS

A maneira final de especificar uma cor específica é usar um dos nomes de cores predefinidos. O W3C mantém e ocasionalmente atualiza uma lista de nomes oficiais de cores que podem ser usados ​​no lugar dos códigos de cores numerados. Por exemplo, preto pode ser usado em vez de # 000000.

Nos primeiros dias da web, essas cores nomeadas ajudavam a definir um conjunto pequeno e não oficial de “cores seguras da web”, que eram bem suportadas na maioria dos navegadores e telas de exibição.

Hoje, a maior vantagem de ter nomes de cores é que eles são mais fáceis de lembrar. Por exemplo, o lightblue é mais fácil de lembrar (e digitar corretamente) do que seus equivalentes, # add8e6 ou rgb (173, 216, 230).

Lista de nomes de cores CSS

Nome da cor
Valores hexadecimais
Exemplo de cor
aliceblue# f0f8ff
antiquewhite# faebd7
aqua# 00ffff
água-marinha# 7fffd4
azul# f0ffff
bege# f5f5dc
bisque# ffe4c4
Preto# 000000
amendoim# ffe4c4
azul# 0000ff
blueviolet# 8a2be2
Castanho# a52a2a
Madeira robusta# deb887
cadetblue# 5f9ea0
chartreuse# 7fff00
chocolate# d2691e
coral# ff7f50
cornflowerblue# 6495ed
cornsilk# fff8dc
carmesim# dc143c
azul escuro# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
cinza escuro# a9a9a9
verde escuro# 006400
cinza escuro# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
laranja escuro# ff8c00
darkorchid# 9932cc
vermelho escuro# 8b0000
darksalmon# e9967a
darkseagreen# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturquoise# 00ced1
violeta# 9400d3
Rosa escuro# ff1493
deepskyblue# 00bfff
escurecer# 696969
dimgrey# 696969
Trapaceiro azul# 1e90ff
tijolo refratário# b22222
floralwhite# fffaf0
verde floresta# 228b22
fúcsia# ff00ff
ganhos#dcdcdc
branco-fantasma# f8f8ff
ouro# ffd700
goldenrod# daa520
cinzento# 808080
verde# 008000
verde amarelo# adff2f
cinzento# 808080
melada# f0fff0
Rosa quente# ff69b4
indianred# cd5c5c
índigo# 4b0082
marfim# fffff0
cáqui# f0e68c
lavanda# e6e6fa
lavenderblush# fff0f5
gramado# 7cfc00
lemonchiffon#fffacd
azul claro# add8e6
lightcoral# f08080
Ciano claro# e0ffff
lightgoldenrodyellow# fafad2
cinza claro# d3d3d3
luz verde# 90ee90
cinza claro# d3d3d3
luz rosa# ffb6c1
lightsalmon# ffa07a
lightseagreen# 20b2aa
lightskyblue# 87cefa
lightslategray# 778899
lightslategrey# 778899
lightsteelblue# b0c4de
luz amarela# ffffe0
Lima# 00ff00
verde limão# 32cd32
linho# faf0e6
marrom# 800000
mediumaquamarine# 66cdaa
azul médio# 0000cd
mediumorchid# ba55d3
mediumpurple# 9370db
meio mar# 3cb371
mediumslateblue# 7b68ee
mediumspringgreen# 00fa9a
turquesa# 48d1cc
mediumvioletred# c71585
azul da meia noite# 191970
mintcream# f5fffa
mistyrose# ffe4e1
mocassim# ffe4b5
navajowhite#ffdead
marinha# 000080
oldlace# fdf5e6
Oliva# 808000
olivedrab# 6b8e23
laranja# ffa500
ameaçado# ff4500
orquídea# da70d6
palegoldenrod# eee8aa
verde pálido# 98fb98
paleturquoise#afeeee
palevioletrado# db7093
papayawhip# ffefd5
pêssego# ffdab9
Peru# cd853f
Rosa# ffc0cb
ameixa# dda0dd
Pó azul# b0e0e6
roxa# 800080
rebeccapurple# 663399
vermelho# ff0000
rosybrown# bc8f8f
royalblue# 4169e1
saddlebrown# 8b4513
salmão# fa8072
arenoso# f4a460
verde Mar# 2e8b57
Concha do mar# fff5ee
Sienna# a0522d
prata# c0c0c0
céu azul# 87ceeb
azul ardósia# 6a5acd
ardósia cinza# 708090
ardósia cinza# 708090
neve#fffafa
Primavera verde# 00ff7f
steelblue# 4682b4
bronzeado# d2b48c
cerceta# 008080
cardo# d8bfd8
tomate# ff6347
turquesa# 40e0d0
tolet# ee82ee
trigo# f5deb3
branco#ffffff
fumaça branca# f5f5f5
amarelo# ffff00
amarelo verde# 9acd32

Outros recursos de cores CSS

  • O Tutorial de cores CSS do W3Schools é uma visão geral rápida do tópico, com exemplos adicionais.
  • O CSS Color Converter é uma ferramenta on-line que pega qualquer formato de cor e o converte em todos os outros, além de fornecer possíveis opções de paleta de cores.
  • A Referência de cores CSS da Mozilla Developer Network é um dos melhores lugares para obter informações sobre os vários padrões e especificações de cores.
  • Cores, planos de fundo e gradientes: Adicionando individualidade com CSS (2015), de Eric A Meyer, é um ótimo livro que aborda as cores CSS em detalhes.

Escrevendo CSS eficiente

Escrevendo CSS eficiente

Escrever CSS eficiente é incrivelmente importante. Os usuários da Internet de hoje têm muito pouco tempo de atenção; portanto, quanto mais tempo o site demorar para carregar, maiores serão as chances de eles clicarem no botão Voltar.

Se você está criando um site simples, CSS eficiente não importa tanto. Mas esses sites são cada vez mais raros. Se você está construindo um site grande e complexo, deve se preocupar com a eficiência do seu CSS.

A seguir, destacamos por que o CSS eficiente é importante, como escrever seletores mais eficientes e oferecemos algumas ferramentas que podem ajudá-lo a otimizar ainda mais seu código.

Por que CSS eficiente é importante

Não levar em consideração a eficiência do CSS ao escrever seu código pode prejudicar seriamente o desempenho geral da sua página. E a última coisa que você quer é ter um site de carregamento lento.

Seu objetivo é facilitar ao máximo a renderização do código pelo navegador – mesmo navegadores que executam com menos eficiência.

Houve argumentos de que não é tarefa do autor se preocupar com a otimização de seletores; deve ser a tarefa do mecanismo que está compilando o código. Embora isso seja verdade até certo ponto, nem todo usuário usará um navegador moderno.

Ainda existem usuários em todo o mundo que só têm acesso a computadores e navegadores antigos. Você detestaria penalizar esses usuários, apenas porque eles não têm acesso à tecnologia mais recente. Talvez com o tempo isso mude.

Mas ter em mente os usuários quando você escreve código é sempre uma boa ideia.

Os seletores são os mais importantes

Um dos aspectos mais importantes da criação de CSS eficiente é entender como os navegadores o leem e compilam. O importante é entender que eles lêem da direita para a esquerda.

Começa com o seletor de teclas e move-se para a esquerda para procurar os ancestrais no seletor da regra. Em seguida, ele continua a mover-se para a esquerda até a regra ser concluída ou resulta em uma incompatibilidade.

Então, se seu código lê ul > li a img, a primeira coisa que será interpretada é a img.

O seletor de teclas é a última parte que atribuímos ao final do seletor.

Quatro tipos de seletores CSS

Existem quatro tipos principais de seletores de CSS que você precisa conhecer e usar da maneira certa para que seu código CSS seja eficiente. Os seletores abaixo são ordenados em termos de eficiência. Os que estão no topo são os mais eficientes, e no fundo, os menos.

Seletor de ID

O seletor de ID refere-se a um elemento HTML específico usando o atributo ID e se parece com o seguinte:

#Navegação Principal

No HTML, isso seria usado da seguinte maneira:

Seletor de Classe

O seletor de classe selecionará elementos dentro de uma atribuição de classe específica e se parece com o seguinte:

.Centro

No HTML, isso seria usado da seguinte maneira:

Seletor de tags

Os seletores de tags são menos eficientes do que IDs e classes, portanto, eles devem ser usados ​​com moderação. Mas eles ainda podem ser eficazes nas circunstâncias certas. Os seletores de tags geralmente são assim:

ul

No HTML, a tag será simplesmente estilizada como ditada pelo CSS sempre que a tag for usada (neste caso, ul).

Seletor Universal

O seletor universal pode ser aplicado a qualquer elemento do seu documento. Para escrever CSS eficiente, evite usar o seletor universal sempre que possível. O seletor universal é designado pelo seguinte:

*

Regras CSS eficientes a serem lembradas

Existem algumas regras importantes a serem lembradas que ajudarão você a criar CSS mais eficiente. Ao seguir essas regras, seu código CSS carregará muito mais rápido e terá melhor desempenho em todos os navegadores da Web.

Não use seletores descendentes

Um seletor descendente são dois seletores que não são separados por um combinador. O seletor descendente é o menos eficiente e pode realmente ter um impacto negativo no desempenho.

Alguns exemplos de seletores descendentes que você não deveria usar incluem:

cabeçalho h3

rodapé p

.div do corpo

Não identifique códigos de qualificação

Como os IDs podem se referir apenas a um único elemento, não faz sentido qualificá-los com a tag específica com a qual eles serão usados. Por exemplo,

li # navegação à esquerda

Não é necessário informar ao navegador a qual tag o seletor será aplicado. Em vez disso, isso é mais eficiente:

# navegação à esquerda

Observe que o mesmo se aplica às classes, mas em menor grau. Portanto, não qualifique as aulas.

Use a herança CSS o máximo possível

A herança de propriedade é uma coisa importante a ser dominada. Aprenda quais propriedades serão passadas de elemento para elemento e deixe-as fazer seu trabalho.

Por exemplo, o tamanho da fonte é herdado. Portanto, se você o definir para o corpo do documento, não será necessário defini-lo para as tags p e li.

Limite suas regras

Adicionar regras demais às suas tags desacelerará seu código CSS e complicará bastante o processo de correspondência.

Por exemplo

body .widget-left #widget

Este é um código ruim. Há muita coisa acontecendo. Por outro lado:

#ferramenta

.widget-left

Estes são muito mais eficientes.

A implementação das dicas acima ajudará a tornar seu código CSS muito mais eficiente. Se você deseja testar seu código ou encontrar outras maneiras de torná-lo eficiente, confira algumas das ferramentas destacadas abaixo.

Ferramentas para melhorar seu CSS

Se você manter em mente as regras acima, seu código CSS será muito mais eficiente.

Mas se você deseja otimizar ainda mais seu código CSS, existem ferramentas que ajudarão você a chegar lá. Abaixo, apresentamos algumas ferramentas que ajudarão a compactar seu CSS, definir seletores e até criar seus IDs para você.

  • Teste de estresse CSS: isso é legal, pois faz micro-ajustes no seu site, como rolagem, zoom, redimensionamento e muito mais. Além disso, faz tudo isso em menos de 30 segundos. Em seguida, ele envia um relatório sobre a eficácia do seu CSS.
  • Definir IDs CSS: o carregador CSS da web pack é uma ferramenta muito útil. Pode ajudar a especificar classes e IDs e até fazer alguma otimização de CSS para você.
  • Reduza seus seletores de CSS: mostra todos os seletores de CSS atualmente em vigor, juntamente com os elementos que os seletores estão usando. Isso permite reduzir o número de seletores que você está usando, para reduzir a carga geral de memória. Com essa ferramenta, você pode conectar qualquer URL, para estudar outros sites.
  • Reduza seu código CSS: reduza seu código CSS existente. Quanto menos código você precisar compilar, melhor. Ele fornece uma captura de tela “antes” e “depois”, para que você possa ver as alterações feitas por essa ferramenta.
  • Comprima seus arquivos CSS: compactar seus arquivos CSS ajudará a limpá-lo. Assim, pode ajudar a reduzir o tamanho geral da resposta HTTP e, portanto, o tempo de resposta do servidor.

Escrever CSS eficiente é uma boa ideia

Você escolhe ou não otimizar seu CSS, depende de você. Não é totalmente necessário nos navegadores modernos de hoje. No entanto, se você estiver criando um site complicado, vale a pena fazer isso.

Além disso, você ainda pode ter usuários com configurações mais antigas e é uma idéia inteligente atender também às necessidades deles. Felizmente, esta seção o ajudará a fazer exatamente isso e a escrever CSS mais eficiente.

Mestre CSS Online

Mestre CSS Online

Existem muitos lugares online onde você pode assistir a vídeos, tutoriais completos e até mesmo codificar em um navegador enquanto aprende CSS. Embora existam dezenas, senão centenas, de recursos disponíveis, aqui estão alguns dos nossos lugares gratuitos favoritos para aprender sobre CSS.

Se você é realmente novo em CSS, Não tema a Internet é uma série de vídeos para iniciantes que apresenta CSS e HTML. Se você está começando do zero, esta é uma série bem produzida que não vai intimidar aqueles que estão apenas começando sua jornada para aprender CSS.

Se você nunca escreveu uma folha de estilos antes, um bom lugar para escrever sua primeira é a Tutorial de CSS fornecido pelo World Wide Web Consortium (W3C). Este tutorial não fornece muitas explicações; portanto, se você é um aluno prático, este pode ser o local ideal para começar.

Escrever HTML e CSS requer que você use um editor de texto, salve os arquivos com a formatação e os cabeçalhos adequados e use um navegador para visualizar seu trabalho. Se você preferir usar um programa que permita editar arquivos diretamente no seu navegador, Codecademy é exatamente o que você está procurando.

Outro recurso que cobre praticamente o mesmo terreno que o Codecademy, mas que exige que você aprenda como usar um editor de texto e como salvar arquivos no formato correto, é Aprenda a codificar HTML e CSS de Shay Howe. Depois de dominar o básico, um programa avançado também estará disponível.

Controlar layouts de página é uma das tarefas mais complicadas e importantes realizadas com CSS. Se você está tendo problemas para controlar os layouts, o tutorial de Learn Layout é exatamente o que você precisa.

A Rede de Desenvolvedores Mozilla oferece um tutorial sobre CSS que cobre todas as funções básicas do CSS de uma maneira que o prepara para avançar para tópicos mais desafiadores.

Se você deseja uma base sólida a partir da qual possa se tornar um desenvolvedor de CSS completo, poderá fazer muito pior que o tutorial MDN CSS.

Por fim, nenhuma lista de recursos estaria completa sem mencionar a organização que impulsiona o desenvolvimento do CSS.

Embora certamente não seja o tutorial mais fácil desta lista, é abrangente e detalhado. Se seu objetivo é aprender um pouco de CSS, este não é o tutorial para você, mas se você está embarcando na jornada para se tornar um desenvolvedor de CSS completo, este é um bom tutorial para você entender.

Design Inspiration

Trabalhos surpreendentes de CSS

Se você está procurando inspiração de design ou deseja ter uma noção melhor do que o CSS pode fazer, aqui estão alguns lugares para conferir os trabalhos de CSS exibidos.

  • A Creative Bloq reuniu esta lista com curadoria de vinte e duas animações impressionantes em CSS. Ao examiná-los, lembre-se de que muitas dessas animações também usam JavaScript além do CSS.
  • O CSS Design Awards criou esta lista de dez animações completas com demos e tutoriais para que você possa aplicar os conceitos aos seus próprios projetos.
  • O MDN DemoStudio é um local onde você pode ver centenas de demos CSS classificadas por popularidade, número de visualizações, status de tendências ou visualizar primeiro as demos mais recentes.
  • Muitas das animações selecionadas para as listas anteriores estão hospedadas na Code Pen, e ir diretamente para as canetas permitirá acesso a um grande número de animações impressionantes criadas usando HTML, CSS e JavaScript.
  • Se você já viu todas as animações sofisticadas que gostaria de ver e deseja ver como o CSS pode ser usado para alterar completamente um site inteiro sem fazer uma única alteração no HTML, confira esses designs elegantes de sites que enfatizam o poder de CSS.

A palavra oficial no CSS3

A palavra oficial no CSS3

O W3C é a organização que impulsiona o desenvolvimento de padrões da web, incluindo os módulos CSS3. À medida que aprende CSS e aprimora seu conjunto de habilidades, você deve se familiarizar com o W3C e com a documentação técnica que eles oferecem.

A página inicial do CSS do W3C é a plataforma de lançamento de tudo o que há de CSS no W3C. Nesta página, você pode localizar informações sobre o trabalho de desenvolvimento padrão em andamento.

Leitura recomendada

Leitura recomendada

Uma das maneiras mais eficazes de desenvolver uma compreensão e um conhecimento mais profundos com CSS3 é usar várias fontes e métodos de instrução.

Se você experimentou um ou dois tutoriais e deseja tentar um método adicional, ou se preferir trabalhar com um texto escrito, aqui estão alguns dos melhores textos CSS do mercado:

  • CSS3 For Web Designers (2010), de Dan Cedarholm: com prefácio de Jeffrey Zeldman, fundador da A List Apart, e recomendações de Chris Coyier, do CSS-Tricks, e Eric Meyer, autor de vários livros sobre CSS, este texto de Dan Cedarholm, co-fundador do Dribbble, é o padrão-ouro para textos CSS3.
  • HTML e CSS: Design and Build Websites (2011), de Jon Duckett: Este texto inclui HTML e CSS e é uma das introduções mais populares e respeitadas dos dois tópicos..
  • Aprenda CSS em Um dia e Aprenda bem (2015), de Jamie Chan: se você é iniciante em CSS e deseja entender o básico rapidamente, este livro é para você.
  • CSS: The Missing Manual (2015), de David Sawyer McFarland: Este texto não é voltado apenas para iniciantes, mas aborda tópicos avançados como Flexbox e o uso de Sass. Se você estiver pronto para subir de nível a partir do status de iniciante, este texto ajudará você a chegar lá.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me