今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe

9/20に行なわれるStarFesで、NASとErykah BaduとBOREADAMSが楽しみなokadaです。 今回は、Photoshopのブラシを集めました。 追加方法 ダウンロードした.abrファイルをダブルクリックをして追加するか ブラシツールをクリックして、1から3をクリックし、ブラシファイルの読み込みで追加します。 Bokeh Brushes 半透明の八角形のブラシ。写真の上にのせて雰囲気を出すなどに使いたい。 Bokeh Brushes Matt's Brushpack 絵の具で書いたようなペイント系のブラシ Matt's Brushpack Cloud Brushes その名の通り雲のブラシ Cloud Brushes FREE PHOTOSHOP BRUSHES! DAREK ZABROCKI BRUSH SET 汚し系のブラシ FREE PHOTOSHOP BRUSH

来月に発売されるMartynの新作にFour Tetが参加してるみたいなので、とても気になるokadaです。 今回は、Photoshopのチュートリアルを集めました。よろしくお願いします。 Amazing Water & Light Splash Effect in PhotoShop 水しぶきとライティングを用いたチュートリアル。イベントのフライヤー等に活用できそう。 Amazing Water & Light Splash Effect in PhotoShop Show me the light - Digital Art Tutorial こちらもライティングを用いたチュートリアル。光らせ方がとても参考になります。 Show me the light - Digital Art Tutorial Quick Tip: How to Create a Triangle Pixelat

なかなかマリノスがACLで勝てないので、ヤキモキしているokadaです。 今回は、Photoshopパターンを集めました。よろしくお願い致します。 追加方法 ダウンロードした.patファイルをダブルクリックをして追加するか [レイヤー効果]→[パターンオーバーレイ]をクリックし、1から3をクリックし、パターンの読み込みで追加します。 {Patterns Triangles} 三角形をベースにしたジオメトリックパターン {Patterns Triangles} New Free Paper Patterns 紙のテクスチャパターン New Free Paper Patterns Handmade paper pattern set こちらも紙のテクスチャパターン Handmade paper pattern set Micro Patterns シンプルなシームレスパターン Micro Pa

娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d

今更ながら最近PSPの「勇者のくせになまいきだor2」が楽しくて仕方ない seki です。世界に平和はおとずれなぁい!!! さてさて今回は、もう何番煎じになるか分りませんが･･･！私がよく使うカラースキームツールのご紹介です。こういうツールは、突然URLが消えてなくなってしまう事もあるので、定期的におさらいも兼ねて一覧を作っておくのはいいことなんだ･･･！と自分に言い聞かせつつ、最近のものから定番のものまで、これだけ抑えておけば大丈夫！という、多機能で使いやすいものを選んでみました。 詳細は以下より。 カラースキームツールを使いこなそう！ 色選びを感覚でやると怒られる･･･！という現実を知ってからというもの、こういうツールを自然とブックマークし、集めるようになりました。説得力ある色選びをするには欠かせないツールのご紹介。 「kuler」 これはもう定番中の定番ですね！Photoshopにも

こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;

年明けですね。今年もよろしくお願いします。 年末ギリギリに見たレ・ミゼラブルの影響を少々受けつつ、年明けからドラマのgleeにハマってます。歌の力って凄い･･･！seki です。 おススメのドラマなので、皆さんもハマって一緒にgleekになりませう。 さてさて。昨年の、Windows8 の発売が噂されていた頃より、じわじわと流行っている Modern と呼ばれるUIですが、今年もまだまだ熱の冷めない人気っぷりが予想されますよね。今回は、このタイルのようなデザインを感じさせるWEBサイトを集めてみたのでご紹介です。 Modern UI っぽいデザインのWEBサイト10選 【no.01】 http://www.rockwerchter.be/ 【no.02】 http://www.bricoleur.co.jp/ 【no.03】 http://www.acer.co.jp/ 【no.04】 h

お布団から出るのがだんだん辛くなって来ました seki です。 今回は私が普段利用している、無料＆商用でも使える、素材を配布、または検索できるサイトをご紹介します。ブックマークしておくと、いざという時大変便利。かなり有名所なので、これ知ってる！というのも多々あるかと思いますが、お付き合いくださいね。 引出しに入れておきたい海外の無料素材検索サイト 商用利用可である事がサイト内で判断しやすいサイトのみを集めてみました。 ※念のため、ご利用の前に各サイトの素材ページにあるライセンスを確認の上、ご利用下さい。 【all-silhouettes】 商用可のシルエットベクターデータを配布しています。 有料サイトも顔負けな種類と量、質の良さ。欲しい素材を見つけたら、広告ゾーンをスクロールで抜けた所にある[Download free …]の地味なボタンからダウンロードできます。 http://all-s

足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト