43 loadersは43のCSSローダーをまとめたCodepenです。CSSといってもアニメーションはJSで制御していますのでピュアCSSでやるなら書き足す必要があります。シンプルなものからユニークなものまで揃っている印象でした。参考にしたいですね。 43 loaders
![43のローダーをまとめた・「43 loaders」](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)
こんにちは。まろCです。 今回は、SVGで画像をクリッピングマスクするときに、ほとんどのブラウザできれいに表示される方法をご紹介したいと思います。 案件でこのデザインが上がってきたときに調べた情報を共有します。 SVGでクリッピングマスクとは 画像にsvgの図形の形で切り抜くイメージでこのようなブラウザ上で画像加工ができるものです。 この出来上がりを目指してコードを紹介します。 準備するもの 画像…すごくかっこいいゴリラの画像を使います! svg…今回はこの形で切り抜きます(わかりやすいように背景を黒くしています) 手順 HTMLソース こちらになります! See the Pen KrQoWY by maroc (@maroc) on CodePen. 処理のながれ 画像を読み込んだSVGタグと、クリップしたい図形のsvgをHTMLに記述します。ことのき、図形のほうはposition: a
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか? Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く