CSS 画像を三角形にマスク抜きする方法 - by Takumi Hirashima
CSS で画像を三角形に切り抜き（マスク）する方法を紹介します。 例えば、デザインのアクセントで画像をマスクしたいときに便利な方法です。 CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path が便利です。 例えば、正方形の要素に背景画像を指定して、三角形に切り抜く場合は次の指定行います。 .clip-path { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } これは正方形の上下に合わせた面長な三角形になるため、正三角形の場合は次のように指定します。 .clip-path { clip-path: polygon(50% 0%, 0 85%, 100% 85%); } この場合、正方形に対して上付きで配置されているので、
CSSのテキストマスクで映えるメインビジュアルを実現
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示
現役デザイナーが教える！CSSを使った円形サークルの使い方完全ガイド
この記事では、CSSでスタイリングされた円形コンテンツを使うときのポイント、そしてトラブルシューティングを実例サンプルコードと一緒にまとめています。 円形コンテナ、円形サムネイル、サークル型ボタン、円形パスに沿った文字テキストの配置など、かゆいところに手が届くテクニックをマスターしましょう。 サークル円の作成方法について HTMLとCSSで円形を表現する方法はいくつかあり、それぞれ長所と短所があります。ここでは、もっとも一般的なテクニックからマイナーなものまで、実際にウェブサイトで利用したサンプル例を見ていきましょう。 Border Radiusプロパティをつかった方法 もっとも一般的なテクニックは、要素のすべての角を50%に丸める方法です。もっとも手軽に適用でき、各種ブラウザに幅広くサポートされています。プロパティborder-radiusは、境界線や影、要素のタッチ/クリックのターゲッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
