26 de janeiro de 2010

Bye Internet Explorer 6 ! Quase 10 anos com você !

noticiaie6-3.jpg

Quase 10 anos se passaram desde que o Internet Explorer 6 foi lançado, e com o passar do tempo a web evoluiu assim como o HTML e o CSS, mas ainda exite um grande número de usuáros que usam esse browser.(...)

Tempos atrás coloquei aqui um post sobre os motivos para não usar o IE6, mostrando por que o IE6 não é bem visto por muitos web designers, até os grandões na web, o Youtube e o Orkut, não vão mais desenvolver seus serviços com suporte para o IE6, veja essas mensagens que encontrei (clique nas imagens para ver com mais detalhes):



O Internet Explorer 6, e sua tecnologia de 2001, continua sendo uma pedra no caminho de vários web designers do mundo por não suportar muitos recursos que são quase que fundamentais na web hoje, em relação ao CSS nem se fala, é precário. Estamos indo para 2010, ou seja, são quese 10 anos de um browser com um suporte precário que ainda está sendo usado por aí. Mas tem uma boa notícia, os usuários do IE6 vem caindo, e muito, segundo o site W3CSchools o número de internutas que usavam esse browser no início do ano de 2009, em janeiro/09 era de 18.5% entre os browsers mais usados, e alguns meses depois, em dezembro/09, caiu para 10.9%.

22 de janeiro de 2010

Uhuu! o CSS Orbit é citado no Info Online da Abril !



Olá pessoal ! Estou muito feliz, depois de muito trabalho em um blog ter um reconhecimento é muito bom, quem tem um site ou é blogueiro sabe do que estou falando, agradeço o reconhecimento de várias pessoas que passaram e comentaram em alguns post dizendo mais ou menos assim: "Valeu cara !", "Parabéns pelo blog" ou "Sempre acompanho teu blog, continue assim", valeu mesmo pessoal ! ^_^

Mas o dia 20 de Janeiro de 2010 foi um dia especial pois uma das postagens do CSS Orbit foi citado no Info Online da Abril, veja essa notíca da Info aqui. A notícia foi escrita pelo James Della Valle, repórter da Info, com o título "Onde aprender CSS de graça na rede" e na segunda página dessa notícia, lá está, o link do CSS orbit para o tutorial "Bordas com cantos arredondados, sem o uso de imagens", é apenas um link com uma descrição da minha postagem, mas fiquei muito feliz por ser citado por um grande site.

18 de janeiro de 2010

Inspiration Showcase - Ilustração #8

logos da SEGA

Quem jogou muito e ainda joga vidogame (eu me encontro nessa lista :D ) deve se lembrar dos games da era 16 bits um deles é o Mega Drive, conhecido também com Genesis em outros países, esse console revolucionou a era dos 16 bits com games como Streets of Rage, Golden Axe, Comix Zone, Shining Force, ToeJam and Earl e o famoso Sonic the hedgehog.

Dependendo de cada jogo do MD o logo da SEGA que era exibido no início de cada jogo, aparecia com um efeito diferente, tem até o Pelé em um dos logos no game "Pele's World Tournament Soccer" pra Mega Drive, e inspirado nisso o CSS Orbit fez uma seleção desses logos animados da SEGA exibidos no inicio dos jogos para o MD, que encontrei no site www.whipassgaming.com. Particularmente ainda gosto dos jogos do Mega Drive, mesmo com o meu Playstation 2. :D É isso aí, relembrando o passado.




Game: Ristar






Game: Sonic the hedgehog 2





Game: Sonic spinball




Game: Comix Zone




Game: Earthworm Jim




Game: Earthworm Jim 2




Game: Spot Goes to Hollywood




Game: Pele's World Tournament Soccer




Game: ToeJam e Earl




Game: Vectorman




12 de janeiro de 2010

Inspiration Showcase - Ilustração #7

10+ Ilustrações das Tartarugas Ninja (Teenage Mutant Ninja Turtles)

As tartarugas mutantes que ganharam uma grande popularidade após o desenho animado de 1987, batizadas com o nome dos principais artistas renascetistas, Leonardo, Michelangelo, Donatello e Rafael, formam o grupo das Tartarugas Ninja !
Apresento as 10+ ilustrações das incríveis Tartarugas Ninja, Cawabanga !



Por SHadoW-Net




Por RAZAworks




Por =rkw0021




Por circus13




Por KidKalig




Por liquidxlead




Por Potatobrown




Por ninjatron




Por Burst-Design




Por DimiMacheras

7 de janeiro de 2010

Conhece o agregador de notícias Mozilla Buzz?



Navegando pela web encontrei um agregador de notícias bem interessante, com o mesmo objetivo do Linkk, Dihitt, Digg, etc, é o Mozilla Buzz.

A vantagem desse agregador é que você não precisa ter cadastro para adicionar uma nova notícia , mas se quizer pode se cadastrar e ter um nickname, a desvantagem é que não existem categorias variadas, só podem ser notícias relacionas a Mozilla, ou seja, noticias sobre o Firefox, Thunderbird, Bugzilla, etc, sobre tecnologias da Mozilla como o Gecko, entre outros.

Se você de vez em quando posta notícias sobre browsers o Mozilla Buzz é uma boa para você divulgar seus posts.

6 de janeiro de 2010

CSS Tutorial - Criando um álbum de fotos com CSS



Criar um álbum de fotos pode parecer uma tarefa difícil, mas é mais fácil do que você pensa, isso é possível com CSS.

Vou mostrar agora as técnicas para criação um mini álbum de fotos para você colcar na sibebar do seu blog ou site, mas pode ser onde você quizer. :D

Veja a demonstração desse álbum de fotos em ação aqui .

Vamos por partes...

Primeiro esse é o HTML que usaremos para desenvolver o álbum de fotos, não modifique, as únicas modificações que faremos nesse código é a substituição das imagens que estão no código pelas imagens de sua preferência. O endereço de cada imagem deve ser adicionado duas vezes em cada link, uma no lugar do "imagemthumbx.jpg" que será a thumbnail e o mesmo endereço em "imagemaqui2.jpg" que será a imagem grande exibida quando o mousepassar em cima da thumbnail.

Para adicionar mais imagens basta copiar os links e colar dentro da div e fazer o mesmo procedimento.

Se você possuir um conhecimento mais avançado de CSS pode modificar do jeito que quiser.
<div id="album">
<center>
<a class="fotosdoalbum" href="#"><img src="imagemathumb1.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui1.jpg" width="800" height="500" alt="ilustracao03.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb2.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui2.jpg" width="800" height="500" alt="img2.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb3.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui3.jpg" width="800" height="500" alt="Realistic_Flaming_Guitar_Fire.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb4.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui4.jpg" width="800" height="500" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb5.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui5.jpg" width="800" height="500" alt="marvelheroes10.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb6.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui6.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb7.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui7.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb8.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui8.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
</center>
</div>

Agora o CSS...

Primeiramente, nessa parte do CSS criamos o id "album" onde podemos fazer as modificações de corpo do álbum. Na propriedade background colocamos o endereço da imagem(entre as aspas) que ficará no rodapé como uma decoração do álbum.
A imagem é essa aqui.
#album {
position:absolute;
border:0px solid #0090ff;
border-width:1px 1px 1px 1px;
padding:5px 5px 100px 5px;
width:200px;
background:url('fundoalbum.png') no-repeat bottom left;

Agora vamos personalizar nossas thumbnails, que são as mini imagens do nosso álbum,
com a classe .fotosdoalbum mais o comando reservado img podemos modificar as bordas, margens, dimensões, etc, das imagens.
.fotosdoalbum img{
border:5px solid #33ccff;
margin:3px;
width:70px;
height:70px;
}

Criamos novamente mais uma classe .fotosdoalbum mais o comando reservado img só que agora com o :hover, o :hover significa que algo irá mudar quando se colocar o mouse em cima, no caso a cor da borda das thubnails irão mudar.
.fotosdoalbum img:hover{
border:5px solid #ff66cc;
margin:3px;
width:70px;
height:70px;
}

Agora criamos mais uma classe .fotosdoalbum mais os comandos reservados span e img, essa parte do CSS é para as modificações das imagens dentro da tag <span> no HTML, que são as imagens grandes que são exibidas.
.fotosdoalbum span img{
border:5px solid #ff66cc;
margin:3px;
width:450px;
height:340px;
}

E o passo final, essa parte do CSS é uma das mais importantes, a classe .fotosdoalbum mais o comando reservado span é responsável por esconder as imagens grandes graças a propriedade visibility com o valor hidden...
.fotosdoalbum span{
visibility:hidden;
position:absolute;
}

...e só exibir as imagens grandes quando se passa o mouse em cima das thubshots, para isso criamos novamente a classe .fotosdoalbum mais o span e o comando :hover que "diz" ao browser que algo será modificado quando se passar o mouse em cima das thumbnails, a modificação será mostrar as imagens grandes para isso usamos a propriedade visibility só que agora com o valor visible.

Para modificar a direção em que a imagem será exibida, basta mudar o left para right ou vice versa:
.fotosdoalbum:hover span{
visibility:visible;
position:absolute;
top:10px;
left:220px;
}

Mas eu vou ter que redimensionar os thumshots e as imagens grandes para ficarem todas do mesmo tamaho no álbum? Vai dar um trabalhão!

Ei, não se preocupe com isso, basta adicionar as imagens do jeito que estão e elas serão automaticamente redimensionadas pelo CSS :D

E esse é o álbum de fotos completo: aqui, você pode copiar o código fonte completo para testar.

4 de janeiro de 2010

Layout com as devidas modificações !

Olá pessoal, o CSS Orbit entra no ano de 2010 com as devidas modificações no layout, agora fica mais fácil encontrar noticias ataravés da sidebar, o item "CSS" do menu também sofreu algumas modificações, além de algumas modificações na "cara" dos posts, você também pode interagir mais com o CSS Orbit, além dos comentários você também pode avaliar as postagens através do "star rating" as estrelinhas no final de cada postagem, seus comentários também podem ser vizualizados no rodape do blog nos "últimos comentários". Tudo isso para disponibilizar um blog melhor para você leitor.

Me adicione no orkut, torne-se seguidor no twitter, siga as noticias pelo Friend Connect, socialize-se com o CSS Orbit e fique atualizado com as postagens !
Esses são alguns links para você se socializar com o CSS Orbit:

Twitter: @cssorbit
Dihitt: http://www.dihitt.com.br/usuario/cssorbit
Orkut: http://www.orkut.com.br/Main#Profile?uid=15432967179007061981
Flickr: http://www.flickr.com/photos/daniloramosweb

Um abraço !
Danilo Ramos