HTML5 video element CSS3 ile efekt uygulamak

HTML5 ile gelen <video></video> elementine CSS3 ile stil uygulayarak efekt uygulayabiliyoruz. Örneğin, video element içerisinde oynayan videoyu siyah-beyaz yapmak, renk doygunluğu ile oynamak, flu hale getirmek, renkleri ters çevirmek, vs gibi efektler rahatlıkla programlanabiliyor.

Bu makalede yeni bir HTML5 sayfası oluşturarak, oynayan video’ya nasıl efekt verebileceğimizi göreceğiz.

Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Şimdi, <head></head> taglarının arasına yeni bir <style></style> element ekleyelim ve içerisine aşağıdaki stilleri yazalım;

Artık video elementine hangi efekti uygulamak istiyorsak, ilgili css class‘ını uygulamamız yeterli, örneğin;

blog comments powered by Disqus

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 484

Creative Commons Lisansı