Dentasarım
Popüler tasarımlar

DENTASARIM | Tasarımın bizden!

Hareketli intro kodu

Hareketli intro kodu


CSS KODU:

body {
margin: 0;
padding: 0;
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */
background: url(http://mattgrossdesign.com/raw-media/first-frame-screencap.jpg) #333;
background-attachment: fixed;
background-size: cover;
}

#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}

article {
/* just a fancy border */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
margin: 10px;
}

h1 {
position: absolute;
top: 60%;
width: 100%;
font-size: 36px;
letter-spacing: 3px;
color: #fff;
font-family: Oswald, sans-serif;
text-align: center;
}

 

HTML KODU:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<article>
<!-- Content -->
<h1>GROSS DESIGN co.</h1>
</article>

<!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback -->
<video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted>
<source src="http://mattgrossdesign.com/raw-media/wood+autumn-HD.mp4" type="video/mp4">
</video>

<!-- Video by Phil Fried (http://vimeo.com/philfried) -->

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol