تاريخ : ۱۳٩۳/٧/۱۳ | ٩:٠٦ ‎ق.ظ | نویسنده : نوروز علی احمدی
گام 1
یک سند جدید با بوم خاکستری ایجاد کنید.سپس با Rectangular Marquee Tool چهار مستطیل مانند نمونه رسم کنید:
گام 2
سپس به منویlayer بروید و در پنجره بازشده تنظیمات زیر را انجام دهید:
حال باید شکلی شبیه زیر داشته باشید:
 
 می خواهیم مربع بعدی شبیه آیکن facebook باشد.پنجره layer style را باز کرده و تنظیمات زیر را انجام دهید:
 
سومین مربع را مطابق زیر تنظیم کنید:
و مربع آخر را به صورت زیر درآورید:
حال وقت آن است که آیکنها را اضافه کنید.
آیکنها را در وسط هر مربع اضافه کرده وبرای هر آیکنdrop shadow اعمال کنید.
شما باید شکلی مانند نمونه داشته باشید:
اضافه کردن محتوا به مربع ها:
مستطیلی به کنار هر یک از مربع ها اضافه کرده ومتنهای زیر را تایپ کنید و هر مستطیل را مانند نمونه رنگ کنید:
اضافه کردن کدhtml و css :
قبل از اینکه شروع به کدنویسی کنید، همه لایه ها را مخفی کنید.
آیکنها را به یکدیگر بچسبانید.
باRectangular Marquee Tool مستطیلی دور همه آیکنها بکشید تا همه فاصله ها را از بین ببرید.
حال از منویedit>copy merged را انتخاب کرده،سپس از منوی file>new و سرانجام از منویedit> past را برگزینید.عکس را با پسوندpng داخل یک پوشه ذخیره کنید.
تنظیمات سندhtml:
یک سند html و cssایجاد کرده ودر پوشه ای که عکس را ذخیره کردید،اسناد را save کنید.
لینک زیر را در سند html وارد کنید:
<link rel="stylesheet" type="text/css" href="styles.css" />
 
حال باید کد منو را وارد کنیم. منو از یک لیست نامرتب تشکیل شده است.داخل این لیست تگ    
 وجود دارد که عناصر مخفی منو را نگه می دارد. هر تگ کلاسی دارد که شامل نام دکمه span
هاست.
<ul id="social-menu">
<!------ Twitter Button Starts ------>
<li>
<a class="twitter" href=http://www.Website1.com> <span>5628 Followers</span> </a>
</li>
<!------ Twitter Button Ends ------> 
 
 
<!------ Facebook Button Starts ------>    
<li>
<a class="facebook" href=http://www.WebSite2.com> <span>1500 Fans</span> </a>
</li>
<!------ Facebook Button Ends ------>    
 
 
<!------ Photoshop Plus Button Starts ------>   
<li>
<a class="ps" href=http://www.Website3.com> <span>120 Tutorials</span> </a>
</li>
<!------ Photoshop Plus Button Ends ------> 
 
 
<!------ RSS Button Starts ------>    
<li>
<a class="rss" href=http://www.Website4.com> <span>350 Subscribers</span> </a>
</li>
<!------ RSS Button Ends ------> 
</ul>
      شویدو کدهای زیر را وارد نمایید: cssسپس وارد
#social-menu li {
    list-style: none;
    margin-bottom:10px;
}
#social-menu a {
    background: url('icon-sprite.png') no-repeat;
    height: 39px;
    width: 38px;
    display: block;
    position: relative;
}
#social-menu span {
    width: 0;
    left: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -1px;
    white-space: nowrap;
    line-height: 39px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}
#social-menu a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}
های مناسب برای آیکنها: style
/* TWITTER BUTTON STYLES -------
------------------------------*/
#social-menu .twitter {
    background-position: left top;
}
#social-menu .twitter span {
    background-color: #00aced;
    color: #fff;
}
/* FACEBOOK BUTTON STYLES ------
------------------------------*/
#social-menu .facebook {
    background-position: left -39px;
}
#social-menu .facebook span {
    background-color: #325396;
    color: #fff;
}
/* PHOTOSHOP PLUS BUTTON STYLES 
------------------------------*/
#social-menu .ps {
    background-position: left -78px;
}
#social-menu .ps span {
    background-color: #1f75bf;
    color: #fff;
}
/* RSS BUTTON STYLES -----------
------------------------------*/
#social-menu .rss {
    background-position: left bottom;
}
#social-menu .rss span {
    background-color: #f5a33f;
    color: #fff;
}
فایل را ذخیره کرده و آن را بچرخانید.
 
 
 


  • میله | بند باز