2012-07-26 30 views
7

私は開発が必要なデザイナーのファイルを受け取りました。CSSの曲線メニュー

enter image description here

これを作成することは可能です:彼らは、湾曲/アーチメニューを行うために私を求めていますか?私は前にこのような何かに出くわしたことはありませんし、これに近づくのは困惑しています。

+2

テキストをオプションとして使用する代わりに、小さな画像にスライスしていますか? –

答えて

6

。サンプルについては、Is there a way to curve/arc text using CSS3/Canvasへの回答を参照してください。 canvasはIE8以前ではサポートされていませんが、現代のブラウザではかなり広くサポートされています。

drawing a sine wave with canvasでこのチュートリアルを見ると、イメージのメニューが多少正弦波になっていることがあります。

このようなことはたくさんありますが、代わりに、大きな画像にして、map要素を使用してイメージマップを作成することができます。

また、一連の小さな画像から構成することもできます。

-1

これは、CSSを使用することはまったく不可能です。スライスされた画像を使用して作成するか、フラッシュで作成する必要があります。

+0

私はCSS3とIEフィルターでも可能だと思いますが、難しいです。少なくともテキスト部分。 –

+0

私はサイトを開発するためにwordpressを使用しているので、私は彼らの動的メニューを使用するので、イメージをスライスすることはできないと推測しています。 – joshzee

+0

私はそれが可能だとは思わない。キャンバスについての@Trottの答えを見て、正弦波を描くと、それを得ることができるかもしれませんが、それは間違いなく、おそらくそれ以上の価値があります。 – CoreyRS

2

あなたはCSS3のrotationプロパティを使用しての例に見ることができます:あなたはcanvasでそれを行うことができるかもしれない

https://www.google.com/search?q=css+rotate

https://www.google.com/search?q=css+rotate+menu

http://snook.ca/archives/html_and_css/css-text-rotation

+0

これはwordpress 'dynamic menuで可能ですか?これをオフにする方法がない場合は? – joshzee

+0

カーブテキストではなく、文字回転でメニューを回転させませんか?私は実際にそれを曲げることができないと思う、ちょうど軸の点でそれを回転させる。 – CoreyRS