Brackets ile HTML ve CSS Kodları Yardımıyla Slider Oluşturma | Turkish Video Tutorial
Ne Öğreneceğim?
- Web sitelerinde kullanılan sliderları CSS kodları yardımıyla yapmayı öğreneceksiniz.
- CSS kodlarıyla Slider geçiş efektlerini oluşturmayı öğreneceksiniz.
Gereksinimler
- Brackets Kod Editörü
- Güncel Bir İnternet Tarayıcı
- Basit düzey HTML bilgisi
- Basit-Orta Düzey CSS bilgisi
Zorluk
Temel - Orta Düzey
Açıklama
Bu eğitim videosunda sizlere Web sitelerinde kullanılan sliderların CSS kodları yardımıyla nasıl hazırlanabileceğini göstereceğim. Webkit-animation kodları hakkında bilgi verdim ve bunların nasıl tanımlanacağı üzerinde durdum. Brackets Programında bu sliderı hazırlarken Hangi HTML ve CSS kodlarını kullandığımı ve bu kodların ne işe yaradığını anlattım. Kullandığım Brackets programı açık kaynak kodlu bir programdır. GitHub linki aşağıda yer almaktadır. Yine kullandığım kodlarıda aşağıda paylaşacağım.
Daha fazla ayrıntı için videoya geçelim.
Video Tutorial
Müfredat
Brackets ile HTML ve CSS Kodları Yardımıyla Resimlerle Menü Oluşturma
Bağlantılar
Brackets GitHub
Brackets Web Sitesi
Kaynak İndex.Html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="still.css">
</head>
<body>
<div class="slider-all">
<div class="slider">
<span class="res1"><img src="images/resim1.jpg"></span>
<span class="res2"><img src="images/resim2.jpg"></span>
<span class="res3"><img src="images/resim3.jpg"></span>
<span class="res4"><img src="images/resim4.jpg"></span>
</div>
</div>
</body>
</html>
Kaynak Still.Css
.slider-all{
width:700px;
height: 400px;
margin:30px auto;
position: relative;
overflow: hidden;
border:10px solid black;
}
.res1{position: absolute; left:0px;}
.res2{position: absolute; left:700px;}
.res3{position: absolute; left:1400px;}
.res4{position: absolute; left:2100px;}
.slider{
width:2800px;
height: 400px;
position: absolute;
left:0px;
-webkit-animation-name:sliders;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
}
.slider:hover{-webkit-animation-play-state:paused;}
@-webkit-keyframes sliders{
0%{left:0px}
10%{left:0px;}
20%{left:-700px;}
30%{left:-700px;}
40%{left:-1400px;}
50%{left:-1400px;}
60%{left:-2100px;}
70%{left:-2100px;}
}
body{background-color: cadetblue}
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules.
You can contact us on Discord.
[utopian-moderator]
Hey @rdvn, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!