HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
本の虫: Chromeがいつの間にか縦書きを実装し始めていた
注意：ここに示したCSSは、実用的な目的には、まだ使ってはならない。何故ならば、-webkitベンダープレフィクスを使っているからである。。これは、webkitの実装がまだ完全ではないことを意味する。 Chrome（というよりもwebkit）がいつの間にか、縦書きを実装し始めていた。つまり、CSS3のwriting-modeプロパティのvertical-rlとvertical-lrをサポートしているのである。まだ、ベンダープレフィクスが必要なので、完全な実装ではないのかもしれないが、少なくとも、ある程度は動くようだ。 例えば、以下の様なマークアップが、 <p style=" writing-mode : vertical-rl ; -webkit-writing-mode : vertical-rl ; font-family : '@ＭＳ 明朝' ; font-size : 16pt ;
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
CSSのみで吹出しを作る | </gecko>：げことじ。：日常からWEBまで：
角丸に△をくっつけただけじゃなくて 「かわいい」吹出しが作りたいなーと思ってjsdo.itで書いてみました。 かわいいふきだし – jsdo.it – share JavaScript, HTML5 and CSS つくって思ったことをメモしておきます。 個人的にかわいいと思った３番目の雲のような吹出し。 htmlはなるべく少ないマークアップで組むことにしました。 <div class="SpeechBalloon type3"> <p>かわいいはつくれりゅ！</p> </div> 弄れる要素が少ない。 （pであまり奇抜なことしたくないのでdiv,div:after,div:beforeの３つ） divを小さくしてborder-radiusで円形にして。box-shadowで形をコピーすることにしました。 .SpeechBalloon.type3 { top:25px; mar
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
TechCrunch | Startup and Technology News
Infra.Market, an Indian startup that helps construction and real estate firms procure materials, has raised $50M from MARS Unicorn Fund.
【レビュー】HTML5/CSS3対応のデザインテンプレート集「Free HTML5 Templates」 | エンタープライズ | マイコミジャーナル
170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。 Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attrib
コピペで使えるCSS3アニメーション - jsdo.it - Share JavaScript, HTML5 and CSS
CSS3のアニメーションをコピペで使えるようにいろいろ作ってまとめてみました。対応していないブラウザでも、動かないだけで普通に表示されます。 <div id="container"> <div class="group"> <p class="animetionNew arrange01 group"><span class="letter01">N</span><span class="letter02">e</span><span class="letter03">w</span><span class="letter04">!</span></p> <p class="animetionNew arrange02 group"><span class="letter01">N</span><span class="letter02">e</span><span class="lett
HTML5製のWebベースウィンドウライブラリ·ChromeKit MOONGIFT
ChromeKitはHTML5/CSS3/JavaScriptによるフリーウェア（ソースコードは公開されている）。HTML5の登場によってWebブラウザの可能性があがれば、おのずとWebアプリケーションに対するニーズも高まっていくはずだ。その過程にはWeb OSのような可能性もある。 ローカルアプリケーションのようなウィンドウ表示 Webブラウザ上でまるでローカルOSのようなインタフェースを実現しようと思った時に必ず必要になるのがウィンドウ表示だ。まるでデスクトップのようなインタフェースを実現したい時に使えそうなのがChromeKitだ。 ChromeKitはHTML5/CSS3/JavaScriptの組み合わせで作られているウィンドウライブラリだ。Mac OSXライクに左側にボタンが並んだウィンドウで、ドラッグアンドドロップで移動することができる。重なりによってウィンドウの色が変わる仕組
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」
TOP > WebDesign > CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」 言葉自体ははかなり浸透してきた次世代のWEBの標準的なになっていくとされているHTML5とCSS3。ブラウザも対応してきて、一部のWEBサイトで使われ始めてきていますが、今回紹介するのはCSS3とHTML5で制作されたテンプレートを集めたエントリー「15 Useful CSS3 and HTML5 Templates and Frameworks」です。 RamblingSoul 19 CSS3 Template 様々なテンプレートが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Ampersand HTML5 HTML5で制作されたテン
HTML5 / CSS3のソースがダウンロードできるサンプル – creamu
HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか？ Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と
【コラム】攻略! ツール・ド・プログラミング (20) Zen-Codingをカスタマイズしてさらにコーディング効率を上げる | エンタープライズ | マイコミジャーナル
Zen-Codingのその他の機能 前回はHTMLやCSSのコーディングを助ける「Zen-Coding」について、そのコード展開の機能を中心に紹介した。しかしZen-Codingに用意されて機能はそれだけではない。Notepad++の場合、コード展開以外に次のような機能がサポートされている。 ショートカットキー 機能 Ctrl + Shift + A 選択範囲を指定のタグで囲む Ctrl + Shift + D カーソルのある位置を囲む開始タグから終了タグまでを選択する Ctrl + Alt + ] 次の編集位置(属性の値など)にカーソルを移動する Ctrl + Alt + [ 前の編集位置にカーソルを移動する Ctrl + Alt + L カーソルのある位置のタグと対になっているタグに移動する(開始タグ< - 終了タグ>) Ctrl + Alt + M 複数行にまたがっているタグ(ネスト
Stronger, Better, Faster Design with CSS3 — Smashing Magazine
In our last article about CSS3, “Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons. In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCSS3を使いこなしたくなるフレームワーク15選
http://www.designwalker.com/2010/06/html5-template.html
