グリッドアイテムをかっこよく表示するアニメーション「Inspiration for Grid Loading Animations」 – bl6.jp
Inspiration for Grid Loading Animationsは、グリッドアイテムを読み込んだ時にかっこいいアニメーションとともに表示させることができます。キレイに整列させたグリッドレイアウトに、オシャレなアニメーションまで加われば、注目度もグッとアップするはずです。 以下、Inspiration for Grid Loading Animationsの実際のデモページになります。 デモ デモページでは、grid A、grid B、grid Cの3つのグリッドレイアウトを見ることができます（画像と画像の間の余白などの違いがあります）。 アニメーションは、右側にある「run effect」から好きなものを選択するとそのアニメーションが実行されます。 エフェクトは全部で15種類も用意されており、どれもスタイリッシュでとてもかっこいいです。画像が徐々に拡大されて表示されるもの、下
gms.life - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
Find my Tokyo. | 東京メトロ
【パソコン】・Microsoft internet Explorer（最新版） ・Mozilla Firefox（最新版） ・Google Chrome（最新版） ・Safari（最新版）※Internet Explorerの最新版ダウンロード方法はMicrosoftのサポートページをご確認ください。 ※お客様のご使用環境によっては、上記環境でも推奨環境外の画面が表示される場合がございます。 その際は他のブラウザをお試しください。【スマートフォン】Docomo、au、SoftBank端末 ・iOS最新版のSafari、iPhone6以上 ・Amdroid5.0以上、Google chrome※上記環境に含まれる場合でも、OSのバージョンやお客様のご使用環境、 端末によっては、閲覧頂けない場合がございます。ご了承ください。【パソコン】・Microsoft internet Explorer（
Photoshopのガイド作成用スクリプト「Speed Guide」を作りました - saucer
Photoshopのガイド作成用のツールといえば、定番のGuideGuideや、先日アップデートしたQuickGuideなど、すばらしいエクステンションがたくさんありますが、それとはちょっとだけ違ったアプローチで「Speed Guide」というスクリプト（jsx）を作ってみました。特長は、複数のガイドを一度に作成できることです。人によって合う合わないが分かれる仕様だと思いますが、興味があればぜひ使ってみてください。 主な特長1回の処理で複数のガイドを一気に作成できる環境設定を変えることなく任意の単位を使用できる四則演算に対応している右下を起点にして作成できる中央を起点にして作成できる繰り返し回数を指定して作成できるCSVから設定を読み込める既存のガイド位置を取得できるダウンロードGitHubからダウンロードしてください。ページ右下の［Download ZIP］からソース一式をダウンロードで
ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"
Coming Soon
Coming Soon! This domain is parked courtesy of Sav.com Learn More Have a question about an order you placed on this website or the business that previously used it? Sav is a domain marketplace where people can buy and sell domain names that are no longer being used. If you have worked with a company/person that used this domain name in the past, it typically means that they no longer own this doma
Griddify, a Tiny Photoshop Panel for Guides and Grids
Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop. Watch the short tutorial to learn how it works: Download and Install (Photoshop CC) Download and install ZXPInstaller. It helps you install Griddify and other Adobe extensions easily. Download Griddify, unzip it, and install Griddify-CC.zxp using ZXPInstalle
Web Designer News - The best curated news for designers
Web Designer News - A curated collection of the best news for designers each day. http://www.WebdesignerNews.com
可変グリッドレイアウトが簡単にできるjQueryプラグイン3選 - ウェブ学のすすめ
可変グリッドレイアウトができるjQueryプラグインをいろいろ試したところ3つほど良さそうなものがあったのでご紹介します。可変グリッドレイアウトは写真のギャラリーサイトやポートフォリオサイトなど多くのオブジェクトを見せる際に効果的なレイアウトです。一見実装するのが難しそうですがセレクタの指定さえ間違えなければ簡単だと思います。 ↓NHKスタジオパークでも可変グリッドレイアウトになっています。 NHKスタジオパーク 1. jQuery Masonry もっとも有名なグリッドレイアウトjQueryプラグイン jQuery Masonry Demo HTML jquery.jsとjquery.masonry.jsを読み込みます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport"
Create Dynamic Grid Layouts Easily with FreeWall
If you’re familiar with Windows 8 or Pinterest, you may recognize the dynamic grid layout. A dynamic grid allows you to rearrange and reposition child elements as needed, especially when resizing your browser window. A popular jQuery plugin for this is jQuery Masonry, but if you’re looking for more options and animations, consider FreeWall. FreeWall is a free jQuery plugin developed by Minh Nguyen
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide
ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。 この機能はデフォルトで実装してほしいですね。 GuideGuide 以前、紹介した時に比べてバージョンアップし、使い勝手がよくなりました。 [ad#ad-2] GuideGuideの対応バージョン GuideGuideのインストール GuideGuideの使い方 GuideGuideの対応バージョン Photoshop Photoshop CS4 Photoshop CS5 OS Windows(32bit) Windows(64bit) Mac OS CS5+Mac OSX Lionでは「Patch」が必要です。 GuideGuideのインストール GuideGuideのインストールは簡単です。 ここでは、Windo
デザインやアート・お絵描きなどの作業がかなり捗る便利な機能拡張 -NKS5
等間隔に水平・垂直にガイドを設定したい、よく使うブラシのサイズを登録しておきたい、方眼紙やカンバスで新規ドキュメントを作成したい、鉛筆やボールペン・マーカー・水彩・エアブラシなどすぐに使いたい、ノイズやブラーやグロウなどをブラシ感覚で使いたいなど、さまざまな機能が備わったPhotoshop CS5, CS5.5, CS6対応の機能拡張を紹介します。 NKS5 -Natural Media Toolkit NKS5はナチュラルなエフェクトを便利に使えるようコンパクトにまとめたツールで、小さいツールパレットにさまざまな機能が備わっています。 下記は、Photoshop上のNKS5のツールパレットと簡単な説明です。
[JS]斜めのグリッドを使った美しいレイアウトを簡単に実装できるスクリプト -diamond.js
オプションを変更したキャプチャ diamonds.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="diamonds.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> Step 2: HTML ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。 <div class="d
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
jQuery Gridly
Add Installation To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール
Awesome free extension Griddify solves the grid issue in Photoshop
http://www.fromupnorth.com/web-design-inspiration-905/
Blogs and tutorials on Angular, NGRX, TypeScript, RxJS, React and everything web!
