CSS Hat translates layer styles to CSS3 code
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
このブログに3Dモードを追加した
みなさん、2012年のゴールデンウィークは、いかがお過ごしでしょうか！ 中には映画を観に行ったりしている人もいるかと思うのですが、タイタンの逆襲なんかを例にとってみても、最近は「3D/2D 同時公開」の流れがあるみたいですね。 というわけで、このブログも、これから更新するときは 2D だけじゃなくて 3D でも楽しめるようにしてみました。ページの右の方にある「3D mode!」をクリックすると、3D モードでお楽しみいただけます。 元ネタは LAB! – 3D it! です。webkitTransform と MozTransform を使っているので、WebKit 系と Mozilla 系でしか動かないと思います。興味のある方は、Chrome や Firefox で試してみてください。
これは使いやすい、美しい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;
borderに画像を使用したcss3プロパティをサクッと生成するジェネレーター・border-image-generator - かちびと.net
今まで知らなかったんですが、 css3ってborderに画像を使える んですね・・・勉強不足でした。 border-image-generatorはその css3による画像borderをサクッと 作ってくれるWebジェネレーター です。勉強がてら触ってみるのも いいかも。 css3便利ですねぇ・・もちろんIEでは使用できません。webkit系(safariとかChrome)とmoz系(Firefoxとか)に対応しています。 直感で使えるので使い方は割愛します。使用したい画像のアップロードも出来るのでいろいろテストできそうです。 以下のようなプロパティでborderに画像を指定するんですね。 .border-images{ border-width: 28px 27px; -moz-border-image: url(abc.png) 28 27 repeat; -webkit-border
[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
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5 開発者に便利なツール 14 個
先日 Google+で Addy Osmani 氏が紹介していたオンラインツールが便利そうだったので紹介します。 DocHub.io # CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。 Dillinger.io # 最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。 HTML5Please # 今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機
CSS3のコーディングに役立つツール8選 – creamu
「8 Best Tools to Make Easy CSS3 Development」という記事で、CSS3のコーディングに役立つツールがまとまっていたのでご紹介します。 CSS3 CSS3ジェネレータ。プレビューしたり対応ブラウザの表示もあります CSS3 Pie IE6,7,8でCSS3のいくつかのプロパティを使用可能にするhtcファイル Layer Styles Photoshopのようなレイヤースタイルをブラウザ上でCSS生成 Cascader HTMLにインラインで書かれたCSSを分割してくれる CSS3 Gradients Generator CSS3のグラデーションジェネレータ CSS3 Cheat Sheet CSS3のチートシート CSS3 Please CSS3をブラウザ上で学習できるサイト CSS3 Button Maker CSS3で作るボタンジェネレータ ref
Webデザイナー向け。CSSを手軽に楽しむ·dabblet, MOONGIFT
dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。 dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。 トップページです。上半分が適用されたHTML、下がそのCSSとなっています。 上にマウスを持っていくとメニューが表示されます。 ログインします。GitHubアカウントでログインできます。 色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい！ グラデーションだとバルーンもグラデーションがかっています。 HTMLに切り替えて記述もできます。 メニューも色々です。保存しておくこともできます。 表示の配置を変更できます。 重ねて表示もできます。 Gistに保存できます。 dabbletを使うとリアルタイムに記述したスタイルシートがその
The CSS3 Test
Your browser scores 0% Determined by passing tests out of total for features
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Css Gradient Button - create css button
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration
Loading
http://html5please.us/