1

このロゴをすべての解像度とブラウザーに適合させようとしていますが、#container. 解像度が320px未満の場合は社名を非表示にし、ロゴを中央に配置したい#container。jQuery、Javascript、またはその他のフレームワークは使用できません。HTMLとCSSだけです。

進行中の例: http://jsfiddle.net/cd9mF/1/
実際のロゴ画像へのリンク: http://snag.gy/jO2Py.jpg ここに画像の説明を入力

注: "u" と "r" は重複するように意図されていますが、これは間違いではありません ;)

CSS

*, *:before, *:after { 
  box-sizing: border-box; 
}
body { 
  background: #678;
  height: 100%; 
  width: 100%;
}
#container { 
  background: #eee;
  padding: 40px 50px 85px;
  margin: 100px auto 0;
  text-align: center;
  width: 70%;
}
#d-container {
  float: left;
  margin-left:110px;
  width: 50%;
  z-index:1;
}
#t-container {
  float: left;
  margin: -10px 0 0 -170px;
  width: 50%;
  z-index:2;
}
.diamond {
  background: #5284CD;
  border: 2px solid #000;
  display: inline-block;
  height: 20px;
  margin: -5px 10px 0 0;
  width: 20px;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#l-text:before {
  content:"UpSou";
  display: inline;
  font: 400 56px/100% Arial, Helvetica, sans-serif;
  float: left;
  letter-spacing: -6px;
}
#r-text:before {
  content:"rce";
  display: inline;
  font: 400 56px/100% Arial, Helvetica, sans-serif;
  float: left;
  letter-spacing: -3px;
}
#trade:before {
  content:"\00ae";
  display: inline;
  font: 400 20px/100% sans-serif;
  float: left;
  letter-spacing: -3px;
}
@media only screen and (max-width: 320px) {
    #l-text, #r-text, #trade {
        display: none;
    }
    .diamond {
        margin: -2px 3px 0 0 ;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta charset="utf-8" />
  <title>UpSource&reg; logo made using CSS3</title>
  <link rel="stylesheet" href="upsourcelogo.css" />
</head>
<body>
<div id="container">
  <div id="d-container">
    <div class="diamond"></div>
      <br />
    <div class="diamond"></div>
    <div class="diamond"></div>
      <br />
    <div class="diamond"></div>
    <div class="diamond"></div>
    <div class="diamond"></div>
  </div>
  <div id="t-container">
    <div id="l-text"></div>
    <div id="r-text"></div>
    <div id="trade"></div>
  </div>
</div>
</body>
</html>
4

2 に答える 2

1

css のみを使用する場合、最初に行う必要があるのは、次のような css を使用してロゴを描画することです。

*, *:before, *:after { 
  box-sizing: border-box; 
}

#logo{
    width:100px;
    height:100px;
    margin:20px auto;
    background:red;
    position:relative;
}

#logo:before {
content: '';
position: absolute;
top: 0;
left: -68px;
background: #5284CD;
display: inline-block;
height: 20px;
width: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0 0 0 2px black,0 30px 0 #5284CD, 0 30px 0 2px black, 0 60px #5284CD, 0 60px 0 2px black,-30px 0 #5284CD,-30px 0 0 2px black,-60px 0 #5284CD,-60px 0 0 2px black,-30px 30px #5284CD,-30px 30px 0 2px black;
-moz-box-shadow: 0 0 0 2px black,0 30px 0 #5284CD, 0 30px 0 2px black, 0 60px #5284CD, 0 60px 0 2px black,-30px 0 #5284CD,-30px 0 0 2px black,-60px 0 #5284CD,-60px 0 0 2px black,-30px 30px #5284CD,-30px 30px 0 2px black;
box-shadow: 0 0 0 2px black,0 30px 0 #5284CD, 0 30px 0 2px black, 0 60px #5284CD, 0 60px 0 2px black,-30px 0 #5284CD,-30px 0 0 2px black,-60px 0 #5284CD,-60px 0 0 2px black,-30px 30px #5284CD,-30px 30px 0 2px black;
}

デモ: http://jsfiddle.net/NtGtK/1/

<figure id=logo>UpSource</figure>

今はこんな感じ

ここに画像の説明を入力

CSS ロゴが作成されたので、目的に応じて図を移動できます。

次のようなメディアクエリでCSS3 transform Property scale 2D onを使用できることに注意してください#logo:before

@media only screen and (max-width: 320px) {
    #logo:before {
    /*set the position with left and top*/
    -webkit-transform: rotate(-45deg) scale(0.7,0.7);/* please zoom me */
    -moz-transform: rotate(-45deg) scale(0.7,0.7);
    transform: rotate(-45deg) scale(0.7,0.7);
    }
}

変換を使用しているため、パフォーマンスのために背面の可視性を追加できます

backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
于 2013-11-07T19:58:47.337 に答える