1

我正在尝试为公司徽标编写一些 CSS，这是对当前公司服务器上jpg的相当准确的描述。除了标志上的一些颜色覆盖外，它非常基本。

我的问题是：这甚至可能吗？如果是这样，我该怎么做

请不要 bash，我是个菜鸟，我的第一行 html 是大约一周前...

这是我的标记

<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，仅在现代浏览器中受支持。第二个是浏览器黑客没有通过 W3 CSS 验证。

于 2011-12-29T18:30:34.597 回答
0

实际上，这不是一个答案，但我强烈建议您最多可以尝试使用 Inkscape 或此类程序从该徽标制作可缩放的矢量图像。这个标志将很容易转换为 SVG（可缩放矢量图形）。但正如 Kris 所说，在许多情况下使用 CSS 来完成所有这些可能无法按预期执行。

于 2011-12-29T18:45:32.033 回答