フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」
TOP > WebDesign > フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」 Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていま�すが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。 Ionic Alert ベーシックな表現からPOPなものまで10種類が紹介されています。 詳しくは以下 Colorful "alerts" and "confirms" 警告ダイアログをカラフルに表現してくれるアイテム。予め用意され
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」
Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化が出ているのが分かるかと思います。 左は背景の色が変わっています。右はPCサイトでもよく見かけますね。マウスを乗せたら情報が出てくる的なもの。タップのように指を離してからの動作ではなく、触れた時点でアクションを起こすのでPCサイトでのhoverっぽい挙動を表現する事が出来る、という目的で開発したそう。説明下手で申し訳ありません； PCのhoverと全く同様の機能ではありませんが、これはこれで良いアイデアじゃないかなと思います。 Hover on Touch
Mastering Kerning for Visually Harmonious Typography
What is Kerning?: Free Kerning Visualizer Tool & How to Master the Art of Professional Typography Originally posted on January 28, 2024 @ 10:06 pm Kerning is a critical skill in the realm of typography that deals with the spacing between characters to achieve visual harmony. It’s not merely about setting a uniform space, but rather adjusting the distance to account for the unique shapes and sizes
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
jQuery CDN
jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery Core 3.7.1: uncompressed, minified, slim, slim minified jQuery 2.x jQuery Core 2.2.4: uncompressed, minified jQuery 1.x jQuery Core 1.12.4: uncompressed, minified jQuery Migrate jQuery Migrate 3.5.2: uncompressed, minified jQuery UI Showing the latest stable release for the curren
jsDelivr - A free, fast, and reliable CDN for JS and Open Source
Fast. Reliable. Automated. A free CDN for open source projects Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Operating since 2012. // load any project hosted on npm https://cdn.jsdelivr.net/npm/package@version/file // load jQuery v3.6.4 https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js // use a version range instead of a specific version https://cdn.
MagicEye.js
Show Magic Eye Show Depth Map Redraw Shapes Draw Your Own! MagicEye.js is a JavaScript library for generating "Magic Eye" images in the browser. Technically, it generates single-image random dot stereograms, or SIRDS. In the above example, pixel values from an HTML5 Canvas are turned into depth data, which are then used to generate a Magic Eye image. The code looks something like this: var canvas
Lightbox demo
Time dilation is the phenomenon whereby an observer finds that another's clock which is physically identical to their own is ticking at a slower rate as measured by their own clock. This is often taken to mean that time has "slowed down" for the other clock, but that is only true in the context of the observer's frame of reference. Locally, time is always passing at the same rate. The time dilatio
BJKit(BeautifulJapaneseKit)（ツール） - アイデアマンズ株式会社
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
HTML崩壊 meltdown.js - KAZUMiX memo
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raindrops.js
jQuery Content Slider | Responsive jQuery Slider | bxSlider