タグ

transitionに関するchi-bitのブックマーク (2)

  • [CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック

    CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ(※キャプチャはChrome) [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。

    chi-bit
    chi-bit 2010/08/27
    CSS3でストライプを実現する方法、アニメーションの実装、ウィンドウの表示領域に合わせた表示非表示
  • [CSS]あなたのウェブデザインに繊細を加える珠玉のスタイルシート

    繊細のポイントは「気がつくかな?」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな?」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi

    chi-bit
    chi-bit 2010/08/27
    テキストのカラーが少しずつ変化するナビゲーション、「nth-of-type(n)」や「nth-child(n)」を使って異なるmargin設定をしたナビゲーション、グラデーションを使ったフォームの作り方
  • 1