CSS3

در ادامه مطالب سایت سورس باران در این پست قصد داریم آموزش طراحی منوی سه بعدی زیبا با CSS3 را به اشتراک بگذاریم. با مراجعه به ادامه مطلب میتونید از این کد برای طراحی منوی سه بعدی زیبا با CSS3 استفاده نمایید.

جهت مشاهده آموزش طراحی منوی سه بعدی زیبا با CSS3 به ادامه مطلب مراجعه نمایید.

ابتدا کدهای HTML :

<ul>
    <li>
        <a class='list-item' href=''>
            <i class='icon-reorder'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-th-large'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-bar-chart'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-tasks'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-bell'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-archive'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-comment'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-sitemap'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-thumbs-up'></i>
        </a>
    </li>
    <li>
        <a class='list-item' href=''>
            <i class='icon-tumblr'></i>
        </a>
    </li>
</ul>

 

و سپس کدهای CSS :

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
html {
    width: 100%;
    height: 100%;
}
 
body {
    width: 100%;
    height: 100%;
    display: box;
    box-align: center;
    box-pack: center;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}
 
.clearfix {
    zoom: 1;
}
.clearfix:before, .clearfix:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {
    clear: both;
}
 
body {
    background: #f2f2f2;
}
 
ul {
    list-style: none;
    margin-left: 500px;
    position: relative;
    -moz-transform: rotate(-35deg) skew(20deg, 5deg);
    -ms-transform: rotate(-35deg) skew(20deg, 5deg);
    -webkit-transform: rotate(-35deg) skew(20deg, 5deg);
    transform: rotate(-35deg) skew(20deg, 5deg);
}
 
.list-item {
    background: #000000;
    color: #575757;
    text-align: center;
    height: 2.5em;
    width: 4em;
    vertical-align: middle;
    line-height: 2.5em;
    border-bottom: 1px solid #060606;
    position: relative;
    display: block;
    text-decoration: none;
    -moz-box-shadow: -2em 1.5em 0 #e1e1e1;
    -webkit-box-shadow: -2em 1.5em 0 #e1e1e1;
    box-shadow: -2em 1.5em 0 #e1e1e1;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.list-item:hover {
    background: #ff6e42;
    color: #fffcfb;
    -moz-transform: translate(0.9em, -0.9em);
    -ms-transform: translate(0.9em, -0.9em);
    -webkit-transform: translate(0.9em, -0.9em);
    transform: translate(0.9em, -0.9em);
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
    -moz-box-shadow: -2em 2em 0 #e1e1e1;
    -webkit-box-shadow: -2em 2em 0 #e1e1e1;
    box-shadow: -2em 2em 0 #e1e1e1;
}
.list-item:hover:before, .list-item:hover:after {
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.list-item:hover:before {
    background: #b65234;
    width: 1em;
    top: 0.5em;
    left: -1em;
}
.list-item:hover:after {
    background: #b65234;
    width: 1em;
    bottom: -2.5em;
    left: 1em;
    height: 4em;
}
.list-item:before, .list-item:after {
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.list-item:after {
    content: "";
    position: absolute;
    height: 4em;
    background: #181818;
    width: 0.5em;
    bottom: -2.25em;
    left: 1.5em;
    -moz-transform: rotate(90deg) skew(0deg, 45deg);
    -ms-transform: rotate(90deg) skew(0deg, 45deg);
    -webkit-transform: rotate(90deg) skew(0deg, 45deg);
    transform: rotate(90deg) skew(0deg, 45deg);
}
.list-item:before {
    content: "";
    position: absolute;
    height: 2.5em;
    background: #121212;
    width: 0.5em;
    top: 0.25em;
    left: -0.5em;
    -moz-transform: skewY(-45deg);
    -ms-transform: skewY(-45deg);
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg);
}

برای تازه شدن دیر نیست.

موفق و پیروز باشید

به این مطلب امتیاز دهید post

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار
  • انتشار: ۱۹ شهریور ۱۳۹۳

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. محمد مهدی رفیعی
    14 بهمن 1394

    سلام
    من کدها رو امتحان کردم, جالب بود,

    لطف کنید این مطلب را فیلمشو تهیه کنید و داخله فیلم دقیقا کارهای انجام شده با این کدها رو توضیح بدید و کارهای دیگه ای هم با منو خودتون انجام بدید تا ما بتونیم طراحی منو سه بعدی بهتر یاد بگیریم .

    – ممنون

  2. با سلام
    من یک ساله که فارغ تحصیل رشته نرم افزار شدم به برنامه نویسی هم خیلی علاقه دارم اما از وقتی که پروژمو دفاع کردم دچار ی ترس و استرس شدم(اصلا استاد پروژمون نمی گفت باید چیکار کنیم و تقریبا چیزی یاد نگرفتم) الان می خوام شما کمکم کنید به نظر شما من با این همه زهنیت بد میتونم برنامه نویسی کنم؟چه راهکاری و به من پیشنهاد می کنید؟
    با سپاس

    • صابر بوستانی
      20 شهریور 1393

      سلام. جای نگرانی نیست.
      میتونید کار کنید،مطمئن باشید.

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.