Ricardo-Diaz

Gradients

/* Light Gradient */
.gradient-light-linear {
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}

/* Dark Gradient */
.gradient-dark-linear {
  background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));

Ricardo-Diaz

Rounded Borders

.light-rounded {
  border-radius: 3px;
}

.heavy-rounded {
  border-radius: 8px;
}

Ricardo-Diaz

Background Inline Link

Ricardo-Diaz

//Underlined Inline Link

//This is some dummy text to show an inline link.

//Link will have dashes that transform into dotted over hover.

 .inline-link-2 {
  display: inline-block;
  border-bottom: 1px dashed rgba(0,0,0,0.4);

Ricardo-Diaz

//Triangle Inline Link

//This is some dummy text to show an inline link.

//Link will have a triangle next to it that changes upon hover


 .inline-link-3 {
    display: inline-block;
    position: relative;

Ricardo-Diaz

//Metro Styles

//Boxes will have a 3d effet that looks like windows metro. There is a 3d version and plain button.


 .metro {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #08C;

Ricardo-Diaz

//Bordered Link

//Link surround by a border box. nothing in the inside just the border.
 


 .bordered-link {
  display: inline-block;
  padding: 8px;
  border: 3px solid #FCB326;

Ricardo-Diaz

Button Styles



//Modern-shadow around it

 .modern {
  display: inline-block;
  margin: 10px;
  padding: 8px 15px;

Ricardo-Diaz

//Simple Input with border that fades when active.

 .simple-input {
  display: block;
  padding: 5px;
  border: 4px solid #F1B720;
  border-radius: 5px;
  color: #333;
  transition: all 0.3s ease-out;
}

Ricardo-Diaz

//Mac Input

 .mac {
  display: block;
  border: none;
  border-radius: 20px;
  padding: 5px 8px;
  color: #333;
  box-shadow: 
    inset 0 2px 0 rgba(0,0,0,.2),