CSSのみでスライドアップ風のバナーを実現_技術三昧ブログ

ホーム » ブログ » CSSのみでスライドアップ風のバナーを実現

@2018/08/31

今日はCSSのみでスライドアップ風のバナーを実現する方法を公開します。
もちろん、当サイトから公開のものはコピペだけで実例のイメージを確認できます。

DEMOページ

お知らせ：
便利ジャパンはIT三昧で掲載している技術を活用し、開発された便利なサイトです。

ぜひbenri.jpへアクセスしてみてください。

以下のソースをコピペで保存し、ブラウザでページを確認してください。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@CHARSET "utf-8";
:root {
	--base-color: #FFF;
	--main-color: #1629CC; 
	--accent-color: blue;
	--bg-color: #CCC;
	--bg-color-on: #1629CC;
	--color-from: #1629CC;
	--color-to: #2FCDED;
	--border-color: #CCC;
	--border-color-on: #1629CC;
	--txt-color: #333;
	--txt-color-on: #FFF;
	--device-sp-width: 640px;
	--device-tablet-width: 960px;
	--width-side-menu: 18%;
	--width-main-content: 64%;
}
/*-------------------------------------------------------
 * SlideUp CSS
 *------------------------------------------------------*/
.SlideUpWrap {
	border: 1px solid #CCC;
	border: 1px solid var(--border-color);
}
.SlideUp {
	width: 100%;
	height: 100%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	letter-spacing: 0;
}
.SlideUp__content {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	position: absolute;
	top: -2.2rem;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	color: #fff;
	background: var(--bg-color);
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: opacity 0.6s, 
	-webkit-transform 0.6s;
	transition: opacity 0.6s, transform 0.6s;
}
.SlideUp:hover .SlideUp__content {
	opacity: 0.9;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	background: var(--bg-color-on);
}
.SlideUp__komidashi {
	padding: 0.5rem 0;
	height: 2.2rem;
	width: 100%;
	font-weight: bold;
	font-size: 90%;
	color: #222;
	color: var(--txt-color);
	font-weight: bolder;
	box-sizing: border-box;
	background-color: #CCC;
    background-color: var(--bg-color);
    background-image: -ms-linear-gradient(top, #FFF, #CCC);
    background-image: -moz-linear-gradient(top, #FFF, #CCC);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #CCC));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#CCC');
}
.SlideUp:hover .SlideUp__komidashi {
	background: var(--main-color);
	width: 100%;
	color: #FFF;
	color : var(--txt-color-on);
}
.SlideUp__txt {
	margin: auto 1rem;
	line-height: 1.8;
	text-align: justify;
	word-break: break-all;
	font-size: 90%;
}
.SlideUp__txt:last-of-type {
	text-align: center;
}
.SlideUp__txt:last-of-type a {
	/*
	color: #FFF;
	font-weight: bolder;
	*/
}
img.SlideUp__bgImg {
	 object-fit: cover;
}
.SlideUp__txt a,
.SlideUp__txt a:link,
.SlideUp__txt a:visited,
.SlideUp__txt a:hover,
.SlideUp__txt a:active {
	color: #FFF;
	color: var(txt-color-on);
}
/*-------------------------------------------------------
 * 形状 CSS (共通) TODO 補全が必要
 *------------------------------------------------------*/
.Shap__square--250 {
	width: 250px;
	height: 250px;
}

/*-------------------------------------------------------
 * カスタマイズCSS　任意編集しても構いません
 *------------------------------------------------------*/
footer {
	width: 100%;
	margin: 0.5rem 0;
	text-align: center;
}

</style>
</head>
<body>
<header>
	<nav id="global-nav" class="nav-global">
		当ページはslide box風のデモページ。<br>
		当サイト　<a href="https://www.zanmai.net/" target="_blank">IT三昧</a>　はWeb系の技術文章を沢山公開しています。<br>
		また、<a href="https://www.benri.jp/" target="_blank">便利ジャパン</a>はIT三昧での技術知識を活用にして開発された、便利なサイトです。<br>
		システムエンジニアの方々はぜひご覧ください。
		<br>
	</nav>
</header>
<div class="contents">
	<div style="width:100%;margin: 1rem auto;text-align:center;">
		<!-- ここからスライドボックスの本体 Start -->
		<div class="SlideUpWrap Shap__square--250">
			<div class="SlideUp">
				<img class="SlideUp__bgImg" style="" src="https://www.benri.jp/img/toppage/toppage_calendar.jpg" alt="便利カレンダー"> 
				<dl class="SlideUp__content">
					<dt class="SlideUp__komidashi">カレンダー早見表</dt>
					<dd class="SlideUp__txt">
						各種カレンダーをオンラインで確認できます。
					</dd>
					<dd class="SlideUp__txt">
						<a href="https://www.benri.jp/calendar/kyuureki" target="_blank"> ★：旧暦カレンダー</a>
					</dd>
					<dd class="SlideUp__txt">
						<a href="https://www.benri.jp/calendar/etomonth" target="_blank"> ★：干支カレンダー</a>
					</dd>
					
					<dd class="SlideUp__txt">
						<a class="btn btn1" href="https://www.benri.jp/calendar/" target="_blank">詳細</a>
					</dd>
					
				</dl>
			</div>
		</div>
		<!-- //ここまでスライドボックスの本体 END -->
	</div>
</div>

<footer>
	Powered by <a href="https://www.benri.jp/">便利ジャパン</a>
</footer>

</body>

最後ながら、デモページを確認したい方々は、ぜひ便利ジャパンへご覧ください。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/296.html

閉じる

CSSのみでスライドアップ風のバナーを実現_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！