cocktail theme
https://gyazo.com/7472d7f9a15a6ba54e56fd181f835a74
https://gyazo.com/cf25cf7cda7c3b07adc7f16f4278f87f
背景が徐々に変化するグラデーションになる
ページリストの文字も徐々に変化する
背景とページリストの文字の色が徐々に変化していくサイバーなテーマ
あんまり気張らずに ほろ酔い＋夢うつつ みたいな気持ちで 記事を書いて行きたかったので作った
気をつけたところ
基本的なパーツの配置は全く変えてないのでロード時にガクッとなる感じを減らす
Scrapboxの下書き感を大切にしたかったので、エディタ部分はほとんどいじらなかった 下書き感をほろ酔い感で代替できたらかっこいいんじゃないかと思った
yutaro.icon
ずっと使ってたら目が疲れてきたのでやめた
アニメーション用のkeyframes
code:style.css
@-webkit-keyframes VerticalSlide {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes VerticalSlide {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-o-keyframes VerticalSlide {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes VerticalSlide {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
navbarの背景を透明にする
bodyの背景をゆったり変化するグラデーションにする
アニメーショングラデーションを簡単に作れる便利なサイト
ここで雛形を作って、あとでちょこちょこ手で調整するのが楽でよかった
code:style.css
.navbar {
}
body {
background-size: 800% 800%;
-webkit-animation: VerticalSlide 300s ease infinite;
-moz-animation: VerticalSlide 300s ease infinite;
-o-animation: VerticalSlide 300s ease infinite;
animation: VerticalSlide 300s ease infinite;
}
文字部分の色の変化
background-sizeをかなり大きくすることで、表示領域ではほぼ同じ色が出るようにしている。
code:style.css
.grid li.page-list-item a .title,
.grid li.page-list-item a .description p,
.grid li.page-list-item a .pin::after,
a.project-home .title,
a.project-home .title:hover,
.page-menu a i {
background-size: 8000% 8000%;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: VerticalSlide 100s ease infinite;
-moz-animation: VerticalSlide 100s ease infinite;
-o-animation: VerticalSlide 100s ease infinite;
animation: VerticalSlide 100s ease infinite;
}
.grid li.page-list-item a .title {
display: initial;
}
page-list-itemを半透明で丸角に
item内の画像が丸角に刺さっていてかっこ悪いことがあったので、content内も少し大きめの丸角に
code:style.css
.grid li.page-list-item a {
background-color: rgba(0, 0 ,0, 0.1);
border-radius: 30px;
}
.grid li.page-list-item a .content {
border-radius: 35px;
}
標準のpinを非表示にした
代わりにブックマークマークを配置
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item a .pin::after {
content: '\f02e';
font-family: 'FontAwesome';
font-size: 16px;
position: absolute;
top: 14px;
left: -4px;
}
page-list-temの上部のborderは透明にした。
高さ調整のためにborder自体は残す
code:style.css
.grid li.page-list-item a .header {
border-top: rgba(240, 240, 240, 0) solid 5px;
}
page-list-tem内の画像が若干目立っていたので、hover状態以外の時は少し透過するようにした
code:style.css
.grid li.page-list-item a .content img {
opacity: 0.7;
}
.grid li.page-list-item:hover a .content img {
opacity: 1;
}
page-menuのhover時の色がちょっと変だったので修正
code:style.css
.page-menu .tool-btn:hover {
background: rgba(0,0,0,0.1);
}
カードのサイズを変更するバーがかなり目立っていたので消した
code:style.css
input.grid-size-range.hidden-xs {
display: none;
}
記事の背景を若干透過させて背景との色の崖を減らす
code:style.css
.page {
background-color: rgba(255,255,255, 0.95);
}