CSSのiPhoneポップアップ

iPhoneのUIのように見えるように設計されたウェブサイトを作成しています。ポップアップを使用しています。ポップアップすることで（私はそれが実際に呼ばれるのかわからない）私はこの種のものを意味する：CSSのiPhoneポップアップ

enter image description here

私の質問は、私はそれのボタンを作るだろうか、でしょうか？私はそれを試して、-webkit-border-image doesn't work.

ありがとう！

出典

2012-03-10 Zungy

あなたが試した例が参考になります。 – j08691

@ j08691しました。私は言った - ウェブキット - ボーダー - イメージは動作しませんでした。 – Zungy

大丈夫です@ザンジー、私は下の私の例を変更して、それをより明確にしました。 – Joerg

2があります。これを行う方法。 1つの方法は、-webkit-border-radiusのようないくつかのWebkit CSSプロパティを使用することです。これを他のwebkit-specific propertiesと組み合わせると、（長い時間を経て）良い結果が得られます。

しかし、簡単な方法があります。ボタン画像を（写真を撮ってスクリーンショットを撮って）作成し、リンクの背景として使用することもできます。あなたは正しいフォントを見つけて、おそらくいくつかのwebkit text shadowを使用しなければなりません：簡単な方法で素晴らしい結果を得ることができます！

出典

2012-03-10 21:29:00 Frog

ありがとう！本当に助けて！ – Zungy

私はあなたの質問を正しく理解することを願っています。
あなたはCSS3を使用することを許可されている場合は、border-radius

例えば顔をしている：（NEW LINK）http://jsfiddle.net/MGr3t/2/

CSS：

.button{ 
    border-radius: 8px; 
    background-image: url("http://www.krause-sohn.com/images/background.jpg"); 
    border-color: 1px solid black; 
}

HTML

<input class="button" type="button" value="send"><br/><br/> 
<img class="button" src="http://www.domain.com/background.jpg" width="100" height="40">

出典

2012-03-10 21:19:55 Joerg

いいえ。私は画像を使ってボタンを意味しました。 – Zungy

@Zungyバックグラウンド画像とボタンとしての画像の例[NEW LINK]（http://jsfiddle.net/MGr3t/2/） – Joerg

CSSのiPhoneポップアップ

答えて

関連する問題