LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Title
Title

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
CSS
.mdl-layout {
  background: url("https://www.getmdl.io/assets/demos/transparent.jpg") center/cover;
}

.mdl-layout__header {
  -webkit-transition-property: max-height,box-shadow,background;
  transition-property: max-height,box-shadow,background;
}

.mdl-layout__header.is-casting-shadow {
  background: #3f51b5;
}

.mdl-layout__header,
.mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}

.mdl-card__title {
  color: #fff;
  height: 176px;
  background: url("https://www.getmdl.io/assets/demos/welcome_card.jpg") center/cover;
}

.mdl-card__menu {
  color: #fff;
}

.is-focused .mdl-textfield__input {
  border-color: #fff;
}
Host Instantly Drag and Drop Website Builder

 

Description

A demo of Material Design Lite where the header transforms from transparent to opaque as the user scrolls down.
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID