Bu yazımda Html ve Css kodları yazarak responsive timeline yapımını göstereceğim. Timeline yapımı için bazı ileri seviye Css özelliklerini kullanacağız.
Css ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımdan ilgili konuları inceleyebilirsiniz.
Html ve Css kodlarını yazdıktan sonra karşımıza aşağıdaki resimde olduğu gibi bir timeline örneği çıkacak.
İlgili kodlar üzerinde değişiklikler yaparak örneğimizi özelleştirebilirsiniz.
Timeline Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="timeline"> <article class="timeline-item"> <div class="timeline-desk"> <div class="panel"> <div class="panel-body"> <span class="arrow"></span> <span class="timeline-icon"></span> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio</p> </div> </div> </div> </article> <article class="timeline-item alt"> <div class="timeline-desk"> <div class="panel"> <div class="panel-body"> <span class="arrow-alt"></span> <span class="timeline-icon"></span> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio</p> </div> </div> </div> </article> <article class="timeline-item"> <div class="timeline-desk"> <div class="panel"> <div class="panel-body"> <span class="arrow"></span> <span class="timeline-icon"></span> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio</p> </div> </div> </div> </article> <article class="timeline-item alt"> <div class="timeline-desk"> <div class="panel"> <div class="panel-body"> <span class="arrow-alt"></span> <span class="timeline-icon"></span> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio. Lorem ipsum dolor sit amet consiquest dio</p> </div> </div> </div> </article> </div> |
Timeline Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
.timeline { border-collapse: collapse; border-spacing: 0; display: table; position: relative; table-layout: fixed; width: 100%; } .timeline:before { background-color: #C7CBD6; bottom: 0px; content: ""; left: 50%; position: absolute; top: 0; width: 2px; z-index: 0; } .timeline-item { display: table-row; } .timeline-desk { display: table-cell; vertical-align: top; width: 50%; } .timeline-desk .panel { display: block; margin-left: 25px; position: relative; background: #F4F4F4; padding: 5px 0px 10px 10px; } .timeline-item .timeline-desk .arrow { border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-right: 8px solid #F4F4F4 !important; display: block; height: 0; left: -7px; position: absolute; top: 13px; width: 0; } .timeline-item.alt .timeline-desk .arrow-alt { border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #F4F4F4 !important; display: block; height: 0; right: -7px; position: absolute; top: 13px; width: 0; left: auto; } .timeline .timeline-icon { left: -32px; position: absolute; top: 15px; border: 3px solid #FFFFFF; border-radius: 50%; display: block; height: 12px; width: 12px; background: #EF6F66; box-shadow: 0 0 0 3px #EF6F66; } .timeline-desk h3 { color: #EF6F66; } .timeline-item.alt .timeline-icon { left: auto; right: -36px; } .timeline .time-icon:before { font-size: 16px; margin-top: 5px; } .timeline-item.alt:before { display: none; } .timeline-item:before, .timeline-item.alt:after { content: ""; display: block; width: 50%; } .timeline-item.alt .panel { margin-left: 0; margin-right: 25px; } |
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
