SVGファイルを使って、背景を波型や斜めにする方法 | MW Design
疑似要素として、画像の上に重ねる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
斜め背景でカッコいいフロントエンドデザイン - Qiita
<section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> .contents { position: relative; overflow: hidden; margin: 10% 0; padding: 80px 0; } .contents:before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 80%; margin: 3% -10% 0; background: #011931; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origi
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
