[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
GoogleのボタンをCSSだけでほぼ完璧につくる
Google のボタンをCSSだけでつくるをDelicious経由で見て、もうちょっと出来るんじゃないかなーと思ったので、background-imageで複数のlinear-gradient()を使ってグラデーションにプラスアルファする方法の啓蒙も兼ねてほぼ完コピするCSSの書き方を解説しようかなとか何とか。このエントリの別名は「CSSグラデーションのちょっとしたテクニック #3」になる。 Demo: Google Style Button まずはデモを参照。パッと見ではどっちか画像か分からない程度にはコピーできていることと思う。もちろんフォント(というかOS)によっては文字が違く見えることと思うが。CSSは以下のような感じになっている(簡略化するためにベンダー拡張は省略、詳しくはデモのソースを参照)。 button { padding: 1px 6px; border-top: 0;
Stoyan Stefanov「無駄に大変なcssローディング完了のチェック」 - 以下斜め読んだ内容
phpied.com 2011.3.17のエントリ When is a stylesheet really loaded? link要素でロードイベントの実装がされてたりされてなかったり DL完了してないのにノードリストが更新されちゃってたり Fxが特に大変 クロスブラウザな解決方法に「一応」到達してるのでよかった 以下斜め読んだ内容 cssが読み込み完了後にコールバックをセットする おかしい話だが意外と大変でした 使えるテクニックは５つ link.onloadチェック link.addEventLinstener("load")チェック link.onreadystatechangeチェック document.styleSheetsのlengthをsetIntervalで監視 特定DOM要素のstyle情報が更新されるかをsetIntervalで監視 reflow/repaintのキュー
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
横スクロールのサイトデザイン
横スクロールで閲覧するサイトを作りたくなったので、iine!をそうしてみた。ブラウザが横幅8000px以上ならスクロールせずに見ることができる。Ch9とFx3.6、Sf5、Op11、IE8で確認した限りでは特に問題なさそう。手探りでHTMLとCSSを組んだのでdivがものすごく多い。 コンテンツを縦方向にセンタリング 横スクロールさせる場合、縦方向のセンタリングしておくとおさまりが良い。また視線移動もある程度抑えられると思うので、上に寄っているよりは読みやすくなりそう。CSSによる実装にはいくつか方法があるが、一番明快なdisplay: table;とdisplay: table-cell;を利用したテクニックを使った。 html { height: 100%; display: table; } body { height: 100%; display: table-cell; vert
box-shadowとradial-gradientで画像をポラロイド写真風に
CSS3のbox-shadowプロパティではinsetという値を取ることができ、その場合ブロックの内側に影が付く。これをある工夫と共に利用すると写真の端に影がつけられる。更にradial-gradientでセピア色のグラデーションを重ねてやれば、良い具合に古ぼけさせることもできるので、両方の効果を重ねてやればポラロイド写真風に見えないこともない？ Demo: Polaroid effects using inset box-shadow and radial-gradient キモは以下のようにz-indexを使って画像を背面に回してやること。そうすれば親のブロック要素でのbox-shadowやbackground-imageを画像の上に重ねることができる。 .polaroid { float: left; width: 400px; height: 400px; background-i
Pure CSS speech bubbles – Nicolas Gallagher
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for e
Stoyan Stefanov「css minifingツール比較」 - クライアント・サイド・スクリプティング with Web Standards
phpied.com 2010.10.30のエントリ CSS minifiers comparison / Stoyan's phpied.com css圧縮ツールの比較をまたしてみた ツールの品質が上がり、gzipをセットにすると、ツール間の差はほとんどない 好きなの使え という主旨のエントリ 以下斜め読んだ内容 １年前(2009.12.11）にcss圧縮ツールの性能比較してみた Reducing the payload: compression, minification, 204s / Stoyan's phpied.com 記事で比較したツール YUI compressor Minify CSSTidy HTML_CSS 去年時点での比較結果 1年たって状況変わった YUI compressorはアップグレード MSからもツールがリリース。Ajax Minifier gzipされな
PNGStore - Embedding compressed CSS & JavaScript in PNGs
By Cal Henderson, August 22nd 2010. Updated 2010-08-24: There are now some additional results. Alex Le used a really interesting technique (originally proposed by Jacob Seidelin) for pushing the limits of the 10k Apart Contest - storing JavaScript and CSS in PNG files. The idea is pretty simple - since the contest limits the size of the final files, you can include more code by putting text inside
Stoyan Stefanov「CSS/JSを先読しつつJSは実行させないでおく」 - 以下斜め読んだ内容
phpid.com2010.4.21のエントリ Preload CSS/JavaScript without execution / Stoyan's phpied.com プリロード系テクニックの最新版？ JSの高速ローディングをさらに細かくコントロールする、という趣旨 jsをロードしたい、キャッシュに保存したい。でも実行は遅延させて好きなタイミングで実行したい。これを実装 辿りついたテクニックはシンプル IE向けにはImageオブジェクト生成、それ以外はobject要素生成 実行させたいときにオンザフライでscript要素を生成しDOMツリー追加 以下斜め読んだ内容 プリロードテクニックは色々あり前に調べた script/link要素生成、iframe生成、XMLHttpRequest 前調べたやり方は、iframeのロードや、プリロードされたcss/jsのパース／実行など、コストあり
CSS3 を活用したボタン等の作り方 - WebOS Goodies
先週の Icon Creator Widget に続いて、本日も Opera の開発者向けサイトからのネタをひとつ。公開されたのは先月末なのですが、 CSS3 の text-shadow, box-shadow, border-radius などを活用して美しいボタンやボックスを作成する方法の解説記事が掲載されていました。今後の Web 制作でとても役立つテクニックだと思うので、その内容を簡単にご紹介します。 なお、この記事は CSS3 を使用しているため、ブラウザによっては正しく表示されません。たぶん Firefox, Google Chrome, Opera の最新版であれば大丈夫かと思います（Safari は box-shadow に未対応）。 text-shadow, box-shadow, border-radius について 元記事ではすぐに本題に進んでいるのですが、ここでは
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects
Twitter Bootstrap Generator
その場で色を確認したい - Clipboard
セレクタ｜CSS HappyLife ZERO
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
HTML+CSS templating
http://devsnippets.com/article/techniques-using-pure-css-only.html