英文フォントしか対応していないが、便利は便利なのでご紹介。 Font-Combinatorを使えば、各種ウェブフォントがサイト上でどのように見えるかを手軽に試すことができる。 フォントの種類や大きさ、行間を変更できる他、テキスト部分をクリックすればその場で編集も可能だ。 ウェブフォントもじわじわと普及してきた感がありますな。こういうツールを積極的に活用していきたいところである。
画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。 ただ、できるとは言っても、自分のやりたいように0からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。 CSS3のドロップシャドウをカンタンに作れるジェネレータ 「Css3 drop shadow generator」は、スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成してくれるサービス。 影の付け方も全部で8種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。 ドロップシャドウを簡単に設定
The requested URL was not found on this server. 您要找的内容已被删除
ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」 2011年04月05日- prefixMyCSS - Prefix your CSS3 code. Instantly! ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」 先日、類似の 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 というツールを紹介しましたが、こちらはちょっとパワーアップ版です。 radiusやbox-shadowの先頭に-webkitや-mozを自動で付けてくれるツールに代わりはないのですが、出力を1行にしたり、プロパティの頭を揃えることができたり、全部1行で出力してくれるオプション付きです。 次のように、border-radiusの位置は揃えて見やすくしてくれるなんていう機能
CSSPrefixer 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 プロパティごとに -moz とか -webkit を全部設定するのめんどくさい、という場合にサブミットすれば自動で付いた結果が出力されるというシンプルだけど便利なツールです。 サブミットすれば次のように -moz とか -o とか -webkit とか全部付けて出力してくれます。 これはいい。 JavaScript とかで、1個指定しとけばJS読み込むだけで全部自動やってくれる的なライブラリがあったらもっと便利な気がしますね。 jQueryとかで比較的簡単に実現できそう。 関連エントリ 便利なCSS3ツール6つ+α IEでもCSS3を使うためのツールやリソース集 HTML5/CSS3に関する便利ツールやチーとシート、リソース25
CSS3 properties exposed | css3files.com IE9にも対応したCSS3リファレンスサイト「css3files」 CSS3のプロパティがカテゴリごとにまとまっており、それぞれのプロパティについて、ブラウザ対応や、使い方、サンプルが見やすく整理されていていい感じす。 先日発表されたIE9にも対応しているので、CSS3を使う場合には覚えておくとよさそうですね。 互換性の図。Internet Explorer 9 があって、IE9でも使えることがすぐ分かります。Firefox 4 もありますね。 ↓↓↓適用の図も表示。これは分かりやすい サイト自体にもCSS3の利用例が散りばめられている点にも注目。 今後、IE9のシェアはどんどん上がってくるでしょうから、CSS3が普通に使える日は近そうですね。 関連エントリ インタフェースが良くてプレビューも見やすいCSS3コ
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」 2011年03月11日- CSS3 Generator - By Eric Hoffman & Peter Funk インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」。 CSS3ジェネレーターは多くありますが、中でも優れたUIとわかりやすさを持っているように思えるジェネレーターの紹介。 角丸、シャドウ、透明度、グラデーション、枠線、背景色の設定ができ、リアルタイムに反映されます。 あっという間にCSS3コードを生成出来ました。 UIだけでも一見の価値ありです。 関連エントリ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル ステップで学べるCSS3ボタンのデザインチュートリアル CSS
【ゆっくり解説】本番直前で体重8kgオーバー!?機体を修正するも翼が折れて後遺症が残る大怪我に…「第31回鳥人間コンテストの事故」
CSS3で新たに導入された@font-face。 CSSでフォントを指定するだけで、誰でもそのフォントでページを見ることができるようになるという…!なんとも素敵な話です。 これを利用することによって WEBデザインがまた進化するのでは!といった感じでわくわくしますね☆ ただこれ、フォントファイル自体をサーバに上げないといけなかったり、IEは別途対応が必要だったりするようで、個人が本格的に利用するにはまだちょっといろいろとハードルが高そう…。 そんな中で、googleがGoogle Font APIをはじめたり、 海外では同様のサービスがすでに出てきているようです。 がここで… たちはだかる 日 本 語 の 壁 ! ! ! ! いつもなら、がんばって英語の壁を超えるのですが、 違う意味で 日 本 語 の 壁 ! ! つ、使えるフォントが…(涙) いかんせん日本語は文字数が多いですからね。 そ
最近、CSS3のチュートリアルなど、CSS3関連の記事をよく見かけます。CSSを自動的に作成してくれる「ジェネレータ」も、続々登場しています。今回は、非常に使いやすくて、多機能なCSS3ジェネレータ「CSS3.0 Maker」を紹介します。 以下に使ってみた様子を載せておきます。 まず「CSS3.0 Maker」にアクセスしましょう。 スタイルの設定プレビューCSSのコード対応ブラウザ といった具合になっています。上部にメニューがあり、そこで様々なタイプのスタイルを選べます。以下に一部を紹介しますね。 Border Radius いわゆる「角丸」というもので、角を丸くすることができます。 Gradient 図形の色をグラデーションできます。 Box Shadow 影をつけることができます。ぼかしも可能。 これらの他にも、図形を回転できる「Transform」や、テキストに影をつけられる「T
Grad? Gradient! グラデーションは上記のキャプチャの通り、スライダーにPhotoshopのような色の追加も可能となっており、複雑なグラデーションも簡単に生成できます。 CSS3グラデーションを使用すると、下記のようなグラデーションが画像を使用しないで作成することができます。
CSS3 Playground by Mike Plate その場で動かして体験できるCSS3の実験場「CSS3 Playground」。先日ブックマークで紹介しましたが、もう一度改めてご紹介です。 表示されているスライダーや色をクリックで調整するだけでその場でプレビューが表示されて、どういうCSS3コードをかけばどんな風になるかという部分を確認できます。 素人の方でも、こんなことが出来る、という部分をしっておく場合に使ってみるとよさそう。単純にコードジェネレーターとしても便利です。 どんどん便利なものが出てきますね。 関連エントリ 便利なCSS3ツール6つ+α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」 近未来に頻繁に使われるであろうCSS3サンプル10
TOP > WebDesign , WebService > CSS3を利用するときに役立つWEBツール6選「Six Useful CSS3 Tools」 徐々に利用され始めてきているCSSの新しい規格CSS3。現状のCSSでは、不可能だった表現がコードのみで可能にしてくれる次世代の規格ですが、今回紹介するのはCSS3を利用してコーディングしていく、または勉強するのに役に立つWEBツールを集めたエントリー「Six Useful CSS3 Tools」。 CSS3 Button Maker 数値を変えてデザインを確かめていけるものから、グラデーション表現の補助ツールなど様々なWEBツールがまとめられていました。以前Designdevelopで紹介したものもありますが、順に紹介したいと思います。 詳しくは以下 ■CSS3 Generator 非常にシンプルなつくりのCSSジェネレーター
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く