こんにちわ。
子供の出産予定日を過ぎているので、毎日お腹に応援歌を歌ってるADの野田です。
前回書かせていただきましたデザイナー募集の記事では、
一切笑いのない記事となり大変申し訳ございませんでした。
してやったりだったので、ドSな僕としてはちょっと快感でした。
今回、cssを使っていて私自身が「へぇー」となったものを記憶をたどってご紹介させていただきます。
常に、新しい技術等をチェックしているつもりですが、
日々の業務との葛藤で、つい情報を見逃してしまうこともございます。
そんな方は、今回の記事を見て「へぇー」っと、なっていただけると嬉しいです。
知らなくても恥ではないので、これを期に使ってみましょう。
なお、今回は単純に「こんなの出来るんだ」ということを知ってほしいだけなので、
対応のブラウザやバージョンは記載していません。
ご了承ください。
文字は透過せず、背景のみを透過する
これはとても簡単です。
背景を設定するボックスをOpacityではなく、RGBaで指定するだけです。
Opacityで設定しまうと、重なっている文字まで透過されてしまいますね。
指定方法はこのようになります。
background-color: rgba(赤,緑,青,数値)文字数制限を行って、 省略符号「…」をつける
これは、動的な見出しやパンくずリストなどにつかえますね。
指定方法はこのようになります。
width: 横幅;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;背景を複数重ねる
今までは、背景を重ねたい場合は複数のボックスを用意する必要がありましたが、
css3では、背景を一つのボックスで指定できます。
指定方法はこのようになります。
background-image:url(../images/img01.jpg), url(../images/img02.jpg)テキスト選択時のハイライトのカラーを変更
テキスト部分を選択した際の、カラーを変更する方法です。
こういう所ですよね。
指定方法はこのようになります。
::selection{
background:カラー;
color:カラー;
}
::-moz-selection{
background:カラー;
color:カラー;
}スマフォのハイライト表示
スマフォでリンクをタッチした際に、背景色が変更されますが、
その背景色を変更することができます。
指定方法はこのようになります。
a{
-webkit-tap-highlight-color:カラー;
}どうでしょうか。
あなたの知らないcss3の使い方はありましたか？？
人によっては、「へぇー」とはならなかったかもしれませんが、参考までにしてください。
冒頭にも書かせていただきましたが、仕事に追われていると、ついつい見逃してしまうこともあるので、インプットはしっかりとしていきましょうね。
僕も気をつけます。
よろしくお願い致します。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
