How to create
"non-rectangular" headers
Lucas Bonomi (@LukyVj)
Lucas Bonomi
@LukyVj
Frontend Developer / Designer
at
"non-rectangular"
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
Full CSS technic
Lucas Bonomi (@LukyVj)
header {
background: blue;
}
article {
background: green;
}
article:before {
position: absolute;
background: red;
transform: skewY(-3deg);
z-index: 10;
}
Lucas Bonomi (@LukyVj)
// Diagonals
@mixin diagonal($rotation, $background, $height, $pos: after) {
&:#{$pos} {
content: "";
display: block;
position: absolute;
width: 100%;
height: $height;
background: #{$background};
transform: skewY($rotation); // Skew it
z-index: 0;
// If the screen is really large,
// Reduce your rotation angle
@media (min-width: 2000px) {
transform: skewY($rotation / 2);
}
@content; // Insert more CSS if needed
}
}
Lucas Bonomi (@LukyVj)
Demo Time 🎉
Lucas Bonomi (@LukyVj)
Other techniques ⚗
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
Lucas Bonomi (@LukyVj)
That's all!
Questions?
Slides : http://slides.com/lukyvj
Reussir vos headers "non rectangulaire"
By icn
Reussir vos headers "non rectangulaire"
- 1,108