posts da categoria Css

Crie sites em questão de minutos com o Pingendo

Sem dúvidas, o Bootstrap é uma das frameworks mais utilizadas ultimamente, porém, para algumas pessoas, ainda é meio complicado lidar com os códigos, sejam eles HTML, CSS ou JavaScript. O que é o Pingendo? Pingendo é um programa de interface simples e de fácil uso. O Pingendo é um criador de sites em Bootstrap 3 que permite a criação de websites de maneira simples e rápida. Drag and drop O programa usa um modo muito popular em criadores de sites online como Wix, Weebly, etc.

por Bruno

Minha experiência com o CT (Centro de Treinamento)

Meu nome é Danilo, tenho 25 anos, e moro em São Paulo. Antes de conhecer o projeto do CT , eu havia trabalhado pouco tempo como Front-end em uma empresa chamada Athos Informática. Minha experiência não foi uma das melhores, e acabou não dando muito certo. Porém, aconteceu algo muito bacana , quando eu fiquei disponível para o mercado de trabalho. Comecei a frequentar todos os Meetup’s que eu podia, conversei com muitos Dev’s da comunidade, e coloquei de fato a mão na massa.

por DaniloAgostinho

Analisando o código Stylus de um projeto

O que é um pré-processador CSS? Como o nome ja diz, é uma linguagem que precisa ser pré-processada por um parser para assim gerar o arquivo de extensão .css que será renderizado pelo browser. Atualmente há vários pré-processadores que você pode utilizar para facilitar a codificação e reaproveitamento de código, você pode estar utilizando SASS, LESS e Stylus que são os mais conhecidos no mercado. A diferença do Stylus para os outros pré-processadores que estão sendo utilizados no mercado é que ele já é baseado em NodeJS e não em ruby.

por helderburato

#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

Entrevista com Bert Bos (Criador da CSS) e W3C

Na 8ª edição da Web.br teremos a presença ilustre de Bert Bos como keynote speaker. Ele, junto com Håkon Wium Lie, foram os dois inventores dos Cascading Style Sheets, tecnologia também conhecida pela sigla CSS. Bert trabalha no W3C desde 1995 com desenvolvimento e padronização do CSS, assim como de outros padrões da web, como HTML, XML e MathML. Nessa entrevista ele descreve o contexto que o levou a trabalhar nos primeiros rascunhos do padrão CSS, o que ainda falta ser aprimorado e sua perspectiva para a evolução do CSS e do HTML a longo-prazo.

por Diego Eis

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

Carrossel descomplicado com HTML, CSS

Não é difícil perceber que muitos desenvolvedores tanto iniciantes como os veteranos de guerra ainda sofrem quando o assunto é carrossel, mesmo utilizando frameworks como BootStrap. Mas seus problemas acabaram! (música de chegada milagrosa), com o conhecimento de poucas técnicas podemos resolver esse “gigante” problema facilmente. Pseudo classe :target – CSS Para resolver o grande problema de transição do carrossel, vamos utilizar a pseudo classe :target, que atribui algumas características do CSS para o elemento HTML.

por Leonardo Camp

Aplicativos Desktop com NW.js – Node Webkit – Introdução

Este é o primeiro artigo de uma série sobre aplicações desktop usando tecnologias web. (HTML, CSS, Javascript e WebGL)

por João A. Zonta

Você conhece AMP?

O projeto AMP - Accelerated Mobile Pages, é uma iniciativa Google em conjunto com alguns publishers como Chartbeat, Vox, Wordpress.com, Twitter, The Washington Post, UOL, etc; de trabalhar uma estrutura de rápido carregamento de conteúdos em Smartphones.

por Thaiana Poplade

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

React Native: Construa aplicações móveis nativas com JavaScript

| Construir aplicações multiplataforma nunca foi tão simples e divertido. Conheça o framework que está mudando os rumos do desenvolvimento mobile baseado em JavaScript.

por Carlos Cabral

Sass vs. LESS vs. Stylus: Batalha dos Pré-processadores

Ter em mãos o verdadeiro poder de um pré-processador CSS é uma aventura. Existem incontáveis linguagens, sintaxes e funcionalidades todas prontas para uso imediato. Nesse artigo iremos falar sobre diversas funcionalidades e benefícios de usar três pré-processadores diferentes: Sass, LESS e Stylus.

por Wendell Adriel

Criando facebook reactions com css

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

por Deivid Marques

Fazendo a animação do coração de like do Twitter

Fazendo a animação do coraçãozinho do Twitter.

por Diego Eis

Como usar variáveis no CSS de forma nativa

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

por Afonso Pacifer

Acessibilidade na web: Como tornar seu site acessível.

Há 5 anos atrás eu escrevi aqui no Tableless um artigo falando um pouco sobre acessibilidade na web. Cinco anos se passaram e os motivos para se ter esse cuidado ao desenvolver sua aplicação não mudaram, mas novas ferramentas surgiram para que você atenda cada vez mais às demandas dessa parcela da nossa sociedade que tem tanto direito de usufruir de seu website quanto as pessoas sem deficiência alguma.

por Thaiana Poplade

Use as facilidades do CSS 4 hoje

| Conheça algumas das features do CSS 4 e como você pode usa-las hoje.

por Mateus Ortiz

Afinal, como usar herança no CSS?

Herança surgiu para ajudar desenvolvedores a escreverem mesmo e produzirem mais. Vamos ver aqui como esse conceito básico das folhas de estilo pode nos ajudar no dia-a-dia. Geralmente quando alguém começa a desenvolver interfaces web, o processo é aos trancos e barrancos. Nessa situação, iniciantes buscam aprender como se faz aquela borda arredondada ou como aplicar transparência. Por fim, acabam deixando de lado conceitos básicos de CSS. Levando isso em conta, precisamos primeiramente aprender sobre especificidade e efeito cascata.

por fernahh

Centralizando conteúdo na vertical e horizontal com CSS Flexbox

Centralize conteúdo e elementos na vertical e horizontal usando Flexbox do CSS.

por Diego Eis

Entendendo Sistemas de Grid CSS do Zero

A matemática por trás dos sistemas de grid.

por Tamiris Bonicenha

Criando Layouts com Susy Framework

Conheça o Susy Framework e desenvolva layouts facilmente com ele.

por Felipe César

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

Material Design Lite: O framework do Google

A biblioteca de componentes e templates já conhecida dos aplicativos agora para websites em CSS, HTML e Javascript.

por Isaque Melo

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

Animações fluídas à 60fps

Fazendo animações a 60fps nos browsers atuais.

por Alan Cezar

Motion UI com estilos: Zeh Fernandes no Meetup CSS SP

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

por Danilo Vitoriano

Rumo ao hexa(decimal)

Quantas vezes na sua vida você já se deparou com um código hexadecimal? A gente sabe que seu Command-C tá em um relacionamento sério com ele. Mas afinal, como que um punhado de letras e números representam essa tralharada de cores (ou o que quer que seja) que nós vemos por aí nos dispositivos digitais? Existe um artigo ótimo no Tableless explicando tudo o que você precisa saber sobre cor aqui.

por Guilherme Buchalla

Ícones – SVG Sprites com CSS na prática

Criando um sprites usando ícones SVG.

por rogerio dias moreira

Email Marketing – Testes e CSS Inliner – Parte 2

Testando e melhorando o fluxo de produção de código de email marketing.

por Diego Eis

MaterialUp – Uma coleção de conceitos usando Material Design

Alguns conceitos de animação e design baseados no Material Design do Google.

por Diego Eis

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

Nesta terceira parte da série, iremos abordar o Slush Generator, que é um Scaffolding Generator baseado em NodeJS e que tem uma forma diferenciada para criação de seus scaffolds.

por Beto Muniz

Formulário responsivo com MailChimp

Cada dia mais estamos utilizando serviços disponíveis na web, principalmente aqueles que tem um plano básico gratuito que permite integrações.

por Palloi Hofmann

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

Seletores CSS Nível 4 – O que vem por aí

Saiba quais os seletores que irão salvar sua vida muito em breve.

por Diego Eis

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

Extract for Brackets by Adobe

Conheça o Extract, da Adobe. Esse serviço mostra, direto de um PSD, o código CSS dos elementos selecionados.

por Diego Eis

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

Usando seletores aninhados do SASS com cuidado

Cuidado com o pesadelo das nesting selectors dos pré-processadores.

por Diego Eis

Usando condicionais no Sass – Control Directives

Saiba como funcionam as condicionais if, else, while, for e each no SASS.

por Diego Eis

Instalando SASS na máquina – video

Quer usar SASS em seus projetos? Instale SASS na sua máquina e saia usando.

por Diego Eis

Gerando arquivos estáticos com o Middleman

Criar projetos usando geradores de arquivos estáticos podem ser uma saída estratégica para evitar ambientes complexos, o Middleman pode te ajudar a desenvolver projetos simples e rápidos.

por Diego Eis

Padrões de Código de CSS do WordPress

Os padrões de código WordPress são para tornar mais legível, significativo, consistente e bonito o seu código PHP, HTML, CSS e JAVASCRIPT. E nesse artigo veremos alguns pontos sobre o CSS WordPress.

por Wanderson Macêdo

CSS Filters – Aplicando filtros em imagens com CSS

Veja como aplicar filtros em imagens e elementos apenas com CSS.

por Diego Eis

Sobre desenvolvimento multi-device

Como classificar melhor os dispositivos para um bom desenvolvimento web.

por Diego Eis

OOCSS, SMACSS, BEM, DRY CSS: afinal, como escrever CSS?

Conheça os principais estilos de escrita de CSS e aprenda o que você pode extrair deste mar de siglas para escrever código melhor.

por Jean Carlo Emer

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

Fazendo uma faxina no seu CSS

| Com apenas um teste rápido, você poderá fazer uma análise completa das suas folhas de estilo e remover os seletores não utilizados.

por Jhonathan Souza Soares

Como fazer triângulos (setas ou arrows) com CSS

Como fazer triângulos (arrows) usando apenas com CSS.

por Diego Eis

SASS: Mixin ou Placeholder?

Você utiliza pré-processadores de CSS? Sabe a diferença entre um mixin e um placeholder? Entenda a diferença entre os dois e saiba quando utilizá-los.

por Raphael Fabeni

Code Guide by @mdo

Tradução do Code Guide do @mdo.

por Diego Eis

Estilizar e formatar placeholder de inputs

Como formatar o texto do atributo placeholder.

por Diego Eis

Dicas de CSS para impressão

Seja na hora de levar uma receita para a cozinha, ter uma cópia física de um documento ou guardar um artigo bacana para ler depois, imprimir é uma função que usamos e abusamos em nosso dia-a-dia. Mas será que estamos fazendo tudo o que poderíamos para diagramar sites no papel?

por Dani Guerrato

Fault Tolerance: a base do Progressive Enhancement

Entenda por que o Fault Tolerance é a base para o Progressive Enhancement e também do Adaptive web Design.

por Diego Eis

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

Não tenho versão mobile, faço ou não faço?

Ainda tem dúvidas se deve ou não fazer a versão mobile do seu produto ou site? Saia dessa...

por Diego Eis

O que falamos em 2013?

E o que vamos falar em 2014? Confira alguns do assuntos que fizeram a cabeça em 2013 e podem ser grandes promessas para 2014.

por Thaiana Poplade

Turbinando as Media Queries

Entenda um pouco mais sobre como melhorar o gerenciamento de breakpoints com SASS.

por Átila Fassina

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

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

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

Guia para Iniciantes – Ajude

Precisamos da sua ajuda para elaborar um guia para os iniciantes na área.

por Diego Eis

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

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

CSS e acessibilidade na web

Entenda como o uso do CSS influencia a acessibilidade dos seus projetos web.

por Reinaldo Ferraz

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

Repensando CSS Resets

Como melhorar seu CSS Reset.

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

Guia de Estilos

Entenda mais sobre guias de estilos, padrões para equipes, organização de CSS e mais.

por Dani Guerrato

Criando seu próprio Framework HTML CSS

Um Framework pode ser o responsável pelo sucesso da sua aplicação e lhe poupar milhares de dólares, assim como pode representar o gargalo do desenvolvimento do seu produto e levar o seu projeto ao fracasso.

por Bernard De Luna

Classes Funcionais

Crie classes que podem ser reutilizadas de acordo com a sua necessidade.

por Diego Eis

Imagens em alta resolução utilizando SVG

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

por Dani Guerrato

Scoped CSS

Scoped CSS é um novo recurso do HTML5 nos permite definir estilos que serão aplicados apenas em um determinado escopo de marcação.

por Almir Filho

Qual unidade utilizar – Pixel, EM ou REM

Entenda mais sobre as duas unidades prediletas pelos desenvolvedores.

por Diego Eis

Font icons – Utilizando ícones em formato de font

Aprenda a usar font para fazer elementos com ícones.

por Diego Eis

Boas práticas para E-mail Marketing

Algumas dicas práticas para codificação de email marketings.

por Deivid Marques

Como usar os pseudo elementos :before e o :after

Como utilizar os pseudo-elementos :before e :after com a propriedade content.

por Diego Eis

Responsive Web Design – Adaptação vs Otimização

O que é melhor: um site que se adapta bem em diversas telas ou um site totalmente otimizado e de alta perfomance?

por Diego Eis

Variáveis no CSS – Breve

Variáveis no CSS, em breve, perto de você.

por Diego Eis

Entendendend a regra @viewport do HTML

Você poderá manipular o viewport diretamente do seu código CSS.

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

Dicas de sobrevivência em uma era pós o IE6

Confira algumas propriedades importantes do CSS que você não podia usar no IE6, mas pode usar hoje no IE7 ou superior.

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

Introdução aos padrões de codificação

É mais importante para o time concordar em um único estilo de código do que encontrar o estilo perfeito.

por Diego Eis

CSS Sprites

Como fazer de forma moderna e sem chatices

por Zeno Rocha

Introdução ao CSS 3D – Flip Card

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

por Diego Eis

OOCSS ou CSS do jeito certo

O CSS é algo muito simples de ser escrito mas com apenas um deslize todo o código pode transformar o projeto em um inferno. Saiba como podemos evitar isso.

por Diego Eis

CSS dinâmico com LESS

Já imaginou poder declarar variáveis, implementar funções e mixins em suas folhas de estilo? Este é objetivo principal da biblioteca LESS: ampliar o funcionamento do CSS, tornando-o altamente dinâmico.

por Davi Ferreira

Formulários e o Metawebdesign – Parte 1

Como montar formulários quando você é o responsável pelo código e design.

por Alysson Franklin

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

Nem só de client-side vive um site

| É errado pensar que apenas por que você escreveu código HTML semântico seu site aparecerá em primeiro no Google ou ficará mais acessível para deficientes visuais. O código client-side é apenas a porta de entrada para uma série de outras pendências.

por Diego Eis

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

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

CSS 3 – O valor currentColor

O currentColor copia a cor da propriedade color e a aplica em outras propriedades de cor, como background, border e etc.

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

Pontuação de especificidade da CSS

Entenda como o browser calcula a especificidade do seu seletor e evite conflitos entre estilos.

por Diego Eis

Drops 5 – Responsabilidade Dev Front-end

Os dev front-end fazem mais do que ficar pintando quadradinhos o dia inteiro.

por Diego Eis

Ferramentas de diagnóstico

Quando algo de estranho acontece, é bom estar preparado.

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

Performance do seu CSS

Entenda o que pode melhorar ou piorar a performance de carregamento do seu CSS.

por Diego Eis

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

PDF – Browsers antigos: guerra contra o terror

Não quero que você gaste tempo e dinheiro à toa se você pode ter resultados melhores se mudar um pouco o foco do desenvolvimento. Quero que você entenda que os visitantes que utilizam browsers antigos são sempre a minoria.

por Diego Eis

Um raio-x do seu website

Ferramentas e metodologia para entregar mais e com maior qualidade. O Progressive Enhancement pode nos ajudar como mostramos em outros artigos. E hoje vamos mergulhar em um tópico específico da metodologia.

por Alysson Franklin

Drops 3 – Duas formas de modular seu CSS

Duas maneiras de modular seu código CSS.

por Diego Eis

Customizando links

Customizar links do site pode ser algo rápido e útil para o seu visitante. Fazemos essa customização com a ajuda dos seletores complexos, onde conseguimos filtrar e selecionar links específicos de acordo com o valor do HREF.

por Diego Eis

CSS Transforms

"CSS 2D Transforms allow elements rendered by CSS to be trans- formed in two-dimensional space." É aqui que a graça do CSS 3 começa.

por Diego Eis

CSSDoc – padrão para documentação de folhas de estilo

Como padronizar seu código CSS com eficiência com CSSDoc.

por Talita Pagani

JQuery para produção de Layouts

Quando falta a compatibilidade de algumas propriedades do CSS nos browsers ou porque quando não é possível manipular o HTML manualmente para suprir suas necessidades, o JQuery poderá ajudar.

por Diego Eis

Bem vindo a Xangri-lá – Parte 2

Voltamos a Xangri-lá, para entender como as coisas funcionam. Veja como aplicar o Progressive Enhancement criando e customizando metodologias de trabalho. As expectativas e considerações do cliente geram o design e a funcionalidade de sua aplicação.

por Alysson Franklin

Desenvolvendo para IE6

Você ainda desenvolve para IE6? Você cobra mais por isso? Eu sim.

por Diego Eis

Bem vindo a Xangri-lá – Parte 1

Progressive Enhancement, Graceful Degradation e um horizonte perdido que precisa ser encontrado no desenvolvimento web

por Alysson Franklin

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

Vote no Especialista em Usabilidade para Presidente

A usabilidade é algo muito abrangente e você, profissional front-end, tem muito a ver com isso.

por Alysson Franklin

Usabilidade para desenvolvedores front-end

A usabilidade possui diversos critérios a serem trabalhados durante todo o processo de desenvolvimento de uma interface, mas no dia-a-dia podemos melhorar a experiência do usuário através de pequenos detalhes.

por Talita Pagani

6 dicas para evitar problemas de incompatibilidade entre browsers.

Mesmo com o lançamento de versões beta dos principais browsers, prontos para receber o HTML5, profissionais ainda enfrentam dificuldades em realizar o trabalho de webstandards nos dias de hoje.

por Thaiana Poplade

Gradientes em CSS

Já é possível criar gradientes apenas utilizando CSS3. Sem imagens e com alguma compatibilidade com a maioria dos browsers do mercado. Vale a pena experimentar.

por Diego Eis

6 estratégias para melhorar a organização do seu CSS

Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção.

por Talita Pagani

HTML5 e seus companheiros

O HTML5 veio para mudar. Mas o HTML5 sozinho não faz verão. Por isso, é bom que saibamos que o CSS e o Javascript fazem boa parte do trabalho.

por Diego Eis

Propriedade @font-face CSS – Fonts externas na web

font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.

por Diego Eis

Simuladores de Browsers Mobiles

iPhone, Android e S60. Há simulador de browsers para todos estes smartphones. Versionar sites para mobiles nunca foi tão fácil.

por Diego Eis

Versionamento inteligente para mobiles

Filtrar mobiles pelo tipo de aparelho é muito comum. A moda é versionar o site para iPhone. Mas há outros aparelhos com a mesma capacidade de renderização que podem se beneficiar.

por Diego Eis

Colocar Rodapé fixo no fim da página

Como deixar o Rodapé fixo fim da página quando houver pouco conteúdo.

por Diego Eis

Camadas de desenvolvimento client-side

Você pode se assustar com isso, mas a tabela foi um marco na história do design para web. Ela abriu portas. Mostrou caminhos.

por Diego Eis

Ah, o maravilhoso mundo real

O que é mais importante, RDF ou bordas arredondadas? O novo formato de especificações modulares do W3C vai ajudar os desenvolvedores, agilizando os releases de navegador, ou vai tornar nossa vida uma bagunça?

por Elcio Ferreira

Prepare-se para a Revolução

O W3C mudou. Isso vai modificar todo um fluxo de trabalho e a velocidade das implementações dos browsers e a forma com que os desenvolvedores trabalham.

por Diego Eis

Efeito cascata, herança e especificidade do CSS

O efeito cascata do CSS é controlado pela especificidade e pela herança das propriedades.

por Diego Eis

Digest – Referências de CSS

Uma listagem de algumas referências e lista de propriedades sobre propriedades do CSS.

por Diego Eis

Propriedade do CSS: nth-child

A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo a posição específica de cada um. Você pode por exemplo selecionar os elementos ímpares ou pares.

por Diego Eis

CSS 3 Columns

O CSS3 facilitará muitas coisas, uma das possibilidades é a criação automatica de colunas em blocos de textos. Para tanto, utilizamos as propriedades de columns do CSS3.

por Diego Eis

Digest 06/09: Técnicas de CSS

Cool CSS Techniques for Links Make your forms beautiful with CSS The Art of Crafting Beautiful Stylesheets “Checkmark” Your Visited Links with Pure CSS 10 Cross-Browser CSS Properties You’ve Probably Forgotten CSS Typography: Contrast Techniques, Tutorials and Best Practices Poll Results: CSS3 Features ( with almost 7,000 people ! ) CSS Drop Caps, the @font-face tag, sIFR and Cufon List of Really Useful Tools for CSS Developers The Do’s & Don’ts of Modern Web Design Hiding with CSS: Problems & Solutions

por Diego Eis

Introdução sobre Media Queries

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

por Diego Eis

Lançado Firefox 3.5

O Firefox 3.5 foi lançado e está com uma série de modificações, principalmente atualizações para facilitar o desenvolvimento com HTML e CSS. Baixe, teste e compartilhe!

por Diego Eis

Introdução ao CSS Animation

CSS Animation manipula características dos elementos, transformando-os modificando por meio de transições os valores das propriedades definidas dos elementos.

por Diego Eis

Digest 05/09: Técnicas de CSS

Navigation Menu Navigation Matrix Collapsible Tables Checkbox Customization

por Diego Eis

Propriedade Position do CSS

A propriedade position não serve para criar estruturas de layouts. Você o usará para coisas mais simples. Existem 3 tipos: relative, absolute e fixed. Entenda como eles funcionam e quais as suas relações.

por Diego Eis

Digest 04/09: CSS, HTML e Layout

Um bando de links interessantes sobre HTML, CSS e um pouco de layout.

por Diego Eis

Graceful degradation é tudo sobre Acessibilidade

Cada tipo de dispositivo e perfil de usuário tem um nível de experiência. Você precisa dar a melhor experiência possível para cada um destes perfis. Isso se chama Graceful Degradation.

por Diego Eis

Seletores do CSS: Pseudo-classes

Uma breve explicação sobre pseudo-classes, seus funcionamentos e tipos.

por Diego Eis

Seletores Complexos do CSS

Os seletores complexos mostram como a CSS pode ser dinâmica e direta.

por Diego Eis

Seletores Agrupados e Encadeados

Sobre seletores agrupados e seletores encadeados. Explicação rápida e básica.

por Diego Eis

Propriedade Float do CSS

Vídeo que demonstra a propriedade float do CSS. Essa propriedade é responsável pela administração do posicionamento das caixas do layout.

por Diego Eis

Client-side e sua importância

Dar atenção a um código XHTML bem escrito, é abrir portas para deficientes e usuários de diversos dispositivos.

por Diego Eis

Implementar XHTML/CSS é grátis

Você pode ser diferente, mas isso só depende de você.

por Diego Eis

Porque só para o iPhone?

O desenvolvimento web para iPhone é o início deu m novo modelo de desenvolvimento web para dispositivos móveis. Os browsers para aparelhos como o iPhone ou aparelhos como os S60 da Nokia, são um novo caminho de navegar.

por Diego Eis

Modulando o CSS

As vezes não é inteligente fazer o código CSS todo em apenas um arquivo CSS. É aí que entra a modularização do CSS.

por Diego Eis

Não “otimize” seu código

Quando fazíamos sites com tabelas, o grande problema era a quantidade de código que escrevíamos. Naquele tempo – 1996, 97, 98 – tínhamos outros pontos que precisavam de uma atenção maior. A conexão era lerda para todo mundo e isso dificultava um bocado as coisas. Por isso, fazer um site pesado era fora de cogitação. Ficávamos “mendigando” cada byte para que o site ficasse milésimos de segundo mais rápido.

por Diego Eis

Tabelas semânticas

Você já deve saber que o desenvolvimento utilizando Padrões Web preza pela Semântica no código. Todo código que você escrever deve dar algum significado ao conteúdo. E toda tag sem sua função específica e te ajuda a formar um código mais esperto e legível.

Alguns elementos por dependerem de várias tags para ter um funcionamento pleno, acabam sofrendo com o desinteresse dos desenvolvedores em entender melhor os diversos objetos que compoem um determinado elemento. Um caso bastante comum, além dos Formulários, é a formação das TABLES.

por Diego Eis

Exercício Básico

Costumo dar esse exercício para alguns dos alunos aqui da Visie. Ele é um exercício básico e utiliza as propriedades mais importantes para se construir um site. A idéia é mostrar para o desenvolvedor que está abrindo os olhos agora, como é fácil, em algumas horas de treinamento (tipo 3 horas), o desenvolvimento com CSS e XHTML é produtivo.

por Diego Eis

Palestra: Implementação de Layout com CSS

Essa semana, dia 23, quarta-feira, irei fazer uma palestra de 2 horas exclusivamente sobre Implementação de Layout com CSS. Irei implementar um layout, desde o HTML até o CSS, tudo explicado nos mínimos detalhes. http://visie.com.br/eventos/ O valor da palestra é de R$29 e será em São Paulo. Este post se auto-destruirá no dia 24.

por Diego Eis

Vídeo: Menu horizontal com CSS em 5 minutos

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS.

por Diego Eis

Layout Fixo / Fluido de 3 colunas em 8 Minutos

Na verdade a gravação foi feita em 7 minutos e 51 segundos.

Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.

Se quiser ver o exemplo com o código fonte, clique aqui.

por Diego Eis

Formulário HTML Básico em 8 minutos

update: Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid.

por Diego Eis

IE8 – O sonho não acabou

Para você se inteirar do assunto, leia Browser Targeting Version.

No artigo que recomendei acima, lá nos últimos parágrafos dei minha opinião sobre a antiga decisão da Microsoft:

Mesmo assim, acho que tudo deveria ser nivelado por cima. Porque os desenvolvedores que se preocupam e utilizam os Padrões da maneira correta, são os que devem marcar o browser? Não seria mais fácil criar uma metatag para marcar os sites que não devem ser renderizados com o suporte avançado de Padrões? Quem deve se preocupar, são os desenvolvedores que não dão a mínima para os Padrões. Eles sim devem trabalhar para deixar seus sites atualizados.

por Diego Eis

Centralizando um objeto na Horizontal e Vertical com CSS

Saiba como centralizar um objeto na horizontal e vertical apenas com CSS.

por Diego Eis

Criando um Menu Horizontal com CSS

Aprenda como criar um menu horizontal padrão com CSS.

por Diego Eis

CSS Frameworks ou como desaprender CSS

O papo que agora está começando a rolar entre os desenvolvedores é sobre Frameworks para CSS. Sou totalmente contra a qualquer coisa que impeça o contato do desenvolvedor com o código. Sou avesso a qualquer tipo de interface que prometa facilitar o desenvolvimento, pelo menos de XHTML e CSS. Lembra daquele papo sobre o desenvolvedor “analbético” de código? Ainda acho que utilizar editores que suportam Snippets – ou Macros, dependendo do editor – são as melhores formas de se trabalhar se você quer agilidade.

por Diego Eis

CSS Reset

Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset. Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.

por Diego Eis

font-face

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário. Estamos acostumados a usar (os designers que o digam) um pacote de fontes muito limitado de fonts. O @font-face faz com que o browser baixe, instale e renderize uma font na página. Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

por Diego Eis

Referência rápida de CSS em Português

Um guia para você lembrar do que o CSS é capaz.

por Diego Eis

Podcast Tableless #25 – Validação é importante?!

Validar ou não validar, eis a questão. Será que validar é realmente importante? Para quem ela é importante? Qual o sentido da vida? Mas porque 42 é a resposta?

Validação sempre foi um assunto muito interessante. Não temos como falar sobre validação sem tocar em assuntos como semântica, xhtml2, html5 e etc. Instigados pelo assunto (um tanto polêmico, confesso) e pelos comentários do post que escrevi anteriormente, decidimos fazer um podcast madrugada adentro.

por Diego Eis

CSS3 – Novo mundo de possibilidades

O CSS está para o desenvolvedor como o martelo está para o marceneiro. Companheiro inseparável na hora de implementar algum site. Atualmente o CSS está em sua segunda versão. Ele surgiu no ano de 94 (mais detalhes aqui) e a partir daí vem facilitando cada vez mais a vida dos desenvolvedores. Em tempos passados, o CSS foi ignorado por quase todos. Hoje, com toda esta revolução em volta dos Padrões, é difícil dizer como vivíamos sem ele.

por Diego Eis

Breve introdução: XHTML Mobile Profile

XHTML MP é um subset do já conhecido XHTML. Ele é baseado em um outro subset de XHTML chamada XHTML Basic. O XHTML Basic é uma versão simplificada do XHTML definido pelo W3C. Ele foi feito especificamente para dispositivos com baixo poder de processamento como celulares, PDAs, pagers etc… O XHTML Basic não contém algumas características que esses dispositivos dificilmente suportam, como por exemplo: Frames, Folhas de Estilo em Cascata e scripts.

por Diego Eis

O que são Media Types do CSS?

Media Types servem para direcionar um determinado CSS para um determinado tipo de meio de acesso.

por Diego Eis