How to Create an Impressive Product Showcase with CSS3
Click on the image to see the tutorial.
Having a good product page is very vital in promoting your page especially if it’s more on the business side. The site should be descriptive of what your product is all about to help build your visitors’ interest. That’s the challenging part of it – how you can make a site which can grab AND keep the attention of your visitors. So here’s an awesome creation by Martin Angelov which uses advanced CSS3 presentations.
HTML
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress">
<!-- The Slides Will Go Here -->
</div>
<a id="arrowLeft"><</a>
<a id="arrowRight">></a>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/impress.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Impress.js
Markup for the slides
<!-- The first slide retains its default position. We could omit the data attributes --> <div id="intro" data-x="0" data-y="0"> <h2>Introducing Galaxy Nexus</h2> <p>Android 4.0<br /> Super Amoled 720p Screen<br /> <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" /> </div> <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger --> <div id="simplicity" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190"> <h2>Simplicity in Android 4.0</h2> <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p> <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" /> </div> <!-- Same for the rest.. --> <div id="connect" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270"> <h2>Connect & Share</h2> <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p> <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" /> </div> <div id="upload" data-x="-200" data-y="1500" data-rotate="180"> <h2>Instant Upload</h2> <p>Your photos upload themselves with Instant Upload, which makes ..</p> <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" /> </div> <div id="music" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270"> <h2>Jam on with Google Music</h2> <p>Google Music makes discovery, purchase, and listening effortless and..</p> <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" /> </div>
CSS
Assets/css/style.css
/*---------------------------- Styling the presentation -----------------------------*/ #impress:not(.impress-not-supported) .step{ opacity:0.4; } #impress .step{ width:700px; height: 600px; position:relative; margin:0 auto; -moz-transition:1s opacity; -webkit-transition:1s opacity; transition:1s opacity; } #impress .step.active{ opacity:1; } #impress h2{ font: normal 44px/1.5 'PT Sans Narrow', sans-serif; color:#444648; position:absolute; z-index:10; } #impress p{ font: normal 18px/1.3 'Open Sans', sans-serif; color:#27333f; position:absolute; z-index:10; } #impress img{ position:absolute; z-index:1; }
Styling the individual slides
/*---------------------------- Slide 1 - Intro -----------------------------*/ #impress #intro{ width: 500px; } #intro h2{ text-align: center; width: 100%; } #intro p{ font-size: 22px; left: 290px; line-height: 1.6; top: 220px; white-space: nowrap; } #intro img{ top: 120px; }
Script.js
$(function(){ var imp = impress(); $('#arrowLeft').click(function(e){ imp.prev(); e.preventDefault(); }); $('#arrowRight').click(function(e){ imp.next(); e.preventDefault(); }); });
Check out how it functions in the DEMO, then DOWNLOAD the file.
Incoming search terms for the article:
- css3 product showcase
- product showcase
- cssbox googlecode com/svn/demo/ProductColorizer/index html
- css3-product-showcase
- How to make a CSS showcase
- data-rotate css3
- css3 showcase
- showcase nexus script
- how to create a product showcase for my website
- making an impressive product showcase with css3 indir
0
506
