シャドウもグラデーションにする | かちびと.net
Result ボタンがグラデーションなのでシャドウもグラデーションにしよう、みたいな提案 疑似要素に、グラデーションとblurを加えてグラデーションな影を生成しています css html, :root {/*CSS変数は必須ではありません*/ --blue: #0092ff; --red: #ea4335; } button {/*ボタンのスタイル*/ font-family: "Roboto", sans-serif; font-size: 16px; position: relative; outline: none; border: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none; padding: 0.75em 3
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks - かちびと.net
各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 ブラウザ名で検索も出来る様になっています。IE、Firefox、Chrome、Safari、OperaなどのCSSハックやJavaScriptによるハック方法が掲載されています。 試してないけどMedia QueriesでIEのCSSハックという方法は思いつかなかったです。 デモページもあるのでハックが効いてるか確認する事も可能です。 Browserhacksにも書いてありますが、ハックは最適な解決法とは言えないので、個人のサイトなら別にいいと思
Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js
ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。lettering.jsはjQueryのプラグインなので必然的にtextillate.jsもjQuery依存となります。 lettering.jsで1文字1文字のエフェクトにタイムラグを発生させる事が出来ます。 $('.foo') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }});オプションでエフェクト等をセッティングします。
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js - かちびと.net
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile(); 本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider - かちびと.net
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 以下サンプルです。手抜きですみません。 jsfiddleでフレームを操作して動作確認出来ます。 Sample コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery-picture-min.js"></script>
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>本体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",
黄金比を取り入れたグリッドレイアウトのWebデザインを構築する為のテンプレートやアクションなどの補助キット・The Golden Grid
黄金比を取り入れたグリッドレイアウト のWebデザインを作る際のPhotoshopや Fireworks用テンプレや、PSアクション などがセットになったデザインキット・ The Golden Gridのご紹介。アクション が便利そうでした。 黄金比を取り入れたグリッドレイアウト用のPSDやFw用テンプレとかアクションがセットになってるやつです。グリッドレイアウトは960グリッドシステムに準じているみたい。 内容物は以下となっています。 PhotoshopアクションPhotoshop用テンプレートFireworks用テンプレートillustrator用テンプレートindesign用テンプレートomnigraffle用テンプレートpixelmator用テンプレートflash用テンプレート上記にそれぞれ12カラム、16カラム、24カラムが用意されています。 ↑ a:bが1.6180:1となって
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net
3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css #example01 {/*文字詰め*/ -letter-kern: 1px 1px
全画面をダイナミックなイメージギャラリーとして使う事が出来るjQueryプラグイン・JQUERY.MB.BGNDGALLERY
全画面をダイナミックにイメージギャラリー として使えるようにするjQueryプラグイン JQUERY.MB.BGNDGALLERY。同じ ようなライブラリは沢山あるので選択肢 の一つとして覚えておこうかなと思いま す。Flikcrからも流せるみたいです。 インパクト合っていいですねー。個人的にはこういう写真の見せ方が一番好きです。良い写真をコンテンツとして持っているならそれをアピールしない手は無いですよね。ただ、このライブラリの作者さん、IEが嫌いみたいで・・・まぁそんな感じです。 ナビボタンによって画像が切り替わります。縦にアニメーションスライドするタイプとフェードするタイプの2つがサンプルとして用意されていますよ。 Flickrから読み込んだりも。 $.mbFlickr.flickr_api_key="f40779ab07dd09e5890f48e3618296b3"; $.mbFli
グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう - かちびと.net
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。 この設定だけでＯＫ。 例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン
TwitterやGoogleニュース、動画などを横断検索→綺麗なレイアウトで閲覧出来る無料のiPadアプリ・Hitpadを試したよ - かちびと.net
TwitterやGoogleニュース、動画などを横断 検索して綺麗なレイアウトで見やすく表示 してくれる無料のiPadアプリ。こういうのも キュレーションの一種なんでしょうかね。 うまい題名が浮かばなかったのでイメージ したものと違ったら申し訳ないんですが。 たまたま見つけたアプリだったんですが、無料ですし思いのほか良かったのでシェア。iPadと凄く相性いい気がします。動作もなかなか軽く、全く閲覧中のストレスはありませんでした。 画像、動画、ニュース、Web、Twitterなどを横断検索し、見やすくまとめる無料iPadアプリ。 以下に使った感想を。キャプチャが全てランドスケープモード（横向き）ですが、ポートレートモード(縦向き)でも使えます。 横断検索する キーワードで検索すると、Googleニュース、Twitter、動画（Googleビデオかな？）、Web（Bing）、Google画像で
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための
背景等に重宝するシームレス（繋ぎ目無し）な写真のパターン素材いろいろ
Webデザイン繋ぎ目の無い写真素材 写真、または見た目が写真に近い ものでシームレス（繋ぎ目無し）な 素材を背景に使う事が個人的に 多いので倉庫代わりにエントリー。 背景以外でも結構使い易いです よね。 写真、または見た目が写真に近い ものでシームレス（繋ぎ目無し）な 素材を背景に使う事が個人的に 多いので倉庫代わりにエントリー。 背景以外でも結構使い易いです よね。 そういう訳で色々な種類のシームレスタイプの写真素材を手に入れられるサイトをメモします。写真以外のパターン素材でしたら無料でテクスチャやパターン画像を手に入れられるサイトいろいろというきじも書いていますのでこちらをご参照下さい。 Seamlesstextures.net 一番よく見てるサイトですシームレス写真専門のサイト。 Seamlesstextures.net cgtextures cgtexturesで「pattern」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
丸みを帯びた可愛らしい、シンプルなアイコンフォント・DRIPICONS
フラットなデザインでよく使われてる色をまとめている・「Flat UI Colors」 - かちびと.net