webruary

RSS

CSS でテキストを横グラデーションで装飾。

メモがてら。
現時点でこのブログのサブタイトルに適用しているので、前回の記事とかで実際に確認できます。

css
h1{
	display: inline-block;
	color: transparent;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, #1E67BD, #943F94);
}
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	h1{
		color: #1E67BD;
		background-image: none;
	}
}

『display: inline-block;』の部分は、ブロック要素だと横いっぱいになる関係で文字数分のグラデーションにならないのを防ぐため。
なので <strong> とか <span> とかのインライン要素なら不要。

『background-clip: text;』は Firefox(Ver.60) ではプレフィックス無しでもイケましたが、Chrome ではプレフィックスが必要だったので『-webkit-background-clip: text;』も入れてます。

グラデーションは『linear-gradient』の『to right』で横にしてますが、『90deg』とか角度を指定しても大丈夫。

そして IE(10・11) は『background-clip』の『text』に対応していないので、『@media screen~』のハックで対応しました。
はい。IE 9 以下は切り捨てるスタイル。
むしろ Windows7 のサポートが終わってしばらくしたら、 IE 11 も無視していくかな。

CSS で親要素より大きい子要素を上下左右で中央揃えにする。

なんだか久しぶりに CSS でハマった…。
やりたかったことは、画像の一部を表示させたものを並べて、マウスオーバーすると画像全体が表示されるってやつ。

html は <ul> でリストを作り、<li> の中に <div> で囲んだ <img> と画像のタイトルが入ってるよくありがちなモノ。

CSS では <li> を float し、<div> に width・height 指定して overflow:hidden; にしておいて、マウスオーバーしたら overflow: visible; みたいな。

やりたかったこと

ふつーにリストで表示する際には特に問題なかったんですが、画像の一部を表示するのにだいぶ手こずって…。
なのでメモ代わりに。

続きを読む »

Firefox の Stylish でYahoo!・Google・bingの検索結果に順位表示。

Firefox

数年前に旧ブログで『GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。』ってのを書いてましたが、実はこちら、その後の検索サイト側の仕様変更などにより使えないのもあったりします。
で、自分はちゃっかり他のスクリプトに変更したり、Yahoo! に至っては Stylish を使って対応してたりしました。

話は代わり、昨日 Firefox をクリーンに再インストール。

パソコンが変わった時とか OS 再インストールした時等、いつもは『MozBackup』を使ってましたが、今まで about:config でイロイロいじった上に、古いバージョンからアップデート続きのバックアップファイルからの復元だったので、なんとなくスッキリしたくて MozBackup の復元を使用せず、再インストール後はほぼ手動で復元しました。

そこで、手動ついでにイロイロ整理してる中、実は Greasemonkey で使ってるスクリプトは Google と bing の検索結果に順位を表示するのみだったので、じゃぁ、Greasemonkey やめてこっちも Stylish でやっちゃえばいんじゃないかな?みたいな。

続きを読む »