【CSSによるカードデザイン】３種類のエフェクト参考例

Designlab#5 2016/06/20

このエントリーをはてなブックマークに追加
CSSで作成した記事サムネイル用、
プロフィール用のカードデザインのサンプルです。

ストローバッグのWEBデザイナーの正木です。
Pinterestを筆頭に多くのサイトで利用されているカード型デザインがあります。
今回はそんなカードデザインに加えるエフェクトのサンプルを用意しましたのでご覧ください。
※今回作成したものはマウスオーバーがアクションのトリガーですので、PCでの閲覧を主としたデザインになります。

対象ブラウザは各ブラウザの最新版です。(2016.6.20現在)

作成したサンプルをまとめてご紹介

DEMO

はじめに全てのサンプルをご紹介致しました。引き続き、上から順にサンプルを説明いたします。

記事サムネイル例１

カードにマウスオーバーすると、詳細情報が下からスライドインして表示されます。
その時は文字の可読性を高めるため、猫の写真はぼかしをかけています。
詳細情報の表示をdisplayでなめらかに行う処理を行っています。

										
										（略）
											

												

													
												

												

													

														2016/12/12
														category
													

													
Title

													

														
text area text area text area text area text area text area text area text area text area text area

														
Comment(1)

														
MORE

													

													
												

											

											（略）
										

.area a{
	margin:30px;
	width:250px;
		-js-display: flex;
	display: -webkit-flex; /* Safari */
	display: flex;}
										/*サンプル1*/
.card_1{
	width:100%;
	background-color: #FFF;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

a .card_1 {
	color:#000;
}
.card_1__img{
	width:250px;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.card_1__img img{
	width:270px;
	height: 270px;
	position: absolute;
	left:-5px;
	top:-5px;
}

.card_1:hover .card_1__img img{
   -webkit-filter: blur(3px);
     -moz-filter: blur(3px);
     -ms-filter: blur(3px);
     -o-filter: blur(3px);
     filter: blur(3px);
}

.card_1__content{
	position: absolute;
	z-index: 100;
	width:100%;
	background-color: rgba(255,255,255,0.5);
	top:80%;
	height: 50px;
	-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
}

.card_1:hover .card_1__content{
	top:10%;
	height: 225px;
	background-color: rgba(255,255,255,0.7);
}

.card_1__content h1{
	padding:5px 10px;
	font-size: 16px;
	text-align: center;
	font-weight: 800;
}

.card_1__content p{
	font-size: 12px;
}

.card_1__cate{
	float: right;
}

.card1_btn{
	margin:0 auto;
	text-align: center;
	width:70px;
	padding:5px 10px;
	font-size: 12px;
	color:#000;
	border: 2px #000 solid;
	font-weight: 800;
}

.card1_btn:hover{
	background-color: rgba(255,255,255,0.5);
}

.card_1__detail{
	font-size: 12px;
	color:#FFF;	
	padding:4px 10px;
		margin-top: -25px;
}
.card_1 .descarea{
	display: none;
	padding: 0px 10px;
}

.card_1:hover .descarea{
	display: block;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;	
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }

.card1__comment{
	text-align: right;
}

記事サムネイル例2

カードにマウスオーバーすると詳細情報が表示され、三角形が広がりMOREと記載されたボタンの様に見えるデザインです。

様々な写真の明るさに対応するには文字色の変更及びグレーのレイヤーを一枚挟むなど調整の必要があります。

										（略）
	

		

			
		

		

		


			

		

					

				category

				12/12
2016
				
			

			
Title

			

				
text area text area text area text area text area text area text area text area text area text area

				
Comment(1)

				
>>MORE

			

						
		

	

											（略）
										

/*サンプル2*/

.card_2{	
	width:250px;
	background-color: #FFF;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

.card_2__content .descarea{
	color:#FFF!important;
}

a .card_2 {
	color:#000;
}

.card_2__img{
	width:250px;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.card_2__img img{
	width:250px;
}

.tri_1{
	position: absolute;
	z-index: 100;
	width: 0;
	height: 0;
	top:0%;
	border: 60px solid transparent;
	border-top: 60px solid orange;
	border-left: 60px solid orange;
	opacity: 0.8;		
}

.card_2__md{
	padding-top: 2px;
	font-size: 18px;
	font-weight: 800;
}

.card_2__cate{
	font-size: 9px;
	border-radius: 2px;
	background-color: #FFF;
	color:orange;
	padding:2px 8px;
	opacity: 0.8;
}

.card_2__time{
	padding-left:2px;
}

.card_2__detail{
	padding-top: 5px;
	padding-left: 5px;
	font-size: 12px;
	color:#FFF;
	font-weight: 400;
}

.tri_2{
	position: absolute;
	z-index: 100;
	width: 0;
	height: 0;
	right:0;
	bottom:0;
	border: 60px solid transparent;
	border-bottom: 60px solid rgba(255,255,255,0.3);
	border-right: 60px solid rgba(255,255,255,0.3);
	-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;	
}

a:hover .tri_2{
	position: absolute;
	z-index: 100;
	width: 0;
	height: 0;
	right:0;
	bottom:0;
	border: 125px solid transparent;
	border-bottom: 125px solid rgba(255,255,255,0.3);
	border-right: 125px solid rgba(255,255,255,0.3);
}

.card_2__content{
	position: absolute;
	z-index: 100;
	color:#FFF;
	top:0%;
	height:250px;
	-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;	
}

.card_2__content h1{
	padding:5px 10px;
	font-size: 18px;
	text-align: right;
	color:#FFF;
	vertical-align: bottom;
}

.card_2__content p{
	font-size: 12px;
}

.card_2 .descarea{
	padding: 0px 10px;
	opacity: 0;
}

.card_2 .descarea .more{
	text-align: right;
	font-weight: 800;
	color:#FFF;
}

a:hover .card_2 .descarea{
	opacity:1.0;
}

プロフィール例

カードにマウスオーバーすると、写真がギュッと丸く小さくなり、SNS,WEBサイトのリンク先など詳細情報が表示されます。
リンク先のアイコンにはfont-awesomeを利用しています。


										（略）
	

		

			
		

		

			
Mike

			

				
text area text area text area text area text area text area text area

				

				
				

			
			
		

	

											（略）
										

/*サンプル３*/

.card_3{
	margin:30px;
	width:250px;
	height:250px;
	background-color: #FFF;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}

.card_3__img{
	width:250px;
	height: 250px;
	position: relative;
	overflow: hidden;
	-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	margin:0px auto;	        	
}

.card_3:hover .card_3__img{
	width:100px;
	margin:15px auto;
	height:100px;
	border-radius: 100px;
}

.card_3__img img{
	width: 100%;
}

.card_3__content{
	display: none;
}

.card_3:hover .card_3__content{
	display: block;
	padding:0px 5px;
}

.card_3 .descarea{
	text-align: center;
	text-decoration: none;
	color:#000;
}

.card_3__content h1{
	padding:2px 10px 0px;
	font-size: 18px;
	text-align: center;
	font-weight: 800;
	color:#000;
	border-bottom: 1px solid #ddd;
}

.card_3__content p{
	font-size: 12px;
}

.card_3 .snsarea a{
	font-size: 14px;
	padding: 0px;
	margin:0px 10px;
	color:#000;
	display: inline;
}

終わりに

如何でしたでしょうか。カードデザインはBootstrap4のコンポーネントにも追加され、これからも浸透する可能性の高いデザインです。もし皆さまの参考になりましたら幸いです。


ストローバッグではお客様のサイトの目的・ユーザに合わせたデザイン及びWebサイト・アプリをご提供致します。詳細につきましては下記リンクをご覧ください。

このエントリーをはてなブックマークに追加
ホームページ制作について 当社の実績一覧
0357943550

※調査内容・データにつきましては自己責任にてご利用ください。利用画像等についてもしも掲載不可のものなどありましたら、お手数ですがお問い合わせフォームよりお知らせください。