Luka Čavka Xavka
Xavka
/ gist:c4d730e4ac1c03c09fe7
Created
February 26, 2015 09:30
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="fullscreen-bg"> | |
| <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> | |
| <source src="video/big_buck_bunny.mp4" type="video/mp4"> | |
| <source src="video/big_buck_bunny.ogv" type="video/ogv"> | |
| <source src="video/big_buck_bunny.webm" type="video/webm"> | |
| </video> | |
| </div> |
Xavka
/ gist:0e45b716810c525614b1
Created
February 26, 2015 09:40
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (min-aspect-ratio: 16/9) { | |
| .fullscreen-bg__video { | |
| width: 100%; | |
| height: auto; | |
| } | |
| } | |
| @media (max-aspect-ratio: 16/9) { | |
| .fullscreen-bg__video { | |
| width: auto; | |
| height: 100%; |
Xavka
/ gist:de19a0ac50df651c8e4c
Created
February 26, 2015 09:42
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (min-aspect-ratio: 16/9) { | |
| .fullscreen-bg__video video { | |
| height: 300%; | |
| top: -100%; | |
| } | |
| } | |
| @media (max-aspect-ratio: 16/9) { | |
| .fullscreen-bg__video video { | |
| width: 300%; | |
| left: -100%; |
Xavka
/ gist:d389b0719d90f383b62a
Created
February 26, 2015 09:45
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (max-width: 767px) { | |
| .fullscreen-bg { | |
| background: url('../img/videoframe.jpg') center center / cover no-repeat; | |
| } | |
| .fullscreen-bg__video { | |
| display: none; | |
| } | |
| } |
Xavka
/ gist:d8019ed0f8d6970b001c
Created
February 26, 2015 09:45
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (max-width: 767px) { | |
| .fullscreen-bg { | |
| background: url('../img/videoframe.jpg') center center / cover no-repeat; | |
| } | |
| .fullscreen-bg__video { | |
| display: none; | |
| } | |
| } |
Xavka
/ gist:f2bee0463ce215ebbdc1
Created
February 26, 2015 09:45
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (max-width: 767px) { | |
| .fullscreen-bg { | |
| background: url('../img/videoframe.jpg') center center / cover no-repeat; | |
| } | |
| .fullscreen-bg__video { | |
| display: none; | |
| } | |
| } |
Xavka
/ gist:a0364210dd48b630d550
Created
February 26, 2015 09:46
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (max-width: 767px) { | |
| .fullscreen-bg { | |
| background: url('../img/videoframe.jpg') center center / cover no-repeat; | |
| } | |
| .fullscreen-bg__video { | |
| display: none; | |
| } | |
| } |
Xavka
/ gist:7d0c4b13b6dc4b442693
Created
May 22, 2015 08:18
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <picture> | |
| <source type="image/svg" src="logo.svg" /> | |
| <source type="image/png" src="logo.png" /> | |
| <img src="logo.gif" alt=“Image description" /> | |
| </picture> |
Xavka
/ gist:24ad898e948e5cb8e2c9
Created
May 22, 2015 08:20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <picture> | |
| <source media="(orientation: landscape)" srcset="landscape.jpg" /> | |
| <img src="portrait.jpg" alt="Image description." /> | |
| </picture> |
Xavka
/ gist:9fc8253c8a406fbf8b78
Created
May 22, 2015 08:20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <picture> | |
| <!-- 16:9 crop --> | |
| <source | |
| media="(min-width: 40em)" | |
| srcset=“images/wide/large.jpg 1920w, | |
| images/wide/medium.jpg 960w, | |
| images/wide/small.jpg 480w" /> | |
| sizes=“100vw" | |
| <!-- square crop --> |
OlderNewer