CHR Designer » Web

Como fazer borda arredondada no FireFox e no IE com css?

CHR Designer — Wed, 10 Jun 2009 01:34:54 +0000

E ai pessoal semana passada eu estava ajudando a Patricia uma menina que trabalha na Lógica Digital na parte de recorte, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliar-se sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no IE então eu fiz umas pesquisas no google até que eu achei o site html remix, então eu resolvi deixar postado aqui para ajudar todo mundo que tem essa mesma dúvida e também para que eu não esqueça mais.

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style: -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração



	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração




	
	Esta funcionando no FireFox e no IE

Como iniciar um recorte em Tableless

CHR Designer — Sun, 31 May 2009 01:01:39 +0000

E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital, sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

COMO INICIAR UM RECORTE EM TABLELESS

Agora eu vou colocar as DIVs:

COMO INICIAR UM RECORTE EM TABLELESS

TOPO

LATERAL

CONTEUDO

RODAPE

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “

TOPO

LATERAL

CONTEUDO

RODAPE

Visualizar o Exemplo
Download do Exemplo

Google revela novos logos de produtos

CHR Designer — Sat, 23 May 2009 20:43:04 +0000

Pode ser uma coisa muito pequena, mas quando é sobre a dimensão do Google, é uma mudança que milhões de pessoas vão notar. A empresa atualizou todos os seus produtos logos – Textos, notícias, mapas, etc…

Especificamente, todos os logotipos (além de produtos com sua própria marca, como o do Gmail agora incluem padrão logotipo do Google, além do nome do produto na mesma “limpa”. Veja alguns dos novos logotipos:

Além disso, os logotipos agora são “padronizado para ser do mesmo tamanho e cor onde quer que elas apareçam”.

Referência: mashable

Desenho com Pritt

CHR Designer — Sun, 17 May 2009 18:36:25 +0000

Olá pessoal eu estava dando uma olhada no blog Caligraffiti e ví esse video eu achei incrível como a imaginação dos seres humanos pode fazer. Esse video foi o artista chamado Michael C. Page que fez para um comercial da “Pritt” ele usou tinta, papel e marcadores Pritt. Vale a pena dar uma olhada nesse video.

Fontes de Filmes, Marcas, Logos, Bandas e Games

CHR Designer — Wed, 13 May 2009 01:33:39 +0000

Olá pessoal eu sou viciado em Fontes não tem como esconder isso, eu estava dando uma olhada na galeria de fonts que tenho aqui no meu pc e achei umas fontes muito interessantes que são utilizadas em Filmes, Marcas, Logos, Bandas e Games, então eu resolvi colocar aqui no meu blog para quem quiser fazer download delas é só clicar na imagem, abaixar e aproveitar…hahahahah…tomara que vocês gostem…

Fonts de Filmes/Produtoras

Marcas/Logos

Bandas

Games

Como obter uma melhor indexação – Flash

CHR Designer — Tue, 05 May 2009 02:05:49 +0000

Eu estava lendo no blog do Fabio Ricotta e vi esse artigo muito bom falando sobre como melhorar a indexação de Sites em Flash, na Produtora Web que eu trabalho “Lógica Digital” eu sempre converço com o responsável em flash “Fabio JR.” como nos podemos melhorar a indexação. Abaixo vai ter uma breve descrição como podemos melhorar isso.

A grande maioria sabe, o Flash é totalmente um recurso visual, e o Googlebot não possui olhos. O Googlebot pode ler os arquivos Flash e extrair texto e links contidos nele, mas a estrutura e o contexto é perdido. Além disso, o conteúdo textual é, em algumas vezes, armazenado de forma gráfica no Flash, e como o Googlebot não possui um algoritmo para o reconhecimento destes gráficos, estas importantes palavras-chave são perdidas. Tudo isso significa que mesmo que o seu conteúdo em Flash esteja na base de dados do Google, ele pode perder um pouco de texto, conteúdo, ou links. O agravante fica no seguinte ponto: o Googlebot pode entender alguma coisa dos arquivos Flash, mas muitos outros crawlers não podem.

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).

Quer postar seu portfólio ou blog em Sites de CSS

CHR Designer — Tue, 28 Apr 2009 00:51:53 +0000

Olá pessoal olha eu aqui denovo, esse post vai ser mais interessante para quem tem um Portfólio ou Blog e quer que tudo mundo veja o seu trabalho ou até mesmo para você ver layouts de outras pessoas para tirar “Inspirações” para criar o seu, eu onde trabalho “Lógica Digital” sempre entro nesses sites para tirar umas idéias e ver o que tem de novo. Abaixo eu vou postar uns sites de css que eu sempre acesso, tomara que vocês gostem.

http://csscreme.com/

http://cssmania.com/

http://www.cssshowcase.co.uk/

http://www.cssstyle.me/

http://cssorgy.com/

http://www.cssloggia.com/

http://www.designersource.net/

http://cssfreshblend.com/

http://csstea.com/

http://cssproject.cz/

http://www.ucss.pl/

http://www.css-design.fr/

http://www.csselite.com/

Imagens que desafiam o Photoshop

CHR Designer — Sun, 26 Apr 2009 22:41:12 +0000

Olá pessoal eu estava dando uma navegada ai eu entrei no Planeta Bizarro da Globo.com ai me deparei com essas imagens, nossa até parece que é montagem essas fotos não da para acreditar que é tudo de verdade…hahahah, então vamos dar uma olhada.

Esta formação rochosa parece pintura, mas é obra de milhões de anos de erosão e sedimentação nas dunas do Arizona.

As ridículas arvorezinhas que parecem gente sofreram, sim, a influência da mão humana - mas foi durante seu crescimento, em uma técnica chamada arborescultura. Já o lagarto anão mede mesmo 1 centímetro de comprimento e tem até esqueleto.

Parece capa de disco dos anos 80, mas é um registro autêntico do Salar de Uyuni, na Bolívia. É o maior lago salgado do mundo, e por vezes uma fina e calma camada de água convida o turista a caminhar sobre ela.

Esta foto circula na internet há tempos, e muitos acham que é uma montagem. Mas, não. Trata-se de um registro feito pela agência Reuters de um caminhão transportando milho na Somália.

Observe o triângulo com atenção. Acompanhe cada lado até o vértice. Fisicamente impossível, certo? Mas olhando esta obra – que fica em Perth, na Austrália – de outro ângulo, você descobre como os designers conseguiram criar aquela ilusão de ótica (que só é possível a partir de um local determinado, do outro lado da rua).

Parece efeito especial do filme ‘A múmia’, mas é uma das tempestades de areia que atingiram o Iraque em 2005. O autor desta foto disse que, depois de 3 minutos, ele foi engolfado completamente pela tempestade.

Este carro é uma escultura feita de tubos metálicos pelo artista Benedict Radcliffe.

Esta imagem lembra cenas do filme “Superman”. Mas foi tirada na Caverna dos Cristais, no México.

Referência: PlanetaBizarro

Rastreamento Ocular: como se lê na web

CHR Designer — Sun, 22 Mar 2009 18:17:00 +0000

Duas linhas na horizontal e uma na vertica: é assim que a maioria dos internautas lê os textos na web, conforme a pesquisa de rastreamento ocular feita pelo Nielsen/Norman group em 2006 (isso mesmo, o bom e velho Jakob Nielsen). Realizado com 232 usuários que visitaram milhares de páginas, o estudo concluiu que o internauta médio movimenta os olhos pelos websites de forma muito mais rápida do que quando folheia um livro.

Ao entrar num site, os internautas primeiro fazem um movimento horizontal, normalmente na parte superior da área de conteúdo do site. Depois, os olhos fazem um segundo movimento na horizontal, abaixo do primeiro movimento. Por último, os olhos descem numa linha vertical, que, por vezes, pode ser mais lenta do que a “olhada” horizontal. Esse movimento foi apelidado de “F”, já que se parece com o desenho da letra. F de fast.

Como já discutimos lá no iMasters, agora você já sabe que ninguém vai ler o seu texto de ponta a ponta. Para fisgar os leitores use dois estratagemas: concentre as informações mais importantes nos dois primeiros parágrafos do texto. Comece os parágrafos e os subtítulos com palavras de impacto. Assim, quando ele estiver fazendo o escaneamento vertical pode se interessar pelo tópico e optar por ler todo o texto.

A cor vermelha do gráfico mostra as partes que foram lidas; a amarela são as olhadinhas; as azuis receberam pouca atenção e a cinza nenhuma.

Referência: Agência Pro

N Camisetas Promocionais

CHR Designer — Sun, 08 Feb 2009 19:15:00 +0000

E ai galera mais um layout pra minha coleção…nesse layout eu tentei passar um aspecto de tecido utilizando texturas de tecidos junto com costuras…ahhhh naum posso esquecer de falar que o Camilo de uns palpites como sempre…hahahahah….