CSS - Archives

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

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

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

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...
Ads

アニメーションするボケ

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 ...

ボタンにSVGを使って水がせりあがる様なホバーエフェクト

Result See the Pen Mana Button by kachibito (@kachibito) on CodePen. SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルタ...

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

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