CSS - Archives

任意のテキストでチェックボックス

Result See the Pen Text Only Checkboxes by kachibito (@kachibito) on CodePen. 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます ...

SVGで作る非長方形なヘッダ画像いろいろ

Result See the Pen Non Rectangular Headers with inline SVG by kachibito (@kachibito) on CodePen. インラインに書いたSVGを画像に重ねる...

CSSだけでスクロールに応じたプログレスバー

Result See the Pen CSS only scroll indicator by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが進んで、 あとどれくらいページの...
Ads

クリックで展開する円状のメニュー

Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...

CSSだけでLightbox風に画像ポップアップ

Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...

アニメーションするボケ

Result See the Pen Bokeh effect (CSS) by kachibito (@kachibito) on CodePen. アニメーションで動くボケた玉をCSSで実装したもの 方法はシンプルで、以下のよ...

CSSだけでスクロールしても追従するサイドバー

Result See the Pen WyQWoL by kachibito (@kachibito) on CodePen. よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。 特にトリックでもな...

水の波紋っぽいエフェクト

Result See the Pen CSS ripple effect by kachibito (@kachibito) on CodePen. 水上で起こる波紋のようなエフェクトです css html via...

CSSのみでMasonryライクな段組レイアウト

Result See the Pen Pure CSS Masonry Layout by kachibito (@kachibito) on CodePen. 過去はJSで何とか実装していたPinterestのようなMasonry...

文章の一部を訂正した風のスタイル

Result See the Pen del-ins pair by kachibito (@kachibito) on CodePen. こういうやつ。insとdelタグを使用します フォントやrotateを使う事でリアル感...

detailsタグでクリックで開閉するFAQコンテンツ

Result See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen. detailsタグでFAQコンテンツっぽいや...

絵文字はCSSで使えるのか

Result See the Pen Emoji in HTML tag names and CSS Variables by kachibito (@kachibito) on CodePen. 普通に書けるみたいですね。だからど...

カラフルな3Dテキスト

Result See the Pen Single element, multi coloured 3d text effect by kachibito (@kachibito) on CodePen. テキストを3D化してカ...

CSSだけで3Dなカルーセル

Result See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen. 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時...

CSSだけでOne page scrollなWebサイト

Result See the Pen One page scroll by kachibito (@kachibito) on CodePen. 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト(On...

CSSだけで作るシンプルなニュースティッカー

Result See the Pen Pure CSS Ticker (Horizontal) by kachibito (@kachibito) on CodePen. メディアサイト等でまだ見かけるやつ。 :hoverで一時停...

シャドウもグラデーションにする

Result See the Pen Simple button with gradient shadow in CSS by kachibito (@kachibito) on CodePen. ボタンがグラデーションなのでシャド...

絵文字👭にアニメーションエフェクトを加えてみる

ふと、絵文字にアニメーションを加えたらどうなるのかな、と思ったので動作テストです。 コードはPENをご参照下さい。 Result See the Pen Squiggly Text by kachibito (@kachibito...

画像をタイル画風にする

Result See the Pen Image Mosaic Effect with CSS Grids & Blend Modes by kachibito (@kachibito) on CodePen. 画像の上に要素を重ね...

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

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

アニメーションする簡易的なバーチャート

Result See the Pen simple bar chart with css by kachibito (@kachibito) on CodePen. 必要最低限のCSSで実装する、みたいな、お手軽チャートの実装例です...

CSS変数でイージングアニメーションを管理

Result See the Pen LQgZBv by kachibito (@kachibito) on CodePen. カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにします css ...
Ads