FANCY-BORDER-RADIUSはユニークな形をインタラクティブに作成できるジェネレーターツールです。ユニークと言ってもSVGのような柔軟な対応はできませんが、コードもシンプルで扱いやすいのは利点ですね。 SVGが便利すぎてなんでもSVGで作りたくなりますが、少し印象的な形状にしたいけどシンプルなソースにしたい、という時はborder-radiusが最適です。 FANCY-BORDER-RADIUS
Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデータ属性で管理できます。 <div data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease-out-bounce" ></div>楽でいいですね。ライセンスはMIT。 Sal.js
Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css/* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; text-align: center; padding: 9px 4px; background-color: #03A9F4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css:root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;ch
物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニメーションさせるサンプルです。物理エンジンに沿った動きをするのでランダム性があります。なんとなく目にも優しい印象ですね。Matter.jsの存在を知らなかったので備忘録として。 Floaty Bubbles
Result CSS Gridを使った超シンプルなグリッドシステムです。 必須コードは5行くらいでカラム数は必要に応じて追加すれば完成します。 css.grid-wrapper { display: grid; grid-gap: 0 2rem; grid-template-columns: repeat(12, 1fr);/*カラム数設定*/ margin: 0 auto; width: 100%; } /*任意*/ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6
Result CSS変数を更新するJSスニペットです。べんり。 ※本コードは非依存のバニラJSです let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });css.mover { width: 50px; height: 50px; background: red; position: absolute; left: var(--mouse-x); top: var(--mouse-y); }html<div class="mover"></div>viaUpdati
Result jQueryfunction Utils() {} Utils.prototype = { constructor: Utils, isElementInView: function(element, fullyInView) { var pageTop = $(window).scrollTop(); var pageBottom = pageTop + $(window).height(); var elementTop = $(element).offset().top; var elementBottom = elementTop + $(element).height(); if (fullyInView === true) { return pageTop < elementTop && pageBottom > elementBottom; } else { r
Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです cssbody { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: poly
Result 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので一度書けば同じHTMLで実装可能です。 css.gallery { perspective: 700px; width: 50vw; display: flex; justify-content: center; align-items: center; flex-flow: row wrap; } ul { position: relative; width: 100px; height: 100px; margin: 0.1em; perspective-origin: center center; transform-style: preserve-3d; transform: rotateX(40deg); transition: all 0.4s; } ul:hover
Result 特に凝ったものではなく、keyframesで連続表示しています。 アニメーションをCSS関数で管理しているので割とすっきりしたコードになっています css.emoji { font-size: 50px; min-width: 1.4em; margin: 0.3em 0.4em; text-align: center; } .emoji::after { animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes twoFrames {/*2フレームのアニメーション*/ 50% { content: var(--emoji); } } @keyframes threeFrames {/*3フレーム*/ 33.333% { content: var(--emoji-1
Result CSS Gridを使ったガントチャートの実装例です cssbody, html { background-color: #cddade; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wrapper { max-width: 1200px; min-width: 700px; margin: 0 auto; padding: 40px; } .gantt { display: grid; border: 0; border-radius: 12px; position: relative; overflow: hidden; box-sizing: border-box; } .gantt__row { display: grid; grid-
Result SVGとCSSで作れるサークルプログレスバーです css@keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; } } .progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ conten
Result 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます css.text-checkbox { display: block; } .text-checkbox input { display: none; } .text-checkbox span { font-family: monospace; } .text-checkbox .checked { display: none; } .text-checkbox :checked ~ .checked { display: inline-block; } .text-checkbox :checked ~ .unchecked { display: none; }html<label class="text-checkbox"> <input type="checkbox" name="one"> <
Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css.card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wrap-image svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; } .card .wrap-image svg polygon, .card .wrap-image svg path { fill: #d
Better Password Form Codepenでパスワード設定の際のフォームで、より強固なパスワードをユーザーに入力してもらうよう促すUIが参考になったので備忘録。一定の条件を満たしたパスワードで設定完了ステップに進めるようにする、というもの。サンプルでは一定の文字数以上であり且つ、大文字、小文字、記号を含めたパスワードでないと次のステップに進めないようにしてあり、画面遷移後は入力したパスワードを再入力して設定完了プロセスが終了します。パスワードは強いものを期待出来るかもしれませんね。 現在でも同じプロセスは既に存在しますが、分かりやすくする事である程度ストレスを軽減できる気がします。とはいえ、それでもやはり面倒な入力フォームはユーザーにとってはストレスとなりやすいですね。認証システムは今後も進化していく事を求められているでしょうし、既に顔認証や指紋認証なども導入され始めているの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く