[B! css] f-nyoroのブックマーク

モダン日本語フォント指定

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。昔からマークアップエンジニアを悩ませて…

f-nyoro 2016/10/17

リンク

CSS3を使ったアニメーションを70種類以上ダウンロードできるサイト「AniCollection」 | ライフハッカー・ジャパン

「AniCollection」はCSS3を使ったアニメーションを70種類以上ダウンロードできるサイトです。さまざまなボタンが用意されており、マウスオーバーするとアニメーションが動きます。気になるアニメーションは複数まとめてダウンロードできますよ。以下に使ってみた様子を載せておきます。まずAniCollectionへアクセスしましょう。アニメーション付のボタンがたくさん並んでいます。マウスオーバーすると実際の動きを確かめることができますよ。アニメーションを作成しているCSSやJavaScriptのコードをその場で確かめることも可能。気に入ったらダウンロードして使うことができます。CSS3でアニメーションを作りたいと思っている方は必見ですね。ぜひご活用ください。 AniCollection （カメきち）

f-nyoro 2015/03/31

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

f-nyoro 2011/03/13

リンク

ブラウザ上で最新のCSSをインタラクティブに試せる『CSSDesk』 | 100SHIKI

良く出来とる、と思ったのでエントリー。 CSSDeskはブラウザ上でインタラクティブにCSSを試すことができるツールだ。似たようなツールは他にもあるが、インターフェースがシンプルで使い易いのと、会員登録などの面倒な手続きがないのが良い。このCSSって実際どういう効果があるんだっけ？というときや、ちょっと部品の見栄えを試したいというときに便利だろう。最近はCSSもパワーアップしてきているので、こうしたツールを使いつつ、積極的に試行錯誤していきたいですな。

f-nyoro 2010/04/19

css
tool

リンク

[CSS]テキストにグラデーション効果をつけるスタイルシート

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ利点としては、下記のような点が挙げられています。テキストなので、ブラウザからのサイズの拡大・縮小が可能。背景画像を変更することで、グラデーションを変更することが可能。見出し画像をいちいち作成する必要がない。数が多い場合、作成時間・帯域の節約になる。