よく使うパーツのCSSサンプルがまとめられた「See-SS」

よく使うパーツのCSSサンプルがまとめられた「See-SS」

よく使うパーツのCSSサンプルがまとめられた「See-SS」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 24時間注文・入稿受付OK。実績と信頼の「印刷の通販 グラフィック」
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

See-SSは、ボタンやフォームなど、よく使うパーツのCSSサンプルがまとめられたサイトです。

非常に使い勝手の良いパーツが揃っています。

スポンサードリンク

See-SSとは?

See-SSについては、以下のように説明されています。

当サイト(See-SS)は、一覧で見やすいコピペCSSサンプルサイトです。

様々なCSSサンプルサイトはありますが、サンプルの見やすさに課題を感じました。 そこで、見やすさを重視し、自分が実装したいサンプルをより早く見つけられるような設計にしました。

当サイトの素材を使用する場合、リセットcss を使用することを推奨します。
その他、フォントやFontAwesomeも含め、 イントロダクション をお読みください。

当サイトを使っていただき、理想のWebサイトを素早く作れることを願っています。

https://see-ss.com/about/

See-SSの使い方

See-SSにアクセスして、使いたいパーツの[コードを見る]をクリックしましょう。

See-SSの使い方

右側にHTMLとCSSが表示されるので、コピペして利用します。

HTMLとCSS

例えば、シンプルなフラットボタンのコードは以下のようになっています。

<a href="#!" class="button-1">BUTTON</a>
.button-1 {
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8em;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 3px;
  transition: 0.4s ease;
}

.button-1:hover {
  color: #fff;
  background: #00b5ad;
}

サイトに合わせて色と余白を調整すればすぐに使えますね。

あとがき

同じようなサンプル集はたくさんありますが、見やすさを重視したとあるだけに、パーツを見つけやすくなっていますね。

サービス名の「See-SS」も素敵です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。