Turgut Arslan

 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

<!DOCTYPE> bildirimi/deklerasyonu her HTML sayfasının başında olması gereken bir HTML elemanıdır. Tek başına herhangi bir işlevi yoktur. Sadece tasaryıcılara içinde ilgili HTML dökümanının hangi standartlara göre işleneceğini bildirir. Tarayıcının sayfayı doğru yorumlaması için bu elemanın en başta <html> etiketinden önce yazılmış olması şarttır. HTML <!DOCTYPE> Tagı Kullanım Örneği <!DOCTYPE HTML> <html>    <head>       <title>Sayfa Başlığı</title>    </head> <body>             Sayfa içeriği </body> </html> Sayfa formatına göre <!DOCTYPE> bildirim biçimleri de değişmektedir.. HTML5  <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

<html> etiketi, sayfanın bir HTML sayfası olduğunu belirtmek için kullanılır. <html> şeklinde açılır ve </html> şeklinde kapanır. Sayfadaki tüm HTML ve Javascript kodları bu iki etiket arasına yazılır.   HTML <html> Tagı Kullanım Örneği <!DOCTYPE HTML> <html>    <head>       <title>Sayfa Başlığı</title>    </head> <body>             Sayfa içeriği </body> </html> HTML <html> Tagı Tarayıcı Desteği Google Chrome Desteği : Var Mozilla Firefox Desteği : Var Internet Explorer Desteği : Var Safari Desteği : Var Opera Desteği : Var