Webページ作成用のファイルテンプレート(ニューモーフィズムの場合)
#CSS
Webページ作成用のファイルテンプレート
ニューモーフィズムの場合はCSSを差し替え
code:style.css
/* =================================================================================
フォントの読み込み
================================================================================== */
/* ==== 'M PLUS 1p' - 通常フォント ==== */
/* ==== 'Ubuntu' - 英字デザインフォント ==== */
/* ==== 'M PLUS 1 Code' - 等幅フォント ==== */
/* ==== 'Zen Kurenaido' - 手書きフォント ==== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Zen+Kurenaido&display=swap');
/* ==== 'Font Awesome 6 Free' - アイコンフォント ==== */
@import url('https://use.fontawesome.com/releases/v6.5.2/css/all.css');
/* =================================================================================
色変数
================================================================================== */
:root {
color-scheme: light dark;
--brand: #222244;
--base: light-dark(oklch(from var(--brand) 0.90 0.033 h), oklch(from var(--brand) 0.25 0.033 h));
--text: light-dark(oklch(from var(--brand) 0.25 0.00 h), oklch(from var(--brand) 0.90 0.00 h));
--shadow-light: oklch(from var(--base) calc(l + 0.07) c h);
--shadow-dark: oklch(from var(--base) calc(l - 0.07) c h);
}
/* =================================================================================
CSSのNormalize
================================================================================== */
* {
margin: 0;
border: 0;
outline: 0;
padding: 0;
box-sizing: border-box;
font: 300 1rem/1.25 'Ubuntu', 'M PLUS 1p';
word-break: auto-phrase;
color: var(--text);
}
:where(ul, ol, li) {
padding-left: revert;
}
/* =================================================================================
ニューモーフィズム
================================================================================== */
.neumorphism-up {
box-shadow: -3px -3px 4px var(--shadow-light), 3px 3px 4px var(--shadow-dark);
}
.neumorphism-down {
box-shadow: inset -2px -2px 3px var(--shadow-light), inset 2px 2px 3px var(--shadow-dark);
}
button,
.neumorphism-button {
border-radius: 1.5rem;
padding-top: .125rem;
padding-bottom: .125rem;
box-shadow:
-3px -3px 5px var(--shadow-light),
3px 3px 5px var(--shadow-dark),
inset 0px 0px 0px var(--shadow-light),
inset 0px 0px 0px var(--shadow-dark);
background: linear-gradient(to right bottom, var(--button-left), var(--button-right));
transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
&:hover {
box-shadow:
-4px -4px 6px var(--shadow-light),
4px 4px 6px var(--shadow-dark),
inset 0px 0px 0px var(--shadow-light),
inset 0px 0px 0px var(--shadow-dark);
transform: translateY(-.125px) scale(1.005);
}
&:active {
box-shadow:
0px 0px 0px var(--shadow-light),
0px 0px 0px var(--shadow-dark),
inset -2px -2px 3px var(--shadow-light),
inset 2px 2px 3px var(--shadow-dark);
transform: translateY(.125px) scale(0.995);
}
}
/* =================================================================================
フェード
================================================================================== */
@keyframes fadeIn {
from {
filter: opacity(0);
}
to {
filter: opacity(1);
}
}
@keyframes fadeOut {
from {
filter: opacity(1);
}
to {
filter: opacity(0);
}
}
/* =================================================================================
共通スタイル
================================================================================== */
body {
width: 100dvw;
height: 100dvh;
background: var(--base);
overscroll-behavior: none;
&>div {
width: 100%;
height: 100%;
position: relative;
&>* {
animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1);
position: absolute;
}
}
}
白背景にする場合は色変数付近をこう
code:color-white.css
--base: oklch(from var(--brand) 90% 0.02 h);
--text: oklch(from var(--brand) 30% 0.01 h);
--button-left: oklch(from var(--base) 27% c h);
--button-right: oklch(from var(--base) 31% c h);
--shadow-light: oklch(from var(--base) 95% c h / .67);
--shadow-dark: oklch(from var(--base) 85% c h / .67);
Author : 綾坂こと