html/css
https://codepen.io/kitasenjudesign/pen/WNmROJY body{ --col1: #000; --col2: #ea0; width: 2000px; height: 100px; /*background-image: url("circle.png");*/ background-repeat: repeat; background-size: 100px 100px; background-image: repeating-li…
I didn't know I can use raw (non-escaped) svg for css background. background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="blue" /><circle cx="75" cy="25" r="25" fill="blue" /></circle></circle></svg>
親をdisplay: flex 親をalignItems: center, justifyContent: center. dom.style.color = "#fff"; dom.style.position="relative"; dom.style.display = "flex"; dom.style.alignItems = "center"; dom.style.justifyContent = "center"; let dom2 = documen…
code https://codepen.io/kitasenjudesign/pen/XWoBNaY ref. medium.com
/* <system section="theme" selected="life"> */ @import "/css/theme/life/life.css"; /* </system> */ /* <system section="background" selected="pattern-06"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-06.png'); background-repeat: repeat; background-attachment: fixed; backgrou…</system>
I checked inside of mode-viewer.js. The AR Quick Look code was inside it. <model-viewer> <html> <head> <meta charset="utf-8"> <title>test</title> <script> window.onload=()=>{ const modelUrl = new URL("g5.usdz", self.location.toString()); /* if (this.arScale === 'fixed') { if (modelUr…</meta></head></html></model-viewer>
スペースある／なしで意味が違う csshtml.work ul.A - ulタグのクラスAを指定 ul .A - ulの子要素でのクラスA ul:first-child - １つ目のul要素 ul :first-child - 全ての子要素
同じjsを使いつつ、処理を出し分けたい時に使った。 注意！タグに書くのは小文字、大文字を書いても小文字になる。ただマイナスを入れるとjs側はマイナスのところは大文字になる（キャメルケースがケバブケースになる） I used it when I wanted to use the …
- for ( i=0; i <= 43 ; i++ ) div( id="t" + i ) h2 for：特定の回数ループ ul - for (var x = 0; x < 3; x++) li item #{x} h2 each：配列をループ ul - var list = ['1','2','3'] each item in list li item #{item} h2 ついでに連想配列each ul - var li…
pugでdeployごとにキャッシュをしなくする - var cache = Math.random() link(rel="stylesheet" href=`./css/indexKira2.processed.css?${cache}` id="css4") link(rel="stylesheet" href=`./css/indexKira.processed.css?${cache}` id="css3") link(rel="st…
$breakpoints: ('sm': 'screen and (max-width: 400px)','md': 'screen and (max-width: 700px)','lg': 'screen and (max-width: 1200px)' ) !default @mixin mq($breakpoint: md) @media #{map-get($breakpoints, $breakpoint)} @content .myBr display: in…
.adsbygoogle,#touch-top-entry-header-ad,.google-afc-user-container{ position: absolute; filter: opacity(100); animation: rotate-anime 3s linear infinite; transform: scale(0.1); } @keyframes rotate-anime { 0% {transform: rotate3d(0.2,0.7,0.…
いろんな形 https://css-tricks.com/the-shapes-of-css/
blur blink https://codepen.io/kitasenjudesign/pen/BadpmMJ underline blink https://codepen.io/kitasenjudesign/pen/LYjxedj bg blink https://codepen.io/kitasenjudesign/pen/MWvJQeJ bg blink https://codepen.io/kitasenjudesign/pen/mdMRXBY
#loading{ animation: blink 0.5s infinite alternate; } @keyframes blink{ 0% { color: #000000 } 50% { color: #aaaaaa } 100% { color: #000000 } }
カーソルカスタマイズ グラデリピート 縦書き Spinning Ring Text in Pure CSS – CodeMyUI ボタンを立体にする CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！ | JAJAAAN custom scrollbar web2.0 https://codepen.io/xposedbones/pen/Jnzpq
-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: center; display: inline-block;
how to restart animated gifs 複数gifのスライドショーそれぞれ最初から再生させる。 <html> <head> <style> body{ margin: 0px; padding: 0px; color: #000; background-color: #008800; } .container { width: 100%; height: 100%; image-rendering: pixelated; } .bg0{ back</head></html>…
複製する $(function() { $(document).on('click', '#button', function() { $('#sample li').clone().appendTo($('#sample')); }); });
はじめに タスクランナーをインストールしたりするの使うのがだるくなってしまったので、自分サイト用にGUI付きのタスクランナーアプリPreprosを使う。 https://prepros.io/ エディタではなく、シンプルなタスクランナーという感じで、pug/sass/typescriptな…
