CSS - clip-path

SVGを使ったCSSツールチップ

Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...

clip-pathで背景を斜めにカットする

Result See the Pen CSS Tip of the Day 17 by kachibito (@kachibito) on CodePen. CSSで背景を斜めにカットする方法です。別段特別な内容で...

CSSと1つのdiv要素で出来る表現いろいろ

Result See the Pen Single div challenge by kachibito (@kachibito) on CodePen. 1つのブロック要素とCSSで出来る表現をまとめたもの。スタ...

動画を再生したまま一部だけチラ見せする

Result See the Pen Video button animation by kachibito (@kachibito) on CodePen. 動画をあらかじめ再生しておいて一部だけ見せる事でユーザ...

CSSと1つのHTML要素で作る、2つの三角形を使ったプリローダーいろいろ

Result See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen. 三角形を使ったプリローダーです。全てCSSのみ且...

Clip Pathで画像内の任意の箇所にスポットライトを当てる

Result See the Pen Highlight a part of the image - Clip Path + Grid by kachibito (@kachibito) on CodePen. CSS...

レスポンシブ対応のヘキサゴンブロックを使ったハニカム構造のグリッドレイアウト

Result See the Pen Responsive Honeycomb Layout by kachibito (@kachibito) on CodePen. flexboxでハニカム構造なレイアウトです ...

画面を斜めに分割して2つの動画を表示する

Result See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen. 画面を斜めに分割して動画を2つ同時に再生するサンプルで...

アニメーションやData URI scheme、clip-path等を使った高度なテキストホバーエフェクト集#1

Result See the Pen 10 stunning hover effects with scss by kachibito (@kachibito) on CodePen. 高度なテキストホバーエフェクトのサンプル集です...

CSSグリッドとclip-pathで漫画のようなレイアウト

Result See the Pen Comic book style layout with CSS Grid by kachibito (@kachibito) on CodePen. css html can ...
Ads