𓅹 kitasenju design blog 𓅸

humans are imperfect

html/css

HTMLのタグにデータを仕込む

同じjsを使いつつ、処理を出し分けたい時に使った。 I used it when I wanted to use the same js but separate the processes. <article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> const article = document.getElementById('electric-cars'); article.dataset.columns // "3" article.…

pugでループ

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 list = [ { num: 1, txt: 'aaa.jpg', }, { num: 2, t…

cache control with random value in pug

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…

sassでmediaQuery

$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…

広告部分を回転させるCSS

.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.…

CSSで色々な形

いろんな形 https://css-tricks.com/the-shapes-of-css/

あたらしいblink

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

blink loading with css

#loading{ animation: blink 0.5s infinite alternate; } @keyframes blink{ 0% { color: #000000 } 50% { color: #aaaaaa } 100% { color: #000000 } }

マニアックなHTML機能

カーソルカスタマイズ グラデリピート 縦書き Spinning Ring Text in Pure CSS – CodeMyUI ボタンを立体にする CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説! | JAJAAAN custom scrollbar web2.0 https://codepen.io/xposedbones/pen/Jnzpq

縦書き css

-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: center; display: inline-block;

アニメgifのリスタート

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>…

jQueryで複製

複製する $(function() { $(document).on('click', '#button', function() { $('#sample li').clone().appendTo($('#sample')); }); });

Prepros使うメモ

はじめに タスクランナーをインストールしたりするの使うのがだるくなってしまったので、自分サイト用にGUI付きのタスクランナーアプリPreprosを使う。 https://prepros.io/ エディタではなく、シンプルなタスクランナーという感じで、pug/sass/typescriptな…

〠FOOTER〠