CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
【CSS3】float使わずに最速でブロック要素を横均等に配置する方法「display:flex」 | degitekunote2
float:leftでの横並びから卒業！ 横並びの左右均等っていうと下記画像がそうですよね。これを実際に作って見ようと思います。 今までだったらこれを作るにはfloat:leftでもってli要素を回りこませて横並びにして、marginやらpaddingやらで装飾するのが一般的ですが、floatを使わないやり方もいくつか存在します。 その中でもflexボックスを使うとまぁ簡単に今回やりたいことが出来ちゃうわけですよ。 まずはHTMLを作っていきます 上の画像を元にulとliでもって形作っていきます。 <ul id="wrap"> <li class="box1 a"><p>ABCDEFG</p></li> <li class="box1 b"><p>HIJKLMN</p></li> <li class="box1 c"><p>OPQRSTU</p></li> </ul> <ul id="wr
ブラウザ、OS別のCSSハックが簡単にできるJavaScript│JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
ブラウザ毎のハックはCSSで簡単にできますが、 OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと 思っていました。 ですが今回はCSSの記述を増やしたくなく、 ダメもとで探してみたところ やたらと便利なJSが見つかりました。 CSS Browser Selector CSSに簡単な記述を追加するだけで、 ブラウザ、OSを指定して適用させることができるJSです。 具体的には、 .win body { background:#000; } で Windowsのみに、 .mac.ie7 body { background:#000; } で MacのIE7のみにスタイルを適用できます。 ダウンロードはこちらのサイトから。 http://rafael.adm.br/css_browser_selector/ 今回は試していませんが、 相当な数のOS、ブラウザに対応している
第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法 | Creazy!
メインPCをMacに移して一番驚いたのは、Macで表示されるフォントの美しさかもしれません。 Macでは基本的に全てのサイズのフォントにアンチエイリアス（スムージングともいう）処理が施されています。 アンチエイリアス (Anti-alias) はコンピュータで画像・映像を制作・加工・表示する際に、滑らかな画像を得る処理のこと。 アンチエイリアス – Wikipedia 逆にWindowsではデフォルトではアンチエイリアスがかかっていないのでギザギザした印象の文字になってしまいます。一旦、慣れてしまうとどうしてもこの滑らかな文字が愛おしくなってしまって、なんとかWindowsでもアンチエイリアスにできないかと考えました。特にこのブログのリニューアルにあたって、MacとWindowsの両方で動作確認をするとあまりの違いに愕然としてしまったので、真剣に調べ始めたというわけです。 Windowsフ
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
30分でできる！Webサイトを高速化する6大原則 (2/4)
2.画像はサイズを指定せよ！ 画像サイズは必ずHTMLのwidth属性とheight属性、もしくはCSSのプロパティで指定する。サイズを指定することによって、ブラウザーは画像ファイルのダウンロードが完了する前にレイアウトを計算できる。結果、ページの表示にかかる時間は短縮される。 ●記述例：HTMLのwidth属性、height属性を利用した場合 <img src="web+directions+east.png" alt="画像 Web Directions East ロゴ" width="100" height="100" /> ●記述例：CSSのwidthプロパティとheightプロパティ利用した場合 img{ width: 100px; height: 100px; } このとき、画像自体のサイズとHTMLで指定するサイズを一致させることが大切だ。たとえば、200×200ピクセルの画
CSS で Inner border （画像の内側に線を引く） – Kangaroonote
画像の内側に border をかけるテクニックが CSS-Tricks というブログで公開されていました。 記事にあるとおり、これで hover 時にのみ border を追加することができて、素敵です。 あとギプスもとれて、元気になったような気分です。 Image Rollover Borders That Do Not Change Layout
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シャドウを画像の内側にかけるCSS/jQuery - Qiita
[CSS]背景画像を半々に表示するスタイルシート | コリス