CSS - display:flex

非推奨のmarqueeタグのような動作をモダンなCSSで再現

Result See the Pen CSS Marquee Examples by kachibito (@kachibito) on CodePen. ジオシティーズ時代のWebサイトの象徴のような存在...

detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ

Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...

なるべく少ないコードでレスポンシブなtable

Result See the Pen Responsive Tables #2.5: Flexbox by kachibito (@kachibito) on CodePen. ※内容は最新の方法的なものではなく以前か...

CSSだけで簡易的なリストのソート

Result See the Pen Sort Elements with Flexbox (Pure CSS) by kachibito (@kachibito) on CodePen. 選択したグループに該当するア...

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

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

画像にマウスホバーでグラデーションのオーバーレイエフェクト

Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...

アニメーション&フェードエフェクトで複数画像を表示する

Result See the Pen Ken Burns effect CSS only by kachibito (@kachibito) on CodePen. css html via Ken Bur...

見出しでテキストの終わりから先は線にする

Result See the Pen gogOYa by kachibito (@kachibito) on CodePen. 平行線を挿入する見出しの左寄せ版、みたいなのです コードがシンプルで使いやすい印象でした css...

シンプルなパララックスとアニメーションしながらゆっくり拡大/縮小するヘッダ

Result See the Pen CSS Animated Header by kachibito (@kachibito) on CodePen. css html via CSS Animated Header...

flexboxを使った要素の中央配置

Result See the Pen Vertically-Center Anything by kachibito (@kachibito) on CodePen. flexbox、align-items: center;を使って...
Ads