css@pincard
#UserCSS
code:style.css
@keyframes flip {
0% { transform: perspective(600px) rotateY(0deg); }
100% { transform: perspective(600px) rotateY(180deg); }
}
.page-list {
.grid {
li.pin {
a {
width: 100%;
/* background-color: rgb(229 227 226 / 80%); */
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
outline: none;
.pin {
display: none;
}
.content {
height: 100%;
flex-direction: row-reverse;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
.header.pinned {
position: absolute;
bottom: 25px;
right: 0;
padding: 0;
width: auto;
display: block;
background-color: #fff;
z-index: 2;
.title {
/* kyre 以外 */
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #272822 50%, #272822 50%);
background-size: 200% 100%;
background-position-x: 100%;
padding: 0 5px 0 7px;
width: auto;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
}
.icon {
display: none;
}
.description {
display: none;
}
}
&:hover {
outline: none;
.content {
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
.header.pinned {
.title {
background-position-x: 0;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
}
}
}
}
/* a */
&:first-of-type {
grid-column-start: span 2;
grid-row-start: span 2;
a {
.content {
background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png");
background-position: center;
background-size: 110%;
/* 上下左右に10pxの余白を作る */
background-origin: content-box;
/* パディングボックスに基づいて描画 */
padding: 10px;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
&::after {
/* 画像を先に読み込んでおくことで表示ズレを防ぐ */
content: "";
background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png");
opacity: 0;
visibility: hidden;
}
.header.pinned {
background-color: transparent;
bottom: 35px;
.title {
display: none;
}
}
}
&:hover {
.content {
background-size: 130%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
}
}
}
&:nth-of-type(5) {
/* last-of-typeにしたいけど効かない */
margin-bottom: 3em;
}
&data-page-title="tags" a {
.content {
background-image: url(https://scrapbox.io/files/675473d4c59207dc2bda8b8e.svg);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
.title {
display: none;
}
&:hover {
.content {
animation: flip .6s ease;
}
}
}
&data-page-title="日記" a {
.content {
background-image: url(https://i.gyazo.com/2c0cd8093c7c04db76a86d4998aaeca9.png);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
.title {
display: none;
}
}
&data-page-title="Big Kyure_A is watching you..." a {
.content {
background-image: url(https://i.gyazo.com/55ca2304d0064c5e420acdaa87fd2671.png);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
.title {
display: none;
}
}
&data-page-title="books" a {
.content {
background-image: url(https://i.gyazo.com/070e271f689cf3020848c2f329c4c6c0.png);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
.title {
display: none;
}
}
&data-page-title="settings" a {
.content {
background-image: url(https://scrapbox.io/files/67546ce3899bd2d46ff21c7a.svg);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
/* 上下左右に 40px の余白を作る */
background-origin: content-box;
/* パディングボックスに基づいて描画 */
padding: 10px;
&::after {
/* 画像を先に読み込んでおくことで表示ズレを防ぐ */
content: "";
/* background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png"); */
opacity: 0;
visibility: hidden;
}
}
&:hover {
.content {
transform: rotate(1080deg);
transition: all 3s ease-in-out;
}
}
.title {
display: none;
}
}
}
}
}