Summary
ポケモンカードのような表面のエフェクトを作成するためのCSSのコレクション。Reference
Pokémon Cards CSS Holographic Effecthttps://poke-holo.simey.me/
@-moz-document domain("mail.google.com") {
.ii, textarea {
font-family: Osaka-Mono !important;
font-size: 0.9em !important;
line-height:1.3 !important;
}
.editable {
font-family: Osaka-Mono !important;
font-size: 0.9em !important;
line-height:1.3 !important;
}
}
@-moz-document domain("mail.google.com") {
.ii, textarea {
font-family: monospace !important;
font-size: 0.9em !important;
line-height:1.3 !important;
}
.editable {
font-family: monospace !important;
font-size: 0.9em !important;
line-height:1.3 !important;
}
}
ol {
counter-reset: item;
}
ol li {
display: block;
}
ol > li::before {
content: counters( item, "." )". ";
counter-increment: item;
}
ol {
counter-reset: item 9;
}
li ol {
counter-reset: item;
}
ol li {
display: block;
}
ol > li::before {
content: counters( item, "." )". ";
counter-increment: item;
}
# gem install less
style.less にソースコードを書いて、ジェネレート。
$ lessc style.less
* {
margin: 0;
padding: 0;
}
html, body, {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
p {
font-size: 16px;
line-height: 1em;
}
p em {
font-size: 24px;
}
p {
font-size: 16px;
line-height: 1;
}
p em {
font-size: 24px;
}
p {
font-size: 16px;
line-height: 1em = 16px;
}
p em {
font-size: 24px;
line-height: 16px;
}
p {
font-size: 16px;
line-height: 1 = 16px;
}
p em {
font-size: 24px;
line-height: 24px;
}
function fileLinks() {
var fileLink;
if (document.getElementsByTagName('a')) {
for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
if (fileLink.href.indexOf('.pdf') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'pdfLink';
}
if (fileLink.href.indexOf('.doc') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'docLink';
}
if (fileLink.href.indexOf('.zip') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'zipLink';
}
}
}
}
window.onload = function() {
fileLinks();
}
a:hover {
text-decoration: none;
}
.pdfLink {
padding-right: 19px;
background: url(pdf.gif) no-repeat 100% .5em;
}
.docLink {
padding-right: 19px;
background: url(doc.gif) no-repeat 100% .5em;
}
.zipLink {
padding-right: 17px;
background: url(zip.gif) no-repeat 100% .5em;
}
pre.code {
font-family: monospace;
white-space:pre;
overflow:scroll;
}
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction
:call HtmlEscape()
body {
background: #fa0 url(stripe_1px.gif);
}