Sliding Image Panels With CSS3

7/2/2015
SlidingImagePanelswithCSS3
Codrops
InTutorialsbyMaryLou January17,2012 69Comments
Todaywe'llshowyouhowtocreatesomeneatslidingimagepanelswithCSSonly.The
ideaistousebackgroundimagesforthepanelsandanimatethemwhenclickingona
label.We'lluseradiobuttonswithlabelsandtargettherespectivepanelswiththegeneral
siblingselector.
http://tympanus.net/codrops/2012/01/17/slidingimagepanelswithcss3/
1/21
7/2/2015
TodaywellshowyouhowtocreatesomeneatslidingimagepanelswithCSSonly.Theideaisto
usebackgroundimagesforthepanelsandanimatethemwhenclickingonalabel.Welluseradio
buttonswithlabelsandtargettherespectivepanelswiththegeneralsiblingselector.
ThebeautifulimagesarebyJoannaKustraandtheyarelicensedundertheAttribution
NonCommercial3.0UnportedCreativeCommonsLicense.
YoumightaswellbeinterestedinFilterFunctionalitywithCSS3wherewehaveusedasimilar
techniqueforfilteringelementsbasedontheirtype.
2/21
7/2/2015
Pleasenote:theresultofthistutorialwillonlyworkasintendedinbrowsersthatsupport
CSStransitionsandanimations.
TheMarkup
TheHTMLwillconsistofthreemajorparts:theradiobuttonsandthelabels,thecontainerwiththe
panelsandtheirslicesforeachimage,andthetitles.Thecontainerwiththeclasscrbgimgpart
willhaveadivisionforeachofthepanelsandinsidewellplacespansforeveryimagewiththe
rightbackgroundposition.So,thefirstpanelwillhavefourslices,eachhavingtheoneofthe
imagesasbackgroundwiththeleftmostposition.Thesecondpanelwillhaveagainfourslicesbut
nowthebackgroundpositionwillbemovedtobeshowingthenextpartoftherespectiveimage:
<sectionclass="crcontainer">
<!radiobuttonsandlabels>
<inputid="selectimg1"name="radioset1"type="radio"class="crselectorimg1"checked
<labelfor="selectimg1"class="crlabelimg1">1</label>
<inputid="selectimg2"name="radioset1"type="radio"class="crselectorimg2"/>
3/21
7/2/2015
<divclass="clr"></div>
<!panels>
<divclass="crbgimg">
<div>
<span>Slice1Image1</span>
</div>
<div>
</div>
<div>
</div>
<div>
4/21
7/2/2015
</div>
</div>
<!titles>
<divclass="crtitles">
<h3>
<span>Serendipity</span>
<span>Whatyou'vebeendreamingof</span>
</h3>
<h3>
<span>Adventure</span>
<span>Wherethefunbegins</span>
</h3>
<h3>
<span>Nature</span>
<span>Unforgettableeperiences</span>
</h3>
<h3>
<span>Serenity</span>
<span>Whensilencetouchesnature</span>
</h3>
</div>
</section>
5/21
7/2/2015
Theh3elementsforthetitleswillhavetwospans,oneforthemainheadlineandoneforthesub
headline.
Letsstylethisbaby.
TheCSS
Iwillomitallthevendorprefixes,butyouwill,ofcourse,findtheminthefiles.
Wellbegoingthroughthestyleofdemo1.
Ouraimistofirsthidethoseradiobuttonsbycoveringthemupwithlabels.Inwebbrowsers,
clickingonalabelwillmaketherespectivecheckboxorradiobuttonselected.GivinganIDtothe
input,wecanusethefor=idrefattributeofthelabeltoreferencetherespectiveinput.
Second,wewanttoplaceallthebackgroundimagescorrectlyandthird,wewanttoshowthe
respectiveimageslicesandtitleswhenclickingonalabel.
So,letsfirstsylethesectionandgiveitawhiteborderwithsomesubtleboxboxshadow:
6/21
7/2/2015
.crcontainer{
width:600px;
height:400px;
position:relative;
margin:0auto;
border:20pxsolid#fff;
boxshadow:1px1px3pxrgba(0,0,0,0.1);
}
Sincewewanttousethegeneralsiblingselectorinordertoreachtherightimageslicesand
titles,weneedtoplacethelabelsbeforethosecontainers.Letsmakesurethattheyareontopas
alayer(zindex)andpushitspositiondownbyaddingatopmarginof350px
7/21
7/2/2015
.crcontainerlabel{
fontstyle:italic;
width:150px;
height:30px;
cursor:pointer;
color:#fff;
lineheight:32px;
fontsize:24px;
float:left;
position:relative;
margintop:350px;
zindex:1000;
}
Letsprettifythelabelbyaddingalittlecircle.Wellcreateapseudoelementandplaceitcentered
behindthelabeltext:
8/21
7/2/2015
.crcontainerlabel:before{
content:'';
width:34px;
height:34px;
background:rgba(130,195,217,0.9);
position:absolute;
left:50%;
marginleft:17px;
borderradius:50%;
boxshadow:0px0px0px4pxrgba(255,255,255,0.3);
zindex:1;
}
Inordertocreateaseparationbetweenthepanelswellusealittletrick.Wellcreateanother
pseudoelementforthelabelandextendittostretchoverthepanel.Usingagradient,wellmake
thelinefadeoutatthetop:
9/21
7/2/2015
.crcontainerlabel:after{
width:1px;
height:400px;
content:'';
background:lineargradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,1)100%);
position:absolute;
bottom:20px;
right:0px;
}
Thelastpanelshouldnothavethatlinesowesimplygiveit0width:
.crcontainerlabel.crlabelimg4:after{
width:0px;
}
Now,thatwevetakencareofthelabellook,wecanhidetheinputs:
.crcontainerinput{
display:none;
}
Wheneverweclickonalabel,therespectiveinputgetschecked.Nowwecantargetthe
10/21
7/2/2015
respectivelabelusingthegeneralsiblingselector.So,wewillchangethecolortheselected
label:
.crcontainerinput.crselectorimg1:checked~label.crlabelimg1,
.crcontainerinput.crselectorimg4:checked~label.crlabelimg4{
color:#68abc2;
}
Andwellalsochangethebackgroundcolorandboxshadowofitsciclepseudoelement:
.crcontainerinput.crselectorimg1:checked~label.crlabelimg1:before,
.crcontainerinput.crselectorimg4:checked~label.crlabelimg4:before{
background:#fff;
boxshadow:0px0px0px4pxrgba(104,171,194,0.6);
}
Thecontainerfortheimagepanelswilloccupyallthewidthanditwillbepositionedabsolutely.
Thiscontainerwillbeusedlaterinordertosetthebackgroundimagetothecurrentlyselected
image.Weneedtodothisinordertohaveanimagevisiblebydefault.Sowellalsoaddsome
backgroundpropertiesalready:
11/21
7/2/2015
.crbgimg{
width:600px;
height:400px;
position:absolute;
left:0px;
top:0px;
zindex:1;
backgroundrepeat:norepeat;
backgroundposition:00;
}
Sincewehavefourpanels/images,onepanelwillhavethewidthof150pixels(600dividedby4).
Thepanelswillbefloatingleftandwellhidetheiroverflowsincewedontwanttoseetheslices
comingoutwhenweslidethem:
.crbgimgdiv{
width:150px;
height:100%;
position:relative;
float:left;
overflow:hidden;
backgroundrepeat:norepeat;
}
Eachslicespanwillbepositionedabsolutelyandinitially,theywillbehiddenbyplacingthemout
12/21
7/2/2015
ofthepanelwithaleftof150px:
.crbgimgdivspan{
position:absolute;
width:100%;
height:100%;
top:0px;
left:150px;
zindex:2;
textindent:9000px;
}
Now,letstakecareofthebackgroundoftheimagecontainerandtherespectiveimageslices:
13/21
7/2/2015
.crcontainerinput.crselectorimg1:checked~.crbgimg,
.crbgimgdivspan:nthchild(1){
backgroundimage:url(../images/1.jpg);
}
}
}
}
Wealsoneedtogivetherightbackgroundpositiontotheslicesdependingonthepanel:
14/21
7/2/2015
.crbgimgdiv:nthchild(1)span{
backgroundposition:0px0px;
}
}
}
}
Whenweclickonalabelwewillsimplyslidealltheslicesouttotheright:
15/21
7/2/2015
.crcontainerinput:checked~.crbgimgdivspan{
animation:slideOut0.6seaseinout;
}
@keyframesslideOut{
0%{
left:0px;
}
100%{
left:150px;
}
}
allexceptthesliceswiththerespectivebackgroundimage.Thosewillslideinfrom150pxto
0px:
.crcontainerinput.crselectorimg1:checked~.crbgimgdivspan:nthchild(1),
.crcontainerinput.crselectorimg4:checked~.crbgimgdivspan:nthchild(4)
{
transition:left0.5seaseinout;
animation:none;
left:0px;
zindex:10;
}
16/21
7/2/2015
Last,butnotleast,wewanttostyletheh3titleelementsandtheirspans.Theh3willhavea
opacitytransitionandonceweselecttherespectivelabel/inputtheopacitywillincreasefrom0to
1:
.crtitlesh3{
position:absolute;
width:100%;
textalign:center;
top:50%;
zindex:10000;
opacity:0;
color:#fff;
textshadow:1px1px1pxrgba(0,0,0,0.1);
transition:opacity0.8seaseinout;
}
.crtitlesh3span:nthchild(1){
fontfamily:'BebasNeueRegular','ArialNarrow',Arial,sansserif;
fontsize:70px;
display:block;
letterspacing:7px;
}
.crtitlesh3span:nthchild(2){
letterspacing:0px;
display:block;
background:rgba(104,171,194,0.9);
fontsize:14px;
padding:10px;
17/21
7/2/2015
padding:10px;
fontstyle:italic;
fontfamily:Cambria,Palatino,"PalatinoLinotype","PalatinoLTSTD",Georgia,serif;
}
.crcontainerinput.crselectorimg1:checked~.crtitlesh3:nthchild(1),
.crcontainerinput.crselectorimg4:checked~.crtitlesh3:nthchild(4){
opacity:1;
}
Ifyoudontwanttousethelabeltrickonmobiledevicesyoucould,forexample,useamedia
query:
@mediascreenand(maxwidth:768px){
.crcontainerinput{
display:inline;
width:24%;
margintop:350px;
zindex:1000;
position:relative;
}
.crcontainerlabel{
display:none;
}
}
18/21
7/2/2015
Thisisjustaquicksolutionanditmightbebettertocheck,ifthelabeltrickissupported.
Andthatsit!Therearemanypossibilitiesofanimationsthatcanbedonehere.Checkoutthe
demostoseemore.
Demos
1. Demo1:Slidetoright
2. Demo2:Odd/evenslidetoleft/right
3. Demo3:Odd/evenslideup/down
4. Demo4:Scaleup/down
Andthatsit!Ihopeyouenjoyedthistutorialandfinditinspiring!
RelatedArticles
19/21

Sliding Image Panels With CSS3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Sliding Image Panels With CSS3

Diunggah oleh

Hak Cipta:

Format Tersedia

7/2/2015

InTutorialsbyMaryLou January17,2012 69Comments

Anda mungkin juga menyukai