Demo: http://ift.tt/2fDSgF2
Basically when the website scales I want all the content inside the body tag (border included) to scale similar to an svg file and stay in the center of the page no matter the resolution. Is there any way this is possible?
CSS:
/*
------------------------------------------------------------------------------------------------------------
| Written and designed by -redacted- for -redacted-, trying to be as low-impact and minimal as possible. |
| Some stuff WILL NOT work in older IE browsers - impossible to develop for anyway so it hardly matters. |
------------------------------------------------------------------------------------------------------------
*/
/* Makes the page wrap to the center to ensure the house style is kept to and content is actually viewable. */
#page-wrap {
width: 900px;
margin: 0 auto;
}
html {
background-color: white;
resize: both;
overflow: auto;
}
body {
position: absolute;
margin: 0;
top: 30%;
left: 25%;
right: 25%;
transform: translate(-50%, -50%)
border-color: white;
color: white;
font-family: Arial;
background-color:rgba(0, 0, 0, 0.5);
padding:3px 30px 30px 30px;
border-style: solid;
border-width: 2px;
text-align:center;
/* CSS for the fade-in effect */
opacity: 1;
transition: 1s opacity;
}
h1 {
margin-top: 20px;
margin-bottom: 5px;
font-family: Porter Bold;
font-size: 75px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dce3ef;
}
li {
width: 105%;
align-content: center
}
li a {
color: black;
font-family: Porter Bold;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 23.8%;
float: left;
}
/*
All of the a:hover CSS is cool webkit stuff for making glowing edges around things
I've implemented it for glowing fancy looking hyperlinks.
*/
li a:hover {
background-color: #8b8f96;
text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;
-webkit-transition: text-shadow 250ms linear 0s;
-moz-transition: text-shadow 250ms linear 0s;
-o-transition: text-shadow 250ms linear 0s;
transition: text-shadow 250ms linear 0s;
}
h3 a:hover {
color:darkorange;
text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;
-webkit-transition: text-shadow 250ms linear 0s;
-moz-transition: text-shadow 250ms linear 0s;
-o-transition: text-shadow 250ms linear 0s;
transition: text-shadow 250ms linear 0s;
}
footer a:link {
color: orange;
}
footer a:hover {
color:darkorange;
text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;
-webkit-transition: text-shadow 250ms linear 0s;
-moz-transition: text-shadow 250ms linear 0s;
-o-transition: text-shadow 250ms linear 0s;
transition: text-shadow 250ms linear 0s;
}
footer {
margin-top: 20px;
text-align: center;
font-size: 14px
}
/*
CSS3 Fade-in text because I'm too lazy to implement jQuery,
and it's more lightweight and multifuctional than any jQuery solution anyway.
*/
/* ----------------------------------------------------- Beginning of Fade-in ----------------------------------------------------- */
.fadeintext {
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ----------------------------------------------------- End of Fade-in ----------------------------------------------------- */
/* Fullscreen non-interactable YouTube CSS to create the video background for the site. */
/* ----------------------------------------------------- Beginning of YouTube CSS ----------------------------------------------------- */
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
/* ----------------------------------------------------- End of YouTube CSS ----------------------------------------------------- */
/* Importing Font .ttf files to be used in the site (used for h1 and h3). */
@font-face {
font-family:"Porter Bold";
src: url("Porter Bold.ttf");
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ift.tt/nYkKzf">
<html>
<div id="page-wrap">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title> -redacted- - Basic Website</title>
</head>
<body>
<div class="fadeintext">
<h1 align=center>Basic Website</h1>
<h3 align=center><em><strong>Hello world!</strong></em> This webpage is an ongoing project which is part of <a href=""><font color="orange">-redacted-</font></a>.</h3>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="fadeintext" align=center>
<p><strong>This is a test for the YouTube background pure CSS method I've been developing.</strong></p>
<p>If it works, a video should be playing in the background of this webpage, the video itself is also forced to be played at 1080p.</p>
<p>Please keep in the mind that the video background is a direct stream from YouTube, so codec issues and corruption is nothing to do with the code. Refresh the page if quality does not improve.</p>
</div>
<footer align=center>
<p align=center>-----------------------------------------------------------------------------------------</p>
<em>This website was made by <a href="" target="_top">-redacted-</a> for -redacted-.</em>
</div>
<!-- This HTML code creates the video background from a YouTube Livestream, and the script inside mutes the audio of the livestream when the page is loaded.-->
<div class="video-background">
<div class="video-foreground">
<iframe id="player" src="https://www.youtube.com/embed/UGPuEDyAsU8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&enablejsapi=1&=HD1080" frameborder="0" allowfullscreen></iframe>
<script>
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
playerVars: {
autoplay: 1,
loop: 1,
controls: 0,
showinfo: 0,
autohide: 1,
modestbranding: 1,
vq: 'hd1080'},
videoId: 'UGPuEDyAsU8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
}
var done = false;
function onPlayerStateChange(event) {
}
function stopVideo() {
player.stopVideo();
}
</script>
</div>
</div>
</footer>
</body>
</html>
</div>
Aucun commentaire:
Enregistrer un commentaire