Contraste de cores – Acessibilidade na web

#BlendingCSS – Modos de mesclagem em CSS: Teoria da Cor e Aplicação Prática

CSS3 — Trabalhando com Múltiplas imagens background-images

Quem nunca se deparou com o um layout com imagens “sobrepostas” que precisavam ficar suspensas sobre múltiplas imagens de fundo, com CSS3, você pode aplicar aos elementos múltiplas imagens como plano de fundo sobrepostas. Sem a utilização do Z-index, é isso mesmo “necas de pitibiriba” de Z-index. Que Z-index que nada, agora a MODA é Background-image !!!

Bulma: framework CSS baseado em flexbox

Criando facebook reactions com css

Criando novos botões de comportamento do Facebook usando apenas CSS e HTML.

Experimentando flexbox hoje: topo alinhado sem muito esforço

Com poucas linhas de código é possível posicionar elementos facilmente para páginas responsivas

Como usar variáveis no CSS de forma nativa

Como utilizar o conceito de variáveis nativas do CSS3.

Material Design com Materialize

Crie seu site utilizando um Framework totalmente material design, que não deixa a desejar em nada e seus resultados podem te surpreender. Do Conceito à prática com layout Material.

Entendendo os valores ‘initial’ e ‘inherit’ do CSS

Qual a razão da existência dos valores 'initial' e 'inherit' na maioria dos atributos do CSS? Suas propriedades tem bastante significado, confira e entenda.

nth-child() e calc() – Uma proposta para o abandono de frameworks de grids responsivos

Conheça mais sobre estas duas propriedades para a construção de layouts responsivos sem o utilizar frameworks de grids.

Motion UI com estilos: Zeh Fernandes no Meetup CSS SP

A experiência em participar de um Meetup sobre Motion UI.

Simples modal com CSS responsivo

Continuando com os artigos, vamos utilizar novamente os seletores de css para exibir nosso modal.

Workflow Front-end

O desenvolvimento em html, javascript e CSS é uma forma mágica de se construir um mundo novo a cada linha de código. Os mágicos do front-end precisam de cartolas para que retirem seus coelhos.

Destaques responsivos

Estou de volta como prometido anteriormente com uma séria de artigos, hoje criaremos 3 destaques com um comportamento totalmente responsivo.

Header responsivo somente com css

A cada novo projeto queremos alcançar o máximo de usuários, não importa se o dispositivo seja grande ou pequeno, tem que funcionar.

All Animation CSS3 – Criar animações CSS3 nunca foi tão fácil

Animações cross-browser que darão mais ênfase a suas páginas como controles deslizantes, efeitos 3D’s, etc...

Um pouco sobre OpenType

Como adicionar tipografia à web com recursos OpenType.

Criando listras com CSS3

| Já parou pra pensar que aquele background que você utilizava ‘repeat’ que sobrecarregava seu site e nunca ficava perfeito? Vamos ver como podemos criar fundos listrados sem a utilização de imagens!

Macaw: O que você vê é o que você tem.

Desenhe a web.

BEM, um novo método para seu CSS

A busca por padrões na criação de classes CSS é missão em diversas equipes front-end pelo mundo e o pessoal da Yandex parece ter conseguido definir uma metodologia, simples e funcional. Com vocês, BEM.

CSS puro e simples (só que não).

| Pré-processadores, frameworks, novas propriedades e valores, novidades e mais novidades todas acontecendo ao mesmo tempo e ainda vemos profissionais de front-end perdendo a noção do uso puro e simples de folhas de estilo e da aplicação dos padrões. Por que isso acontece?

Geração de conteúdo estático via CSS

Entenda como funciona a geração de conteúdo automática via CSS usando a propriedade content.

CSS on steroids

E se pudéssemos escrever folhas de estilo de forma mais poderosa, melhorar nosso código? Vamos lá, vamos ver quais as reais vantagens de se utilizar um pré-processador.

Fazendo um slide menu mobile – sem plugin

Entenda como fazer um menu como nos aplicativos mobile, como o facebook.

Ferramentas e sites para tornar mais ágil o seu desenvolvimento

No dia-a-dia, a correria em cumprir prazos nos faz buscar e fazer uso de ferramentas que possam auxiliar na velocidade de desenvolvimento. Seja no front ou no design, em tempos de mudanças e transições, nada mais justo que uma lista de algumas ferramentas especiais para que você mantenha seu processo profissional e ágil.

Dicas de como fazer seu próprio framework CSS

Anotações da minha palestra sobre como fazer seu próprio framework CSS.

Tridiv – Dominando 3D com CSS

Brinque com 3D em um editor online baseado em CSS.

EditorConfig

EditorConfig, um plugin que salva a vida de equipes inteiras.

Tabela comparativa de Frameworks CSS

Uma lista com os melhores frameworks de CSS

Emmet LiveStyle

Uma nova maneira de editar CSS.

Pré-processadores: usar ou não usar?

Meus dois centavos sobre a utilização de pré processadores de CSS.

O Cenário do Web Design Responsivo

Site responsivo é muito mais que media queries, breakpoints e redimensionamento de imagens. Nesta tradução de artigo da Smashing Magazine, Stéphanie Walter mostra o que é, o que será possível, e o que precisa ser melhorado no RWD.

Modos de Mesclagem em CSS – Blend Mode CSS

Neste artigo entenda como funcionam os modos de mesclagem e saiba como utilizar cada um deles através de simples parâmetros de CSS.

O que é Sass? Entenda esse outro método de escrever CSS

Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.

Sobre Cor e Webdesign

Entenda o funcionamento dos sistemas de cores mais utilizados da web e conheça ferramentas úteis para criar e organizar suas próprias paletas.

Elementos de interface utilizando apenas CSS3

Você sabia que já é possível criar interfaces ricas sem escrever código JavaScript? Nesse artigo você confere algumas implementações de elementos de interfaces ricas que utilizam apenas CSS3.

CSS Transition e CSS Animation

Um guia rápido pra você entender e começar a usar essas duas propriedades do CSS3.

Como usar linear-gradient em CSS de forma consciente?

Não há mais motivo para você usar nenhum gerador automático de gradiente depois desse GUIA DEFINITIVO DE COMO USAR LINEAR-GRADIENT. Vem comigo e vamos codar.

Grids semânticos com LESS

Aprenda a construir rapidamente um grid semântico e responsivo utilizando CSS e uma ajudinha do LESS.

Seletores de CSS3 nível 4

Entenda como funcionarão os seletores de nível 4 do CSS. Mudanças drásticas para salver nossas vidas.

Imagens em alta resolução utilizando SVG

Entenda o que são imagens SVG e como você poderá utilizá-las hoje.

Brincando com css3

O CSS3 está aí e você pode aprender brincando e usando toda sua criatividade. Conheça o canal da Mozilla onde você pode mostrar seus experimentos.

Flexbox – Organizando seu layout

Entenda como a recomendação de Flexbox poderá nos ajudar a organizar a estrutura de sites e aplicações

Adobe Edge

Adobe Edge - uma suíte que reúne diversas aplicações para ajudar os desenvolvedores web.

Estruturação de front-end – Parte 1: Preprocessadores, Framewoks e Bibliotecas

Entenda a diferença entre preprocessadores, frameworks e bibliotecas de client-side. Saiba o que usar em seus projetos e quais as suas particularidades.

CSS3 – Texturizando textos

Com funcionalidades que apoiam resultados visuais exclusivamente à folhas de estilo, o CSS3 está sendo criado para otimizar fluxo e ritmo de trabalho, além de aproximar ainda mais Designers de Interfaces à profissionais Front-End. Com vocês, a texturização de textos via CSS3.

Princípios para escrever CSS de forma consistente

Pra você que não aguenta mais ver código bagunçado

Propriedade background-clip

Entenda como a propriedade background-clip do CSS3 funciona.

Introdução ao CSS 3D – Flip Card

Entenda como funciona o CSS 3D e suas aplicações.

Experiência deve ter começo, meio e fim

A experiência do usuário precisa ser a melhor possível independente do meio de acesso utilizado.

Utilizando a Biblioteca Modernizr

Alguns browsers não aceitam as novas features de CSS3 e HTML5. Saiba como detectá-los e tratá-los com a biblioteca Modernizr.

Introdução ao CSS Shaders – Parte 1

Shaders CSS é um complemento para Filter Effects. Além disso, shaders CSS introduz uma noção de Vertex Shader para um modelo de filtro.

Introdução ao Responsive Web Design

Responsive Web Design é um nome bonito para um conceito antigo. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.

Entendendo os Reflows

O que são e como os Reflows podem ser otimizados para aplicações ficarem ainda mais rápidas.

RGB e HSL

RGB e HSL são os formatos que estão se tornando populares no desenvolvimento web. Entenda como cada um funciona e saiba quais suas vantagens.

CSS3 – Sombras em textos e elementos

Sombras em elementos e textos. O CSS3 nos trouxe essa possibilidade. Saiba como funciona as propriedades text-shadow e box-shadow.

CSS3 – Módulo Template Layout

Entenda como você não fará mais estruturas com a propriedade float.

Em tempo de transição, quais recursos utilizar?

Acompanhar todas as mudanças que o desenvolvimento web vem sofrendo é tarefa muito difícil e bastante trabalhosa. Alguns de nós ainda preferem sentir-se mais seguros quanto a regulamentação dessas diretrizes e outros já estão testando e experimentando. Pra onde podemos direcionar nossa postura às evoluções?

CSS3 – Animation e regra keyframe

Saiba como o CSS 3 possibilita a criação de efeitos de animações e transições.

CSS3 – Breve introdução ao RGBA

Normalmente em web trabalhamos com cores na forma de hexadecimal. Agora o RGBA nos permite que você aplique em uma determinada cor transparência.

CSS3 com PIE – bordas, sombras e gradiente

Utilizar CSS3 no front-end de websites ainda parece uma realidade um pouco distante devido a incompatibilidade de renderização entre os browsers, mas com o lançamento final dos navegadores IE9 e Firefox 4, esta realidade fica ainda mais próxima da prática efetiva que vai criar a nova etapa do desenvolvimento tableless.

Múltiplos backgrounds com CSS

Testando múltiplos backgrounds no CSS3. Isso realmente funciona! ;-)

CSS3 – Abas com a pseudo-classe :target

Fazer abas sempre foi muito chato para mim. Agora, os problemas acabaram com o :target.

CSS3 – O que vem por aí…

Além da linguagem de marcação, a semântica e a utilização de bibliotecas Javascript no desenvolvimento HTML5, as folhas de estilo também serão reestruturadas para atender as diversas possibilidades que os novos padrões permitirão. Portanto, com vocês: o CSS3.