言語フラグ スプライト
Visual Studio で複数の言語フラグのスプライト イメージを使用してハイパーリンクの CSS と HTML を作成する方法。
序章
Ousia CMS の主要な部分は、すべてのアイテムが自動的に生成され、リンクされる多言語管理面です。次に、コンテンツへのリンクを他の言語で表示するドロップダウン リスト、または言語を示すフラグ イメージ (32px または 64px) を含む一連のハイパーリンクを表示できるコントロールを使用できます。
右側の次の項目を背景として使用し、次にいくつかの CSS を使用して、以下のドロップダウンに従って要素の位置を制御します。
スプライト画像とCSSはご自由にお使いください。すべてのアセットは以下からダウンロードできます。
構造の作成
まず、構造を作成しましょう。CSS のみを目的としている場合は、この手順をスキップしてください。
- Flags という名前の新しい空のプロジェクトを作成します。
- flags.css という新しい CSS ファイルを追加します。
- flags.htm という新しい HTML ファイルを追加します。
- FlagSprite_32_22.png という既存のアイテムを追加します。
- FlagSprite_64_45.png という既存のアイテムを追加します。
必要なアセットがすべて揃ったので、flags.css ファイルを開き (まだ開いていない場合)、次の CSS をコピーします。
CSS
body a{margin:10px;float:left;}/*22 high by 32 wide*/.ouFlgCS32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgDE32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgEN32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgES32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgFR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgHI32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgIT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPL32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgRU32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgTR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgZH32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}/*44 high by 64 wide*/.ouFlgCS64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgDE64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgEN64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgES64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgFR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgHI64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgIT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPL64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgRU64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgTR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgZH64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}構造の作成
これにより、32x22 ピクセルと 64x44 ピクセルの両方の画像に対して 12 の異なる CSS クラスが作成されました。各クラス内で、関連する背景画像、関連する高さと幅、およびブロックする表示スタイルを設定しました。
最も重要な部分は、下のドロップダウンに示すように、位置が変更された場所です。これにより、画像の関連するセクションのみが表示されます。
追加の CSS は、それをサポートするブラウザーのために、box-shadow と border-radius を配置します。
次にテストページへのリンクを追加しますので、下のhtmlをFlags.htmにコピーしてください。
HTML
<div>32 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS32"></a><a href="/Ousia.css" class="ouFlgDE32"></a><a href="/Ousia.css" class="ouFlgEN32"></a><a href="/Ousia.css" class="ouFlgES32"></a><a href="/Ousia.css" class="ouFlgFR32"></a><a href="/Ousia.css" class="ouFlgHI32"></a><a href="/Ousia.css" class="ouFlgIT32"></a><a href="/Ousia.css" class="ouFlgPL32"></a><a href="/Ousia.css" class="ouFlgPT32"></a><a href="/Ousia.css" class="ouFlgRU32"></a><a href="/Ousia.css" class="ouFlgTR32"></a><a href="/Ousia.css" class="ouFlgZH32"></a></div><div style="clear:both"><div>64 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS64"></a><a href="/Ousia.css" class="ouFlgDE64"></a><a href="/Ousia.css" class="ouFlgEN64"></a><a href="/Ousia.css" class="ouFlgES64"></a><a href="/Ousia.css" class="ouFlgFR64"></a><a href="/Ousia.css" class="ouFlgHI64"></a><a href="/Ousia.css" class="ouFlgIT64"></a><a href="/Ousia.css" class="ouFlgPL64"></a><a href="/Ousia.css" class="ouFlgPT64"></a><a href="/Ousia.css" class="ouFlgRU64"></a><a href="/Ousia.css" class="ouFlgTR64"></a><a href="/Ousia.css" class="ouFlgZH64"></a></div>Debug flags.htm in your browser and you should have 24 separate flags.
Claytabaseによるウェブサイトのデザイン
これは、当社の Web サイト デザイン サービスの一部である、市場で最も高速で最適化されたシステムの 1 つである Ousia コンテンツ管理システム コードから変更されたコードのセクションです。
これらは、約£500から始まるサイトで利用できます.
