CSS1 のみで質感のあるボタンを表現してみる - Cyokodog :: Diary
CSS3 を駆使すると、とてもリッチなボタンパーツが表現できるようです。 CSSグラデーションのちょっとしたテクニック #2 - hail2u.net CSSの実装状況で変わるボックスのデザイン方法 - 3.5ping.org 悲しいことに勤務先の PC の標準ブラウザは IE6。近いうちに IE8 へのアップグレードを予定してますが、残念ながら IE8 では CSS2.1 までしか対応してないようです。 上記のリンク先のサンプルには遠く及びませんが、先日、PC の中身を整理してたら IE6 で質感のあるボタンを作ろうと試行錯誤してた頃の html ファイルが見つかりました。会社で CSS3 が使えるようになるのも当分先になりそうですので、備忘録としてこちらに残しておきたいと思います。 li 要素と a 要素でボタンを表現 li と a 要素に CSS を当てることで、以下のようなボタンを
KO Software - Blog - An Ultra Fast CSS Minify Algorithm
<< Restoring a SQL Server Database that Is Missing the Log File | Monitoring Site Uptime >> Introduction You've probably thought a lot about ways you can optimize your Web site. Since the release of this new site, I've been thinking about it a lot. In this post I would like to introduce an advanced version of the CSS minify algorithm. There are several existing implementations available, but I too
Opera News
Desktop, web3 Opera adds Crypto Browser features to its flagship desktop and mobile browsers and delists the... February 29th, 2024 On March 14th we will no longer be supporting updates for the dedicated Crypto Browser, as its core features have... Gaming, Opera GX Pimp your smartphone with GX Mods, now available in Opera GX on Android and iOS February 8th, 2024 Transform the look and feel of your
ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm
CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして本題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非
JavaScriptでCSSパーサーを書くための情報を収集中(1日目) - latest log
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できればそれでいい。 ブラウザに CSS の解釈を任せなきゃいいんじゃないか? まずは、JavaScript で CSSパーサーを書くための情報収集からです。 わかってること ロード済みのスタイルシートは、document.styleSheets に擬似配列として格納されています。長さは document.styleSheets.length から取得できます。 スタイルシートの各ルールは、cssRules (IE なら rules)に格納されています。 document.sty
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
Nicole Sullivan「再フロー＆再描画：Javascriptを重くするCSS」 - 以下斜め読んだ内容
Yahoo!のNicole Sullivanの2009.3.27のブログエントリ Reflows & Repaints: CSS Performance making your JavaScript slow? ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ 再フロー＆再描画をどうやって減らすか。 TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。 MS独自仕様のcss expression使うな。 のみ。 以下斜め読んだまとめ。 Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中 再描画と再フ
VMLやSVGを用いた角丸コーナー
おはようございます。時間があるときに、以下のようなサイトを作成しているのですが、この2枚のスクリーンショットは、違うところがあります。どこが違うのかというと、2枚目のやつは、ボックスのコーナーが丸っこくなっていて、いわゆる角丸コーナーと言われるものになっています。 ちょっとお洒落っぽいサイトデザインにしようと思っているのですが、そのためには、角張ったデザインよりも、角が取れたデザインの方が良いかなと考えました。で、角丸コーナーは、FirefoxやWebKit系のSafariやChromeは、以下のような感じでCSSでの指定が可能です。 -moz-border-radius: 10px; // Firefox -webkit-border-radius: 10px; // Webkit系 問題は、これらのCSSに対応していないOperaやIEです。Operaは、近い将来にサポートするでしょう
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
CSS3 in Opera
This presentation showcases CSS3 features that are being implemented in Opera. Some features (media queries, selectors) are supported in Opera 9, and we hope to support the rest in the upcoming Opera 10. To try our latest technology preview builds, go to Opera Labs. To enter presentation mode in Opera, press [F11] and use PgDn and PgUp to navigate in the document
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
CSSを編集するブックマークレット - 素人がプログラミングを勉強していたブログ
SafariにはStylish相当のものがないので自分で書く。 リアルタイムに編集できるようにするとかなり動作が重くなるので、少し工夫してる。 javascript:(function () { var css_edit = document.getElementsByClassName('_css_edit'); if (css_edit.item(0)) { Array.prototype.slice.call(css_edit).forEach(function (elem) { elem.parentNode.removeChild(elem); }); return; } var t = document.createElement('textarea'); var s = document.createElement('style'); s.type = 'text/css';
Opera の cssText - 御玉杓子スパイラル
javascriptfirefox とかで, cssText に += して更新したとき, 更新した内容をパースして一旦プロパティを更新してから, 取得するときには再び自身のプロパティより構築するようなのだけれど, opera の場合, cssText は,保存されていて, 取得するときにはそれがそのまま使われるらしい. いや, そのままと言うのもちょっとヘン. なんかよくわからないけれど, 末尾のセミコロンは消されてしまうし. ともかく cssText に += を繰り返すと, opera の場合はどんどん追加されていってしまう. その結果どうなるかと言えば, cssText 用に割当てられたバッファを使い切り, オーバーフローはしないけれど, それ以降の cssText への追加は, 奇妙に途切れた cssText によるスタイルの変更と見做されるようになるらしい. 試しに var d
Karafuto Blog - Google マップの CSS
Google マップの地図を少しでも大きくして見たいから、上の部分を検索ボックスとボタンを残して削った CSSを書いた。 /* フォームの周りを削除 */ #logo, div.example { display: none !important; } /* メニューを削除 */ #guser, #gbar { display: none !important; } /* 検索ボックスの位置を調整 */ #search .controls { padding-top: 0em !important; } body.leaf.opera { margin: 0 !important; } /* 下のリンクを削除 */ #mclip { display: none !important; }
OperaのCSSで何ができるか - ┐(´ー｀)┌なJavaScript雑記
初めて梅干しを作ってみた話 今年の夏、初めて梅干しを作りました。 私梅干し大好きなんですが、自分で作るという発想がなくて…同僚が梅シロップを作っているのに影響されて去年から梅仕事を始めてみたんですが、そのときの説明書に「梅干しの作り方」というのも入っていて、えーー梅干しって自分…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[css3-lists] cjk numbering from MURAKAMI Shinyu on 2009-02-08 (www-style@w3.org from February 2009)
Five Free Colour-Picker AIR Applications — SitePoint
Opera forums
独自拡張CSS - "何かしら図書館"
Re: List of proprietary Webkit CSS properties from Philip Taylor on 2007-11-08 (www-validator-css@w3.org from November 2007)