» ایجاد اسلایدر سه بعدی زیبا + سورس کد

مجله آنلاین رضا گرافیک در سـتاد سـاماندهی اینترنتی ایران ثبت گردیده اسـت و تابع قوانین جمـهوری اسـلامی ایران می باشـد [ اطلاعات بیشـتر ]

وب سایت شخصی مدیر رضا گرافیک

Reza Ranjbar Jelodar

Designer & Developer

Industrial Design/Art Uni of Tehran
See my personal site >
فروشگاه رضاگرافیک
آدوس

ایجاد اسلایدر سه بعدی زیبا + سورس کد

نویسنده : رضا آموزش، دیگر، سورس کد 4 سال پیش 4,208 بازدید

ایجاد اسلایدر سه بعدی زیبا + سورس کد | رضاگرافیک

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


حالا کد هارو معرفی می کنم .

این کد در داخل یک فایل با فرمت [ .html ] قرار می گیرد .

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" media="screen" />
<link href="http://fonts.googleapis.com/css?family=Economica" rel="stylesheet" type="text/css" />
<!-- jQuery & Nivo Slider -->
<script src="js/jquery-1.6.3.min.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<!-- Nivo Slider controller -->
<script  src="js/slide-show.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<!--==============================header=================================-->
<header>
<h2>Stack Image Nivo Slider - jQuery Image Slider</h2>
</header>
<!--==============================content ================================-->
<!-- Start Wrap -->
<div id="wrap">
<!-- Start Framebackground -->
<div>
<!-- Start Third overlap border -->
<div>
<!-- Start Two overlap border -->
<div>
<!-- Start One overlap border -->
<div>
<!-- Slider -->
<section>
<div id="slider">
<img src="images/img1.png" alt="Car" />
<img src="images/img2.png" alt="Rabit" />
<img src="images/img3.png" alt="Cat" />
<img src="images/img4.png" alt="Leopard" />
<img src="images/img5.png" alt="Butterfly" />
<img src="images/img6.png" alt="Sealion" />
</div>
</section>
<!-- End Slider -->
</div>
<!-- End One overlap border -->
</div>
<!-- End Two overlap border -->
</div>
<!-- End Third overlap border -->
</div>
<!-- End Framebackground-->
</div>
<!-- End Wrap -->

</body>
</html>

این کد در داخل یک فایل با فرمت [ .css ] قرار می گیرد .

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video
{
display: block;
}
mark, rp, rt, ruby, summary, time
{
display: inline;
}
html
{
width: 100%;
}
body
{
background: url(../images/background.png);
color: #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
min-width: 980px;
text-shadow: 0 1px 0 #FFF;
}
h2
{
color: #666;
font-family: 'Economica', cursive;
font-size: 48px;
margin: 0 0px 0.2em;
padding: 0px;
}
header
{
background-color: #d2e9fa;
border-bottom: solid 1px #ccc;
text-align: center;
}
#wrap
{
border-top: solid 1px #fff;
margin-bottom: 90px;
padding-top: 35px;
}
.overlap-third
{
background-color: #ffffff;
border: 1px solid #d2d2d2;
margin: 0px auto;
position: relative;
text-align: left;
top: -2px;
width: 512px;
z-index: 10;
}
.frame-background
{
background: url(../images/frame-bg.png) no-repeat;
height: 393px;
margin: 0px auto;
width: 550px;
}
.overlap-two
{
background-color: #ffffff;
border: 1px solid #d2d2d2;
left: -4px;
position: relative;
text-align: left;
top: -1px;
width: 518px;
z-index: 10;
}
.overlap-one
{
background-color: #ffffff;
border: 1px solid #d2d2d2;
height: 251px;
left: -5px;
padding: 2px;
position: relative;
text-align: left;
top: -1px;
width: 523px;
z-index: 10;
}
#container
{
background-color: #ffffff;
border: 1px solid #d2d2d2;
margin: 0px auto;
padding: 15px;
text-align: left;
width: 610px;
}
footer
{
padding: 25px 0 46px;
width: 100%;
}
.nivo-controlNav
{
bottom: -30px;
left: 220px;
position: absolute;
}
.nivo-controlNav a
{
background: #b5b5b5;
border-radius: 10px;
box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
display: block;
float: left;
height: 10px;
margin-right: 5px;
moz-border-radius: 10px;
moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
text-indent: -9999px;
webkit-border-radius: 10px;
webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
width: 10px;
}
.nivo-controlNav a.active,
.nivo-caption span
{
background: #4d8da7;
background: linear-gradient(top, #4a87a1 0%,#5295b1 100%);
background: -moz-linear-gradient(top, #4a87a1 0%, #5295b1 100%);
background: -ms-linear-gradient(top, #4a87a1 0%,#5295b1 100%);
background: -o-linear-gradient(top, #4a87a1 0%,#5295b1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a87a1), color-stop(100%,#5295b1));
background: -webkit-linear-gradient(top, #4a87a1 0%,#5295b1 100%);
box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

لازم نیست که این کد ها رو قرار دهید فقط جهت آشنایی بود سورس کامل در این پست کاملا همراه با فونت ، عکس ، کد ضمیمه شده است خیلی زیبا و شیک است / + پیش نمایش این اسلایدر



اشتراک گذاری :
برچسب ها : ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ،
بخش نظرات
توجه فرمایید :
نظراتی که با نام لاتین نوشته شده و یا با نام تجاری یا نام سایت هستند تایید و بررسی نخواهند شد، لطفا رعایت فرمایید.
    یونس گفته : چهارشنبه ۰۵ تیر ۱۳۹۲

    دوباره سلام . فایل DS_Store که در دانلود بالا قرار دارد، را باید چه کرد؟ ممنون دوباره ممنون

      رضا [ مدیر سایت ] گفته : پنج شنبه ۰۶ تیر ۱۳۹۲

      هیچی ! به عنوان فشرده افتاده بیخیال اون .

    یو پی اس گفته : پنج شنبه ۱۰ مرداد ۱۳۹۲

    با سلام
    ممنون عالی بود

      رضا [ مدیر سایت ] گفته : جمعه ۱۱ مرداد ۱۳۹۲

      ممنون

    ترازو گفته : شنبه ۰۶ مهر ۱۳۹۲

    سلام
    خسته نباشید
    ممنون سایت خوبی دارید.

      رضا [ مدیر سایت ] گفته : شنبه ۰۶ مهر ۱۳۹۲

      خواهش میکنم !

    علی گفته : چهارشنبه ۰۶ آذر ۱۳۹۲

    دست گلتون درد نکنه.خیلی قشنگه
    یه درخواست داشتم توی بخش” تماس با ما” براتون فرستادم.بررسی کنید

      رضا [ مدیر سایت ] گفته : چهارشنبه ۰۶ آذر ۱۳۹۲

      ممنون

    ahmad گفته : سه شنبه ۰۸ بهمن ۱۳۹۲

    سلام دوست عزیز چطور میشه تو سایت قرارش داد؟
    من برای ماژول اچ تی ام ال میخوامش مشه بگی باید چیکار بکنم؟

      رضا [ مدیر سایت ] گفته : سه شنبه ۰۸ بهمن ۱۳۹۲

      سلام دوست عزیز سورسشو قرار دادیم

    پژمان گفته : پنج شنبه ۲۴ مهر ۱۳۹۳

    چطوری باید ازش استفاده کرد؟

      رضا [ مدیر سایت ] گفته : جمعه ۲۵ مهر ۱۳۹۳

      سلام باید کد نویسی بلد باشید

    علیرضا گفته : یکشنبه ۲۵ آبان ۱۳۹۳

    ممنون . . .

    مبین گفته : دوشنبه ۱۵ دی ۱۳۹۳

    سلام
    سایت خوبی داید
    ولی نام فایل سی اس اس باید چی باشه؟؟؟

      رضا [ مدیر سایت ] گفته : دوشنبه ۱۵ دی ۱۳۹۳

      سلام اون کد ها برای معرفی هست
      شما می توانید سورس را کامل دانلود نمایید .