[CSS] Instagram.css – Instagramのフィルターを模したCSSフィルター
Instagramのフィルターを模したCSS。ファイルはGithubからダウンロードできます。導入後はfigureタグにclassを付けるだけでフィルターが適用されるようです。素材そのものを加工しなくても良くなる点がナイス。Webでインスタ映えさせたい時なんかに使えそうです。まぁこの言葉も数年で廃れるんだろうけど・・・。
Tag Archives: CSS3
[CSS] CSS Checkbox Styles From CodePen – チェックボックス装飾の作例まとめ
CSSで行うチェックボックス装飾の作例をまとめた記事。どの作例もCodepenで作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。
[CSS] Trendy CSS Text Shadows – CSSで描く、クールなテキストシャドウ作例
CSSのtext-shadowのクールな作例。それぞれ使われているフォントや色指定についても紹介されており、「View CSS」をクリックするとCSSの確認もできます。フラットデザインが流行った後によく使われた、斜め方向にブラーなしの作例が多いです。Webでテキスト使ったちょっと印象的なタイポ組みたい時なんかの参考になりそうです。
[Web Design] CSS & JS Sliders From CodePen – CodePenからスライダーを紹介したまとめ記事
CodePenにあるCSS & JSスライダーを紹介したまとめ記事。稼働するものをEmbedしてるのでちょっと重いですが、各作例右上にある「CodePen」ロゴをクリックすると単独で表示する事ができます。様々な手法のスライダーが多数紹介されているので、スライダー選びの時に役立ちそう。
[Web Design] Easing function 早見表 – イージング指定の早見表
アニメーションで使われるイージング指定の早見表。オブジェクトの移動量と時間軸とをグラフで表した一覧は、マウスオーバーする事でアニメーションを確認できます。また各詳細ページからはCSSやSCSSでのtransition指定、JSでの指定方法のコードも掲載されています。アニメーション指定する時のイージング選びの際に役立ちそうです。
[CSS] CSShake – シェイクアニメーションを多数用意したCSSライブラリ
揺らす事だけにフォーカスしたとってもニッチなCSSライブラリ。CSSファイルだけで構成されているので、導入も簡単です。サンプルアニメーションもサイト内に多く紹介されています。マウスオーバー時なんかに使えそうですが、常に動いてると押してアピール強すぎて少々ウザくなるかもしれません。
[CSS] CSS Text Effects From CodePen – CSSテキストエフェクトまとめ
CodePenで紹介されているCSSテキストエフェクトのクールな作例をまとめた記事。ほとんどのものはPure CSSで作られてますが、モノによってはマスク背景とかに画像が使われたりもしてます。動きのある作例も多いです。元ネタがCodePenなので、コードの確認もサクっとできて汎用性も高いです。見出し装飾のネタ探しなんかにも使えそう。
[CSS] Grid Garden – CSS Grid Layoutの仕組みを学べるコンテンツ
CSSを使ってグリッドレイアウトを行うCSS Grid Layoutの仕組みを、基本から応用まで順を追って学ぶ事のできるコンテンツ。このCSS Grid Layoutは「display: grid;」を使って行う新しいレイアウト手法なんだけど、格子状に区切って長方形をそれぞれ長さを決めつつ並べていくというもので、懐かしのTableレイアウトにちょっと近い印象を受けました。しかしまぁアレですな、「やっとFlexboxレイアウトを覚えたところでまた次の手法かよふじこふじこ」的な感じはありますな。けど新らしいものは否応なしに覚えていかないといけない業界ですもんね仕方ないですよね。思い起こせばTable→Float→Flexboxとレイアウトに使うタグって色々ありましたよね・・・。
ちなみにSafariはこのdisplay: grid;をまだサポートしていないので、このコンテンツ自体表示できません。Chromeあたりでお試しください。