Question

I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the jpg currently on the company server. its pretty basic except for some color overlays on the logo.

My question is: is this even possible? if so how can i go about doing so

please dont bash, im a total noob, my first line of html was about a week ago...

Here is my markup

<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>
Was it helpful?

Solution

Check this out: http://jsfiddle.net/tMEqk/1/

It's not quite there, but it's closer

I made a relatively positioned container and then drew out each loop from there, positioned everything according to the box. Changed the border to get the continuous effect and then obscured the diagonal line generated by a gold box. There's no rotation either, but if you want to change the size there's a little bit of math to be done. Did it in Chrome, haven't checked other browsers yet.

Edit I'm not exactly condoning this, but I did enjoy trying to recreate it. This really should be an image, and you can prevent the broken image by saving and referencing it as a local file.

OTHER TIPS

Just so I am straight. You are trying to create the entire logo with CSS? Is this correct? If so, why CSS versus using the JPEG? If you are using straight CSS you will be limited to what you can do, also most of it would be CSS3 and browser hacks, which poses a couple of problems.

The first being CSS3 is only supported in modern browsers. The second being browser hacks don't pass W3 CSS validation.

This is not an answer, really, but I would strongly suggest that you can at most try to make a scalable vector image out of that logo, using Inkscape or such programs. This logo will be very easy to convert to SVG (scalable vector graphics). But as Kris said, using CSS to accomplish all of this may not perform as intended in many situations.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top