Responsive newsmag in 10 lines of CSS3
Responsive newsmag layout in 10 lines of CSS3 By combining multicolumn layout with page floats, some amazingly beautiful, scalable and responsive pages can be built. This page shows screenshots from Opera's WebKit-based implementation, along with links to the actual HTML page. The CSS code is very simple: each of the sample documents below use at most 10 lines of CSS code *. No media queries are u
Chapter 3 サンプル集｜CSS3デザインプロフェッショナルガイド
Section1 ボタン シンプルでカラフル、CSS3らしいボタンの表現demozip 押し込まれたボタンの表現demozip アクア調ボタンdemozip 内側に1pxの溝が入ったボタンの表現demozip 奥行きのある沈んだ質感の丸いボタンdemozip ボタンを透明プラスチックでコーティングしたような質感demozip マーブルのような丸いボタンdemozip ページトップへ Section2 アニメーション 一定時間をおくと画像が変わるアニメーションdemozip CSS3の3Dを使った絵合わせゲームdemozip transitionだけでできる、Mac OS XのDock風アニメーションdemozip ページトップへ Section3 レイアウト 新聞のような段組みを使って、更新しやすいWebマガジンスタイルdemozip デザイン性の高いリキッドレイアウトdemozip ペー
50 Fresh Free HTML5 and CSS3 Website Templates
No doubt HTML5 is the most dramatic step in the evolution of web standards. It is the latest and advanced version of Hyper Text Markup Language (HTML) supported by all major browsers with its functionality. HTML5 has some new and awesome features like the incredible ways to add videos <video> and audios <audio> by minimizing the lookup of external source that make it most popular among web designe
koboのEPUB3縦書きをためしてみた (CSS組版ブログ)
前回記事ではUTR50（Unicode縦書きの文字の向き仕様）の議論を紹介しましたが、UTR50が何に使われるかというと、まずCSSの縦書き仕様（CSS3 Writing Modes）であり、それを使っているEPUB3の縦書き実装です。そこで最新のEPUB3対応リーダー（とくにkobo Touch）で縦書きの文字の向きがどうなっているか、ためしてみました。 縦書きでの文字の方向をテストするEPUB3サンプルを作りました。 EpubTextOrientation.kepub.epub: いくつかの文字について-epub-text-orientation対応をテスト UnicodeVertical2.kepub.epub: Unicode全体について縦書きの文字の向きmvoとsvoをテスト 次の画像は、サンプルEpubTextOrientation.kepub.epubをkoboで表示したもの
CSS3で表示する画面の色作成支援ツール：日立のユニバーサルデザイン
クリックするとご利用いただけます（別ウィンドウで開きます）。ただし、SVGフィルターなどの最新技術を活用しているため、想定通り動作することが確認できているFirefox12以降でなければ動作しないようにしています（2012年7月現在）。Firefox以外で本ページをご覧の方は、下記URLをFirefoxで開いてください。 http://www.hitachi.co.jp/universaldesign/products/business/assistance_for_color_generation/product.html 概要 無償でお試しいただくことが可能な、CSS3で開発するWeb画面の色と形の作成を支援するツールです。主な特徴は以下の通りです。利用前に、利用上の注意をお読みください。 作成した色と形を登録すると、次にブラウザを立ち上げたときも利用可能です（注意事項）。 作成した色
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
IE6～IE8でCSS3が使える「CSS3 PIE 1.0.0」登場
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 15日(米国時間)、「CSS3 PIE」初のメジャーバージョンとなる「CSS3 PIE 1.0.0」が公開された。CSS3 PIEは、CSSレベル3に対応していないIE 6/IE 7/IE 8に対して、いくつかのCSS3プロパティをレンダリングする機能を提供するプログラム。Apache License v2およびGPL v2のデュアルライセンスのもとオープンソースで公開されている。 CSS3 PIEは、既存のCSSスタイルシートに「behavior: url(PIE.htc);」の1行を追加するだけでCSS3が利用できるようになるユーティリティツール。現在サポートされているCSS3
W3C日本語組版ノートとCSS3 2012-03 @ JAGAT
2. HISTORY Year JIS W3C/IDPF Products 1993 JIS X4051 Word 6.0 1995 Word/Outlook 95 1997 Word/Outlook 97 1999 International Layout (WD) 2000 IE 5.5 2001 CSS3 module: text (WD) IE 6, InDesign 1.0 2003 CSS3 Text Module (CR) 2005 CSS Text Module Level 3 (WD) 2008 JLREQ 2010 WebKit 2011 EPUB 3.0 2012 JLREQ
CSS3縦書きをサポートする組版エンジンAH Formatterの紹介
1. CSS3 縦書きをサポートする組版エンジン AH Formatter の紹介 2012-03-06 （次世代ブラウザ技術を用いたコンテンツ表現方式に関するイベント） むらかみ しんゆう 村上 真雄 @MurakamiShinyu murakami@antenna.co.jp (1 / 25) 2. CSS3 縦書きをサポートする組版エンジン AH Formatter の紹介 目次 1. はじめに . . . . . . . . . . . . . . . . . 3 4. CSS3 Writing Modes （縦書き） 1.1 自己紹介 . . . . . . . . . . . . . . . . . 3 対応 . . . . . . . . . . . . . . . . . . . . 13 1.2 アンテナハウス株式会社について 5. ルビと圏点 . . . . . . .
CSSの縦書きとUnicodeの縦書きの文字の向き（UTR#50）の話題 (CSS組版ブログ)
（追記2012-02-04）Twitterでの議論まとめ（随時更新中。ハッシュタグは #UTR50） UTR#50（Unicodeの縦書きの文字の向き）の話題 「電子書籍、電子出版のCAS-UBブログ」 のほうで、CSSの縦書きとUnicodeの議論 UTR#50: Unicode Properties for Vertical Text Layout (Proposed Draft) がホットです（by小林社長）： 縦組みにおける英数字正立論―まとめ 全角英数と半角英数の使い分けの煩わしさをなくす100年1回のチャンスが来ています！ ラテンアルファベットと数字を縦にするか、横にするか？UTR#50とCSSの関係 縦組みのPC雑誌における英数字の方向 縦組み書籍における英数字の使われ方―その２ 縦組み書籍における英数字の使われ方 未来の縦書き文字の表示はどうなるの？ CSSの縦書きとUni
HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト｜Tips*Blog｜株式会社コプロシステム
ここ2～3年の間で、HTML5／CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。 このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか？ 今回のエントリーでは、HTML5／CSS3／jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。 HTML5とは？ 今さらなのであまり詳しい説明は書きませんが、過去に弊社HP内で私が書いたコラム『次世代を担う技術「HTML5」について』から引用しますと、 "現在のwebコンテンツで、最も一般的に使われているHTMLの標準仕様は「H
ほぼCSS3のみで見事に「Mac OSX Lion」の起動画面を再現
イタリア・ローマ在住のウェブ・デザイナーAlessio Atzeni氏が、ほぼCSS3のみで再現した「Mac OSX Lion」のインタラクティブな起動画面の紹介です。時計やログイン時など一部についてはJavascriptも使用しているようですが、CSS3でデザインと動作を完結しています。 サイトにアクセスると電源を入れた状態が再現されています。 パスワード入力画面(パスワードはadmin)に遷移し、パスワードを入力します。 Mac OSX Lion起動。 このようにメニューも操作することができますが、もちろん表示のみです。画面上のウインドウも操作可能になっています。 実際に動作するサイトはこちらから Mac OS X Lion CSS3 by Alessio Atzeni
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
Hands On: Windows 8 HTML5 Platform
This page introduces a set of “Hands On” demos of the graphics features of the Windows 8 HTML5 Platform and Internet Explorer 10. All pages follow a similar structure: an example on the left, controls to manipulate the CSS properties on the right, and browser-dependent markup on the left below the example. Demos followed by 10 work best in IE10 on Windows Developer Preview. View the video of these
Typography Effects with CSS3 and jQuery
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared wi
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.Your browser doesn't support features required by impress.js, so are presented with simplified version of this presentation. For the best experience please use latest Chrome or Safari browser. Firefox 10 and Internet Explorer 10 should also handle it.
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Imageless iPhone 4 by Vasyl Zubach
CSS3 - Information and samples - robertnyman.com
2011.11.22 CSS3ページネーション
