Image-shadow/index.html at master · tunguskha/Image-shadow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Simple and small Javascript plugin to display the shadow of the image!">
  <meta name="tungu.me">
  <title>Simple and small Javascript plugin to display the shadow of the image!</title>
  <style>
    /*DEMO CSS*/
    body{margin:0;line-height:1}img{max-width:100%;border-radius:8px;}.container{display:grid;padding:2em;grid-template-columns:1fr 1fr 1fr;grid-column-gap:50px;grid-row-gap:80px;max-width:1080px;margin:0 auto}h1{text-align:center;font-size:2em;font-family:system-ui,sans-serif;margin:1em;font-weight:700;color:#282828}h1 > span{color:#888;font-size:1rem; font-weight: normal;}video{max-width:400px;border-radius:8px}video::-webkit-media-controls-panel{border-radius:8px}.video{display:flex;justify-content:center}@media screen and (max-width:700px){.container{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr; margin-bottom:50px}video{max-width:100%}}
  </style>

</head>

<body>
  <a href="https://github.com/tunguskha/Image-shadow"><img style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

  <h1>Image Shadow !</h1>

  <div class="container">
    <div class="ishadow">
      <img data-blur="20" data-hover="true" srcset="assets/imgs/halt-and-catch-fire.jpg">
    </div>
    <div class="ishadow">
      <img data-blur="20" data-hover="true" src="assets/imgs/loaded.jpg">
    </div>
    <div class="ishadow">
      <img data-blur="20" data-hover="true" src="assets/imgs/silicon-valley.jpg">
    </div>
  </div>

  <h1>Video Shadow !</h1>

  <div class="container video">
    <div class="v-shadow">
    <video id="video" data-blur="20" controls>
    <source src="https:////upload.wikimedia.org/wikipedia/commons/transcoded/1/1c/Joy_%26_Heron_-_Animated_CGI_Spot_by_Passion_Pictures.webm/Joy_%26_Heron_-_Animated_CGI_Spot_by_Passion_Pictures.webm.720p.webm">
  </video>

    <div class="v-clone"></div>
  </div>
  </div>

  <script src="assets/js/image-video-shadow.min.js"></script>
  <script>document.getElementById("video").volume = .15;</script>
</body>

</html>