7,746
עריכות
שינויים
קפיצה לניווט
קפיצה לחיפוש
יצירת דף עם התוכן "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" con..."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanding Overlay Effect</title>
<meta name="description" content="Expanding Overlay Effect: Revealing content using CSS clip" />
<meta name="keywords" content="css, css3, clip, rect(), overlay, expand, fixed, effect, responsive" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/climacons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/3DGalleryRoom/"><strong>« Previous Demo: </strong>3D Image Gallery Room</a>
<span class="right"><a href="http://adamwhitcroft.com/climacons/font/">Icons by Adam Whitcroft</a><a href="http://tympanus.net/codrops/?p=13621"><strong>Back to the Codrops Article</strong></a></span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Expanding Overlay Effect<span>Revealing content using CSS clip</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
</nav>
</header>
<div class="main">
<ul id="rb-grid" class="rb-grid clearfix">
<li class="icon-clima-1 rb-span-2">
<h3>Lisbon</h3><span class="rb-temp">21°C</span>
<div class="rb-overlay">
<span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>18°C</span></div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/boxgrid.js"></script>
<script>
$(function() {
Boxgrid.init();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanding Overlay Effect</title>
<meta name="description" content="Expanding Overlay Effect: Revealing content using CSS clip" />
<meta name="keywords" content="css, css3, clip, rect(), overlay, expand, fixed, effect, responsive" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/climacons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/3DGalleryRoom/"><strong>« Previous Demo: </strong>3D Image Gallery Room</a>
<span class="right"><a href="http://adamwhitcroft.com/climacons/font/">Icons by Adam Whitcroft</a><a href="http://tympanus.net/codrops/?p=13621"><strong>Back to the Codrops Article</strong></a></span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Expanding Overlay Effect<span>Revealing content using CSS clip</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
</nav>
</header>
<div class="main">
<ul id="rb-grid" class="rb-grid clearfix">
<li class="icon-clima-1 rb-span-2">
<h3>Lisbon</h3><span class="rb-temp">21°C</span>
<div class="rb-overlay">
<span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>18°C</span></div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/boxgrid.js"></script>
<script>
$(function() {
Boxgrid.init();
});
</script>
</body>
</html>