May 2, 2015

Different social nav styles

Different social nav styles

Twelve different styles for social navs. Here i have used SCSS as a style sheet. The reason i am using SCSS is that it reduces the number lines and easily customizable.

Use of SCSS has become comfortable. We can define variables for colors, padding etc. I love the use of variables and mixins in it. As u define a variable for the color you need not go and change the color on all the places in the code. Just you change the color in the defined variable. Is that not easy.

Let's define some of the variables and functions that are necessary.

SCSS

$fb-cl:#3B579D;
$twt-cl:#00ACED;
$gp-cl:#DD4A3A;
$in-cl:#007BB6;
$pin-cl:#CB2026;

@function shadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 30 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

Let us give a basic styling for all the navs.

SCSS

.social-nav{
  padding: 0;
  list-style: none;
  display: inline-block;
  margin:10px auto;
  li{
    display: inline-block;
  }
  a {
    display: inline-block;
    float: left;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 48px;
    background: #000;
    position: relative;
    @include transition(.5s);
  }
}

As the basic structure is over, now let's give different styling to each of the nav.

Style 1:

This type of nav is fixed on the left hand side of the page. On hover of the nav it extends to some defined width.

HTML

<ul class="social-nav model-0">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-0{
  position: absolute;
  @include transition(.5s);
  left:0;
  top: 50px;
  li{
    float: none;
    display: block;
  }
  a{
    &:hover{
    padding-left: 20px;
    width:65px;
    }
  }
  .twitter{ background:$twt-cl}
  .facebook{ background:$fb-cl}
  .google-plus{background:$gp-cl}
  .linkedin{background:$in-cl}
  .pinterest{ background:$pin-cl}
}

Style 2:

Here the nav is circle in shape. On hover of it the nav moves slightly upward.

HTML

<ul class="social-nav model-1">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-1{
  li{margin:0 2px ;}
  a{
    background: #fff;
    @include transition(transform 1s, background .4s);
    @include border-radius(100%);
    &:hover{
      @include translateY(-10px);
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}

Style 3:

Here the nav is square in shape with some border-radius and margin between each nav. As you see each icon have a shadow within the nav. This type of shadow is called long shadow. Before hover the background color of the nav represents the color of its own branding and the icon color is white. On hover of it the background color of the nav changes to white and the icon color to the color of its branding.

HTML

<ul class="social-nav model-2">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-2{
  a{
    overflow: hidden;
    font-size: 26px;
    @include border-radius(4px);
    margin:0 5px;
    &:hover{
       background: #fff;
       @include text-shadow( shadow(darken(#eee, 10%)));
    }
  }
  
  .twitter{
    background:$twt-cl;
    @include text-shadow( shadow(darken($twt-cl, 10%)));
    &:hover{color:$twt-cl;}
  }
  .facebook{
    background:$fb-cl;
    @include text-shadow( shadow(darken($fb-cl, 10%)));
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    @include text-shadow( shadow(darken($gp-cl, 10%)));
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    @include text-shadow( shadow(darken($in-cl, 10%)));
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    @include text-shadow( shadow(darken($pin-cl, 10%)));
    &:hover{ color:$pin-cl}
  }
}

Style 4:

Here the nav is ribbon in shape in one end. Before hover the background color of the nav is white and the icons color represents the color of its own branding. On hover of it the background color of the nav changes to the branding color and the icon color to white. Not only this changes, the ribbon also extends downward like your pulling it.

HTML

<ul class="social-nav model-3">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-3{
  margin-bottom: 50px;
  a{
    background: #fff;
    @include transition(padding .4s);
    margin: 0 5px;
    &:after{
      content: '';
      position: absolute ;
      border:24px solid #fff;
      z-index: -1;
      border-bottom-color:transparent !important;
      left: 0;
      top:60%;
      @include transition(transform .4s);
    }
    &:hover{
       color: #fff;
       padding-top: 10px;
       &:after{
         @include translateY(10px);
       }
    }
  }
  
  .twitter{
    color:$twt-cl;
    &:hover{ background:$twt-cl;
    &:after{border-color: $twt-cl}
    }
  }
  .facebook{
    color:$fb-cl;
    &:hover{ background:$fb-cl;
    &:after{border-color: $fb-cl}
    }
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ background:$gp-cl;
    &:after{border-color: $gp-cl}
    }
  }
  .linkedin{
    color:$in-cl;
    &:hover{ background:$in-cl;
    &:after{border-color: $in-cl}
    }
  }
  .pinterest{
    color:$pin-cl;
    &:hover{ background:$pin-cl;
    &:after{border-color: $pin-cl}
    }
  }
}

Style 5:

Here the icon alone is seen without any box around it. The color of the icon represents its branding. On hover of the there is a shadow/glow effect around it.

HTML

<ul class="social-nav model-4">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-4{
  li{margin:0 2px ;}
  a{
    background:none;
    line-height: 1.5;
    font-size: 32px;
    @include text-shadow(0px 0px 1px );
    &:hover{
      @include text-shadow(0px 0px 25px );
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}

Style 6:

Here the background color of the nav is dark without any margin between each other with the icon color white. On hover of it the icon color changes to the color of its branding.

HTML

<ul class="social-nav model-5">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-5{
  li{float: left;}
  a{background: #222;}
  .twitter:hover{ color:$twt-cl}
  .facebook:hover{color:$fb-cl}
  .google-plus:hover{color:$gp-cl}
  .linkedin:hover{color:$in-cl}
  .pinterest:hover{color:$pin-cl}
}

Style 7:

This style is similar to the style 3, only that here there is no margin between each nav and no border-radius given.

HTML

<ul class="social-nav model-6">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-6{
  li{float: left;}
  a{
    &:hover{background: #fff;}
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}

Style 8:

Here the nav background is transparent with the border glow/shadow representing the branding color. The color of the icon also represents the branding color. On hover of it the background color becomes white, the icon size is increased and the icon is rotated to -10deg.

HTML

<ul class="social-nav model-7">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-7{
  li{margin:0 10px ;}
  a{
    background: none;
    @include box-shadow(0 0 4px 3px);
    @include text-shadow(0 0 1px #333);
    @include transition(transform .4s, background .4s);
    @include border-radius(100%);
    .fa{ @include transition(transform 1s)}
    &:hover{
      background: #fff;
      .fa{ @include transform( rotate(-10deg) scale(3))}
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}

Style 9:

Here the style is similar to the style 3. Only difference is there wont be a long shadow for icons and border-radius. On hover of it the nav closes like a window with some transition effect.

HTML

<ul class="social-nav model-8">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-8{
  a{
    background: #FFF;
    &:hover{
        @include box-shadow(0 48px  0  inset);
        &> .fa{color:#fff}
      }
  }
  .twitter{
    color:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    color:$fb-cl;
    &:hover{color:$fb-cl}
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    color:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    color:$pin-cl;
    &:hover{color:$pin-cl}
  }
}

Style 10:

Here the nav is circular in shape. On hover of it the icon along with the hover effect moves from right to left.

HTML

<ul class="social-nav model-9">
  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
  <li>
    <a href="#" class="facebook"> <i class="fa fa-facebook"></i></a>
  </li>
  <li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
  <li><a class="linkedin"><i class="fa fa-linkedin"></i></a></li>
  <li><a class="pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>

SCSS

.model-9{
  li{margin:0 10px ;}
  a{
    color: #fff;
    overflow: hidden;
    @include border-radius(100%);
    &:hover{
      background: #fff;
      .fa{ @include animation(.4s icon-move linear 0s)}
    }
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}

@include keyframes(icon-move){
  49%{@include translateX(-40px); opacity:0}
  50%{@include translateX(40px);opacity:1}
  80%{@include translateX(0);}
}

Style 11:

This is an interesting style. It gives 3d sliding effect on hover of the nav.

HTML

<ul class="social-nav model-3d-0">
  <li>
    <a href="#" class="twitter">
      <div class="front"><i class="fa fa-twitter"></i></div>
      <div class="back"><i class="fa fa-twitter"></i></div>
    </a>
  </li>
  <li>
    <a href="#" class="facebook">
      <div class="fornt"><i class="fa fa-facebook"></i></div>
      <div class="back"><i class="fa fa-facebook"></i></div>
    </a>
  </li>
  <li>
    <a href="#" class="google-plus">
      <div class="front"><i class="fa fa-google-plus"></i></div>
      <div class="back"><i class="fa fa-google-plus"></i></div>
    </a>
  </li>
  <li>
    <a class="linkedin">
      <div class="front"><i class="fa fa-linkedin"></i></div>
      <div class="back"><i class="fa fa-linkedin"></i></div>
    </a>
  </li>
  <li>
    <a class="pinterest">
      <div class="front"><i class="fa fa-pinterest-p"></i></div>
      <div class="back"><i class="fa fa-pinterest-p"></i></div>
    </a>
  </li>
</ul>

SCSS

.model-3d-0{
  a {
    background: #333;
    float: left;
    margin:0 10px;
    @include transform-style(preserve-3d);
    &:hover { 
      @include rotateX(-90deg);
      .fornt{ @include backface-visibility (hidden);}
      .back{ @include backface-visibility (visible);}
    }  
  }
  .front , .back{
    width: 48px; 
    height: 48px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
    @include translateZ(18px);
    @include backface-visibility (visible);
  }
  .back {
     font-size: 32px;
    @include transform(rotateX(90deg) translateZ(18px));
    @include backface-visibility (hidden);
  }
  .twitter .back { background: $twt-cl }
  .facebook  .back { background: $fb-cl }
  .google-plus .back { background: $gp-cl}
  .linkedin .back { background: $in-cl}
  .pinterest .back { background: $pin-cl}
}

Style 12:

This style is also 3d effect. Here the nav rotates 180deg and the background color changes to that of its branding.

HTML

<ul class="social-nav model-3d-1">
  <li>
    <a href="#" class="twitter">
      <div class="front"><i class="fa fa-twitter"></i></div>
      <div class="back"><i class="fa fa-twitter"></i></div>
    </a>
  </li>
  <li>
    <a href="#" class="facebook">
      <div class="fornt"><i class="fa fa-facebook"></i></div>
      <div class="back"><i class="fa fa-facebook"></i></div>
    </a>
  </li>
  <li>
    <a href="#" class="google-plus">
      <div class="front"><i class="fa fa-google-plus"></i></div>
      <div class="back"><i class="fa fa-google-plus"></i></div>
    </a>
  </li>
  <li>
    <a class="linkedin">
      <div class="front"><i class="fa fa-linkedin"></i></div>
      <div class="back"><i class="fa fa-linkedin"></i></div>
    </a>
  </li>
  <li>
    <a class="pinterest">
      <div class="front"><i class="fa fa-pinterest-p"></i></div>
      <div class="back"><i class="fa fa-pinterest-p"></i></div>
    </a>
  </li>
</ul>

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views