CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
【CSS】mac×webkit系のブラウザで文字が勝手に太くなるのを回避する。 | 株式会社オールフェスタ
ねぎ味噌味のおせんべいにハマりました。田所です。 濃い背景色×白いテキスト×webkit フラットデザインっぽさを出したいとき、濃い背景色にテキストを乗せることがままあると思います。 (メイリオをつかうとWindows8っぽくなりますね) しかしいざコーディングしてmacのChromeやSafariなどのwebkit系ブラウザで見ると、明らかにPSDよりテキストが太くなっているときがあります。 font-weight: bold;も指定してないのになぜ… どうやらwebkitの独自拡張プロパティのしわざっぽい。 1年くらい「暗い背景色の時にフォントが太くなる問題」が気になっていて、どうしてもなんとかしたいときにはtext-shadowを使って力技で細くみせたりしていたのですが、先日ついに原因らしきものを見つけました。
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ かなりレアなケースだと思うのですがiPhoneのSafariで特定のzoomとfont-sizeの際に文字サイズが拡大するバグがあります。 次のようなCSSとHTMLの組み合わせ html{ zoom:0.5; } p.case1{ zoom:2; font-size:10px; } p.case2{ font-size:20px; } p.case3{ font-size:21px; } p.case4{ font-size:22px; } <h1>case1</h1> <p class="case1">1あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p> <h1>case2</h1> <p class=
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
Webにおけるフォントと2004JISなどの諸問題について考えてみた（2010春）。 - 遠近法ノート
細かい話をすると膨大になる（というか自分の手に余る）ので、簡潔に書きます。 とりあえず今後のWeb制作の参考になればと。 結論：font-familyで和文フォント名を指定するのは、もうやめる。 そのかわりに、 font:menu;と書けば、OSのシステムフォント（menu以外にも、icon、message-box、caption、status-barがある）を指定できる。 Mac OS Xの諸問題。 ●OS X（10.5以降）のヒラギノは2系統あることに注意。 ●ブラウザで見るフォントは今でも2004JIS（の字形）になっていない。混在している。なぜか？ ●各サイトのCSSでヒラギノPro（ProNではなく）を指定している。 ●ブラウザのデフォルトにヒラギノPro（ProNではなく）が選択されている場合がある。 ●とあるテキストエディタのデフォルトもヒラギノProだったりorz ●Pro
CSS で外部リンクにだけアイコンを表示
当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
【CSS】Safari 3.1とCSS transforms and transitionで遊ぶ！ | バシャログ。
先日リリースされたSafari3.1は「CSS transforms and transition」を正式にサポートしています。 なんでもCSSでアニメーションを設定できちゃうとか。 ソレは面白い！てコトでさっそく試してみました。 （Safari 3.1で閲覧ください） 静的な表示を制御 まずは各要素のスタイルを静的に設定してみます。 共通の設定はこんな感じです。 <style type="text/css"> .box { width: 100px; height: 60px; margin: 0 auto 50px; background: #555; color: #FFF; text-align: center; border: 2px solid #999; } </style>
Font Property Font Family
Font Family フォントの書体を指定します。 HTMLの<FONT FACE="★">と同じ機能です。HTML 4.01で<FONT>タグは、非推奨要素となり、スタイルシートで指定指定するように推奨しています。 値は、フォント名や汎用フォントファミリー名で指定します。 ●関連プロパティ FONT フォントファミリー名 フォントファミリー名は、フォント名を指します。フォント名は、ワープロなどソフトで表示されているフォント名で指定します。（ファイル名ではありません。 例. ARIAL.TTF） 「Arial」の場合「Arial Bold」や「Arial Italic」がありますが、「Arial」がフォントファミリー名になります。 Times New Romanのようにスペースが入るフォント名の場合、""で囲むように推奨しています。ＭＳ Ｐゴシックの場合、全角のＭＳに半角スペー
CSSでdtとddを横並びにする - eto.com/d
#case01 dt { float: left; width: 5em; } #case01 dd { margin-left: 5em; } #case02 dt { width: 5em; } #case02 dd { margin-left: 5em; margin-top: -1.6em; /* margin、padding は 0 なんで dt、dd それぞれの line-height 値の半分を足した値をマイナス */ } #case03 dt { width: 5em; position: absolute; left: 40px; /* body に指定している padding: 40px; と同値 */ } #case03 dd { margin-left: 5em; }という3種類の方法があるが，どれも希望する動作と若干違う．compact指定と同じ見た目になるのがい
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
HTML,CSSバグ＆回避法リスト : 1. 目次
このページは普段ホームページを作っていて ブラウザのバグや独特？の仕様、 各ブラウザでの実装の違いなど気が付いたことをまとめたものです。 すぐ試せるように できるだけ症状が出るサンプルを載せ、 その回避方法についても触れるようにしました。 勘違いしているところ、或いは バグ回避のうまい方法があったらお知らせください :-)。 問題点だけ列挙しても とっつきにくいと思うので 「バグや互換性問題を避けるコーディング作法」 のページを作りたいと思っています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
黃色a片三級三級三級,激情 人妻 制服 丝袜,激情 自拍 另类 亚洲,激情国模精品图套150p
CSS 3の段組みと、その使いどころ | クリエイティブ・タブロイド withD（ウィズ・ディー）