Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the ... 続きを読む
Before pushing our CSS and JavaScript assets to our CDN, we run them through jingo-minify to concat and minify the files, as well as cache bust them and any resources (such as images) contained inside them. Turns out, this was by far the slo... 続きを読む
The Mozilla Foundation Mozilla WebDevブログに「From 80 Seconds to 6: Optimizing Our Asset Compression」として、JavaScript・CSS・画像の連結およびミニファイ処理にかかる時間を、80秒~160秒レベルから6秒まで短縮させたときのテクニックが掲載されてい... 続きを読む
I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to injectI remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript func... 続きを読む
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行の... 続きを読む
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTML... 続きを読む
はじめに スマートフォン版Yahoo! JAPANトップでは、ユーザーへ高品質なユーザーエクスペリエンスを提供するために、対象端末をiOSとAndroid OSのスマートフォン端末に絞り、最新のブラウザ仕様に基づいたサイト構築を行っています。スマートフォン版Yahoo! JA... 続きを読む
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう!みよう!みよう! View Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :... 続きを読む
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 c... 続きを読む
CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロ... 続きを読む
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点(圏点)、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとル... 続きを読む
WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイス... 続きを読む
Pure CSS speech bubblesIn a design, bubbles can be great to illustrate a quote. In this article, talented designer Nicolas Gallagher will show you what he built with CSS3: Text bubbles, with no Javascript or images. Source: http://nicolasgall... 続きを読む
CSS done right. Less extends CSS with several invaluable features, including variables, inheritance and mixins. CSS design just got fun again.Get Less The Less Ruby gem compiles Less code to css. Works best with Ruby 1.9. To install: Once ins... 続きを読む
CSS HappyLife ZEROは、CSS初心者・中級者の方を対象にしたリファレンスやレイアウト講座など、CSSに関するアレコレがつまったサイトです。CSS HappyLife ZEROは、主にCSS初心者・中級者の方を対象にしたCSSに関するアレコレがつまったサイトです。 プロパティ... 続きを読む
CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it's cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax:... 続きを読む
One of my favorite sources of active mining is that of Peter-Paul Koch digging in to mobile browsers and how they behave. Sponsored by Vodaphone to do a study of various mobile devices and their respective browsers, PPK has been doing some se... 続きを読む
perl, mobile | 18:18DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/3キャリア間での変換の必要性DoCoMoでは外部CSSを参照できずインラインのみの対... 続きを読む
javascript 要素が挿入された瞬間を取得する今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は?です。 方法HTML に以下の style 要素を挿... 続きを読む
css, javascript こんな感じかな。 JSCSS.CSSValueConverter = { _string: function(str) { return str.replace(/\\([0-9a-fA-F]{1,6}[ \t\r\n\f]?|\r\n|[ \t\r\n\f]|.)/g, function(str, t) { if (t.match(/^[0-9a-fA-F]{1,6}[ \t\r\n\f]?$/)) { return String... 続きを読む