CSSのみでプレーンテキストにクールなグラデーション効果を付けるテクニック:phpspot開発日誌
CSS Gradient Text Effect Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). CSSのみでプレーンテキストにクールなグラデーション効果を付けるテクニック。 テキストと画像を使って、テキストの背景に画像を混ぜて次のようなテキスト効果を得るCSSテクニックが紹介されています。 JavaScriptやFlashなどは一切使用していない、PureCSSになっているそうです。 デモページはこちら(FireFox等
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
IE7用CSSハック使用上の注意（特にはてなダイアリーにおいて）
2006-10-25 追記。IE7正式版で挙動が変わりました。ベータのときは無効にされていたアンダースコアハックが、後方互換モードにおいて有効になりました。標準準拠モードでは無効のままです。このためこのエントリーでとりあげたはてなダイアリーでのレイアウト崩れの問題は、正式版では発生せず、問題ではなくなりました。 2006-11-03 追記。取り急ぎのまとめ。→IE7でCSSレイアウトが崩れる原因でありそうなこと - KAZUMiX memo IE7 Betaはすごい勢いでシェアを伸ばしているようである。オレが愛用しているOpera 9を抜き去るのも時間の問題と言う勢いだ。*1そんなわけでいつまでも無視するわけには行かなくなってきたIE7の問題。IE6やそのほかのブラウザでは問題ないが、IE7では表示が崩れれてしまうCSSの対策などを調べているうちに面白いことが分かった。*2 IE7の後方互
タグクラウドみたいなのの単語の折り返しに関して
単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。 Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。 で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。 サンプルは以下より確認できます。 単語の禁則処理に関してのサンプル 取りあえず、サンプル見てもらうと2つ似たようなのがあるんですが、タグクラウドみたいなのを作ったときに普通に作ると多分2番目みたいになるかと思います。 通常はコレで問題ないのです。 なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。 更に、IE6だとoverflo
[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。
集中連載「使える CSS テクニック」も第 9 回になりました。 今回は CSS だけで画像ギャラリーを作ります。 画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。 サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i
![[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f04f51f665d4fe314a73e02dd292b1a511f25a26/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Centering (horizontally and vertically) an image in a box
The problemWe want to center an image inside a container, bigger than the image and with assigned dimensions. The image is not a background one, it’s a true <img> element. Any image has well defined dimensions, so the easiest and most reliable way to solve the problem is: make the image display:blockassign to the image the needed left and top margins to get it centered in the container. Each of th
background-position - CSS Dencitie
背景画像の初期位置を指定します。インライン要素には効果がありません。 順序としては、背景色、背景画像、最後に内容となります。ですので、透過になっている部分からは背景色が見えます。 ルート要素に指定した場合は、外辺で考えます。 "0% 0%"の値の対で画像の上左端を要素のパディング辺の上左端に、"100% 100%"の値の対で画像の下右端を要素のパディング辺の下右端に、"14% 84%"の値の対で画像の右から14%上から84%の点を要素の右から14%上から84%の点に設定します。 "2cm 2cm"の値の対では、画像の上左端を要素の上左端から右2cm下2cmに設定します。パーセンテージとの違いに気を付けてください。 ※上の例は、96ppiの場合です。 値が一つだけの場合は、それを水平方向に適用して、垂直方向は50%と解釈されます。 キーワードはパーセンテージや長さと組み合わせては使用出来ませ
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル
SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの
Ring
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
CSS で簡単に上下中央揃えを実現する | ヨモツネット
概要 CSS のみで、table 要素のような上下中央揃えを実現するための方法と解説です。 たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。 対応 Web ブラウザ Firefox 1, 2 Netscape 6, 7.1 Safari 2, 3 Opera 9.2 IE 5.01, 5.5, 6, 7 ( inline-block で実現) で意図した通りに表示されることを確認しました。 解説 中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。) div.sample1 div { display:table-cell; } ただし、 IE 6, 7 に
Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan
アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 対談：クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 現場業務のデジタル化を促進 リモートワークが生んだ課題をアプリで解消 ベネッセのデジタル変革を紹介 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス みんなが使うMySQLの企業活用 なぜ有償サポートがあったほうが良いのか？ 有名テクノロジー企業もOracleに頼む理由 コンテナをエンプラITに！
WinIE6 と Safari, Netscape, Firefox のCSSボックス解釈
WinIE6とモダンブラウザではボックスサイズの計算が異なる 例：paddingやborderを指定した場合 div.Test { background: #8ad09e; width: 500px; height: 500px; padding: 50px; border: 50px solid #023e35; } ボックスサイズの解釈の違い 見た目は同じでも、padding, border の値が、 WinIE6は減算、Safari, Netscape, Firefoxは加算される。 指定したピクセルと解釈が異なる為、レイアウトがガタガタになる。 2007年12月3日 追記 BOXモデルの解釈は、DOCTYPEでも異なる模様。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでテキストにグランジ効果を与えるサンプル:phpspot開発日誌
SitePoint CSS Reference
CSS Dencitie