これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
Beautiful CSS checkboxes examples - CSS Scan
All of these checkboxes were initially copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page Have you seen CSS Scan? The fastest and easiest way to check and copy CSS. Learn more → Beautiful box-shadow examples 90+ free beautiful CSS box-shadow, ready to use, click to copy. Learn more →
GIGAZINE - 大阪ガスサービスショップを家の中に入れてはいけない - トラックバック一覧
ウェブサイトや資料などで簡単なイメージイラストを使いたい時に、30種類のイラストを自分で配色を決定してダウンロードできるサービスが「IRA Design」です。イラストは無料でダウンロード可能で、商用利用も可能となっています。 IRA Design - Build your own amazing illustrations @ Creative Tim https://iradesign.io/ IRA Designにアクセスするとこんな感じ。用意されているイラストを見るには、上部メニューの「GALLERY」をクリックします。 イラストは30種類。背景・人物・物がまとめられたフラットデザインのイラストです。 画面右側にある「＜」をクリックすると…… カラーパレットが出てきました。ズボン・Tシャツ・髪・物の4種類を、それぞれ紫・青・緑・オレンジ・赤の5色に変更できます。全部紫に設定すると、
表情やポーズも変更できる、人物のイラスト素材が登場！商用でも完全無料の太っ腹ライセンス -Open Peeps
笑顔でこんなポーズ、泣き顔でこんな仕草、希望通りのイラスト素材が完全無料で商用利用できるOpen Peepsを紹介します。 普通のイラスト素材はそのまま使用するしかないですが、人物の表情や髪型、ポーズ、動作などさまざまなパーツを組み合わせて、584,688通りのキャラクターを作成することができます。 Open Peeps Open Peepsの特徴 Open Peepsのダウンロード Open Peepsのイラストライブラリ Open Peepsの特徴 Open Peepsは商用でも個人でも完全無料で利用できるイラストのライブラリで、ライセンスはCC0です。 イラストはすべて手描きのベクターで、さまざまなパーツを組み合わせることで584,688通りのキャラクターを作成することができます。アプリは、Adobe XD、Sketch、Figma、Studioをサポートしています。
unDraw - Open source illustrations for any idea
\ ˌi-lə-ˈstrā-shənOpen-source illustrations for any idea you can imagine and create.A constantly updated design project with beautiful SVG images that you can use completely free and without attribution. synopsisCreate better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal
無料＆インストールなしで画像のリサイズや画質変更が一括で可能な「Bulk Resize Photos」
PCのブラウザ上から無料で使える、画像のリサイズや画質変更を一括で行えるサービスが「Bulk Resize Photos」です。Bulk Resize Photosはウェブサービスですがファイルをアップロードする必要はなく、画像加工は全てブラウザ上で行われるので、無駄に通信量がかさむといったこともありません。 Bulk Resize Photos http://bulkresizephotos.com/ 「Bulk Resize Photos」の使い方は非常に単純で、加工したい画像をドラッグ＆ドロップで赤枠部分に移動させます。 加工画面はこんな感じ。「Scale」からは画像を拡大縮小可能で、赤枠部分に元画像の何％のサイズに拡大縮小するのかを入力すればOK。 「Longest Side」をクリックすれば画像の長辺を指定可能。画像の縦横比は元画像のものを保ったままリサイズされます。 「Widt
Web上にある画像を任意のサイズに変換してくれる・「Firesize」
FiresizeはWeb上の画像を任意のサイズにリサイズしてくれるWebサービスです。例えば http://example.com/foobar.jpg といった画像があった場合、 http://firesize.com/400×300/g_center/http://example.com/foobar.jpg のようにサイズを指定すればそのサイズに変換して返してくれます。特に特定のライブラリやCSSを読む込む必要はなく、Firesizeにサイズとリサイズする画像のパスを指定すればそのサイズに変換しCDNにホストされるので、そのパスを使ってね、という類のもののようです。こういった仕様なので用途は限られますが、覚えておいても損は無いかもですね。 Firesize
CSS Gradient Animator
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
Google Mapのカラー見本とコードをまとめている・Snazzy Maps
Google Mapのカラー見本と、変更する為のコードをまとめているWebサイト・Snazzy Mapsのご紹介です。Webデザインに合わせてGoogle Mapのデザインも変更しておきたいですね。 以前Google Mapのスタイルの変更法を書きましたのでご参照下さい。但し、当時ご質問頂いたのがjQueryを使って、との事でしたのでそんな内容です。 Google Mapのスタイル例と、実装コードが掲載されています。沢山あるので何かと参考になりそうです。 ただ、中には文字が見えなくなっているものもあります。 デザインの統一に拘りすぎて地図の存在理由が無くなってしまわない様に気を付けたいところです。ご利用は以下でどうぞ。 Snazzy Maps
YouTube人気急上昇
負け盤面からのまさかの！！？【スーパーマリオメーカー２#472】ゆっくり実況プレイ【Super Mario Maker 2】
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
YouTube人気急上昇
YouTube人気急上昇