1

現在会社のサーバーにあるjpgをかなり正確に表現した会社のロゴのCSSを作成しようとしています。ロゴのいくつかのカラーオーバーレイを除いて、かなり基本的です。

私の質問は：これも可能ですか？もしそうなら、どうすればそうすることができますか

バッシュしないでください、私は完全な初心者です、htmlの私の最初の行は約1週間前でした...

これが私のマークアップです

<html>

<head>
    <meta charset="utf-8"/>
    <title>

    </title>
    <link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
 -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

 #infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;    
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
     border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
     border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
}                       
                                    </style>
<body>
<br>
<br>
<div>
<div>   
    <div style="float:left; margin-right: 0px;"id="infinity">
</div>

<div>
    <p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;                 
         font-family: Avenir, sans-serif;">
    PORTFOLIO
    </p>
</div>

  </div>
  </body>
  </html>
4

3 に答える 3

6

これをチェックしてください：http：//jsfiddle.net/tMEqk/1/

そこにはありませんが、もっと近いです

比較的配置されたコンテナを作成し、そこから各ループを引き出し、ボックスに従ってすべてを配置しました。境界線を変更して連続効果を取得し、ゴールドボックスによって生成された対角線を覆い隠しました。回転もありませんが、サイズを変更したい場合は、少し計算を行う必要があります。Chromeで実行しましたが、他のブラウザはまだチェックしていません。

編集 私はこれを正確に容認しているわけではありませんが、それを再現しようとして楽しんでいました。これは実際には画像である必要があり、ローカルファイルとして保存して参照することで、画像の破損を防ぐことができます。

于 2011-12-29T19:04:25.793 に答える
2

だから私はまっすぐです。CSSでロゴ全体を作成しようとしていますか？これは正しいです？もしそうなら、なぜCSSとJPEGを使用するのですか？ストレートCSSを使用している場合は、できることだけに制限されます。また、そのほとんどはCSS3とブラウザーのハッキングであり、いくつかの問題が発生します。

最初のCSS3は、最新のブラウザーでのみサポートされています。2つ目は、ブラウザのハッキングでW3CSS検証に合格しません。

于 2011-12-29T18:30:34.597 に答える
0

これは実際には答えではありませんが、Inkscapeまたはそのようなプログラムを使用して、せいぜいそのロゴからスケーラブルなベクター画像を作成することを試みることができることを強くお勧めします。このロゴは、SVG（スケーラブルベクターグラフィックス）に非常に簡単に変換できます。しかし、クリスが言ったように、CSSを使用してこれらすべてを達成すると、多くの状況で意図したとおりに機能しない可能性があります。

于 2011-12-29T18:45:32.033 に答える