March 17, 2015

Backbone.js logo using CSS3

Backbone.js logo using CSS3

I was inspired by some of the works created in codepen. Then i couldn't resist creating a pen on my own keeping in mind to use less elements and lightweight version of the logo.

HTML

<div class="backbone">
    <div class="pane"></div>
    <div class="pane"></div>
    <div class="pane"></div>
</div>

CSS

.backbone {
  width: 240px;
  margin: 90px auto;
}
.pane {
  width: 90px;
  height: 100px;
  border: 10px solid #002a42;
  border-width: 53px 40px;
  position: absolute;
  transform-origin: right;
}
.pane:nth-child(1) {
  transform: skewY(30deg);
  border-right: 0;
}
.pane:nth-child(2) {
  width: 180px;
  transform: skewY(-30deg) translate(0, -75px);
  border-color: #0071b5;
}
.pane:nth-child(3) {
  transform: skewY(30deg) translate(130px,-75px);
  transform-origin: left;
  border-left: 0;
}
demo

No comments:

Post a Comment

Popular Posts

Views