CC0ライセンスの写真や動画を配布するストックサイト・「ISO Republic」ISO RepublicはCC0ライセンスの、著作権放棄された高品質な写真素材や動画を配布するストックサイトです ドメインも名前もコンセプトも変わってしまいましたが、以前はFOODIE FACTORという、食べ物の写真専門のストックフォトサイトでした リニューアル?したのか、よくある大量保管したストックフォトとなったようで基本的に全てCC0ライセンスだそうです unsplashとはちょっと異なるタイプなので覚えておいて損はないんじゃないかぁと思います ISO Republic
CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net
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
CSS Gridを使ったガントチャート
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-
開発者向けの動画だけを大量に収集、検索できる・「DevTube」
DevTubeは開発者向けの動画を大量に収集、検索できるサービスです。技術やスピーカー、言語（プログラミング言語だけでなく、スピーカーが何語で話しているか）などで絞り込むことも出来ます。個人的にはもう少し探しやすいカテゴライズだと嬉しかったんですがそれでもかなりの量を収集してるようなので目的の動画を根気よく探してみようと思います。 DevTube
CSSだけでスクロールしても追従するサイドバー
Result よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。 特にトリックでもなんでもないのすが、position: sticky;使えば一部のブラウザを除いて実装できるようになりましたので使用例的な記事です。 position: sticky;に関してはtableのネタでも以前書きましたので参考になりましたら幸いです。 position: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定 cssaside h3 { background: yellow; position: -webkit-sticky; position: sticky; top: 0; }html<article> <section>foo</section> <aside> <h3>bar</h3> </aside> </article>can i
detailsタグでクリックで開閉するFAQコンテンツ
Result detailsタグでFAQコンテンツっぽいやつを作るサンプルです JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね 例によってIEでは使えないHTMLタグですが、便利には違いないですね summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。 csssummary { display: block; outline: none; } summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease; } /*答え部分が開いている場合の処理*/ details[open] summa
カラフルな3Dテキスト
Result テキストを3D化してカラフルにする、というもの やってる事はシンプルで、疑似要素にtext-shadowを複数折り重ねて実現していますが、性質上どしてもコードが長くなってしまいます contenteditable属性も含めてあるので好みのテキストでお試し頂けます cssh1 {/*ベースとなるテキストのスタイル*/ font-size: 100px; text-align: center; line-height: 1; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; color: #f98ca4; text-shadow: -1px -1px 0 #6e1f58, 1px -1px 0 #6e1f58, -1px 1px 0 #6e1f58, 1px
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
商用利用OK、クレジット不要で使える、量よりも質を重視したストックフォト・「Reshot」
Reshotは商用でも無料でクレジット不要で使える写真素材を提供するストックフォトサイトです。量よりも質を重視しているそう。人物を中心にまとめられている印象です。ライセンス形態の明記はなく、オリジナルを採用していますが、そこまで厳しくなく、概ね自由に使えそうです。（放棄はしてません） Reshot
ボタンにSVGを使って水がせりあがる様なホバーエフェクト
Result SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルターで参照しています。 css.c-button--gooey {/*ボタンの基本スタイル*/ color: #06c8d9; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px; border: 4px solid #06c8d9; border-radius: 0; padding: 1.2em 3.4em; position: relative; transition: all 700ms ease; } .c-button--gooey .c-button__blobs {/*HTMLで書いたSVGを参照*/ height: 100%; filter: url(#goo); overflow: hidd
必要なものだけ揃えられたベーシックなCSSのboilerplate・「roolith」
roolithは必要最低限のものだけ揃えたCSSのboilerplateです。タイポグラフィやボタン、カラースキーム、グリッドやRWDの為のブレークポイント、各ナビゲーションやフォームからヘルパークラスまで、分かりやすいclass名で揃えられています。boilerplateらしく、目立つ特徴を加えず、カスタマイズ性を意識した設計という印象でした。ライセンスは明記されていませんが、Free to use for any education or commercial project（あらゆる教育や商用利用で無料で使えます）とあるので利用する前に一言連絡して確認するのがよさげでしょうか。 roolith
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページのスクロールに応じて任意の要素にアニメーションエフェクトを付与できる非依存の軽量ライブラリ・「ScrollOut」 | かちびと.net
シンプルなbefore/afterコンテンツを作成できるスクリプト・「beerslider」 | かちびと.net
sketchファイルの中身を確認できるWebサービス・「Sketch.The.Ripper」
Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」
ポモドーロタイマー付きのOSSな国産Todoアプリ・「Pentazemin」
オープンソースのファイルアップローダー・「Uppy」
商用でも無料で使えるSVGで描かれた様々なイラストを公開する・「unDraw」
