[B! css3] ddt2000のブックマーク

CSSでのロールオーバーアニメーションのチュートリアル集まとめ｜BLACKFLAG

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、 CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオーバーの演出をさまざまなアニメーションを加えるやり方のチュートリアルを紹介しているサイトの中で個人的に参考になりそうだったものをまとめて紹介してみます。 Some More Subtle Hover Effect Ideas | Codrops Some More Subtle Hover Effect Ideas | Codrops 画像にロールオーバーすることで重なり合うキャプション等のテキスト情報をさまざまなアニメーションで表示します。デモは「SET1」

ddt2000 2016/06/07

リンク

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

ddt2000 2016/04/23

リンク

CSS3 Animation Cheat Sheet - Justin Aguilar

How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi

ddt2000 2014/12/03

リンク

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | PSYENCE:MEDIA

ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

ddt2000 2014/10/08

css3

リンク

コピペで使える！ CSSで凝った背景を作るサンプル集 | ライフハッカー・ジャパン

「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。以下に使ってみた様子を載せておきます。　まずCSS Gradients with background-blend-modeにアクセスしましょう。このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ

ddt2000 2014/06/30

css3

リンク

html/css 参考サイト総まとめ

作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじ定番まとめ１．勉強になるテクニック／サンプルまとめ基本知識２．セレクタ３．メディアクエリ４．コーディング規約５．フォント６．CSSスプライト７．アニメーション８．正確なHTML使用方法９．CSSハック１０．書き方／読み方定番まとめ