Note: This post was first published on the May 20, 2011. HTML5, rumored as Flash killer, is a brand new web technology that raises a revolution lead by Apple in web application development. It contains canvas elements for images and animation drawings, supports video and audio embedding, and includes a storage database for offline web applications. Most important of all, you don’t need a plugin to
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離(縦、横)とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba(半透明)で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
While playing around with Webkit Keyframe Animations I figured out a way to create an awesome little image slider using only CSS. It’s definitely a bit unconventional but it’s a great way to learn to think outside of the box with what you can do with CSS3. Keep in mind that since we’re using Webkit Keyframes, this is purely an educational experiment and will only work in Safari or Chrome. As more
Pure CSS Slide-out Interface JavaScriptは使わずにCSS3のみで、マウスを乗せるとスライドのアニメーションをして開くバッジを実現させるTIPSが公開されています。 (英語)
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。 光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。 color:#fff; background: #000; font-size: 52px; font-weight: bold; text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #ffd700, 0px 0px 20px #ffd700, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700; 影を重ねて立体的に仕上げています。 color
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア(コーダー)と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの? HTML5とCSS3を使うメリットは? HTML5とCSS3で何ができるの? そもそも、HTML5とCSS3ってもう使えるの? 使えます。 (※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません) 現在のスマ
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5:ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
本連載では、Webデザイナーに向けて、HTML5/CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5/CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 パック for Dreamweaver CS5」を使用します(詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください)。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 これまでの記事では、CSS3で新たに登場する border
Safariのみ有効な方法ですが、Appleの広告のような床面への映り込みを実現する「-webkit-box-reflect」というCSSがあるようです。 アップルの広告などでよく使われる、製品が下に鏡面反射で映り込んでいる写真。あれをCSSで実現する方法があるようなんです。ただしイケメンSafariに限る。ていうかWebKitに限るからChromeも大丈夫かな? 以下のブログにて解説されておりました。 HTML5 videoの「映り込み」はCSS3または<canvas>で出来る!? — 秋葉秀樹 個人ブログ video { -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.4, rgba(0,0,0,0)),to(
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く