タグ

cssに関するcamera10meのブックマーク (6)

  • コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

    サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLCSSのコピペだけで使えるものです(いわゆる「スニペット」というものですね)。 サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に是非ご活用ください。 1. ボタンのCSSサンプル コピペで使えるボタンデザイン集です。シンプル、フラット、立体的、円形のものなど、かなりのバリエーション数を用意しました。気に入ったCSSを追加しておけば、記事内にHTMLテンプレを書くだけで好きなデザインのボタンが表示できるようになります。

    コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)
    camera10me
    camera10me 2017/07/13
    ステキサンプルコード集。よく使わせてもらってます。
  • ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

    Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレースフォルダーで先に表示しています。 表示される予定のコンテンツとして利用できる画像や見出しやテキストなどをプレースフォルダーで表示できる軽量のスタイルシートを紹介します。 そのまま使用してもよし、カスタマイズもCSSベースで簡単にできます。

    ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート
  • [CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss

    リストやセルなどの何個目を選択する時によく利用する擬似クラス:nth-childの便利な使い方26種類をSCSSでまとめられた「Family.scss」を紹介します。 :nth-childでアイテムが5個以上なら選択、5個以下なら選択とかもできるんですね。こんな使い方もできるんだ! というものまであり、かなり便利です。

    [CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss
  • CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」

    WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。 非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。 詳しくは以下 利用方法は非常に単純で、上記の様に要素にdata-xxxxといった形式で内容と位置を指定することで実装可能になっています。CSSだけなので、特にjsなどを読み込む必要なくシンプルに実装できるため、幅広いユーザーが利用しやすいライブラリになっていると思います。 ソースコードはGitHubに公開されておりサンプルと共にダウンロード可能です。ライセンスはMIT License (MIT)となっており、ライセンスに従って、自由に利用す

    CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」
  • スクロールした時に面白いエフェクトを出すためのアイデアまとめ

    作成:2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s

    スクロールした時に面白いエフェクトを出すためのアイデアまとめ
  • シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

    画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

    シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
  • 1