『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
Material Design Color Palette by zavoloklom マテリアルデザインカラーを簡単に使えるLESS/CSS toolkit「Material Design Color Palette」 規則性のあるCSSクラス名を使って、マテリアルデザインのカラーを簡単に再現できます。 使う際は、色と色の強さをクラス名で指定すると次のように、赤一色をとってみても、50〜900の値の変更で変化を簡単につけられます 関連エントリ マテリアルデザインのスクロールトップに移動するボタンを実装できる「material-scrolltop」 WEB上でのマテリアルデザイン実装フレームワーク「Material Design Lite」 マテリアルデザインのPullして更新をWEB上で実現できるjQueryプラグイン マテリアルデザインのショーケースサイト「MaterialUp」
iOS7 いいですよね。いいなあ。まだ持ってないんだよなあ、初代 iPad だから。アップルストアのデモ機を触って「ウフフ…」って悦に入ることくらししかできません。 まあそれはいいとして、画面下からぐーって引っ張ってコントロールセンター表示させるアレって便利ですよね。便利な上に背景要素が擦りガラスの向こうにぼやけて見えるあの感じがとてもよいです。 なので、アレをなんとかブログとかに利用できないかしらとアグアグ考えておりましたら、結局同じものはできなかったんですが背景要素をボケさせてそのうえに透過要素を重ねることはできました。（ほんとうは透過要素のかかってる部分だけブラーがかかるようにしたかったのですが、どうにもわかりません。） jQuery と CSS3 を使う感じですがそんなに複雑なものではなく、案外用途がありそうでこれはいいぞということで公開してみました。 ブラーをかける際に徐々にボケ
普通の画像をアップするだけで擦りガラスのようにボケた画像を表示させたかったのです。 別にボケた画像を作れば良いのですが、正直面倒臭いし、そんな方法で運用しようとすると絶対歪みが出ますよね。 「PhotoshopがないならGIMPを使えばいいじゃない」 なんてクライアントには言えません。 というわけで、WEB上でボケた画像を生成したり、表示をするための方法を調べてみました！ CSSでぼかす 真っ先に思い浮かんだのはコレです。 CSSフィルタを使ってボカす方法です。 サンプル コード cssに以下を記述。 img.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } どうですか？ボケてますか？ フチまでボ
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた 最終更新日: 2017/03/28 最近のデザインの流行から、写真をぼかしてキービジュアル画像の背景などに使う機会が増えてます。 どんなにヘボイ写真でも、かっこいいデザインに仕上がったりするからと、とりあえずぼかしておけと言われることも多いのでは。 高解像度の写真を買わなくても済むので安上がりですしね。 ぼかした写真をデザインに取り入れるとき、普通は写真をPhotoshopでぼかして、画像そのものを加工する手法が多いとは思います。でも、今回どうしても写真は加工しないで、WEBページ内でblur（ぼかし）のエフェクトをかけることが必須という大人の事情がありましたので、仕方なくいろいろ調べてみました。 やりたいことはこんな感じです。 blurをかけると、どんな方法でやる場合にも画像のふち（境界線）は、ぼやけ
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
2NTは無料ブログ、無料ホームページ等、楽しいWEB Lifeをお届けするポータルサイトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
