タグ

css3に関するunknownlabelのブックマーク (6)

  • [iPad] CSS3Machine: ウェブデザイナー必須!CSS3をGUIでつくって即プレビューできる!3395 | AppBank

    CSSだけでロゴをつくる 今回はAppBankのロゴをサクっと新しく作ってみます。 左側にCSSのセレクタやプロパティ、右側にプレビューとプロパティの値を表示します。 なお、プレビューで表示される内容(HTML)は編集可能です。 HTMLタグの入力支援機能も充実。divタグや<>などがボタン1つで入力できます。 次にセレクタをつくります。これは先ほど編集したHTMLに沿うような形にします。 例えば「<h1>AppBank</h1>」としたなら「h1」セレクタを作成します。 タグは「h1」を選択し、用途に合わせてクラスやIDも指定可能です。 つくったセレクタをタップして中にプロパティを加えていきます。 プロパティは全部で9種類。ここではあらかじめ「body」セレクタをつくっておいたので、背景色を決める為の設定を行います。「Basic CSS」をタップします。 ここは一般的なCSS2と変わりま

  • CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開

    スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日語に対応した禁則、傍点(圏点)、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります(ルビはまだ作業中ですが)。大げさではなく、世界中のWebブラウザに対して日の日文化に対応した表

    CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
  • はてなブログ | 無料ブログを作成しよう

    名残 今週のお題「思い出の先生」 小学四年生のとき、親から「あんたの字、K先生にそっくりだね」と言われた。担任のK先生は印象的な字を書く人で、カクカクと直線的な文字を四角形にはめ込むように書くのが特徴だった。小学校だから担任がすべての授業を担当していて、毎日…

    はてなブログ | 無料ブログを作成しよう
  • 画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

    昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました! 今回作成したのは日人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品! CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対

    画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD
  • Googleも採用!CSS3実践テクニック (4/4)

    アニメーションを実装する CSS3ではマウスオーバー時にアニメーション効果を付けられる。CSS3がまだ実験レベルで使われていた2008年頃は過激なアニメーションサンプルも見られたが、今回は実用的なアニメーションを実装しよう。 【マウスオーバー時のアニメーション】 ul li a{ -webkit-transition: background-color 0.4s liner; } アニメーションは-webkit-transitionプロパティで設定する。-webkit-transitionプロパティは左から 1つ目の値は、適用されるプロパティ 2つ目の値は、アニメーションにかかる時間 3つ目の値は、アニメーションの種類(ease/linear/ease-in/ease-out/ease-in-out/cubic-bezierから選択、参考リンク) を指定する。 ポイントはアニメーションにか

    Googleも採用!CSS3実践テクニック (4/4)
  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    Site Under Maintenance
  • 1