<code/> it out
font-size: 48px;
animated hamburger
Divider
HTML
<div class="header-divider-container"><h2 class="header-divider">Divider</h2>
</div>
see all CSS
CSS
.header-divider-container {
width: 100%;
margin: 0 auto;
line-height: 70px; }
h2 {
color: #19d;
font-family: Roboto;
font-size: 35px;
position: relative;
overflow: hidden; }
.header-divider::before {
content: "";
width: 150px;
height: 6px;
display: inline-block;
transform-origin: bottom right;
transform: skew(40deg,0);
position: absolute;
left: 0;
bottom: 0px;
background: #19d; }
.header-divider::after {
content: "";
width: 100%;
margin-left: 157px;
height: 6px;
transform-origin: bottom right;
transform: skew(40deg,0);
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
Divider
Another Divider
HTML
<div class="header-divider-container"><h2 class="another-header-divider">Another Divider</h2>
</div>
see all CSS
CSS
.header-divider-container {
width: 100%;
margin: 0 auto;
line-height: 70px; }
h2 {
color: #19d;
font-family: Roboto;
font-size: 35px;
position: relative;
overflow: hidden; }
.another-header-divider::before {
content: "";
width: 150px;
height: 1px;
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
background: #19d; }
.another-header-divider::after {
content: "";
width: 100%;
margin-left: 150px;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background: #ddd; }
Mac ✓
sticky header
image enlarger
Car Wash
Agricultural
Industrial
Lawn
Deice
Petroleum
navigating is more effective along with cool sliding animations
navigating is more effective along with cool sliding animation
Code around and find out
Yo, hit that front camera on the iMac
<div class="ninh-apple-logo">
<div class="ninh-apple-logo-left"></div>
<div class="ninh-apple-logo-right"></div>
</div>
<style>
.ninh-apple-logo {
display: flex;
transform: translate(50%,50%);
transform-origin: right;
right: 49%;
bottom: 10px;
position: absolute;
cursor: pointer;
}
.ninh-apple-logo-left {
position: relative;
width: 90px;
height: 110px;
background: #30bb7c;
transform: rotate(-20deg);
border-radius: 100px 100px 0px 80px;
}
.ninh-apple-logo-right {
position: relative;
width: 90px;
height: 110px;
background: #30bb7c;
transform: rotate(20deg) scale(-1);
border-radius: 80px 0px 100px 100px;
left: -58px;
}
.ninh-apple-logo-left:before {
content: "";
width: 40px;
height: 40px;
background: #30bb7c;
display: block;
position: relative;
transform: rotate(10deg);
top: -33px;
right: -85px;
border-radius: 100px 0px;
}
.ninh-apple-logo-right:before {
content: "";
width: 50px;
height: 50px;
background: #e9f8ff;
display: block;
border-radius: 60px;
position: relative;
right: 20px;
top: 60px;
}
</style>
and
code on
• exit
• minimize
• maximize