Turgut Arslan

Basit bir CSS kodlama örneği yaptım, umarım yardımcı olur. <div class="btnContainer"> <h3 class="btnTitle">Devamını Oku Buton alanı başlık metnini buraya yazın</h3> <a href="#" title="Devamını Oku Buton Başlığı" class="btnReadMore"> Devamını Oku &gt;</a> </div> <style> .btnContainer{   background-color:#2f2f2f;   color:#fefefe;   text-align:center;   padding:1% 2%;   font-family:Arial; } .btnTitle{ font-size:24px;     line-height:100%; } .btnReadMore{ display:block;     background-color:#dedede;     color:#2f2f2f;     width:50%;     max-width:170px;     text-align:center;     text-decoration:none;     margin:20px auto;     font-family:Arial;     font-size:16px;     padding:10px 2px;     border-radius:2px;     -webkit-border-radius:2px;     -moz-border-radius:2px; } </style> Kodların çalışan hali Devamını Oku Buton alanı başlık metnini buraya yazın Devamını Oku >

 Bu çalışmamızda :after pseudo classı ile clear both nasıl yapılır? Bulmaya çalışacağız. Şu şekilde bir kodlama yaptığımızı hayal edelim. <style>     .flist{display:block;max-width:25%;height:auto;padding:3rem;margin:.3rem;background:red;float:left;}     .kap{width:80%;height:auto;display:block;background:blue;}     .kap::after{clear:both;content:"";display:table;clear:left;font-size:0;height:0;}    .kapIki{width:3rem;height:3rem;background:green;display:block;color:white;padding:2rem;margin:.5rem 0;} </style> <div class="kap">     <div class="flist">1</div>     <div class="flist">2</div>     <div class="flist">3</div>     <div class="flist">4</div> </div> <div class="kapIki">2. kap</div> Görünümü bu şekilde olacaktır. Clearfix ya da clear işlemi uygulanmadan önce Görüldüğü gibi kırmızı kutulara float:left özelliği verildiğinden dolay

Haber sitelerinde, ya da blog sayfalarının sidebar bölümünde kullanabileceğiniz metin kutusu. Genelde bir yazının özet kısmını göstermek için kullanılır. Eklediğinizi yazıyı belirli bir satıra kadar gösterir. Gerisini 3 nokta şeklinde kısaltır. Koddaki line-clamp özelliğini değiştirerek satır sayısını istediğiniz gibi ayarlayabilirsiniz. Kodlar şu şekildedir. <style> .listWrp{background:#f2f2f2;padding:2%;border: solid 1px #f2f2f2;border-radius:.8rem;-moz-border-radius:.8rem;-webkit-border-radius:.8rem;-o-border-radius:.8rem;max-width:40%;color:#717171;font-family:Arial;} .listCont{border-left:solid 3px #ff0000;padding:0 0 0 3%;display:block;position:relative;font-size:.9rem;text-align:justify;  } .listInd{position:absolute;top:5%;left:-.38rem;padding:.3rem;background-color:#ff0000;z-index:10;} .listTitle{color:#555;margin:1% 0;font-size:1.2rem;} .listTxt{text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 8;  -webkit-box-orient: vertical;overflow:hidden;} .listRMo

HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır. Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır. <style>   .kapsayici {     display: flex;     display: -webkit-flex;     flex-direction: column;     max-width: 92px;     height: auto;     margin: 0px auto;     flex-wrap: nowrap;     justify-content: flex-start;     align-items: stretch;     align-content: stretch;   }   .eleman,   .karistirButon {     padding: 3%;     border: solid 1px #f00;     margin: 2px;     max-width: 92px;     text-align: center;   }   .karistirButon {     background-color: red;     color: #fff;     margin: 0px auto;     margin-top: 5px;     cursor: pointer;     display: block;     padding: 1%;     max-width: 92px;   } </style> <script>   function siraDegistir() {     var sira = 0;     var siraliste = [];

Product Box'lar, E-Ticaret sitlerinde ürün kutusu olarak bilinen ve kategori sayfalarında ürünlerin gösterilmesi için kullanılan site elemanlarıdır. Kullanıcılar bu kutucuklardaki bilgilere bakarak ürünler hakkında özet bilgi edinirler. Tıkladıklarında ürün detay sayfasına yönlendirme yapar. Bazılarında sepete ekleme butonları ve çeşitli aksiyon elemanları bulunur. Bu örnekte temel seviyede bir ürün kutusu kodlaması yaptım. Basit kolay anlaşılır bir kodlar kullandım. Sadece hover etkisini basit transition ile daha şık yapmak için bir iki ufak CSS3 kodu kullandım. Kodlar aşağıdaki gibidir. <style>   .productBox {     border: solid 1px #ddd;     width: calc((100% - 10px)/4);     min-width: 150px;     min-height:340px;     height: auto;     display: block;     font-family: Arial;     float: left;     margin: 5px;     border-radius: 2%;     -webkit-border-radius: 2%;     -moz-border-radius: 2%;     transition: all .5s;     background: #fff;   }   .productBox:hover {     border: s

Basit birkaç satır CSS3 koduyla liste kutularınıza şık ve zarif görünümlü arkaplan efektleri verebilirsiniz.  <style>   .hoverKutu {     background-color: #ededed;     color: #717171;     width: 90%;     height: 45px;     display: block;     line-height: 45px;     text-align: center;     cursor: pointer;     transition: background-color 1.1s ease;     border: solid 1px #dddddd;     margin: 5px auto;   }   .hoverKutu:hover {     background-color: #fff;   } </style> <div class="hoverKutu">   CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. </div> <div class="hoverKutu">   Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. </div> Bu kodların canlı hali şu şekildedir. CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. Burada CSS Transition efekti class'ı "hoverKutu" o

CSS ile side bar alanına eklenebilen basit bir timeline kutusu. <style>   .listTimeLine {     margin: 0px;     padding: 10px;     border-left: 1px solid #717171;     font-family: Arial;     width: auto;     display: block;     background-color: #ddd;     max-width: 40%;     height: auto;     display: block;   }   .listTimeLine li {     margin: 4px 0;   }   .listTimeLine li.listDate {     list-style-type: none;     color: #717171;     font-size: 12px;     margin: 18px 0 0 0;   }   .listTimeLine li.listDate:first-child {     margin: 0;   }   .listTimeLine li.listItem {     list-style-type: none;     font-size: 16px;     font-weight: bold;     color: #545454;     padding-left: 15px;   }   .listTimeLine li.listDate:before {     content: "■";     padding-right: 10px;     margin-left: -15px;     line-height: 10px;     vertical-align: top;     display: inline-block;     font-size: 16px;   }   .active {     color: #e04235 !important;     font-weight: bold;   } </style&

Metin kutusu kodları <style> .mainBox{ display:block; max-width:100%; height:auto; padding:2.5%; background-color:#f1f1f1; margin:5px auto; border:solid 1px #dfe6e9; box-sizing:border-box; } .innerBox{ background-color:#ffffff; padding:5px; width:100%; height:auto; display:block; border:0px; border-left: solid 3px #e74c3c; text-align:justify; box-sizing:border-box; color:#2c3e50; } </style> <div class="mainBox"> <div  class="innerBox">     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </div> </div> Bu kodların canlı hali

Web sitesi yapmak zahmetli ama eğlenceli bir iştir. Tasarımından, front-end ve back-end yazılımına ve UI/UX testlerine kadar pek çok alanı kapsayan kompleks bir iştir. Ben özellikle front-end kısmını çok severim. Kullanıcı arayüzlerini programlamak, tasarımı sadece bir resim halinden çıkarıp, canlı ve etkileşimli bir HTML dokümanı haline getirmek, saatlerce sıkılmadan yapabileceğim bir iştir. Bu işi yaparken karşılaştığım zorlukları aşabilmek için pek çok web sitesinden ilham ve/veya çözüm yöntemi ararım. Benzer durumları nasıl çözdüğünü incelerim. Front-end kullanılan kodlar tarayıcıda çalışan scriptlerden oluştuğu için sürekli herkese açıktır ve ön yüz geliştiricileri birbirlerinin kodları görebilirler ve inceleyebilirler. İncelenen bir sitenin CSSsyi nasıl kurgulamış, uygulanan JS çözümleri neye göre yazıldığı gibi pek çok araştırmalar yaparken ortak bir akıl gibi davranır ve sorunlarımızı beraberce çözeriz. Bu yazımda bazı web sitelerinde CSS kodlarını incelerken sık sık gördüğü