CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net
Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね ※右下のRerunを押せば再読み込みして画像が変わります css:root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-repeat: none; } .background { background-image: url(https://source.unsplash.com/1600x900/?huma
SVGで作る非長方形なヘッダ画像いろいろ
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
Google Fontsの各フォントをタグ付けして探しやすく整理している・「Font Library」
Font Libraryは大量に存在するGoogle Fontsのフォントをタグでカテゴライズし、探しやすくするプロジェクトです。OSSとして公開されています。タグ付けし、整理して探しやすくしたもので、各アイテムはフォントページへリンクしているだけのシンプルなものとなっています。日本語圏だと選択肢が少ないのでそこまで手間を感じる方は多くないかもしれませんが、英字の場合は800種以上あるGoogle Fontsから探すのは結構苦労しますので探しやすくなるのは有難いですね。本ツールはOSSとして公開されており、ソースコードはMIT、タグのデータはCC0で公開されています。 Font Library
textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト・「short-and-sweet」
short-and-sweetはフォームの入力エリアで、maxlength属性で文字数が制限された項目に残り文字数を表示するスクリプトです。非依存型で軽量、使い方も簡単です。表示文字列はカスタムデータ属性で設定します。文字数制限がある場合は表示して貰えるとありがたいですよね、というかmaxlength属性で制限できるなら制限してる旨もブラウザ側で表示して貰いたいところです・・・まぁでもバリデーションも出来るようになってきていますし、いずれ出来るかもですね。ライセンスはMIT。 short-and-sweet
CSSだけで3Dなカルーセル
Result 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時代になりましたね。 css#slideshow {/*全体*/ margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; background-color: #ddd; box-sizing: border-box; } .entire-content {/*カルーセルの見栄え。perspectiveで奥行きを設定する*/ margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px; } .content-carrousel {/*各画像を包括、アニメーションを設定*/ width: 100%; position: abso
テキスト入力すると自動でマインドマップを作成できる・「Text2MindMap」
Text2MindMapはテキスト入力だけでマインドマップを作成してくれるツールです。CSSとJavaScriptで出来ており、インデントすれば子のアイテムを作成します。非常に簡易的なもので、保存はプレーンテキストで、読み込みもインデントしたテキストファイルを読み込む、というものです。マインドマップ作成という最低限の目的は達成できる、といった印象ですが、これからSVGでのエクスポート機能の追加も検討しているそう。開発目的は、以前あった同名のツール（https://www.text2mindmap.com/）が使えなくなったのでクローンを作成したそうです。 コードは公開されていますが、上記理由から現在ライセンスを検討中だそうですが、できればMITで公開したいそうです。（まだ確定ではありません） Text2MindMapSample
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result たまに見かけるコンテンツの表示/非表示のトグルです css.expand {/*全体*/ width: 300px; padding:15px 10px; max-height: 80px; overflow: hidden; position: relative; border-bottom: 1px solid #aaa; transition: .5s; } .expand::before {/*グラデーション部分*/ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; transition: 1s; }
ノイズが走っているようなエフェクトのテキスト
Result CSSのみでノイズなテキストエフェクトを実装しています。 clipとkeyframesを応用しているようです。 css.glitch {/*基本設定*/ color: white; font-size: 40px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim {/*細かい動きを設定してノイズが走っているかのように動かす*/ 0% { clip: rect(77px, 9999px, 6px, 0); } 5% { clip: rect(65px, 9999px, 70px, 0); } 10% { clip: rect(82px, 9999px, 82px, 0); } 15% { clip: rect(32px, 9999px, 35px, 0); } 20% { cli
波状の動きの背景を作成できるライブラリ・「Wavie.js」
Wavie.jsは波のような動きの背景を作成出来るライブラリです。canvasでオブジェクトを描いて一定の動きを付与する、みたいなシンプルなもの。方向やオブジェクトのサイズの設定等が可能なので多用な動きを表現する事が出来ます。ライセンスはMITです。 Wavie.js
家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」
hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hierarchi-view
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
架空の都市の地図を作成出来るオープンソースのWebアプリ・「Map Generator」
手書き風のUIコンポーネントを提供するライブラリ・「Wired Elements」
3本線のメニューアイコンのアニメーションパターンをいろいろ集めたサンプル集・「Half Second Hamburger Helper」
商用でも無料で使えるSVGで描かれた様々なイラストを公開する・「unDraw」
色名のない色に名前をつけよう、というプロジェクト・「color-names」
誤った使い方のHTMLソースをハイライトしてくれるスタイルシート・「debugCSS」
ユーザー登録不要で任意のメールアドレスに5GBまでのファイルを送信出来る・「pCloud Transfer」
大量のメールマガジンを収集、検索出来る・「Discover」
ゲームアプリ等に使えそうなファンタジーな世界のマップイラストを作れるユニークなWebサービス・「Inkarnate Worlds」
画像の上で右クリック出来ないようにする