So I created a Twitter header using CSS. It was actually not very difficult, although it took me a while to set everything up, and also figure out exactly what I wanted. If you want to create one yourself, here's a few things you need to consider
Twitter's headers are 1500x500 images. Because of this, you can set up a <div> that has that exact size, and take advantage of absolute positioning for the internal CSS.
Also, make sure your image has the most relevant content on the right side, since in Twitter, your profile picture covers part of the left hand side of the header.
The header I created has two monitors, one with the front-end technologies I like to work with, and the other with the back-end technologies & databases. Since it was my first Twitter header, I went for simplicity, and added the logos in SVG, instead of recreating them with CSS. The resulting header was:
I had to do a few updates on the original CSS header. I originally built it using plain HTML & CSS, but because this website is written in React I made few changes to make better use of React's components and reusability. The original code I had written (plain HTML & CSS) is as follows:
<div class="header">
<div class="monitor">
<div class="screen">
<!-- Monitor #1 Content -->
</div>
<div class="base"></div>
<div class="foot"></div>
<div class="shadow"></div>
</div>
<div class="monitor">
<div class="screen">
<!-- Monitor #2 Content -->
</div>
<div class="base"></div>
<div class="foot"></div>
<div class="shadow"></div>
</div>
</div>
The HTML is pretty straightforward, a few divs for the monitors. I've omitted the contents (because in my header, it's just SVG logos placed carefully) - but you can place anything inside the screen.
The CSS is a bit longer, but not too scary. A bit of knowledge on CSS's pseudo-elements is necessary to fully understand how some shapes are created, but other than that, there's nothing too fancy about this particular setup.
.header {
min-width: 1500px;
width: 1500px;
height: 500px;
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
position: relative;
}
.monitor {
position: absolute;
}
.monitor:first-of-type {
left: 500px;
top: 50px;
}
.monitor:last-of-type {
left: 1000px;
top: 50px;
}
.screen {
border: 12px solid #474e5d;;
border-top-width: 20px;
border-radius: 10px;
width: 460px;
height: 280px;
background-image: linear-gradient(135deg, #282c34 0%, #282c34 90%, #1e2124 100%);;
}
.screen:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .4);
display: block;
position: absolute;
left: calc(50% - 4px);
top: 4px;
}
.base {
width: 60px;
height: 50px;
background: linear-gradient(180deg, #373e4d 0%, #373e4d 25%, #474e5d 30%, #474e5d 100%);
position: absolute;
left: calc(50% - 30px);
}
.base:before {
content: "";
position: absolute;
top: 0;
border-left: 6px solid transparent;
border-right: 0px solid transparent;
border-bottom: 50px solid #474e5d;
left: -6px;
}
.base:after {
content: "";
position: absolute;
top: 0;
border-right: 6px solid transparent;
border-left: 0px solid transparent;
border-bottom: 50px solid #474e5d;
right: -6px;
}
.foot {
width: 160px;
height: 20px;
background: #474e5d;
position: absolute;
top: 360px;
left: calc(50% - 80px);
z-index: 2;
}
.shadow {
width: 350px;
height: 15px;
position: absolute;
left: calc(50% - 175px);
top: 372px;
z-index: 1;
background: radial-gradient(ellipse at center, rgba(0,0,0,.2) 0%,rgba(0,0,0,.2) 53%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%);
}
You can check out how it looks on my Twitter profile. Feel free to follow me on there if you haven't already.