CSS だけでスムーズスクロール

  2021/03/03

以前は、jQuery や JavaScript でスムーズスクロールをいろいろ実装していましたが、CSS3 で1行書くだけで対応可能です。


html{
    scroll-behavior: smooth;
}

ただ 2021/02 時点で IE はもとより Safari に対応していないので、実際には JavaScript での記述も必要になります。

[Sass]インストール

  2015/03/17

最近のOSXならruby、gemがインストールされていると思うので、Sassをすぐインストールできる。

Sassインストール

$sudo gem update --system $sudo gem install sass $sass -v

Compassインストール

$sudo gem install compass $compass -v

[Bootstrap]印刷時のURL表示を削除

  2014/05/21

Bootstrap(2.3.2)を利用していると、印刷時にaリンクのURLが表示される。

content属性を空にすることで、URLを非表示にできる。 [css] @media print { a[href]:after { content: "" !important; } abbr[title]:after { content: "" !important; } } [/css]

ちなみに、bootstrap.cssには以下の設定がされている。 [css] a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } [/css]

css

  2013/07/23

http://codepen.io/picks/

背景色の透過

  2013/05/28

背景の透過はブラウザ種類によって書き方が様々。

opacity

opacityで透過してしまうと対象タグ内の要素まで透過してしまうので、背景だけ透過するのは現実的でない気がします。

背景に透過画像

background で背景を透過画像にするのがブラウザ依存が少ないのがメリットだけど、デザインがfixしない場合は非効率であるのと、コンテンツが重くなりがちです。

rgba()

今のところrgba()を使うのがいいような気がしますが、IE8以前では利用できないので、IEでは filter で代用してやります。

ということで、現状自分なりにメンテしやすいのが以下の書き方かと。 jQueryでも指定できますし。

例

[css] background-color: #f1d46f; filter:progid:DXImageTransform.Microsoft.Alpha(Style=2,Opacity=90,FinishOpacity=90); background-color: rgba(241, 212, 111, 0.7); [/css]

<< Top < Prev Next > Last >>