1

我试图让这个徽标符合所有分辨率和浏览器，同时保持在#container. 如果分辨率小于 320 像素，我希望公司名称消失，并且徽标位于#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 ist 来使用 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 徽标，您可以根据您想要实现的目标来移动图形。

请注意，您可以在 mediaquery中使用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 回答
1

感谢 kougiland 的 CSS 答案（复习 CSS 技能不会有什么坏处；））

还要感谢推荐 SVG 的好心人 Josh Powell 和 Kazzkiq。

对于未来的读者，这里有一个粗略的 SVG 版本（我第一次尝试 SVG，如果有更好的方法，请原谅）

 

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 50 -50)" />
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 62 -20)" />
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 80 -63)" />
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 92 -33)" />
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 74 10)" />
    <rect width="20" height="20" style="fill:#5284CD;stroke-width:1;stroke:rgb(0,0,0)" transform="rotate(-45 110 -76)" />
    <text x="115" y="52" fill="#000">Upsou</text>
    <text x="266" y="52" fill="#000">rce</text>
    <text class="trade" x="341" y="25" fill="#000">&reg;</text>
</svg>

 

CSS

body {
    font: 400 56px/100% Arial, Helvetica, sans-serif;
}
.trade {
    font-size: 20px;
}

 

更新小提琴：http: //jsfiddle.net/cd9mF/3/

于 2013-11-07T20:07:32.543 回答