The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
Safari 4+ supports a different syntax for linear gradients. Safari 5.1+ supports the newer style syntax (as well as the older style). Gradients are an experimental feature, and it's likely the syntax will change before they are finalized. At present, all these browsers require the appropriate vendor specific prefix.
CSS3で何ができるのかという「CSS3で何ができるの? という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか? ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を
CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation Draft, 11 March 2024 More details about this document This version: https://www.w3.org/TR/2024/CRD-css-backgrounds-3-20240311/ Latest published version: https://www.w3.org/TR/css-backgrounds-3/ Editor's Draft: https://drafts.csswg.org/css-backgrounds/ Previous Versions: https://www.w3.org/TR/2020/CR-css-backgrounds-3-20201222/
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
CSS3とHTML5のマストハブなチュートリアル&リソース集70ということで、大量のコンテンツがまとまっています。 例えば、どんなものがあるというと、CSS3の基本ガイドや、CSS3のリファレンス、CSS3による角丸、CSS3のボーダー、ドロップシャドウ、Opacity、マルチ背景画像といった感じでかなり網羅されているみたいです。 CSS3とHTML5によるコンビネーションを使ったテクニックの他、HTML5関連のチートシートなど便利なものが満載の内容になっています。 先取りで覚えておきたい方は知っておいたほうがよさそうですね。 リンク先は以下の元エントリより参照してください。 70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers 関連エントリ CSS3等を使ったサンプルや各種CSSリソ
In: ブログBy:KikuchiOctober 21, 2009 Leave a response 11月11日(日)に開催されたリクリにて、WDE の代表 菊池が『HTML5 Loading』をプレゼンいたしました。基本的な内容は全日の WCAN のプレゼンと同様に、HTML5とCSS3について講演をしました。ただ、WCAN の講演より時間の関係もあり、CSS3 の内容を多くコンパクトな内容にしました。 今回の内容は、Web Directions の John Allsopp が『CSS Reloaded』を公開したとき、誰もが驚き興奮し、一方でその過激さゆえに IE を理由に現実的ではないという意見もありました。しかし、それから1年半がすぎ、今では海外では Google もふくめて CSS3 を当たり前のように使うようになり、やはり Web Directions が昨年に指し示した方
2009年もあと数日ということで、今年のWeb標準について簡単ですが本Blogのエントリをもとに振り返ってみようと思います。 XHTML 1月にXHTML Media Typesの第二版が公開され、XHTML文書を公開する際のガイドラインがより現実を反映したものになりました。 XHTML Media Typesの第二版が公開 7月にはXHTML2 Working Groupの活動終了がアナウンスされました。 XHTML 2 WGが活動終了へ、XHTML 2.0も策定終了に XHTML 2.0の策定は中止されますが、XHTML自体が終了するわけではありません。 HTML5と関連API 2009年はHTML5の注目がとくにまった一年であるように感じました。 Web Forms 2を統合した新しいHTML5の草案が公開 Last Callに向け進むHTML5 HTML5のeditor, Ian
今年も明けましておめでとうございます。 白石です。 正月明けからイッパイイッパイです。 で、いきなり本題。 HTML5用のリセットCSS(どのブラウザでもデフォルトの見た目が同じになるよう、強制的に表示を調整するCSS)と言えば、昔HTML5Doctorで紹介されたやつが有名です。Google Codeでプロジェクトがホスティングされてもいます。 でもこのCSS、ちょっと悩ましいことに中途半端なんですよね。例えば、HTML5ではあらゆる要素にhidden属性を指定することができるのですが、「hidden属性のついた要素は非表示にする」と言ったスタイル指定が行われていなかったり。 で、完全なものはないのかというと、あります。それも仕様書の中に。これは、HTML5仕様が正式に「提案」しているものです。 でもどう見てもHTML5DoctorのCSSのほうが有名ですよね。 で、みんながその中途半端
52FrameworkはHTML/JavaScript/CSS製のオープンソース・ソフトウェア。これまでのWebデザインが今後、大きく変わっていく可能性を秘めているのがHTML5やCSS3だ。まだ実験段階というイメージが強いが、GoogleやYoutubeをはじめとする大手サイトでも取り入れられ始めている。 Safari4での表示 最大シェアを持つIEの対応がいまいちなため、積極的に取り入れていくのは難しいと感じているかも知れない。しかし時代は進んでいる。ついにHTML5/CSS3をターゲットにしたデザインフレームワークが登場した。それが52frameworkだ。 52frameworkはHTML5でコーディングされ、CSS3を使った角丸やテキストの影、ボックスの影、グリッド表示、CSSリセットなどを行っている。グリッドはウィンドウを16のブロックに分割する。一つのブロックはフレームワーク
[CSS3] 50 Brilliant CSS3/JavaScript Coding Techniques – CSS3とJavascriptを使ったクールな表現 Pocket Tweet 欧米が今最もアツいと感じているのがCSS3とJavascriptなんだけど、いやぁこれらの作例にはホントまいったよ。エクセレーント! という感じのまとめ記事。ぼちぼちCSS3ガラみのこうした作例紹介も本格的になってきましたね。AppleのiPad & iPhone向けコンテンツを視野に入れた場合必須となるスキルだけに、そろそろこれ系もちゃんと勉強しなきゃな、という感じであります。しかしウェブでできる表現の幅が広がる事は素直に歓迎したいですね。 50 Brilliant CSS3/JavaScript Coding Techniques
Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy! CSS3 Clock With jQuer
http://puzzel.jp/sample/HTML5/n3/index.html 先日、私のサイトPuzzel.jpを公開してその中のコンテンツでHTML5/CSS3のサンプルサイトを作りました。 そこで色々分かったことなどがあったのでメモっておきます。 ①Webfont @font-face { font-family: mplus-1p-light; src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf') format("truetype"); } でフォントを呼び出して .de { font-family: mplus-1p-light; } でフォントを表示します ②Transform transformを使って画像を傾けています。 -webkit-transform: rotate(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く