• かちびと.net

    css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛いかったのでメモ。マウスを乗せるとゆっくりと手紙のようにデザインされたフォーム部分が表示されます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い

スポンサーリンク

とっても可愛らしいコンタクトフォームがありま
したのでメモがてらご紹介します。封筒に入
った手紙を模したフォームのデザインで、
マウスを乗せると、フォーム部分の手紙が
アニメーションしながら出てきます。使いど
ころは今は限られてしまいそうですが・・
将来は普通に使えるといいですねw

なかなか素敵なフォームデザインです。手紙にマウスを乗せるとゆっくりフォームが出てきますよ。こういう発想力がほしいですね・・

a unique contact form with css3 transitions


お手紙が入った封筒です。チラッとフォームが見えてますね。

マウスを乗せると・・


ゆったりとしたアニメーションでするすると出てきます。かわええw


こんな仕組みらしいです。アニメーションはtransitionで、ホバー時に高さを変えてるんですね。

form {background:#f7f2ec url('images/letter_bg.png');
		position:relative;top:200px;overflow:hidden;
		height:200px;width:400px;margin:0px auto;padding:20px;
		border: 1px solid #fff;
		border-radius: 3px;
		-moz-border-radius: 3px; -webkit-border-radius: 3px;
		box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
		-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
		-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
		-webkit-transition: all 1s ease-in-out .3s;
		-moz-transition: all 1s ease-in-out .3s;
		-o-transition: all 1s ease-in-out .3s;
		transition: all 1s ease-in-out .3s;}

		#form_wrap:hover form {height:530px;}

ほかにもいろいろと工夫が見られます。

IEにも対応させる

IEにはjQueryで対応させてるみたいです。

<!--[if IE]><script>
  $(document).ready(function() {
            $("#form_wrap").addClass('hide');
            $("#form_wrap").prepend( '<div id="before"></div>').append( '<div id="after"</div>');
            $("#form_wrap").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)
    })
})
</script><![endif]-->

デモもあるのでぜひご覧くださいませ。

create a unique contact form with css3 transitions / Demo

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services