タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

cssとjQueryに関するmauaのブックマーク (4)

  • 第6回 裁ち落としてインパクトのあるデザインを作る | gihyo.jp

    ユーザビリティを落とさずインパクトを出すには 雑誌などで、ページサイズいっぱいに画像を配置したデザインをよく見ますよね。 写真を全面にレイアウトすることで、インパクトを出すことができます。 今回は、同様の効果をウェブで実現する方法を解説します。 ここ数年、ブラウザサイズいっぱい(width:100%)に背景画像などを敷いたサイトを多く見かけるようになりました。ただ、パターン画像ならリピートすればいいですが、1枚絵だとそうはいきません。1枚絵を背景にする場合、以下の3つくらいの方法が考えられます。 backgroundとの輪郭をはっきりさせた形で、画像のサイズでぶつ切りにする グラデーションさせるなどして、backgroundの色となじませる ウィンドウサイズを固定値にする 1と2は、制約のある中でのデザインになるため、自由度が下がります。 3は、デザインする枠のサイズを決められるため、自由

    第6回 裁ち落としてインパクトのあるデザインを作る | gihyo.jp
  • CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ! | kazumich.log

    今、作っているサイトで透過の角丸JavaScriptが必要になって、いいものは無いかと探していると「CurvyCorners」というJavaScriptが見つかりました。 Googleで CurvyCorners - Google 検索 を検索してみると、以下のようなエントリーがヒットします。(上位5件を表示) CurvyCorners - Beautiful rounded corners for your HTML boxes 角丸javascriptライブラリ『curvyCorners』を使ってみる[to-R](2006年6月18日) jQueryを使って簡単に角丸を作れるjQuery curvyCorners | バシャログ。(2007年12月3日) 角丸作成javascript「curvyCorners」|skuare.net(2007年10月21日) 画像を使わず、角にアンチエ

    CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ! | kazumich.log
  • [JS]CSSスプライトをアニメーションで変更するチュートリアル

    Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLCSSJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。

  • [JS]div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners

    div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側(outside)のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。

  • 1