Permalink
Browse files

First Commit

  • Loading branch information...
harryatkins committed Oct 6, 2012
1 parent 0352451 commit 3654a017b897f140455694d58806aad47b162f68
View
BIN .DS_Store
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,9 @@
+@media screen and (max-width: 480px) {
+
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ width: auto\9; /* ie8 */
+}
View
@@ -0,0 +1,26 @@
+a, abbr, acronym, address, applet, article, aside, audio,
+b, blockquote, big, body,
+center, canvas, caption, cite, code, command,
+datalist, dd, del, details, dfn, dl, div, dt,
+em, embed,
+fieldset, figcaption, figure, font, footer, form,
+h1, h2, h3, h4, h5, h6, header, hgroup, html,
+i, iframe, img, ins,
+kbd,
+keygen,
+label, legend, li,
+meter,
+nav,
+object, ol, output,
+p, pre, progress,
+q,
+s, samp, section, small, span, source, strike, strong, sub, sup,
+table, tbody, tfoot, thead, th, tr, tdvideo, tt,
+u, ul,
+var{
+ background: transparent;
+ border: 0 none;
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: baseline; }
View
@@ -0,0 +1,50 @@
+body {
+ background: #EDEFF4;
+ font-family: 'Anton', sans-serif;
+ text-shadow: 0 1px #fff;
+}
+
+#wrapper {
+ margin: 30px auto;
+ width: 600px;
+}
+
+.photo {
+ margin: 30px auto;
+ display: block;
+ height: 401px;
+ width: 602px;
+ -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
+ -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
+ -o-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
+ position: relative;
+}
+
+.photo img {
+ border: 1px solid rgba(255, 255, 255, .1);
+}
+
+.photo:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
+ background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+ background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
+}
+
+h1 {
+ font-weight: 700;
+ font-size: 50px;
+ text-align: center;
+}
+
+h2 {
+ font-weight: 400;
+ font-size: 25px;
+ text-align: center;
+}
View
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Glossy Gradient Effect</title>
+ <link rel="stylesheet" type="text/css" href="css/reset.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
+
+ <!--[if IE]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+</head>
+
+<body>
+ <div id="wrapper">
+
+ <h1>Glossy Photo Effect</h1>
+ <h2>Achieved with CSS3 Gradients</h2>
+ <div class="photo">
+ <img src="images/bag.jpg" alt="Bag">
+ </div>
+
+ </div> <!-- END Wrapper -->
+</body>
+</html>

0 comments on commit 3654a01

Please sign in to comment.