» » » کد اسلایدر css برای وبلاگ و سایت ها

کد اسلایدر css برای وبلاگ و سایت ها

تاریخ : 1392.02.28
نویسنده : sepahna
نظرات : 0
بازدیدها : 3508
  • +4

کد اسلایدر برای وبلاگ

قبلا یک اسلایدر ساده برای دوستان قرار دادیم که از جی کوئری بهره میگرفت ، اکنون یک اسلایدر ساده دیگر که کاملا css میباشد را برای سپهنایی ها قرار میدهیم ، اسلایدر فوق بسیار شیک و جالب همراه افکت میباشد که تصاویر از راست به چپ به حرکت در می آیند . این شما و این هم کد اسلایدر کاملا css

 

جهت استفاده از اسلایدر css این کد در آخر استایل قالب خود اضافه بکنید. معمولا : style.css یا addional.css و امثال هم.

@font-face {    font-family: 'WebSymbolsRegular';    src: url('http://sepahna.ir/demo/code/slider-css1/websymbols-regular-webfont.eot');    src: url('http://sepahna.ir/demo/code/slider-css1/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://sepahna.ir/demo/code/slider-css1/websymbols-regular-webfont.eot') format('woff'), url('http://sepahna.ir/demo/code/slider-css1/websymbols-regular-webfont.ttf') format('truetype'), url('http://sepahna.ir/demo/code/slider-css1/websymbols-regular-webfont#WebSymbolsRegular') format('svg');}@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);* {    margin: 0;    padding: 0;}body {    background-image: url(http://subtlepatterns.com/patterns/dark_wall.png);    background-repeat: repeat;    height: 500px;    padding: 1px;}h1 { color: white }#slideshow-wrap {    display: block;    height: 320px;    min-width: 260px;    max-width: 640px;    margin: auto;    border: 12px rgba(255,255,240,1) solid;    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);    box-shadow: 0px 0px 5px rgba(0,0,0,.8);    margin-top: 20px;    position: relative;}#slideshow-inner {    width: 100%;    height: 100%;    background-color: rgb(0,0,0);    overflow: hidden;    position: relative;}#slideshow-inner>ul {    list-style: none;    height: 100%;    width: 500%;    overflow: hidden;    position: relative;    left: 0px;    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);}#slideshow-inner>ul>li {    width: 20%;    height: 320px;    float: left;    position: relative;}#slideshow-inner>ul>li>img {    margin: auto;    height: 100%;}#slideshow-wrap input[type=radio] {    position: absolute;    left: 50%;    bottom: 15px;    z-index: 100;    visibility: hidden;}#slideshow-wrap label:not(.arrows):not(.show-description-label) {    position: absolute;    left: 50%;    bottom: -45px;    z-index: 100;    width: 12px;    height: 12px;    background-color: rgba(200,200,200,1);    -webkit-border-radius: 50%;    -moz-border-radius: 50%;    border-radius: 50%;    cursor: pointer;    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);    box-shadow: 0px 0px 3px rgba(0,0,0,.8);    -webkit-transition: background-color .2s;    -moz-transition: background-color .2s;    -o-transition: background-color .2s;    transition: background-color .2s;}#slideshow-wrap label:not(.arrows):active { bottom: -46px }#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }#slideshow-wrap label[for=button-1] { margin-left: -36px }#slideshow-wrap label[for=button-2] { margin-left: -18px }#slideshow-wrap label[for=button-4] { margin-left: 18px }#slideshow-wrap label[for=button-5] { margin-left: 36px }#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }label.arrows {    font-family: 'WebSymbolsRegular';    font-size: 25px;    color: rgb(255,255,240);    position: absolute;    top: 50%;    margin-top: -25px;    display: none;    opacity: 0.7;    cursor: pointer;    z-index: 1000;    background-color: transparent;    -webkit-transition: opacity .2s;    -moz-transition: opacity .2s;    -o-transition: opacity .2s;    transition: opacity .2s;    text-shadow: 0px 0px 3px rgba(0,0,0,.8);}label.arrows:hover { opacity: 1 }label.arrows:active { margin-top: -23px }input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {    right: -55px;    display: block;}input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {    left: -55px;    display: block;    -webkit-transform: scaleX(-1);    -moz-transform: scaleX(-1);    -ms-transform: scaleX(-1);    -o-transform: scaleX(-1);    transform: scaleX(-1);}input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }.description {    position: absolute;    top: 0;    left: 0;    width: 260px;    font-family: 'Yanone Kaffeesatz';    z-index: 1000;}.description input { visibility: hidden }.description label {    font-family: 'WebSymbolsRegular';    background-color: rgba(255,255,240,1);    position: relative;    left: -17px;    top: 00px;    width: 40px;    height: 27px;    display: inline-block;    text-align: center;    padding-top: 7px;    border-bottom-right-radius: 15px;    cursor: pointer;    opacity: 0;    -webkit-transition: opacity .2s;    -moz-transition: opacity .2s;    -o-transition: opacity .2s;    transition: opacity .2s;    z-index: 5;    color: rgb(20,20,20);}#slideshow-inner>ul>li:hover .description label { opacity: 1 }.description input[type=checkbox]:checked~label { opacity: 1 }.description .description-text {    background-color: rgba(255,255,230,.5);    padding-left: 45px;    padding-top: 25px;    padding-right: 15px;    padding-bottom: 15px;    position: relative;    top: -35px;    z-index: 4;    opacity: 0;    -webkit-transition: opacity .2s;    -moz-transition: opacity .2s;    -o-transition: opacity .2s;    transition: opacity .2s;    color: rgb(20,20,20);}.description input[type=checkbox]:checked~.description-text { opacity: 1 }

جایی که میخواهید از اسلایدر استفاده کنید کد زیر را قرار دهید :

    <div id="slideshow-wrap">        <input type="radio" id="button-1" name="controls" checked="checked"/>        <label for="button-1"></label>        <input type="radio" id="button-2" name="controls"/>        <label for="button-2"></label>        <input type="radio" id="button-3" name="controls"/>        <label for="button-3"></label>        <input type="radio" id="button-4" name="controls"/>        <label for="button-4"></label>        <input type="radio" id="button-5" name="controls"/>        <label for="button-5"></label>        <label for="button-1" class="arrows" id="arrow-1">></label>        <label for="button-2" class="arrows" id="arrow-2">></label>        <label for="button-3" class="arrows" id="arrow-3">></label>        <label for="button-4" class="arrows" id="arrow-4">></label>        <label for="button-5" class="arrows" id="arrow-5">></label>        <div id="slideshow-inner">            <ul>                <li id="slide1">                    <img src="http://sepahna.ir/templates/neww6/images/myheader.png" />                    <div class="description">                        <input type="checkbox" id="show-description-1"/>                        <label for="show-description-1" class="show-description-label">I</label>                        <div class="description-text">                            <h2>text</h2>                            <p>text</p>                        </div>                    </div>                </li>                <li id="slide2">                    <img src="http://sepahna.ir/templates/neww6/images/myheader.png" />                    <div class="description">                        <input type="checkbox" id="show-description-2"/>                        <label for="show-description-2" class="show-description-label">I</label>                        <div class="description-text">                            <h2>text</h2>                            <p>text</p>                        </div>                    </div>                </li>                <li id="slide3">                    <img src="http://sepahna.ir/templates/neww6/images/myheader.png" />                    <div class="description">                        <input type="checkbox" id="show-description-3"/>                        <label for="show-description-3" class="show-description-label">I</label>                        <div class="description-text">                            <h2>sepahna</h2>                            <p>sepahna</p>                        </div>                    </div>                </li>                <li id="slide4">                    <img src="http://sepahna.ir/templates/neww6/images/myheader.png" />                    <div class="description">                        <input type="checkbox" id="show-description-4"/>                        <label for="show-description-4" class="show-description-label">I</label>                        <div class="description-text">                            <h2>sepahna sepahna</h2>                            <p>sepahna</p>                        </div>                    </div>                </li>                <li id="slide5">                    <img src="http://sepahna.ir/templates/neww6/images/myheader.png" />                    <div class="description">                        <input type="checkbox" id="show-description-5"/>                        <label for="show-description-5" class="show-description-label">I</label>                        <div class="description-text">                            <h2>Splash!</h2>                            <p>sepahna</p>                        </div>                    </div>                </li>            </ul>        </div>    </div>

دسته بندی :  وب / آموزش های وب

تبلیغات

نظر دهید :

نام شما : *
ایمیل شما :*
نظر شما :*

بالا