Web Design

Web Design for Imacrea Company

Website renewal for a company specialised in remote works.Simplestructure as this is the clients’favourite,Designed to showcase honesty with the corporate colour and gold combination.Also more friendly atmosphere byadding illustrations. リモートワークに特化した会社のサイトのリニューアルです。シンプルな構成との要望を踏まえて、コーポレートカラーのグリーンとゴールドを基調としイラストも随所に取り入れることで、信頼性があり、また以前のサイトよりも親しみやすさを伝えることを心掛けました。

SVG画像を使って、背景を波型や斜めにする方法

Webデザインでちょっとしたアクセントをつけたいときなど、例えばキービジュアルとかで使えそうなsvgファイルを使って拡大しても荒れない方法を調べたので、備忘録もかねてメモします。 SVG画像を用意 疑似要素を使い、画像に重ねる 斜めに切り抜きたい場合 外部svgの色を変えたい場合は? 切り抜きに便利そうなサイト 1 SVG画像を用意 illustratorとかAdobe XDとか、何でも良いけれど、パスでできた、型抜きに使いたい画像を作り、.svg形式で書き出し。 Illustratorで作ったデータの場合、.svgのファイルを開いて、タグ内にpreserveAspectRatio=”none”を入れてあげると、画像のアスペクト比を変更できるようになるので、入れておくと扱いやすいです。 2 疑似要素を使い、画像の上に重ねる 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; font-weight: 600; color: #FDFCDC; } .wave::after { background: url(“../wavesNegative.svg”); bottom: 0; content: ”; height: 150px; position: …

SVG画像を使って、背景を波型や斜めにする方法 Read More »