Gradiente estilo Photoshop com CSS puro »

27nov 2010, às 11:07

Publicado em CSS3 HTML / CSS HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

O Ultimate CSS Gradiente Editor criado por Alex Sirota é uma avançada ferramenta online com recursos interessantes para desenvolvedores web. Como muitos aqui já devem saber o HTML5 junto ao CSS3 introduziu recursos interessantes e uma das características é a capacidade de especificar gradientes usando o CSS3 puro, sem ter que criar imagem e repetir no fundo do elemento para criar o efeito de gradiente com leveza.

Importante lembrar que até o momento desta publicação este recurso só está disponível em versões recentes do Firefox, Chrome e Safari. Os gradientes são resultantes de CSS Cross-browser que irão funcionar perfeitamente nestes navegadores, já no Internet Explorer exibira um gradiente simples.

Vale também conferir as documentações de CSS Gradiente: no Firefox, Safari e Chrome (Webkit) e Internet Explorer.

Zen Coding – Uma nova e ágil maneira de escrever HTML e CSS »

10set 2010, às 17:16

Publicado em Ferramentas add-ons | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Nas minhas perambulações na web o Zen Coding cruzou o meu caminho e fez meus olhos brilharem. Conheça este brilhante plugin para os mais populares editores HTML; que faz para o HTML o que o jQuery tem feito para o javascript.

Com o conceito de agilizar a escrita do código HTML/CSS, o Zen Coding, desenvolvido por Sergey Chikuyonok do Smash Magazine elimina a tarefa de escrever divs e seus conteúdos e classes, por uma simples sintaxe CSS que com um simples comando por atalho de teclado é expandida transformasse como passe de mágica (não é magia é tecnologia!) na estrutura HTML com suas devidas classes e ids.

Assista o vídeo de como funciona o Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Excelente, não?

Tudo muito simples e rápido, após a digitação de uma sintaxe simples, como esta:

   1: div#menu>ul>li*5>a

Selecione está linha e pressione o devido atalho onde padrão é “Ctrl +,” mas pode variar de aplicativo para aplicativo, no caso do Aptana que explicarei a seguir como instalar, o atalho será “Ctrl+e”. A sintaxe se expandirá na estrutura HTML, abaixo:

   1: < div id="menu">

   2:     < ul>

   3:         < li>< a href="">a>li>

   4:         < li>< a href="">a>li>

   5:         < li>< a href="">a>li>

   6:         < li>< a href="">a>li>

   7:         < li>< a href="">a>li>

   8:     ul>

   9: div>

Como instalar o Zen Coding no Aptana (Windows)

Ainda não comentei sobre o Aptana aqui, mas em breve farei um post sobre esse poderoso IDE. Vamos  ao que interessa dá um trabalhinho, mas é moleza, você vai precisar do seguinte: Aptana studio e do Plugin Zen Coding

Com o Aptana studio instalado e o Zen Coding em mãos, crie um novo projeto: File > New > Other > Web > Default Web Project.

Na tela seguinte de o nome do projeto de zencoding.

Clique com o botão direito sobre o projeto criado intitulado zencoding, no menu flutuante siga: New > Folder; nomeia a pasta  como scripts.

Extraia o conteúdo do arquivo Zen.Coding-Aptana.v0.6.0.1.zip, copie (Ctrl+c) todo o conteúdo extraído e cole (Ctrl+v) na pasta scripts do projeto zencoding

O resultado será este:

Agora na barra de menu no item Scripts, você terá acesso as ações do Zen Coding, veja a imagem:

Pronto! O Zen Coding está instalado, pratique que com certeza valerá a pena. Caso não funcione reinicie o Aptana.

O atalho não funciona (ou não existe)!

Caso tenha problemas com atalho de expandir a sintaxe no Aptana ou ele não venha ativado, basta fazer o seguinte:

Na pasta script do projeto zencoding, encontre o arquivo Expand Abbreviation.js e altere o valor do  item Key para M3+E (onde M3 é a tecla Alt). Veja o exemplo:

   1: /*

   2:  * Menu: Zen Coding > Expand Abbreviation

   3:  * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)

   4:  * License: EPL 1.0

   5:  * Key: M3+E

   6:  * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript

   7:  * 

Mais detalhes sobre o Zen Coding sobre o Aptana Studio: AptanaHowToEn(em inglês)

Editores com suporte oficial

Estes editores tem suporte total ao Zen Coding: Aptana/Eclipse, TextMate, Coda, Espresso, Komodo Edit/IDE, Notepad++, PSPad, ,editArea.

Outros editores:

Estes editores não tem garantia de suporte a todos os recurso do Zen Coding: Adobe Dreamweaver, Sublime Text, UltraEdit, TopStyle, GEdit, BBEdit/TextWrangler, Visual Studio, EmEditor, Sakura Editor.

Zen Coding no Dreamweaver:

Basta baixar e instalar a extensão: Zen.Coding-Dreamweaver. Não fiz testes em quais versões do Dreamweaver o Zen Coding funciona.

Mais informações sobre o Zen Coding: Zen Coding a new way to write html code(em inglês)

Ainda estou experimentando o Zen Coding, mas pelo que vi até agora me pareceu realmente fantástico. Experimente também e não deixe de me contar o que achou.

Easy front-end Framework »

06set 2010, às 08:00

Publicado em Ajax/Javascript/Jquery Framework HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Conheça Easy framework e acelere a produção das três camadas do front-end (estrutura, estilo e de interação).

Projetado por Alen Grakalic criador do blog CSS Globe para tornar sua vida um pouco mais fácil como ele mesmo cita, o Easy front-end Framework começou como um projeto pessoal e, em seguida, como um monstro de frankenstein, se transformou em algo maior. A ideia por trás dele é reduzir a quantidade de tempo gasto na criação da base do HTML através da reutilização de técnicas de codificação, sem se preocupar com questões sobre renderização do navegador, junto com inúmeros plugins javaScript para executar tarefas simples e também com convenções de nomenclatura da CSS.

Mas, por que usar o Easy front-end framework?

Por ser um framework tudo-em-um com uma biblioteca javaScript produzida com o velho conhecido jQuery, este que já facilita muito as funções interativas, ele também inclui uma biblioteca pré-formatada e codificada de CSS e HTML com blocos de conteúdo que você pode simplesmente copiar e colar em seu modelo html.

Uma verdadeira solução para front-end que você poderá facilmente usar como foi concebida ou personalizar para atender às suas necessidades

Experimente, não vai doer.

Como toda novidade é necessário um tempo de adaptação. Só então podesse falar se algo é bom ou ruim, útil ou não, sugiro que assista ao screencast abaixo, veja a documentação (em inglês) e dê uma espiada no demonstrativo.

Download do Easy front-end framework

Galerias – Inspiração para Webdesign »

12jul 2010, às 08:00

Publicado em Inspiração | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Html5 Gallery

HTML5 gallery tem por objetivo proncipal promover o uso do HTML 5 por web designers com exemplos de sites reais que já utilizam as novas normas da W3C.

Wireframe Showcase

Em vez de focar só no resultado final a galeria Wireframe Showcase permite visualizar wireframes, protótipos, esboços de um site com opção de discussão. Vale a pena a visita.

koflash

Ótima galeria de sites produzidos totalmente em flash, como opção de compartilhar com twitter, adcionar ao delicious e acrescentar comentários.

Mobile Awesomeness

A internet móvel está aí e isso não se pode contestar, hoje em dia uma versão móvel do web site é sempre bem vinda. Visite Mobile Awesomeness e conheça pelos exemplos de projetos para dispositivos móveis.

Grid-Based

A quem critique que usar grids limita a criatividade ao criar um layout mas, o uso de grids em um projeto oferece um sentido de ordem sistemática através da colocação e alinnhamento dos elementos de design. Grid Based exibe belos exemplos de sites que empregam este recurso.

CSS Elite

Maravilhosa galerias com dezenas de sites expostos que se utilizam da força do css.

Formee – Um framework CSS para construção de formulários »

04mai 2010, às 10:00

Publicado em Framework | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Formee é um framework que facilita a produção de formulários cross-browser de maneira fácil e rápida.

Ele funciona com a mesma técnica fornecida pelo conhecido 960 Grid System para facilitar montagem do layout do formulário de um website com total flexibilidade.

Veja o exemplo.

Este framework se em caixa em qualquer projeto, uma vez que a estrutura tenha sido criada em torno de larguras disponíveis.

Formee foi construído com o menos número de marcações e gera formulários com boa semântica. Estilizar os forms não é complicado pois Formee dispõe de 2 arquivos um para estrutura e outro para o estilo. Para completar Formee conta com alguns elementos a parte como mensagens de erro, avisos e alertas de sucesso.

CSS Framework – 960 Grid System »

03mai 2010, às 07:48

Publicado em Framework HTML / CSS | Deixe o seu comentário (4) »

publicado por: Magno Valdetaro

Framework

Segundo a Wikipédia um framework se resume em uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.

Mas está definição é muito complicada prefiro está do imasters:

Frameworks são estruturas de códigos definidas onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS, frameworks geralmente são um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utilização deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode não trazer a mesma produtividade do que se você estivesse usando um framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo.

Veja todo o artigo do Imasters sobre framework.

CSS Framework

A definição do termo na Wikipédia é a seguinte: “trata-se de uma biblioteca pré-configurada cujo objetivo é facilitar a criação de layouts o mais próximo possível dos padrões web”.

960 Grid System

Apesar de algumas pessoas acharem que grids limitam a criatividade, elas na verdade são muito úteis e funcionais e aceleram o processo de produção. Goste ou não, as páginas web essencialmente giram em torno de formas de caixas. Inevitavelmente, estes retângulos têm de se unir de alguma forma ou de outra para formar um desenho. Um sistema de grid é uma técnica adota para organizar conteúdo a muito tempo em páginas impressas e nos últimos anos vêem sendo utilizada em peso também para aplicações web.

960 Grid System é um framework com 960px de largura (por isto leva este nome), dividido em 24, 16 ou 12 colunas.

Veja a referencia visual das grids.

O pacote tem 180Kb, mas não se assuste este não é o tamanho do arquivo CSS, o pacote consiste de um arquivo para impressão onde você pode rascunhar seu layout ou desenhar seu wireframe manualmente, modelos para Fireworks, Photoshop, OmniGraffle e outros. O 960.css arquivo em si é apenas 3,6 KB quando comprimido.

Veja o tutorial em vídeo de como utilizar o 960 Grid system:

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.

HTML5 Less Framework »

04mar 2010, às 09:12

Publicado em Framework HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Um poderoso html5 framework para construção de layouts inteligentes para sites com diferentes larguras de telas, essa é a premissa do Less Framework desenvolvido por Joni Korpi e distribuído sobre Creative Commons.

Less Framework é um framework (dã) CSS para construção de layouts para web multi-flexível. Ele contém uma grid de oito colunas otimizado para um line-height de 24px, bem como um conjunto de presets para tipografia com base no número de ouro que se encaixam em ritmo vertical da grid.

Less Framework funciona perfeitamente no Chrome, Safari 3.0+, Firefox 3.0+ e Internet Explores 7+. E se ajusta inteligentemente em uma única coluna em navegadores de dispositivos com tela pequena.

CSS3 - Border-radius / Cantos arredondados »

05dez 2009, às 08:08

Publicado em HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Com a CSS3 a W3C oferece algumas novas opções, das quais uma boa é a propriedade border-radius. O Mozilla Firefox e Safari 3+ já implementaram está função, que permite criar cantos arredondados: Veja um exemplo:

O código para este exemplo acima é bem simples:

Os cantos podem ser tratados de maneiras individuais e com formas diferente para os mozilla tem sua própria maneira de tratar está propriedade diferente do que é a especificação. No mozilla Firefox é tratado com -moz-border-radius-topright , já para os navegadores que utilizam o webkit como renderizador -webkit-border-top-right-radius:

Propriedades para cada canto no mozilla e webkit:

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Transparência com CSS em todos os navegadores »

03dez 2009, às 07:09

Publicado em HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

A transparência é um interessante e prático recurso da CSS e faz parte do grupo de propriedades que são tratadas completamente diferente dependendo do navegador. Para fazer com que cada navegador, interprete corretamente são necessárias 4 declarações CSS distintas. Que com a graça do nosso Senhor Jesus Cristo, amém, não interferem uma nas outras. Use como desejar, só cuidado para não gerar muita confusão, aqui vai um exemplo de transparência em 50%:

.transparência_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Entenda o que é cada uma dessas propriedades CSS:

filter: alpha (opacity = 50); Está é própria para o IE.

-moz-opacity:0.5; Com está propriedade você dá suporte as versões antigas do Mozilla.

-khtml-opacity: 0.5; Está é a forma para as versões antigas do Safari (1.x), de quando o motor de redenrização que era usado ainda era referido como KTHML, diferente do webkit que é hoje. Mas continua funcionado nos navegadores Safari atuais.

opacity:0.5; Este é o mais importante, porque é o padrão atual no CSS. Está propriedade irá funcionar na maioria das versões do Firefox, Safari e Opera. Está seria a única propriedade necessária se todos os navegadores dessem suporte aos padrões atuais. Adivinha quem está no furo??