タグ

ブックマーク / agohack.com (2)

  • [CSS] Safariでも使える border-imageで下線グラデーション

    border-image を使って見出しに下線グラデショーンをつけたら、 Chrome や FireFox では問題ないのに、 Safari だと左と上の線が表示されていた。 border-image の書き方を変えたら Safari でも正しく表示されるようになった。 Safari は、バージョン12.1.2。 Safari で問題のあった書き方 ググるとよく紹介されている書き方と同じ。 Safari でも、 Chrome と同じように表示させたい。 border-bottom: 1px solid; border-image: linear-gradient(to right, #666 0%, #fff 100%); border-image-slice: 1; border-image で border-image-source に画像の URL を指定しないと、初期値 none

    [CSS] Safariでも使える border-imageで下線グラデーション
  • [jQuery] トップへ戻るボタンの実装サンプル

    画面右下によくある「 Page Top 」とか「ページトップへ戻る」ボタンの jQuery を使ったコードサンプル。 スクロールしたらボタンが表示されるバージョン。 ボタンに FontAwsome を使ったりデザインによって CSS が変わるが、 jQuery で作成する動きの部分は共通して使える。 基的なコード 「 TOP 」とだけ書かれたボタンのサンプルコード。 四角形に文字列を表示しているだけなので、CSS もシンプル。 デモ See the Pen Top Page Button Demo by AgoPeanuts (@AgoPeanuts) on CodePen. HTML jQuery ライブラリを読み込む。 head タグ内に下記コードを書く。このコードは CDN からロードさせている。 <script src="https://ajax.googleapis.com/a

    [jQuery] トップへ戻るボタンの実装サンプル
  • 1