13 de dez de 2012

Estilos para data

Ooi gente! Como estão?
Esses dias, eu descobri o CSS maker (não, eu não sabia da existência desse site), e comecei a usá-lo em tudo. Foi com ele que eu fiz uma data pra Jubs, e foi com ele que eu fiz essas duas datas que estou trazendo para vocês.

Substitua todo o código em .main-inner h2.date-header { pelo código fornecido.

Data que diminui

.main-inner h2.date-header {
font: arial; /* Fonte da Data */
color: #fff; /* Cor da Fonte */
margin-left: -80px;
background:-webkit-gradient(linear, 0% 100%, 90% 98%, from(#5E6400), to(#FF4E28));
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-transition-duration: .70s;
box-shadow: 1px -1px 2px 1px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px 1px #9a9a9a;
-moz-box-shadow: 1px -1px 2px 1px #9a9a9a;
}
.main-inner h2.date-header:hover {
background: #EE7AE9; /* Fundo quando o passa o mouse */
-webkit-transition-duration: .70s;
transform: scale(0.899, 0.843);
-webkit-transform: scale(0.899, 0.843);
-moz-transform: scale(0.899, 0.843);
-o-transform: scale(0.899, 0.843);
-ms-transform: scale(0.899, 0.843);
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#8664A8), to(#FF4EFF));}
Data skew (no hover, ela passa por um efeito bem rápido)

.main-inner h2.date-header {
font: arial; /* Fonte da Data */
color: #fff; /* Cor da Fonte */
margin-left: -80px;
background-color: rgba(158, 44, 44, 0.9);
background: rgba(158, 44, 44, 0.9);
color: rgba(158, 44, 44, 0.9);
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-transition-duration: .70s;
-moz-box-shadow:inset 0px 0px 75px #000000;
-webkit-box-shadow:inset 0px 0px 75px #000000;
box-shadow:inset 0px 0px 75px #000000;}
.main-inner h2.date-header:hover {
background: #EE7AE9; /* Fundo quando o passa o mouse */
-webkit-transition-duration: .70s;
transform: skew(180deg, 180deg) ;
-webkit-transform: skew(180deg, 180deg) ;
-moz-transform: skew(180deg, 180deg) ;
-o-transform: skew(180deg, 180deg) ;
-ms-transform: skew(180deg, 180deg) ;
background-color: rgba(158, 44, 232, 0.9);
background: rgba(158, 44, 232, 0.9);
color: rgba(158, 44, 232, 0.9);} 
Espero que gostem das datas, foram feitas com muito carinho.
Usem com créditos, e não repassem, por favor.

Beijos, até mais!

8 comentários:

  1. Muito fofas, principalmente a primeira, a colorida.♥

    PiinkCookie.blogspot.com

    ResponderExcluir
  2. Perfeitas!Amei a data que diminui!

    ResponderExcluir
  3. Gostei são bonitos!

    coisasdemeninamodernabydani.blogspot.com.br

    ResponderExcluir
  4. Um mais lindo que o outro,amei!

    Beijos! \o/
    Caprichadasbr.blogspot.com

    ResponderExcluir
  5. é bem legal, mas no meu html eu nunca consigo personalizar a data. nesse blog eu só consegui colocar a data embaixo do titulo do post e só! uma pena
    backlash7.blogspot.com

    ResponderExcluir
  6. Aiiiw *--* Que tuto maara (:
    Depoiis tento fazeer ^^
    Ameei '

    Não sei se chegou conhecer '' O brilho das estrelas '' então eu fiquei uns meses sem postar nele aí quando voltei agora deu problema :(
    Então tive que fazer outro blog (:
    Então se não for nenhuum encomodo
    poderia segui-ló ??

    Mil beeijoos (:

    http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  7. Adorei os estilos :)
    http://manguitarosa.blogspot.com.br/
    beijooos

    ResponderExcluir
  8. O Data skew da um efeito bem legal eu coloquei num blog de teste, ai ficou tipo 3D *-*
    sereifelizz

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.