2018年07月7日(土)
SVGで作る非長方形なヘッダ画像いろいろ
Result
See the Pen Non Rectangular Headers with inline SVG by kachibito (@kachibito) on CodePen.
インラインに書いたSVGを画像に重ねる
背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できるcss
.card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wrap-image svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; } .card .wrap-image svg polygon, .card .wrap-image svg path { fill: #ddd; stroke: #dd...
0
4
13
38author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『SVGで作る非長方形なヘッダ画像いろいろ』についてまとめています。
この記事は特にCSS3・アイコン・SVG・WordPress・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
