CSS3で出来ている可愛いコンタクトフォーム（封筒からお手紙が出てきます）

2012.03.29 Category:CSS Tag:CSS3

マウスを乗せるとこんな感じでお手紙がピョコっと出てきます。

デモはこちらから　: create-a-unique-contact-form-with-css3

ダウンロードはこちらから　:create-a-unique-contact-form-with-css3

create-a-unique-contact-form

中を見てみると、transitionを使ってホバーしたときに高さが変わる様に出来てるんですね。φ(ﾟДﾟ )ﾌﾑﾌﾑ…

そして、なんともIEに対応しているのが(・∀・)ｲｲ!!

※　下のコードがIE対応です。

&lt;!--[if IE]&gt;&lt;script&gt;
  $(document).ready(function() {
            $(&quot;#form_wrap&quot;).addClass('hide');
            $(&quot;#form_wrap&quot;).prepend( '&lt;div id=&quot;before&quot;&gt;&lt;/div&gt;').append( '&lt;div id=&quot;after&quot;&lt;/div&gt;');
            $(&quot;#form_wrap&quot;).hover(function(){
           $(this).stop(true, false).animate({
                height : '836px',
                top : '-200px'
           }, 2000);
            $('form').stop(true, false).animate({
    height : '580px'
    }, 2000, function(){
                         $('#form_wrap input[type=submit]').css({'z-index' : '1', 'opacity' : '1'})} ) }, function() {
    $('#form_wrap input[type=submit]').stop(true, true).css({ 'opacity' : '0'})
          $(this).stop(true, false).animate({
      height : '446px',
      top : '0px'

    }, 2000);
    $('form').stop(true, false).animate({
        height : '200px'}, 2000)
    })
})
&lt;/div&gt;&lt;/script&gt;&lt; ![endif]--&gt;