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

3 دیدگاه

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>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</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);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

* {

-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);

}

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

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

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

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

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)

انتشار: ۱۹ شهریور ۱۳۹۳

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

محمد مهدی رفیعی
پاسخ

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

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

– ممنون
سارا
پاسخ

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

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط