CODEPEN

本

Codepen で見つけた気になるモックアップを収集

運営しているクリエイター: Yuusuke.Goto

くるくるパネル [ codepen ]

複数枚の画像を重ねて横回転で切り替えるエフェクトを入れた実装です。なんだかコミカルな雰囲気を感じさせるエフェクトでかなり好きです。 SUPER MARIO MAKER 2 公式サイトで実装されているものから勉強させていただきました。公式サイトでは５つの画像を必ず用意しなければいけない感じの実装になっていたのでちょっと拡張させていただいて、 Stylus で書いた↓この部分の数字を増やせばいくつでもいける感じにしてみました。 item-count = 5 このために

ニュース表示（1行版） [ codepen ]

お知らせを１行ずつ表示するヘッドライン形式のコンポーネント。今回は SUPER MARIO MAKER 2 のホームページにあったものをトレースして勉強させていただきました。アニメーション含め、基本的にはCSS制御になっており、ニュースの移動用セレクタの切り替えだけJSで制御。非常にシンプルでわかりやすい。

text crop [ codepen: css ]

HTMLで記述した文字要素で勝手に入る上下余白があります。 margin でも padding でもなく、フォント自体が持っている余白。これを調整するための SCSS, LESS, Stylus コードを生成できるサービスで Text Crop というのがあります。 ↑こちらの Text Crop の微調整機能、フォントの種類やサイズ、行間などによって微妙に調整値が変わってきます。それをフォントサイズ別にまとめて確認するための Codepen 作りました。微調整機能で使

ヒートマップTシャツをオリジナルで作れるサービスのI/Fデモ [ codepen: js ]

地図をマッピングしたTシャツを作れる WEAR YOU ARE というサービスがありますが、個人的にはヒートマップのTシャツが作れるのも結構アリなんじゃないかと思いました。 ↓I/Fはこんなイメージ自分のウェブサイトのが作れてもいいなと思いましたが、リアルなヒートマップデータを公開することになるので、みんな抵抗感あるでしょう。であればあくまでヒートマップ的アートTシャツという位置付けのI/Fでいいかなと。 heatmap.js というライブラリを利用させていた

Text Crop と SVG arrow [ codepen: css ]

SVG の矢印付きリンクボタン実装例です。SVG は <use xlink:href="***"> で使い回せるように実装。普通に実装しようとすると文字要素自体が持つ上下余白がじゃまになったりするので :before と :after を使って上下余白を調整。これを Text Crop と呼んでます。 ↓ここで知りました。中の文字が動的に代わり、行数も変わるようなパターンの場合に非常に便利です。また、行間調整をした場合の上下余白調整も非常にやりやすいです。矢印の S

天地左右中央配置 [ codepen: css ]

ちょいちょい忘れるので備忘録的に。ある特定要素を天地左右中央配置する際によく利用するCSSテクニック。ちょくちょく使うことがあるが、 sass や stylus で mixin 化しちゃうことが増えたのでコード自体を忘れることが増えている。。(汗) HTMLを↓こうして、 <div class="wrapper"> <div class="inner">hogehoge</div></div> CSSを↓こうするだけ。 .wrapper { l