[B! CSS] primenetworkのブックマーク

[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス

去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！実装が簡単インタラクティブレスポンシブ対応カスタマイズが簡単拡張性も豊か実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。ちなみに、2017年4月11日にVistaのサポートも終了します。参考: Windows 製品のサポートライフサイクルについて drivewayのデモデモではdrivewayで実装され

primenetwork 2016/04/26

CSS

リンク

ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。

primenetwork 2016/02/05

リンク

CSSがこんなに進化してるとは！18才の少年がつくった3Dアニメーションのライブラリがすごすぎる -voxel.css

CSSアニメーションの進化もすごいですが、3DのCSSアニメーションも驚きの進化です！高校を卒業したばかりの18才の少年がつくった3Dアニメーションのライブラリを紹介します。 voxel.css voxel.css -GitHub voxel.cssのデモ voxel.cssの使い方 voxel.cssのデモ上部のアニメーションgifは、voxel.cssのトップページで楽しめます。ファイルサイズの関係で尺を半分くらいにしているので、ぜひ全編を下記ページでお楽しみください。

primenetwork 2016/01/29

CSS

リンク

text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

Text Shadow Compilation デモは全部で23種類、かっこいいスタイルをはじめ、使い方が限定されたアレなものまで、さまざまなスタイルがあります。基本のHTML HTMLの基本はclassを付与したh1要素のみです。 classを変更して、利用してください。 <h1 class="basic">Basic</h1> 以下、各デモのキャプチャとスタイルシートです。

primenetwork 2013/08/26

コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ

CSS

リンク

はてなブックマーク

タグ

関連タグで絞り込む (1)

CSSに関するprimenetworkのブックマーク (4)

お知らせ

今週のはてなブックマーク数ランキング（2024年5月第3週）

今週のはてなブックマーク数ランキング（2024年5月第2週）

今週のはてなブックマーク数ランキング（2024年5月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス