CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
CSS3でbackground（背景画像とグラデーションを同時に）指定するときの注意。／ライブラリー : アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション
アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー 2011年4月23日 CSS3はガシガシ使うべし。 最近、ChromeやSafari、Firefoxなど対応するブラウザも増えてきて、そろそろ積極的に使ってもいいんじゃないか？っていう雰囲気のCSS3。 角丸やドロップシャドウなど、いままでどうしても画像に頼らざるをえなくて、その分余計なコードや作業が必要だったものが、CSSの設定だけであら不思議！？ htmlのコードはそのままに、見た目を簡単に変えることができます。 ウェブ屋にとって、まさに『待ってました』のCSS3ですが、背景画像とグラデーションを同時に指定する場合、注意が必要です。 背景画像が出ない！ 今回は透過PNGとグラデーションを指定するという単純なもので、グラフィックツールで作ったカンプをもと
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント：一撃デザインの種明かし（15）（2/2 ページ） プログレッシブ・エンハンスメントでサイト作成のポイント 続いてプログレッシブ・エンハンスメントでサイトを作成するときに気を付けるポイントをまとめてみました。 CSS3プロパティにはベンダプレフィックスを付ける CSS3を用いる際、CSS3のプロパティには「-webkit-」「-moz-」などのベンダプレフィックスを付ける必要があります。これはW3C（Web技術の標準かを進める団体）で草案段階であるCSS3プロパティを、各Webブラウザが先行実装しているためです。 すでにべンダプレフィックスなしで実装されているブラウザも出始めていますが、しばらくはべンダプレフィックスを付けて指定することになるでしょう。 ベンダプレフィックスを付けると以下のようになります。
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
