サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
manamiw.com
clippathとは、指定をした特定の形に切り抜くためのCSSプロパティです。 svgのパスデータなどを使うことができ、クリッピングをすると、切り抜いた外側は表示されません。 改めて理解を深めたかったので、レスポンシブ対応の仕方も含めて、clippathについての使い方をまとめてみました。 clippathの基本の使い方切り抜きたい画像にたいして、clippath:〇〇;でパスの形を指定します。 例えば、下記のような書き方です。 <p class="sample"><img class="clip-me" src="A.png" alt=""></p> img{ width:100%; height:auto; object-fit:cover; } .sample{ width:150px; height:150px; } .clip-me{ clip-path: circle(50%
なんとなく記憶があいまいだったため、 illustratorでsvgファイルを書き出した後、 マウスオーバー時や状況に応じて、アイコンやロゴの色をCSSで変更する方法をまとめてみました。 SVGファイルの基本の色指定Illustratorでのsvg書き出しまずはSVGファイルの基本となる色指定についてです。 例えば、illustratorの書き出しから デフォルト設定でsvg形式に保存した場合、SVGファイルをエディターで開くと <svg xmlns="http://www.w3.org/2000/svg" width="102.75" height="97.72" viewBox="0 0 102.75 97.72"><defs><style>.a{fill:#ff7bac;}</style></defs><polygon class="a" points="51.37 0 67.25
疑似要素として、画像の上に重ねるHTMLに直接svgを記述するやり方もある(その方がCSSでの変更も簡単そう?)けれど、 あまりHTMLの方をごちゃごちゃさせたくなかったので、 今回は、CSSにsvgの外部ファイルを読み込んで表示させる方法を選択しました。 <section class="wave"> <h2>Contents</h2> </section> .wave { background: url("../img1.jpg") no-repeat center; background-size: cover; height: 500px; position: relative; display: flex; /*contentsをcenterに*/ justify-content: center; align-items: center; font-size: 3.0rem; fo
このページを最初にブックマークしてみませんか?
『MW Design | Illustrator & Graphic Designer Website』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く