امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

آیکون‌های مسطح با استفاده از CSS

Font Awesome این امکان را به ما می‌دهد که آیکون‌های وِکتوری ایجاد کنیم و مواردی مثل رنگ، سایز، سایه و هر چیزی که توسط CSS قابل انجام هست را روی آنها به سادگی اعمال کنیم. حال فردی بنام Scott Marshall با کمک این فونت‌ها یک سری آیکون مسطح یا به اصطلاح Flat ایجاد کرده که دیدن و مطالعه کردن کدهای آن خالی از لطف نمی‌باشد!

پیش‌نمایش دانلود کدها

کدهای بخش HTML :

<html>
<head>
<meta charset="utf-8">
<title>Flat Icons Using FontAwesome</title>
<link rel='stylesheet' id='navbar-stylesheet-css'  href='style.css' type='text/css' media='all' />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Flat-Icons</h1>
<h2>Using Fontawesome <br /><br />
<span>by <a href="http://codepen.io/ScottMarshall/pen/OPgNOV">Scott Marshall</a></span></h2>
<div class="elements">
<ul>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-flickr"></i></a></li>
  <li><a href="#"><i class="fa fa-codepen"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

<ul class="blue">
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-flickr"></i></a></li>
  <li><a href="#"><i class="fa fa-codepen"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

<ul class="green">
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-flickr"></i></a></li>
  <li><a href="#"><i class="fa fa-codepen"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

<ul class="orange">
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-flickr"></i></a></li>
  <li><a href="#"><i class="fa fa-codepen"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

<ul class="pink">
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-behance"></i></a></li>
  <li><a href="#"><i class="fa fa-flickr"></i></a></li>
  <li><a href="#"><i class="fa fa-codepen"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>

<!--Adjust icon padding as needed-->
</body>
</html>

 

کدهای بخش CSS :

body {
  background: #21303f;
}

.elements {
  margin-bottom: 100px;
}

h1 {
  color: #FFF;
  text-align: center;
  font: 900 16px Lato;
  text-transform: uppercase;
  letter-spacing: 15px;
  margin: 80px 0px 20px 0px;
}

h2 {
  color: #404b5b;
  text-align: center;
  font: 900 11px Lato;
  text-transform: uppercase;
  letter-spacing: 15px;
  margin: 0px 0px 70px 0px;
}

h2 span {
  letter-spacing: 3px;
}

ul {
  width: 610px;
  margin: 0 auto;
  vertical-align: center;
  padding: 0px;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}
ul li {
  list-style: none;
  float: left;
  margin: 0px 15px 70px 0px;
}
ul a {
  color: #d14d57;
  padding: 25px;
  border: 2px solid #d14d57;
  border-radius: 50px;
}
ul .fa-twitter {
  padding: 0px 2px 3px 2px;
}
ul .fa-facebook {
  padding: 0px 4px 3px 3px;
}
ul .fa-dribbble {
  padding: 0px 2px 3px 2px;
}
ul .fa-linkedin {
  padding: 0px 2px 3px 2px;
}
ul .fa-flickr {
  padding: 0px 2px 3px 2px;
}

.blue a {
  color: #22A7F0;
  padding: 25px;
  border: 2px solid #22A7F0;
  border-radius: 50px;
}

a:hover {
  color: #FFF !important;
  border-color: #FFF !important;
  -webkit-transition: .8s ease;
  -moz-transition: .8s ease;
  -ms-transition: .8s ease;
  -o-transition: .8s ease;
  transition: .8s ease;
}

a:hover i {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  color: #FFF;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -ms-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

.green a {
  color: #03C9A9;
  padding: 25px;
  border: 2px solid #03C9A9;
  border-radius: 50px;
}

.orange a {
  color: #F2784B;
  padding: 25px;
  border: 2px solid #F2784B;
  border-radius: 50px;
}

.pink a {
  color: #D2527F;
  padding: 25px;
  border: 2px solid #D2527F;
  border-radius: 50px;
}

پیش‌نمایش دانلود کدها

 

منبع

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.