CODEWITHSUNDEEP
htmlcssresponsive-design
sixtwowaifu
sixtwowaifu

Reputation: 797

Cross-browser friendly responsive logo using CSS

I'm trying to get this logo to conform to all resolutions and browsers, while staying in the absolute center (vertical and horizontal) of the #container. If the resolution is less than 320px, I want the company name to disappear, and for the logo to be in the center of the #container. Can't use jQuery, Javascript, or any other frameworks. Just HTML and CSS.

Example in progress: http://jsfiddle.net/cd9mF/1/
Link to actual logo image: http://snag.gy/jO2Py.jpg enter image description here

Note: The "u" and "r" and intended to be overlapped, that was not a mistake ;)

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>

Upvotes: 1

Views: 686

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

the first thing you have to do if you want to use only css ist to draw your Logo using css something like this:

*, *: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;
}

Demo:http://jsfiddle.net/NtGtK/1/

<figure id=logo>UpSource</figure>

it looks like this now

enter image description here

now that you have a css logo you can move the figure depending on what you want to achive.

note that you can use CSS3 transform Property scale 2D on #logo:before in your mediaquery something like 

@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);
    }
}

and for the performance you can add backface-visibility since you are using transform

backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */

Upvotes: 1

sixtwowaifu
sixtwowaifu

Reputation: 797

Thanks to kougiland for the CSS answer (never hurts to brush up on them CSS skills ;) )

Thanks as well to the kind folks Josh Powell and and Kazzkiq who recommended SVG.

For future readers, here's a rough version in SVG (my first attempt at SVG so please excuse it if there's a better way to do it)

 

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;
}

 

Updated fiddle: http://jsfiddle.net/cd9mF/3/

Upvotes: 1

Related Questions