えっ！？まだ色の指定でrgba()関数を使っているの！？ ｜ TAKLOG

2024/05/08 17 users TAKLOG 別枠 CSS 関数 サンプルコード

最近次のようなポストをしましたが、主に不透明度を伴う色の指定に現在でもrgba()関数を使用している方が多い印象です。 ポストを別枠で表示する 今年に投稿されているCSSの技術記事でもrgba()関数を使用したサンプルコードが散見されますが、現在rgba()関数はレガシーな指定とされています。 rgba()関数使っている人、... 続きを読む

blockquoteのcite属性を使って引用元をユーザーに明示する | かちびと.net

2019/08/23 12 users blockquote italic overflow net

Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です css blockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } b... 続きを読む

【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！ : アシアルブログ

2013/04/09 170 users CSS アシアルブログ ハイブリッドアプリ iPhone 橋本

こんにちは、相変わらずドラクエ10三昧の橋本です。 最近はライノス道場に通っています。 さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います（いつも忘れるので）。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) iPhoneやAndroidでリンクなどの要素をタップしたときに、i... 続きを読む

簡単、きれい！RGBaカラーを使って横メニューを作ってみる｜Webpark

2012/11/15 273 users Webpark 横メニュー 好評 透明度 統一感

RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 R... 続きを読む

ボーダーで三角形などを作るときには transparent ではなく rgba() で | Unformed Building

2012/10/03 66 users div borde border-width height

よく CSS のボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういう HTML と CSS で三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div> .test1 { width: 0; height: 0; border-width: 0 200px 200px 0; borde... 続きを読む

CSS3で知っておきたい基礎知識「RGBa」の徹底解説！｜最適化ノウハウコラム記事　～スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ～

2011/11/22 37 users 書式 透明度 CSS3 カラーコード 徹底解説

CSS3で知っておきたい基礎知識「RGBa」の徹底解説！ ページ内目次 RGBaとは 書式 ガイドライン RGBa用のカラーコードはどうやって取得するのか サンプル RGBaとは 今までカラーコードは16進数（ff9966など）で指定するものでしたが、CSS3ではRGBaという値を指定する書式を使うことにより、色の透明度（alpha値）まで指定することが可能になりました。 これにより、今まではベタ... 続きを読む

透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark

2011/08/17 100 users opacity Webpark Opera Safari 問題

ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。 対応しているブラウザ ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。 と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバ... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra クロスブラウザ対応 expression 方法

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

フレキシブルなボタン - Weblog - hail2u.net

2011/05/14 30 users Weblog hail2u.net ボタン Button デモ

ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。 View Demo: Flexible Button ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。 button ... 続きを読む

CSS3のよく使いそうな１０個のテクニックのまとめ:phpspot開発日誌

2011/04/20 162 users phpspot開発日誌 まとめ テクニック CSS3 10個

The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな１０個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影... 続きを読む

CSS3 要素を透明に出来る Opacity と RGBa の使い方 | CSS Lecture

2011/04/01 98 users opacity CSS Lecture 使い方

CSS3、HTML5、Movable Type その他Webサイト制作に関する役立つ情報を掲載します！…ここからが続きOpacity プロパティ対応ブラウザ（2011 4/1 現在）Firefox 2以上，Safari 2以上，Opera 9以上，IE8以上，Chrome指定方法・適用できるCSSプロパティ値には，コンマ（.）を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定... 続きを読む

[CSS]実例から学ぶCSS3の効果的な使い方 | コリス

2010/06/04 416 users コリス CSS 実例 CSS3 Six Revisions

CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。 Examples of CSS3 in the Wild 下記は各 [...] 続きを読む