Etiket: css

Kategoriler
CSS Genel HTML JS

IK Player

IK Player web üzerinde videolar oynatabilen bir javascript eklentisidir. Bu eklenti ile web sitenizde video oynatabilirsiniz.

Kurulum için https://github.com/ikweb/ikplayer sayfasından dosyaları indirin. Bir html sayfası oluşturun. ikplayer.js dosyasını çağırın. Bir id’ye html div etiketi oluşturun. Bu etiketi ikplayer() fonksiyonuna tanımlayın. Ardından setup() fonksiyonu ile parametreler tanımlayın.

[code]<script src=”ikplayer.js”></script> <div id=”ikplayer”></div> <script> ikplayer(‘ikplayer’).setup({ file: “file.mp4”, image: “image.jpg”, about: { text: “IK Player”, link: “https://ikplayer.ikweb.org” }, logo: { file: “logo.png”, link: “https://ikplayer.ikweb.org”, position: “top-right”, hide: false }, autoplay: true, controls: false, repeat: true, muted: true, starttime: 5, width: “100%”, height: “100%” }) </script>[/code]

Parametreler:
file: Oynatıcı video dosyası bağlantısı
image: Oynatıcı görüntü dosyası bağlantısı
width: Oynatıcı genişliği. Varsayılan: 100%
height: Oynatıcı genişliği. Varsayılan: 100%
autoplay: Oynatıcı çalıştığında video’yu otomatik oynatır. Varsayılan: false
controls: Oynatıcı cotrolleri aktif eder. Varsayılan: true
repeat: Oynatıcı video’yu sürekli tekrar ettirir. Varsayılan: false
muted: Oynatıcı video’nun sesini kapatır. Varsayılan: false
starttime: Oynatıcı videonun başlangıç süresini belirler. Varsayılan: 0
logo.file: Oynatıcı logo dosyası bağlantısı. Varsayılan: IK Player Logosu
logo.link: Oynatıcı logo link’i. Varsayılan: https://ikplayer.ikweb.org/1.0.9/ikplayer.html
logo.position: Oynatıcı logo konumunu belirler. Varsayılan: top-right
logo.hide: Oynatıcı logo gizliliğini belirler. Varsayılan: false
about.text: Oynatıcı hakkında metin tanımlar. Varsayılan: null
about.link: Oynatıcı hakkında link’i tanımlar. Varsayılan: https://ikplayer.ikweb.org

Kategoriler
CSS

Google Fonts

<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
.text {
	color: #ed1c24;
	font-family: 'Lato';
	font-size: 24px;
	font-weight: bold;
}
</style>
<span class="text">Google Fonts Text</span>
Kategoriler
CSS

CSS ile yapışkan nesne oluşturmak

Bir çok web sitede kaydırma çubuğunu aşağı çektikçe bazı nesnelerin üste sabit durduğunu görürsünüz. Bu işlemin mantığı kaydırma çubuğunu belirli bir seviyeye geldiğinde nesne pozisyonu sabit kalır. Bunu javascript ile yapabileceğiniz gibi css ile çok basit bir şekilde yapabilirsiniz. Bu işlem için CSS’in olanak sağladığı sticky elemanı ile yapabilirsiniz.

Yapışkan özelliğe sahip olmasını istediğiniz nesneye position özelliğine sticky değeri vermeniz yeterlidir;

[code]<style>
.sticky {
position: sticky;
top: 0;
background-color: green;
padding: 50px;
font-size: 25px;
}
</style>
<div class=”sticky”>Kaydırma pozisyonuna ulaştığınızda ekrana yapışacak olan nesne</div>[/code]