テンプレート　design

アニメーション・デザイン

●
Now Loding...

https://epic-spinners.epicmax.co/#/

html
css

HTML

												
<div class="atom-spinner">
<div class="spinner-inner">
<div class="spinner-line"></div>
<div class="spinner-line"></div>
<div class="spinner-line"></div>
<div class="spinner-circle">
<span class="ac">Now Loding...</span>
</div>
</div>
</div>

CSS

												
.atom-spinner, .atom-spinner * { box-sizing: border-box; }
.atom-spinner { width: 10rem; height: 10rem; overflow: hidden; }
.atom-spinner .spinner-inner { position: relative; display: block; width: 100%; height: 100%; }
.atom-spinner .spinner-circle { position: absolute; top: 50%; left: 50%; display: block; font-size: calc(60px * 0.24); color: #ff1d5e; transform: translate(-50%, -50%); }
.atom-spinner .spinner-line { position: absolute; width: 100%; height: 100%; border-radius: 50%; animation-duration: 1s; border-left-width: calc(60px / 25); border-top-width: calc(60px / 25); border-left-color: #ff1d5e; border-left-style: solid; border-top-style: solid; border-top-color: transparent; }
.atom-spinner .spinner-line:nth-child(1) { animation: atom-spinner-animation-1 1s linear infinite; transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg); }
.atom-spinner .spinner-line:nth-child(2) { animation: atom-spinner-animation-2 1s linear infinite; transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg); }
.atom-spinner .spinner-line:nth-child(3) { animation: atom-spinner-animation-3 1s linear infinite; transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg); }
@keyframes atom-spinner-animation-1 {
100% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); }
}
@keyframes atom-spinner-animation-2 {
100% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); }
}
@keyframes atom-spinner-animation-3 {
100% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); }
}

https://30-seconds.github.io/30-seconds-of-css/

html
css

HTML

												
<div class="button-border"><button class="button">Submit</button></div>

CSS

												
.button { position: relative; padding: 12px 40px 10px; color: #ffffff; background-color: rgba(0,110,174,.50); border: none; outline: none; }
.button:before,
.button:after { position: absolute; content: ''; width: 0px; height: 24px; border: 0 solid transparent; transition: all 0.25s; }
.button:before { top: -5px; left: 0px; border-top: 2px solid rgba(0,110,174,.50); }
.button:after { bottom: -5px; right: 0px; border-bottom: 2px solid rgba(0,110,174,.50); }
.button:hover { background-color: rgba(0,110,174,.50); }
.button:hover:before,
.button:hover:after { width: 100%; height: 100%; }

Now Loding...

html
css

HTML

												
<p>Now Loding...</p>
<div class="donut"></div>

CSS

												
.donut { display: inline-block; width: 30px; height: 30px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #7983ff; border-radius: 50%; animation: donut-spin 1.2s linear infinite; }
@keyframes donut-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

ホバー時にboxが
ズームされます!

html
css

HTML

												
<p class="hover-shadow-box-animation">ホバー時にboxがズームされます!</p>

CSS

												
.hover-shadow-box-animation { display: inline-block; margin: 10px; vertical-align: middle; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; transition-duration: 0.3s; transition-property: box-shadow, transform; }
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active { box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5); transform: scale(1.2); }

Pretty text underline without clipping descending letters.改行されてもラインがちゃんと引かれています

html
css

HTML

												
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.改行されてもラインがちゃんと引かれています</p>

CSS

												
.pretty-text-underline { display: inline; text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9; background-image: linear-gradient(90deg, currentColor 100%, transparent 100%); background-position: bottom; background-repeat: no-repeat; background-size: 100% 1px; }
.pretty-text-underline::-moz-selection { text-shadow: none; background-color: rgba(0, 150, 255, 0.3); }
.pretty-text-underline::selection { text-shadow: none; background-color: rgba(0, 150, 255, 0.3); }

backgroundカラー

white
black

html
css

HTML

												
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

CSS

												
.switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgba(0, 0, 0, 0.25); border-radius: 20px; transition: all 0.3s; }
.switch::after { position: absolute; top: 1px; left: 1px; content: ''; width: 18px; height: 18px; background-color: white; border-radius: 18px; transition: all 0.3s; }
input[type='checkbox']:checked + .switch::after { transform: translateX(20px); }
input[type='checkbox']:checked + .switch { background-color: #7983ff; }
.offscreen { position: absolute; left: -9999px; }

html
css

HTML

												
<div class="heart"></div>

CSS

												
.heart { width: 100px; height: 100px; margin: 0 auto; background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat; background-position: 0 0; cursor: pointer; animation: fave-heart 1s steps(28); }
.heart.on { background-position: -2800px 0; transition: background 1s steps(28); }
@keyframes fave-heart {
	0% { background-position: 0 0; }
	100% { background-position: -2800px 0; }
}

sample110 — Samuel Serif

The only skills I have the patience to learn are those that have no real application in life.

sample86 — Abraham Pigeon

The real fun of living wisely is that you get to be smug about it.

html
css

HTML

												
<figure class="snip1563">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample110.jpg" alt="sample110" />
<figcaption>
<h3>Samuel Serif</h3>
<p>The only skills I have the patience to learn are those that have no real application in life.</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1563 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample86.jpg" alt="sample86" />
<figcaption>
<h3>Abraham Pigeon</h3>
<p>The real fun of living wisely is that you get to be smug about it.</p>
</figcaption>
<a href="#"></a>
</figure>

CSS

												
.snip1563 { background-color: #fff; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; overflow: hidden; position: relative; text-align: right; width: 100%; }
.snip1563:nth-of-type(1) { margin-right: 3rem; }
.snip1563 *,
.snip1563 *:before,
.snip1563 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; }
.snip1563 img { width: 100%; backface-visibility: hidden; vertical-align: top; }
.snip1563:before,
.snip1563:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color: #b81212; opacity: 0.5; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; }
.snip1563:before { -webkit-transform: skew(30deg) translateX(80%); transform: skew(30deg) translateX(80%); }
.snip1563:after { -webkit-transform: skew(-30deg) translateX(70%); transform: skew(-30deg) translateX(70%); }
.snip1563 figcaption { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1; bottom: 0; padding: 20px 20px 20px 40%; }
.snip1563 figcaption:before,
.snip1563 figcaption:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #b81212; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); content: ''; opacity: 0.5; z-index: -1; }
.snip1563 figcaption:before { -webkit-transform: skew(30deg) translateX(100%); transform: skew(30deg) translateX(100%); }
.snip1563 figcaption:after { -webkit-transform: skew(-30deg) translateX(90%); transform: skew(-30deg) translateX(90%); }
.snip1563 h3,
.snip1563 p { margin: 0; opacity: 0; letter-spacing: 1px; }
.snip1563 h3 { font-family: 'Teko', sans-serif; font-size: 36px; font-weight: 700; line-height: 1em; text-transform: uppercase; }
.snip1563 p { font-size: 0.9em; }
.snip1563 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
.snip1563:hover h3,
.snip1563.hover h3,
.snip1563:hover p,
.snip1563.hover p { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0.9; }
.snip1563:hover:before,
.snip1563.hover:before { -webkit-transform: skew(30deg) translateX(30%); transform: skew(30deg) translateX(30%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.snip1563:hover:after,
.snip1563.hover:after { -webkit-transform: skew(-30deg) translateX(20%); transform: skew(-30deg) translateX(20%); }
.snip1563:hover figcaption:before,
.snip1563.hover figcaption:before { -webkit-transform: skew(30deg) translateX(50%); transform: skew(30deg) translateX(50%); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.snip1563:hover figcaption:after,
.snip1563.hover figcaption:after { -webkit-transform: skew(-30deg) translateX(40%); transform: skew(-30deg) translateX(40%); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

Hover this text to see the effect!

html
css

HTML

												
<p class="hover-underline-animation">Hover this text to see the effect!</p>

CSS

												
.hover-underline-animation { position: relative; display: inline-block; color: #0087ca; }
.hover-underline-animation::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 2px; background-color: #0087ca; transform: scaleX(0); transform-origin: bottom right; transition: transform 0.25s ease-out; }
.hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }

PURE CSS
PARALLAX PIXEL STARS

https://codepen.io/saransh/pen/BKJun

Google Chrome
Mozilla Firefox
InternetExplorer
Apple Safari
Opera

Black and White

タイトルデザイン

タイトル装飾

html
css

HTML

												
<p class="ribbon1">タイトル装飾</p>

CSS

												
.ribbon1 { position: relative; padding: 10px; font-size: 16px; color: #ffffff; line-height: 20px; background: #000000; box-shadow: 0 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); }
.ribbon1:before { position: absolute; top: 100%; left: -10px; content: ""; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; }

タイトル装飾

html
css

HTML

												
<p class="ribbon2">タイトル装飾</p>

CSS

												
.ribbon2 { position: relative; padding: 10px; font-size: 16px; color: #ffffff; line-height: 20px; background: #000000; box-shadow: 10px 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); }
.ribbon2:before { position: absolute; top: 100%; left: -10px; content: ""; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; }
.ribbon2:after { position: absolute; top: -8px; right: -10px; content: ""; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-bottom-color: #4f4f4f; }

タイトル装飾

html
css

HTML

												
<p class="stripe1">タイトル装飾</p>

CSS

												
.stripe1 { padding: 10px; font-size: 16px; color: #ffffff; line-height: 20px; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 10px, #000000 10px, #000000 20px); }

タイトル装飾

html
css

HTML

												
<p class="stripe2">タイトル装飾</p>

CSS

												
.stripe2 { padding: 10px; font-size: 16px; color: #ffffff; line-height: 20px; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px); }

タイトル装飾

html
css

HTML

												
<p class="stripe3">タイトル装飾</p>

CSS

												
.stripe3 { position: relative; padding: 10px; font-size: 16px; line-height: 20px; }
.stripe3:after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 5px; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px); }

テーブルデザイン

テスト	テストテスト
テスト	テストテスト
テスト	テストテスト
テスト	テストテスト

html
css

HTML

												
<table>
<tr>
<th>テスト</th>
<td>テストテスト</td>
</tr>
<tr>
<th>テスト</th>
<td>テストテスト</td>
</tr>
<tr>
<th>テスト</th>
<td>テストテスト</td>
</tr>
<tr>
<th>テスト</th>
<td>テストテスト</td>
</tr>
</table>

CSS

												
table{ width: 100%; border-collapse: collapse; }
table tr{ border-bottom: solid 2px white; }
table tr:last-child{ border-bottom: none; }
table th{ position: relative; width: 30%; padding: 10px 0; color: white; text-align: left; text-align: center; background-color: #52c2d0; }
table th:after{ position: absolute; top:calc(50% - 10px); right:-10px; content: ""; display: block; width: 0px; height: 0px; border-left: 10px solid #52c2d0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
table td{ width: 70%; padding: 10px 0; text-align: left; text-align: center; background-color: #eee; }

シェアボタン

html
css

HTML

												
<ul>
<li>
<a href="#">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
<span> - Facebook</span>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter" aria-hidden="true"></i>
<span> - Twitter</span>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-google-plus" aria-hidden="true"></i>
<span> - Google</span>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span> - Instagram</span>
</a>
</li>
</ul>

CSS

												
ul { display:flex; margin: 5rem 0; padding:0; }
ul li { margin:0 5px; list-style:none; }
ul li a .fab { padding-right: 14px; font-size: 40px; color: #262626; line-height:80px; transition: .5s; }
ul li a span { position:absolute; top: 30px; margin:0; padding:0; color: #262626; letter-spacing: 4px; transition: .5s; }
ul li a { display:absolute; display:block; width:200px; height:80px; padding-left: 20px; text-decoration: none; text-align:left; background: #fff; transform: rotate(-30deg) skew(25deg) translate(0,0); transition:.5s; box-shadow: -20px 20px 10px rgba(0,0,0,.5); }
ul li a:before { position: absolute; top:10px; left:-20px; content: ''; width:20px; height:100%; background: #b1b1b1; transform: .5s; transform: rotate(0deg) skewY(-45deg); }
ul li a:after { position: absolute; bottom:-20px; left:-10px; content: ''; width:100%; height:20px; background: #b1b1b1; transform: .5s; transform: rotate(0deg) skewX(-45deg); }
ul li a:hover { transform: rotate(-30deg) skew(25deg) translate(20px,-15px); box-shadow: -50px 50px 50px rgba(0,0,0,.5); opacity: 1; }
ul li:hover .fab { color:#fff; }
ul li:hover span { color:#fff; }
ul li:hover:nth-child(1) a{ background: #3b5998; }
ul li:hover:nth-child(1) a:before{ background: #365492; }
ul li:hover:nth-child(1) a:after{ background: #4a69ad; }
ul li:hover:nth-child(2) a{ background: #00aced; }
ul li:hover:nth-child(2) a:before{ background: #097aa5; }
ul li:hover:nth-child(2) a:after{ background: #53b9e0; }
ul li:hover:nth-child(3) a{ background: #dd4b39; }
ul li:hover:nth-child(3) a:before{ background: #b33a2b; }
ul li:hover:nth-child(3) a:after{ background: #e66a5a; }
ul li:hover:nth-child(4) a{ background: #e4405f; }
ul li:hover:nth-child(4) a:before{ background: #d81c3f; }
ul li:hover:nth-child(4) a:after{ background: #e46880; }

アニメーション・デザイン

Samuel Serif

Abraham Pigeon

ポップアップ・ウィンドウ・タイトル

タイトルデザイン

テーブルデザイン

シェアボタン