SketchCode - オフラインで使えるJSFiddle/CodePen/JSBin代替 MOONGIFT
JSFiddleやCodePenなど、オンライン上でHTML/JavaScript/CSSを書いた結果をすぐに確認できるサービスがあります。非常に便利なサービスなのですが、インターネットに繋がっていないと使えないという欠点があります。 そこで使ってみたいのがSketchCodeです。ローカルで利用でき、さらにGUIアプリケーションというWebコードスニペット実行環境です。 SketchCodeの使い方 メイン画面です。 編集画面です。上からHTML/CSS/JavaScriptとなっています。外部ライブラリを読み込む場合はHTML上に記述する必要があります。 結果は右側のプレビューで確認できます。 保存しておけば幾つも作れます。 SketchCodeはオフラインで使えるので、いつでもどこでも開発できます。ちょっとしたコードを試したり、動作確認ができるでしょう。できあがったコードはオンライン
Luxbar - CSS3だけで実装されたレスポンシブなナビゲーションバー MOONGIFT
JavaScriptが高機能になり、有効であるのが当たり前になるとちょっとしたアクションであってもJavaScriptで実現したくなります。しかし無効になっている場合やブラウザ間の動作誤差によってうまく動かない場合もあるでしょう。 そういった不具合を防止するにはスタイルシートだけで実装するのがベストです。今回はCSSだけでナビゲーションバーを実装したLuxbarを紹介します。 Luxbarの使い方 こちらはデスクトップ版での表示。 レスポンシブなので幅を縮めるとハンバーガーメニューになります。 メニューを表示したところ。 Luxbarはよくあるナビゲーションバーですが、CSSだけで実装した点が驚きです。CSS3を使っていますが、JavaScriptが無効であっても動作します。モダンなWebブラウザであれば問題なく動作するでしょう。 LuxbarはCSS3製のオープンソース・ソフトウェア（M
Pure CSS modal - CSSオンリーなモーダル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました モーダルウィンドウを表示するWebサービスは多々あります。そうした時にはJavaScriptでイベントをフックして、モーダルコンテンツを表示するというものが多いかと思います。つまりJavaScriptがオフになると使えない機能です。 そこで使ってみたいのがPure CSS modalです。なんとスタイルシートだけで実現されているモーダルウィンドウです。 Pure CSS modalの使い方 モーダル表示の一例です。 フルスクリーン表示もできます。 実行例です。表示される際のアニメーションもサポートされています。 スタイルシートだけ、ということを聞けばピンと来るでしょうが、実体はチェックボックスやラジオボタンです。そのchecked指定によってモーダルの表示と非表示を切り替えています
A Single Div - たった一つのdivタグでできている作品集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSS3を駆使することによって、複雑な形であったり、ドローさながらのイラストを描いたりすることができます。画像やSVG、Canvasを使ってもできることですが、あえてCSSだけの縛りを加えることに意味があります。 そんなスタイルシートだけ、さらにたった一つのdivだけという縛りを用いて作られた作品集がA Single Divです。 A Single Divの使い方 A Single Divの作品例です。これがdivタグ一つとは信じがたいですよね。 実際の形としては次のようになっています。divが二つなのは複数の作品がある関係上です。 <div id="ecto-1" class="entry"> <div></div> </div> そしてCSSの設定は次のようになります。恐ろしい
lup - JavaScriptで手軽にCSS3アニメーションを実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。 そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。 lupの使い方 一例です。色が刻々と変わっているのが分かるでしょうか。 実際の指定です。addを使って色を指定し、waitを使って一定時間そのまま停止します。そしてthen()を使って実行し、最後にend()を実行すると停止します。 lup("#test").add('green').wait(2000).remove().add('red').wait(2000).then().end
Timelined - CSS3で作られた縦型のタイムライン表示
Twitterでもタイムライン形式の表示を採用するという噂があります。最近、多くのソーシャル系サイトでタイムライン形式の表示が採用されています。 もし自分のサイトでもタイムライン形式の表示を行いたいならばTimelinedを使ってみましょう。 Timelinedの使い方 Timelinedのデモです。一つの線に沿って左右にコンテンツが並んでいます。 画像も埋め込めます。 こちらは細かなカスタマイズが試せるデモです。 表示位置や吹き出しのありなしも指定できます。 項目も自由に追加できます。 Timelinedを使うと時系列に沿って変化している様子がわかるようになります。ソーシャル系に限らず、プロジェクト管理などでも導入すると面白そうですね。Timelinedはスタイルシートのみで作られているのでカスタマイズが容易でしょう。 TimelinedはCSS3のオープンソース・ソフトウェア（MIT
フォーム入力のフォーカス移動をスムーズに·Focus transition MOONGIFT
Focus transitionはCSS3製のオープンソース・ソフトウェア（MIT License）です。 ちょっとした工夫でユーザビリティは大きく向上します。今回はWebフォームにおいてTabキーを押した時にアニメーションを実現するFocus Transitionを紹介します。 インストールしました。 任意のWebフォームにおいてFocus Transitionが適用されます。 デモ動画です。アニメーションが分かるかと思います。 Focus Transitionが行っていることはCSS3のアニメーションを適用することです。それによってTabキーを押した時にフォーカスがぱっと移るのではなく、アニメーションしながら移動していくようになります。これだけでフォーカスの大きな移動がスムーズになり、目線でも追いかけやすくなります。スタンドアローンのJavaScriptファイルの他、Google Ch
くるくる回る巻きすのようなアニメーション·Makisu MOONGIFT
MakisuはCSS/JavaScriptを使って巻きすのようなアニメーションを行うライブラリです。 Makisuの面白さはあえて語らず、そのアクションを実際に見てもらうのが良さそうです。以下よりぜひ！ パタパタと広がっていくのが印象的です。 広げることも逆に折り畳むこともできます。 デモ動画です。 CSS 3Dがサポートされていないといけないので、Operaは使えずIEも10以上から対応となっています。ソフトウェア名通り、巻きすのようにパタパタと折り畳まれていく様子は面白いです。最後の1回だけ逆側に折り畳まれるので、メニューのヘッダーが見えているというのも細かく気が配られています。 MakisuはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る HTML5によってユーザ体験をどれくらい変えられるのか、既存のHTML4を捨ててま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のアニメーション効果を一覧できるサイト「animatable」 | ソフトアンテナ
Site Under Maintenance
Site Under Maintenance