CSSでボタンを手軽に作るなら「CSS Button Generator」が便利 | ライフハッカー・ジャパンデスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール
面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator
ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。
Stylie : キーフレームを使ったCSSアニメーションが簡単に作れるジェネレーター
Stylie : キーフレームを使ったCSSアニメーションが簡単に作れるジェネレーター Stylieはキーフレームを使ったCSSアニメーションを簡単に作成できるコードジェネレーター。 マウスを使って起点と終点を動かしながらグラフィカルなGUIで直感的に作っていくことができるサイトです。 『Tween』タブではあらかじめ用意された様々なオブジェクトの軌道を指定したり、スピードを調整したりできます。 『Custom easign』でオリジナルの軌道を定義することも可能です。 『Keyframes』タブでは座標を定義し、『HTML』タブでは入力した要素がアニメーションのオブジェクトとして適用され、ここに適宜動かしたい要素を放り込んで自由にテストすることができます。 指定した内容は『CSS』タブにCSSコードとして出力され、必要に応じ各種ブラウザ対応のコードにすることができます。 さて、CSS3で
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム（回転／拡大縮小／移動）やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連：[CSS]GoodDesign賞にノミネートされて落選するこ
グラデーションに便利！国産CSS3ジェネレータ「Grad3」
最近知ったグラデーションに特化したCSS3ジェネレータを紹介します。国産ということで何となく嬉しくなりました。 グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消えます。 円形グラデーションも作ることができます。こちらも直感的な簡単操作です。 もちろんリアルタイムでプレビューされます。 深く考えなくてもサンプルがたくさんあるので、サンプルからいじっていくのもいいですね。 いい感じの実用的なサンプルが色ごとで分けられています。 通常は背景のグラデーション部分のみのコードが表示されていますが、「All」にすることですべてのコードが表示されます。 ベンダープレフィックスもブラウザごとで付けることができます。ただしベンダープレフィックスが付くのはbackgroundのみのようです。 テキストシャドウやボックスシャドウ
impress.jsを使ったユニークなプレゼンをオンラインで生成出来るWSIWYGライクなWebツール・Impressionist
ユニークなHTML製のプレゼンを生成 出来るライブラリ、impress.js使用 のプレゼンテーションをオンラインで 作れるWSIWYGライクなWebサービス・ Impressionistのご紹介。まだアルファ 版のようです。 以前ちょっと話題になったimpress.jsを使ったプレゼンをWSIWYGライクなツールで作れるWebサービスです。 テキスト書いたり画像張ったり、それらを変形させたり拡大させたり、というのをマウスのみで生成出来る、みたいなやつ。勿論作ったプレゼンはダウンロードできます。 impress.jsを使ったプレゼンのサンプルは以下をご確認下さい。※矢印キーで進めます。 impress.js動作サンプル こういうのをオンラインで生成出来る、というのがImpressionistです。 一応簡単に使い方を。 使い方 この画面がスタート画面です。スライドのページ毎にテキストや画像
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please!
設定はすぐに反映され、左のパネルにスタイルシートが表示されます。 [ad#ad-2] HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: no
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
グラデーション背景用のCSSを自動生成してくれるサービス「CSS Gradient Background Maker」 : 二十歳街道まっしぐら
「CSS Gradient Background Maker」はグラデーションを表現するCSS3を自動生成してくれるサービスです。 IE10, Firefox, Opera, Webkit用のコードをそれぞれ生成してくれますよ。 グラデーションの種類を選択して、色を決めれば完了。 非常に簡単にグラデーション背景が作成できます。 以下に使ってみた様子を載せておきます。 まず「CSS Gradient Background Maker」へアクセスしましょう。 グラデーションの種類が3種類あるので、好きなものを選びましょう。 そして色を選択します。 プレビューはその場に表示されますよ。 最下部にCSSがはきだされているので、コピペで使いましょう！ 一昔前ならグラデーション用の画像を使っていましたが、 CSSで簡単にこういうのが作れちゃうのでオススメです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
CSS3の制作をぐっと楽にする厳選20のオンラインツール
CSSな吹き出しを作れるWEBツール「cssarrowplease」:phpspot開発日誌
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox
最近のWeb制作で必ず1度はお世話になる便利なジェネレーターまとめ5つ - W3Q
角丸・グラデーション・影を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」 : 二十歳街道まっしぐら
Loading...
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
面倒なCSS3のベンダープレフィックスを自動で付けてくれる -prefixMyCSS