Skip to content

Instantly share code, notes, and snippets.

@polatengin
Created November 4, 2016 21:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save polatengin/b2765dfafc82678e23114f3cf2680668 to your computer and use it in GitHub Desktop.
Save polatengin/b2765dfafc82678e23114f3cf2680668 to your computer and use it in GitHub Desktop.
HTML5 video element CSS3 ile efekt uygulamak
<!doctype html>
<html lang="tr">
<head>
<title>Video efektleri</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.brightness {
-webkit-filter: brightness(5);
-moz-filter: brightness(5);
-o-filter: brightness(5);
-ms-filter: brightness(5);
filter: brightness(5);
}
.contrast {
-webkit-filter: contrast(8);
-moz-filter: contrast(8);
-o-filter: contrast(8);
-ms-filter: contrast(8);
filter: contrast(8);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.saturate {
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
-o-filter: saturate(10);
-ms-filter: saturate(10);
filter: saturate(10);
}
.grayscale {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
-ms-filter: sepia(1);
filter: sepia(1);
}
.invert {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
}
<video controls class="blur"></video>
<video controls>
<source src="http://www.enginpolat.com/wp-content/uploads/2016/03/HTML5VideoElement.mp4" type="video/mp4" />
<source src="http://www.enginpolat.com/wp-content/uploads/2016/03/HTML5VideoElement.webm" type="video/webm" />
<source src="http://www.enginpolat.com/wp-content/uploads/2016/03/HTML5VideoElement.ogg" type="video/ogg" />
</video>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment