در ادامه مطالب سایت سورس باران در این پست قصد داریم آموزش طراحی منوی سه بعدی زیبا با 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); }
برای تازه شدن دیر نیست.
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار
- انتشار: ۱۹ شهریور ۱۳۹۳
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام
من کدها رو امتحان کردم, جالب بود,
لطف کنید این مطلب را فیلمشو تهیه کنید و داخله فیلم دقیقا کارهای انجام شده با این کدها رو توضیح بدید و کارهای دیگه ای هم با منو خودتون انجام بدید تا ما بتونیم طراحی منو سه بعدی بهتر یاد بگیریم .
– ممنون
با سلام
من یک ساله که فارغ تحصیل رشته نرم افزار شدم به برنامه نویسی هم خیلی علاقه دارم اما از وقتی که پروژمو دفاع کردم دچار ی ترس و استرس شدم(اصلا استاد پروژمون نمی گفت باید چیکار کنیم و تقریبا چیزی یاد نگرفتم) الان می خوام شما کمکم کنید به نظر شما من با این همه زهنیت بد میتونم برنامه نویسی کنم؟چه راهکاری و به من پیشنهاد می کنید؟
با سپاس
سلام. جای نگرانی نیست.
میتونید کار کنید،مطمئن باشید.