brand-icon
https://scrapbox.io/api/pages/suto3scratchpad/めでたい/icon#.png
https://gyazo.com/b127eec709b9e9882e7380073f5e836c
https://lh3.googleusercontent.com/a-/AAuE7mCsJpT3Img67JJA_VJ7dQZQszuUwPj5AUlX5_grzA#.png
code:style.css
body{
--logo-url: url('/api/pages/suto3scratchpad/brand-icon/icon'); /* */
}
code:style.css
.brand-icon {
content: '';
width: 40px;
height: 40px;
/* position: absolute; /* */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white; /* 白地に井戸を表示する*/
border-radius: 50%;/*角丸はお好みで*/
border: 4px solid transparent;
background-origin: padding-box;
margin-left: -4px; /* */
}
code:stylexx.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url('/api/pages/suto3scratchpad/brand-icon/icon');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white; /* 白地に井戸を表示する*/
border-radius: 50%;/*角丸はお好みで*/
border: 4px solid transparent;
background-origin: padding-box;
margin-left: -4px;
}
code:stylexx.css
.brand-icon {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.brand-icon:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
code:style.css
@keyframes icon-shake {
0% { transform:translate(0, 0) rotate(0); }
16.66% { transform:translate(2px, -2px) rotate(-5deg); }
33.32% { transform:translate(2px, 1px) rotate(5deg); }
49.98% { transform:translate(0, 0) rotate(0); }
66.64% { transform:translate(-2px, -2px) rotate(5deg); }
83.30% { transform:translate(-2px, 3px) rotate(-5deg); }
100% { transform:translate(0, 0) rotate(0); }
}
.brand-icon:hover {
animation: 0.15s icon-shake linear infinite;
}
code:style.css
@media only screen and (min-width: 480px) {
content: "";
/*background-size: 512px 1024px;*/
display: block;
width: 512px;
height: 1024px;
position: fixed;
right: -80px;
bottom: -192px;
}
content: "";
background-size: 400px 400px; /* */
display: block;
width: 400px;
height: 400px;
position: fixed;
right: 0px;
bottom: 0px;
}
content: "";
background-size: 200px 200px; /* */
display: block;
width: 200px;
height: 200px;
position: fixed;
left: 0px;
bottom: 0px;
}
}
code:style.css
@media only screen and (min-width: 960px) {
content: "";
background-image: url('/api/pages/suto3scratchpad/クオリアさん/icon');
/* background-image: url('/api/pages/suto3scratchpad/Qualia-san/icon');*/
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
bottom: 0px;
}
content: "";
/* background-image: url('/api/pages/suto3scratchpad/クオリアさん/icon'); */
/* background-image: url('/api/pages/suto3scratchpad/Qualia-san/icon'); /* */
background-image: url('/api/pages/qualia-san/Qualia-san/icon');
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
bottom: 0px;
}
}
code:style.css
@media only screen and (min-width: 960px) {
content: "";
/* background-image: url('/api/pages/villagepump/現場猫/icon'); /* */
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
top: 40px;
}
}
code:style.css
@media only screen and (min-width: 960px) {
content: "";
background-image: url('/api/pages/villagepump/現場猫/icon'); /* */
background-size: 255px 255px; /* */
display: block;
width: 255px;
height: 255px;
position: fixed;
right: 0px;
top: 40px; /* */
/* top: 296px; /* */
}
code:style.css
@media only screen and (min-width: 960px) {
content: "";
background-size: 255px 383px; /* */
display: block;
width: 255px;
height: 383px;
position: fixed;
right: 0px;
/* top: 40px; /* */
top: 296px; /* */
}
code:style.css
@media only screen and (min-width: 1366px) {
content: "";
/* background-size: 255px 767px; /* */
background-size: 280px 840px; /* */
display: block;
/* width: 255px; /* */
width: 280px; /* */
height: 840px;
position: fixed;
left: 0px;
top: 40px; /* */
/* top: 120px; /* */
/* top: 296px; /* */
}
code:style.css
@media only screen and (min-width: 1366px) {
content: "";
/* background-size: 255px 767px; /* */
background-size: 280px 840px; /* */
display: block;
/* width: 255px; /* */
width: 280px; /* */
height: 840px;
position: fixed;
left: 0px;
top: 40px; /* */
/* top: 120px; /* */
/* top: 296px; /* */
}
}
code:style.css
@media only screen and (min-width: 1366px) {
content: "";
background-image: url('/api/pages/suto3scratchpad/memo-memo/icon'); /* */
background-size: 255px 767px; /* */
/* background-size: 255px 255px; /* */
display: block;
/* width: 255px; /* */
width: 255px; /* */
/*height: 255px; /* */
height: 767px; /* */
position: fixed;
left:10px;
/* top: 40px; /* */
top: 50px; /* */
/* top: 120px; /* */
/* top: 296px; /* */
}
}
Qualia-san
ヨシ!
cheat-sheet
python-cheat-sheet