UserCSS:プロジェクトホーム
code:style.css
:root {
--main-color: var(--navbar-bg, DarkGray); /* 主調色 */
--assort-color: var(--card-bg, White); /* 従属色 */
--base-color: var(--body-bg, WhiteSmoke); /* 背景色 */
--accent-color: var(--cursor-color,BlueViolet); /* 強調色 */
--text-color: var(--page-text-color, black); /* 文字色 */
/* 2 ブロジェクトホームのアイコン */
プロジェクトホームのフォント設定
code:style.css
.quick-launch .project-home .title {
/* color: var(--main-color); /* */
color: var(--text-color);
/*font-size: 32px;*/
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.04em;
font-weight: bold;
/*margin: 2px;*/
/*padding: 24px 64px; /* */
padding: 24px 24px; /* */
}
.quick-launch .project-home .icon-home::before {
color: var(--card-title-color); /* */
/* color: var(--text-color); /* */
/* color: var(--main-color); /* */
}
影付き文字
code:stylexx.css
.quick-launch .project-home .title {
text-shadow: -1px -1px 0px var(--assort-color),
1px 1px 0px var(--assort-color),
2px 2px 0px var(--accent-color);
}
縁取り + 影付き文字 1
code:stylexx.css
.quick-launch .project-home .title {
/*text-shadow: -3px -3px 0px var(--main-color),*/
text-shadow: -1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), 1px 1px 0px var(--assort-color, #EEE), 3px 3px 0px var(--accent-color);
}
縁取り + 影付き文字 2
code:stylexx.css
.quick-launch .project-home .title {
text-shadow: -1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), 1px 1px 0px var(--assort-color, #EEE), 2px 2px 0px var(--main-color, #333); }
砂文字 1
code:stylexx.css
.quick-launch .project-home .title {
text-shadow: 0 0 27px var(--accent-color);
}
砂文字 2
code:stylexx.css
.quick-launch .project-home .title {
text-shadow: 0 0 27px var(--main-color);
}
縁取り + 砂文字
code:stylexx.css
.quick-launch .project-home .title {
text-shadow: -1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), 1px 1px 0px var(--assort-color, #EEE), 0px 0px 27px var(--main-color, #333); }
グラデーションテキスト版
code:stylexx.css
.quick-launch .project-home .title {
/*font-style: normal;*/
/*background: linear-gradient( 315deg,*/
background: linear-gradient(to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 10s linear infinite;
animation-direction: reverse;
-webkit-background-clip: text; /* */
-webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
code:stylexx.css
.quick-launch .project-home .title {
background: linear-gradient(to right,
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 10s linear infinite;
animation-direction: reverse;
-webkit-background-clip: text; /* */
-webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
code:stylexx.css
.quick-launch .project-home .title::before {
font-family: 'Font Awesome 5 Free';
font-weight: 600;
font-size: 24px;
content: '\f02d'; /* book */
/*content: '\f00c'; /* チェックマーク */
color: var(--main-color);
/*color: var(--assort-color);*/
/*color: var(--navbar-bg);*/
}
code:stylexx.css
.quick-launch .project-home .title::before {
content: '😆';
font-size: 36px;
}
プロジェクトホームに画像（プロジェクトアイコン）を追加
code:stylexx.css
/* .quick-launch .project-home .title::after { */
.quick-launch .project-home .title::before {
content: ''; /* */
/* content: '💖'; /* */
/* width: 48px;*/
/* width: 50px; /* */
/* height: 20px; /* */
width: 1em; /* */
height: 1em; /* */
/* padding: 20px 50px; /* */
padding: 50px;
/* position: absolute;*/
/* position: right bottom; /* */
position: left bottom;
background-image: var(--project-home-icon); /* */
background-size: cover;
/*background-size: contain;*/
background-repeat: no-repeat; /* */
/*background-attachment: fixed; /* */
/* border-style: solid; border-color: red; /* */
border-radius: 10px; /* */
/* border-radius: 4px; /* */
}
プロジェクトホームに画像（プロジェクトアイコン）を追加
code:style.css
.quick-launch .project-home .title::before {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
margin: 5px; /* */
padding: 10px 50px 0px 0px; /* */
position: left bottom; /* */
background-image: var(--project-home-icon); /* */
background-size: contain; /* */
background-repeat: no-repeat; /* */
border-radius: 5px; /* */
}
code:stylexx.css
.quick-launch .project-home .title::after {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
/*width: 150px; /* */
/*height: 20px; /* */
margin: 10px; /* */
/* padding: 8px 0px 0px 60px; /* */
padding: 8px 0px 0px 360px; /* */
position: center bottom; /* */
/* position: center center; /* */
background-image: var(--project-home-icon-B); /* */
background-size: contain; /* */
/* background-size: cover; /* */
background-repeat: no-repeat; /* */
/*border-radius: 5px; /* */
}
code:style.css
.quick-launch .project-home .title::after {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
margin: 10px; /* */
padding: 8px 0px 0px 360px; /* */
position: center bottom; /* */
background-size: contain; /* */
background-repeat: no-repeat; /* */
}
テキストの挿入
code:stylexx.css
.quick-launch .project-home .title::before {
content: '開運招福 無病息災 '; /* */
font-size: 0.8em;
color: var(--accent-color, red);
}
code:stylexx.css
.quick-launch .project-home .title::after {
content: ' 千客万来 商売繁盛 大願成就'; /* */
font-size: 0.8em;
color: var(--accent-color, red);
}
code:stylexx.css
.quick-launch .project-home .title::after {
content: '私の語ろうとする真実の事柄は、みんな真っ赤な嘘である'; /* */
font-size: 0.6em;
font-weight: normal;
color: var(--main-color, red);
width: 1em; /* */
height: 1em; /* */
margin: 5px; /* */
padding: 4px 0px 0px 4px; /* */
}
https://img.shields.io/badge/UserCSS-プロジェクトホーム-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon
;){kind=link}
;/*){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}