Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート MOONGIFT
最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。 Propellerの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。 リスト。アイコン付きもあります。 タイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ドロップダウン。 リスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 タブ。 ツールチップ。 カード。 フローティングアクションボタン。 フォーム。 デ
MJML - レスポンシブなHTMLメール用テンプレート
今やレスポンシブデザインはWebだけでなく、メールにおいても大事な存在になっています。メールもデスクトップはもちろん、スマートフォンやタブレットで閲覧することもあるでしょう。 そんなメール用のレスポンシブデザインを実現してくれるフレームワークがMJMLです。専用の記法で作るのが特徴です。 MJMLの使い方 MJMLのシンプルなデモです。 モバイルで見た場合のデザインに変更しました。 こんな複雑なデザインも実現できます。 メニューをつけたデザイン。 モバイルデザイン。 MJMLを使うことで、最適なレスポンシブデザインが容易に実現できるようになります。メールはサーバ側のHTMLと異なり、JavaScriptを実行したり、データの出し分けもできません。MJMLを使えばメールの反応率も大きく変わってくることでしょう。 MJMLはnode/JavaScript製のオープンソース・ソフトウェア（MIT
React-designer - React製のベクターグラフィックスエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。 今回はその一つとしてReact-designerを紹介します。Reactで作られたベクターグラフィックスエディタです。 React-designerの使い方 デモ画面です。この四角いオブジェクトがそれぞれ編集できます。 プロパティがあり、色を変えたり、並び替えることもできます。 実際に操作しているところです。オブジェクトの追加も可能です。 React-designerはともすると移動の制御などの面倒くさい機能をReactを使うことでうまく実装
レスポンシブに画像の表示“場所”を切り替える·Focal Point MOONGIFT
Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。 レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。 デスクトップの場合。 幅を少し小さくした場合。特に変わっていないと思います。 さらに縮めました。一部が切り抜かれたのが分かるでしょうか。 さらに小さく。顔の部分を中心にしています。 こちらもデモ。Aチームです。 幅を狭めると一気に拡大写真のように。 さらに狭めると人がちゃんと収まっている状態まで縮まりました。 こちらは右側のいすに注目。 ほら、なくなったのが分かるでしょうか。 こちらの写真も… 上下が特に大きく変わっています。 こちらの場合はどうでしょう。 右上は固定で左側のコンテンツが大きく削られています。 これは…ミサイル？ 上下左右と
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
