我试图让这个徽标符合所有分辨率和浏览器,同时保持在#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® 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>