posts da categoria Css3

Contraste de cores – Acessibilidade na web

Nesse post vou explicar uma das opções de como fazer um contraste de cores, existe diretrizes de acessibilidade da WCAG 2.0 que explica o nível aceitável de contraste de cores esperadas em um site, veja nesse link. Proposta Criar um contraste de cores em três níveis (Branco, Preto e Azul) usando HTML5, CSS3, Javascript (Puro), Node e o Cookie do navegado para guarda o contraste escolhido. Como será feito Em uma página teremos quatro links em que o usuário vai escolher (Preto, branco, azul ou sem contraste).

por Orivelton Cesar

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

OBS:. o método abordado sobre Blending (mesclagem de cores e camadas) não é igual, mas não diferente do método abordado pela nossa colega Dani Guerrato no post Modos de Mesclagem em CSS – Blend Mode CSS Diga-se de passagem nós abordaremos visões abrangentes e características técnicas do método de aplicação de Blending no CSS, mas se você quer dar uma previa nos conceitos de background css antes de ler esse post seria legal: [OBS:.

por Moisés Lopes Ferreira

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 !!!

por Moisés Lopes Ferreira

Bulma: framework CSS baseado em flexbox

“Inspirado pelo Bootstrap, o Bulma visa oferecer a todos a alegria de fazer o design do site, com a simplicidade do flexbox e a elegância de Sass.” – Jeremy Thomas, criador do projeto Bulma.io.   Como o título diz, o Bulma é um framework CSS baseado na tecnologia flexbox, que já tem uma grande compatibilidade entre os navegadores. O pacote contém todos os elementos mais comuns como botões, formulários, menus, tabelas, títulos, notificações, barras de progresso e um simples sistema de grid (basta adicionar uma coluna, o resize das colunas é automático).

por Gabriel Prates

Criando facebook reactions com css

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

por Deivid Marques

Experimentando flexbox hoje: topo alinhado sem muito esforço

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

por Alan Marcos

Como usar variáveis no CSS de forma nativa

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

por Afonso Pacifer

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.

por Tiago Luiz

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.

por João Guilherme

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.

por rogerio dias moreira

Motion UI com estilos: Zeh Fernandes no Meetup CSS SP

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

por Danilo Vitoriano

Simples modal com CSS responsivo

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

por Palloi Hofmann

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.

por Bruno Ruiz

Destaques responsivos

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

por Palloi Hofmann

Em um relacionamento sério com generators front-end – Parte 2

Na parte 2 de nossa série, vamos falar de Yeoman, um generator que, na minha opinião, é bem completo e atende a grandes necessidades na criação de um projeto.

por Pedro Polisenso

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.

por Palloi Hofmann

Em um relacionamento sério com generators front-end – Parte 1

Essa é uma série que vai abordar generators usados por desenvolvedores front end no mercado. Um post que vai mostrar desde conceitos até a prática, que convém a nós é o que mais interessa.

por Pedro Polisenso

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...

por Clovis Neto

Um pouco sobre OpenType

Como adicionar tipografia à web com recursos OpenType.

por Fabiano de Lima Abreu

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!

por Jhonathan Souza Soares

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

Desenhe a web.

por Victor "reidark" Matias

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.

por Thaiana Poplade

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?

por Thaiana Poplade

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.

por Diego Eis

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.

por Jean Carlo Emer

Fazendo um slide menu mobile – sem plugin

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

por Diego Eis

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.

por Thaiana Poplade

Dicas de como fazer seu próprio framework CSS

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

por Diego Eis

Tridiv – Dominando 3D com CSS

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

por Diego Eis

EditorConfig

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

por Diego Eis

Tabela comparativa de Frameworks CSS

Uma lista com os melhores frameworks de CSS

por Diego Eis

Emmet LiveStyle

Uma nova maneira de editar CSS.

por Diego Eis

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

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

por Diego Eis

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.

por Will Sales

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.

por Dani Guerrato

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.

por Thaiana Poplade

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.

por Dani Guerrato

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.

por Davi Ferreira

CSS Transition e CSS Animation

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

por Raphael Fabeni

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.

por Bernard De Luna

Grids semânticos com LESS

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

por Dani Guerrato

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.

por Dani Guerrato

Imagens em alta resolução utilizando SVG

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

por Dani Guerrato

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.

por Deivid Marques

Flexbox – Organizando seu layout

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

por Diego Eis

Adobe Edge

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

por Diego Eis

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.

por Diego Eis

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.

por Thaiana Poplade

Princípios para escrever CSS de forma consistente

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

por Zeno Rocha

Propriedade background-clip

Entenda como a propriedade background-clip do CSS3 funciona.

por Diego Eis

Introdução ao CSS 3D – Flip Card

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

por Diego Eis

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.

por Diego Eis

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.

por Diego Eis

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.

por Giovanni Keppelen

Quando utilizar (ou não) frameworks CSS

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores.

por Talita Pagani

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.

por Diego Eis

Entendendo os Reflows

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

por Alysson Franklin

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.

por Diego Eis

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.

por Diego Eis

CSS3 – Módulo Template Layout

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

por Diego Eis

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?

por Thaiana Poplade

CSS3 – Animation e regra keyframe

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

por Diego Eis

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.

por Diego Eis

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.

por Thaiana Poplade

Múltiplos backgrounds com CSS

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

por Diego Eis

CSS3 – Abas com a pseudo-classe :target

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

por Diego Eis

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.

por Thaiana Poplade