TiloWR » Chrome

Utilizando webkit-box-reflect ( reflexo com css 3 para iphone/ipad/safari e chrome)

Tilo — Thu, 20 Jan 2011 17:00:47 +0000

A idéia é bem simples, vamos pegar uma imagem, e fazer o reflexo, o conceito é o mesmo de uma sombra vamos usar a seguinte imagem:

Para fazer o reflexo com CSS 3 vamos utilizar a propriedade –webkit-box-reflect, primeiro vamos entender quais os atributos que essa propriedade recebe entendendo a sintaxe:

-webkit-box-reflect: direction offset mask-box-image;

Temos 3 atributos:

Direction: A posição da reflexão em relação à imagem. Pode estar acima, abaixo, esquerda ou direita. (above, below, left ou right)
Offset: A distância da reflexão a partir da borda da imagem, em unidades de comprimento ou como uma porcentagem. O valor padrão é 0.
Mask-box-image: Usado para sobrepor a reflexão. Se for omitido, a reflexão não tem máscara. Pode ser usado cor solida ou uma combinação com –webkit-gradient.

Vejamos esse código:

.reflexo {
-webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

Por algum motivo ainda desconhecido, o script que deixa bonito a aparência de código acima está duplicando a palavra bottom do webkit-gradient, o correto seria apenas “linear, left top, left bottom, from”

Explicando a propriedade –webkit-box-reflect com os seguintes atributos e seus respectivos valores:

-webkit-box-reflect = Requisita reflexo
direction : below = reflexo abaixo do item
offset : 5px = a uma distancia de 5px
mask-box-image : -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)) = fazendo uma degrade de branco para tranparente ( a explicação do gradient fica para o proximo post)

Bem, o resultado final fica assim:

Espero que tenha ajudado e não esquece de deixar um comentário pra incentivar a continuidade dos posts.

Noticia: Google Chrome mantém o crescimento

Tilo — Mon, 10 Jan 2011 17:00:42 +0000

O Google Chrome vem mostrando para que veio, no ultimo ano no Brasil ( que na minha opinião é o que vale, afinal, os sites que eu faço são para divulgação nacional ) ele teve crescimento continuo e está cada vez mais perto de pegar o firefox, que por sua vez teve um otimo desempenho no ultimo ano na europa, já ultrapassando o Internet Explorer como vocês podem ver na imagem abaixo:

Está cada dia mais perto a morte do IE, e vamo que vamo!

Dica: Gerenciador de tarefas do Chrome

Tilo — Fri, 07 Jan 2011 17:00:01 +0000

Muitas vezes estou usando o Chrome e percebo que ele está meio estranho, principalmente depois que comecei a colocar Extensões e Aplicativos nele, se você também passa por isso “Seus Problemas se acabaram-se”, use o gerenciador de tarefas do Chorme. Basta clicar na barra principal do navegador com o botão direito do mouse, e selecionar a opção gerenciador de tarefas como na imagem a seguir:

, ou pelo atalho de teclado “Shift + Esc”, além de poder parar as aplicações e Estensões, você pode acompanhar o desempenho da GPU para testes de CSS 3 ou Canvas, “de quebra” você que é um bom nerd vai poder acompanhar um relatorio mais detalhado do que está rolando no seu navegador, clicando em “estatisticas para nerds” ou abrindo uma aba do Chrome e digitando “about:memory”

Dica: Ativando aceleração via hardware no Chrome

Tilo — Thu, 06 Jan 2011 17:00:16 +0000

Pra quem gosta de desenvolver usando chrome, da pra deixar ele rodando transform3d / translate3d / rotate 3d e ter um comportamente mais parecido com Safari / Ipad / Iphone

É só criar uma aba nova, e digitar

about:flags

Depois ativar a opção

GPU Accelerated Compositing

Segundo a equipe do Chrome, eles não colocam isso default no browser pois “ainda não testaram muito”, mas comparando com o Safari, roda super bem.

dica enviada por email por @maktuiu

Dica: Apps, Temas e Extensões para o Chrome

Tilo — Wed, 05 Jan 2011 17:00:50 +0000

Muitas pessoas dizem que não usam o Chrome por ele ser “Cru”, pois bem, a algum tempo o Chrome oferece a Chrome Web Store, um lugar onde você pode baixar aplicativos, temas, jogos e outras coisas para incrementar o seu navegador, os aplicativos são organizados em grupos por categorias e por ordem de uso, como Features, Popular e Tops.

Com essa iniciativa o Google quer tentar equiparar o navegador dela ao Mozilla Firefox que é usado principalmente por desenvolvedores, pela quantidade de plug-ins que ele oferece para “debugar” o código.

Acesse a Chrome Web Store agora mesmo e conheça o que ela já oferece para melhorar a usabilidade do seu navegador. Eu já baixei umas paradas pra deixar lento dar um UP uhahuahua

Google Developer Day Brasil 2010

Tilo — Fri, 08 Oct 2010 12:23:52 +0000

O Google Developer Day é um evento de um dia onde apresentaremos conteúdo técnico sobre os mais recentes produtos de desenvolvimento do Google e onde você terá a oportunidade de conhecer as equipes que trabalham neles. Teremos sessões sobre o Android, Chrome e HTML5, Plataforma de Nuvem e APIs do Google.

Data do evento: 29 de outubro de 2010 (sexta-feira)

No Brasil, o Google Developer Day 2010 será realizado em São Paulo no hotel Sheraton WTC Hotel, no dia 29 de outubro de 2010.

Para manter-se informado sobre o evento e sobre notícias do Google para desenvolvedores em geral, por favor assine o Google Code Blog e siga-nos em @googledevbr. (Hashtag: #gddbr).

Local

Hotel Sheraton São Paulo WTC
Avenida das Nações Unidas, 12551
São Paulo – SP, 04795-100, Brasil

Para mais informações clique aqui!

$1337: Recompensa para quem encontrar falhas de segurança no navegador do Google

Tilo — Fri, 29 Jan 2010 19:15:33 +0000

O Google anunciou sua nova iniciativa que busca ampliar a segurança de seu navegador. Desenvolvedores ou pesquisadores de segurança que notificarem a empresa sobre falhas de segurança nos canais Stable, Beta ou Dev do Chromium ou do Chrome estarão sujeitos a ganhar uma recompensa de US$ 500, que sobe para o interessante valor de $1337 se o bug for particularmente severo ou se a análise for especialmente esperta.

A presença de analistas externos apontando bugs no Chrome não é novidade, mas espera-se que o novo programa de recompensa aumente o incentivo a este tipo de colaboração. O Google não é o primeiro produtor de navegadores a criar um programa de incentivo deste tipo, inclusive.

Os critérios de participação, avaliação, classificação e outros detalhes constam no anúncio oficial, e vale destacar que duas preocupações comuns foram tratadas: não há limite à divulgação pública dos bugs, se o pesquisador assim desejar, e também não haverá obrigação de revelação pública da identidade de quem fizer jus aos prêmios. (via BR-Linux.org)

Google Chrome 4

Tilo — Wed, 27 Jan 2010 12:45:30 +0000

Use um navegador da web novo e mais rápido

A Última versão desse navegador está mais rápida e segura, além de trazer varias novidades, como a possibilidade de adicionar plugins e temas (tudo bem, temas já podiam)

O Google Chrome executa páginas e aplicativos da web na velocidade da luz.

Rápido para inicializar
O Google Chrome é inicializado em um piscar de olhos.

Rápido para carregar
O Google Chrome carrega páginas da web rapidamente.

Rápido para pesquisar
Pesquise na web a partir da barra de endereço.

Baixar o Google Chrome 4

Hack’s, lá e de volta outra vez.

Tilo — Sat, 07 Mar 2009 18:02:51 +0000

quem desenvolve web concerteza já passou por um momento como esse ilustrado pelo nerdson, a questão é que não adianta em quanto a microsoft nào fezer com o IE o mesmo que ela faz com o MSN, a atualização Obrigatoria, nos vamos continuar a fazer Hacks pro IE6.

porem qual o hack certo para ser usado?

eu conheço algumas formas de fazer hack, e hoje vou tentar explicar como usa-los;

HTML tag:

Todas as Versões do IE

IE7 e Superior

IE7 e Anterior

esses Hack são principalmete para um conteudo que não está sendo renderisado no IE, você pode colocar uma marcação adicional para ele.

CSS Selector:

IE 7

*:first-child+html body seletor { propriedade: valor; }

IE 6

* html body seletor { propriedade: valor; }

Chrome e Safari

body:nth-of-type(1) seletor { propriedade: valor; }

Opera 9 e anteriores

html:first-child seletor { propriedade: valor; }

use essa forma apenas quando você precisa que uma determinada classe seja vista apenas pelo navegador em questão, isso ajuda muito quando você criou um hack no HTML e precisa tratar esse elemento.

Testando o Layout Browser/Resolução

Tilo — Sun, 01 Mar 2009 17:41:35 +0000

Você passa horas montando seu código, olha no firefox e está perfeito, quando manda para o cliente ele fala "isso aqui está todo torto!", ai você responde, não está não, eu testei! agora eu pergunto, testou mesmo?

segundo o W3Counter até o dia de Hoje, a lista dos Top 10 Browsers é a seguinte:

1	Internet Explorer 6.0	49.21%
2	Internet Explorer 7.0	17.09%
3	Firefox 2.0	14.96%
4	Firefox 1.5	8.87%
5	Safari 2.0	1.84%
6	Firefox 1.0	1.23%
7	Opera 9.0	0.70%
8	Mozilla 1.8	0.70%
9	AOL 6.0	0.56%
10	AOL 7.0	0.46%

seguido da lista das Top 10 Resoluções:

1	1024×768	50.43%
2	1280×1024	17.03%
3	800×600	8.89%
4	1280×800	8.38%
5	1152×864	3.81%
6	1440×900	2.84%
7	1680×1050	1.95%
8	1280×768	1.28%
9	1400×1050	1.03%
10	1280×960	1.03%

No fim das contas a boa noticia é que vc não precisa mais montar layout de 750px de Largura, pode ir pros 975px de largura sem ter medo da barra de rolagem horizontal, mais por outro lado ainda tem que testar no IE6, eu sempre resmungo, porque o IE não é como o MSN que quando tem uma atualização ou você faz ou não pode mais usar.

agora como testar todos esses browsers ? simples fica uma lista de onde baixar os principais browsers:

Microsoft Internet Explorer 6, 7 e 8 RC1

como o windows não permite mais de uma versão do mesmo navegador, uso o IE Tester para emular todas as versões necessárias.

Mozilla Firefox 3

aproveite e pegue os plugins para desenvolvedores aqui!

Apple Safari 4

o safari 4 está um show aparte, se você ainda não testou arrisco dizer que chegou com "pé na porta, tapa na cara" dos outros navegadores, navegação que lembra o Chrome, com ferramentas para desenvolvedores que não ficam a dever para o firefox.

Google Chrome

O Navegador do google, sem dúvida nem um outro navegador carrega os sites do google tão rapido quanto ele, pois ele tem boa parte das coisas em cache.

Bem, esses são os que não podem faltar na sua lista, agora se você é um cara (ou moça) mais exigente, você pode completar essa lista com o Opera, Natscape, Girafa e outros. Fica a dica.

TiloWR » Chrome

Utilizando webkit-box-reflect ( reflexo com css 3 para iphone/ipad/safari e chrome)

Leia Também:

Noticia: Google Chrome mantém o crescimento

Leia Também:

Dica: Gerenciador de tarefas do Chrome

Leia Também:

Dica: Ativando aceleração via hardware no Chrome

Leia Também:

Dica: Apps, Temas e Extensões para o Chrome

Leia Também:

Google Developer Day Brasil 2010

Leia Também:

$1337: Recompensa para quem encontrar falhas de segurança no navegador do Google

Leia Também:

Google Chrome 4

Leia Também:

Hack’s, lá e de volta outra vez.

Leia Também:

Testando o Layout Browser/Resolução

Microsoft Internet Explorer 6, 7 e 8 RC1

Mozilla Firefox 3

Apple Safari 4

Google Chrome

Leia Também: