CSS - Archives

テーブルのセルが空だった場合にハイライトしたり文字を挿入したり

Result See the Pen GQKmMW by kachibito (@kachibito) on CodePen. 5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCS...

CSSだけで、長いテキストを一部隠してボタンクリックで全文表示

Result See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen. たまに見かけるコンテンツの表示/非表示のトグルです c...

ラジオボタンでタブ実装

Result See the Pen Basic CSS content switcher demo by kachibito (@kachibito) on CodePen. 今更感満載かもですが、いわゆるCSSオンリーのタブです...
Ads

リストを自動で3列に分ける

Result See the Pen CSS3 Multi Columns by kachibito (@kachibito) on CodePen. リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使いま...

tableで任意の行にマウスホバーしたら他の行をblurさせる

Result See the Pen Fade and Blur on Hover Data Table by kachibito (@kachibito) on CodePen. マウスホバーしてるところ以外をぼかしてホバー中のコ...

ノイズが走っているようなエフェクトのテキスト

Result See the Pen CSS Glitched Text by kachibito (@kachibito) on CodePen. CSSのみでノイズなテキストエフェクトを実装しています。 clipとkeyfra...

CSSだけでcheckboxのチェック数をカウントする

Result See the Pen opWdyj by kachibito (@kachibito) on CodePen. content: counter;を使ってチェック数をカウントする、というもの JSによるもののように...

リンク先の拡張子に合わせてアイコンを表示する

Result See the Pen #3 Selector de Atributo $= by kachibito (@kachibito) on CodePen. 等のように拡張子を限定してアイコンを付与する css h...

サーチアイコンをクリックすると検索窓がスライド表示する

Result See the Pen Animated search Form by kachibito (@kachibito) on CodePen. アイコンをクリックで検索窓が飛び出す、みたいなの css html ...

シンプルなタイムライン

Result See the Pen Responsive HTML Timeline by kachibito (@kachibito) on CodePen. RWD対応のシンプルなタイムライン css スマフォ向けのコード...

背景を斜めにする

Result See the Pen dJNjQo by kachibito (@kachibito) on CodePen. 親要素を回転させ、子要素を逆回転で元に戻してます css html via none

矢印型のパンくずナビゲーション

Result See the Pen Pure CSS3 breadcrumb navigation - the pixel perfect way by kachibito (@kachibito) on CodePen. 矢印型...

CSSのみで作られたスピナー集

Result See the Pen Such Spinners, Much Loading by kachibito (@kachibito) on CodePen. CSSのみで作られたスピナー集です。 見た目とは反してkey...

box-shadowを利用したボタンのホバーエフェクト集

Result See the Pen Hover buttons using box-shadow inset by kachibito (@kachibito) on CodePen. box-shadowを応用したボタンのホバー...

フォーカスするとlabelが上部に移動しながらテキストが縮小する

Result See the Pen Floating Label Pattern by kachibito (@kachibito) on CodePen. プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部...

CSSだけで要素に自動連番

Result See the Pen auto nanbering by kachibito (@kachibito) on CodePen. ulのように自動で連番が付くやつです。li以外でも実装可能です css ca...

ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト

Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...

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

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

ダイヤモンド型のボタン

Result See the Pen DIAMONDS by kachibito (@kachibito) on CodePen. ダイヤモンドの形のボタン。 シンプルに、オブジェクトを回転させ、テキストだけ元の角度に戻してます ...

画像を背景にした吹き出し

Result See the Pen Image arrow (Pure CSS) by kachibito (@kachibito) on CodePen. よく見るCSS吹き出しに画像背景を設定した案 通常の吹き出しを作る方法...

タグにマウスホバーすると記事数がスライドする

Result See the Pen Sliding Tags by kachibito (@kachibito) on CodePen. 記事に紐付けられたタグ等の数値がマウスホバーでスライドする、みたいなの これ自体はだいぶ昔...

CSSだけでマウスホバーした方向に応じてエフェクトを変える

Result See the Pen Direction aware hover pure CSS by kachibito (@kachibito) on CodePen. CSSだけでどうやってるんだろう、と思ってコード見たらい...
Ads