#334 Compass & CSS Sprites - RailsCastsCompass improves the Sass experience by providing useful mixins, functions, and more. You will also learn how to make CSS sprites with it in this episode.
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
やさしさゴシックの魅力｜可愛くて温かい商用可フリーフォント #LOVEFONT Advent Calendar 2012
今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。 今回の企画、Advent Calendarと#LOVEFONTについては、WEBCRE8.jpさんの記事をご覧ください。 2012年、今年こそはAdvent Calendarに参加しよう！！ ｜WEBCRE8.jp#LOVEFONT ｜ WEBCRE8.jp#LOVEFONT Advent Calendar やさしさゴシックって…？その名の通り、やさしい雰囲気の「やさしさゴシック」。 好きなポイントはいろいろあるのに、そのフォントについて知っていることは、とても少なかったので調べてみることにしました。 やさしさゴシッ
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
HTML CSS ガイドライン – Kangaroonote
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -（ハイフン）を使用親要
RailsのView開発用にViewSourceMap.gemつくった - ✘╹◡╹✘
@todesking氏のRails、レンダリングされたHTMLのどこがどのpartialから来たのかをコメントとして埋めるが良かったので、完全にパクって、改良して相対パス名表示するようにして、config/initializers/以下に置いたら開発環境でのみ働くようにしてみた。ここのテキストちょっと弄りたいけどどのファイルに書いてあるの...みたいなケース多いので、ChromeのInspectorとかで見たらHTMLコメントでファイル名分かって便利。render layout: "wrapper" do ... という風にrenderを呼んだときに上手くパス名を取得する方法が分からないので、どなたかよろしくお願いします。 @miyagawa gemified :) http://t.co/A3LSJFC1— r7kamura (@r7kamura) December 4, 2012 ht
Blenderで3DCG制作日記
久しぶりに作業再開です。 ここのところ全然作業していないので、ほとんど進んでません。 とりあえず、前回作ったモーションをレンダリング。 あと、腕が細いという指摘をいただいたので、いくらか太く修正してます。 確かに今までの腕は細すぎましたね。 動画はテスト動画置き場に置いてあります。 テスト動画置き場 - http://bmania.michikusa.jp/movie.html 今回、砂煙をパーティクルで作っています。 Blender 2.5のパーティクルのアニメーションは、まだ未完成な感じです。 例えば、マテリアルをアニメーションさせた場合です。 ↑2.49bでは一粒一粒、個別に発生時からアニメーションが始まるのに対し、 ↑2.56a Betaでは全体でまとめてアニメーションさせてしまっています。 (これはこれで使い道がありそうですけどね) ちなみに今回は、最初から薄くしたパーティクルを
扉の先の無限の世界 ～Blender 2.5 & 2.6 で作る3DCG～
このサイトはフリー3DCGソフトBlenderのチュートリアルサイトです。 様々な機能の使い方を説明していきます。主にBlender2.5 & Blender2.6 を対象にしています。 思いつきで記事を書くので順番はバラバラです。 ←左のカテゴリーに記事を分類しています。 →右に記事のタグの一覧を表示しています。参考にしてください。 【全記事一覧】 久しぶりの更新が宣伝ですみませんが。 LINEスタンプを作りました。 https://store.line.me/stickershop/product/1087777/ja 使用ソフトはもちろんBlenderです。 トゥーンレンダリングとFreeStyleによる線画を利用しています。 3Dモデルを使うことによって、ポーズを変えるだけでたくさんのイラストを作ることができました。 テディベアの縫目もFreeStyleの破線設定で実現しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
