CSS

Tasarımınıza Renk Katacak Harika kısa CSS Örnek Kodları – 2

Tasarımınıza Renk Katacak Harika kısa CSS Örnek Kodları – 2

Merhaba değerli arkadaşlar, bu yazımızda sitenizde kullanıcılar için hem kullanışlı hem de güzel görünmesini sağlayacak harika kısa CSS örnek kodları sayesinde  ödevleriniz veya projeleriniz için yararlı olacak ya da yeni öğrenenler için alıştırma niteliğin kısa ve öz kod örneğini siz değerli yazılımcı dostlarımız için derledik. Sizlerin de bunlara benzer örnekleriniz var ise mail gönderebilirsiniz veya yorum kısmına yazabilirsiniz.

Accent-color

input {
   accent-color: #cf0000;
}

Yukarı bulunan accent-color kodu ile form elemanlarından olan checkbox, radio ve range elementlerin rengini değiştirebilme imkanı sağlıyor. Renk değişimi sayesinde temanıza uygun güzel tasarımlar yaparak kullanıcı deneyimini en üst seviyeye çıkarabilirsiniz. Kullanılan bu CSS kodu bazı web ve mobil tarayıcıların belli versiyonları accent color kodunu desteklemiyor. Hangi tarayıcılarda çalıştığını görmek için tıklayınız.

<label><input type="checkbox"> Checkbox</label>
<br>
<label><input type="radio"> Radio</label>
<br>
<input type="range">
<br>
CSS input accent color style

Collasible

Projelerinizde çok basit hali ile kullanabileceğiniz collasible gibi tasarımlar oluşturmak için <details> tag kullanabilirsiniz. Özelleştirerek daha iyi hale getirebilirsiniz. Bu tarz collapse tasarımları için https://freefrontend.com/html-details-summary-css/ sitesini ziyaret edebilirsiniz.

NOT: <details> tag içine open yazarak collasible açabilirsiniz. Örn: <details open>

Basit Hali

<details class="collapse"> 
    <summary>Title</summary>
    <p>Content</p>
</details>
CSS Collapse (details summary)

Detaylandırılmış hali.

<details class="collapse"> 
    <summary>Collasible Title 1</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim asperiores, quidem vel repudiandae eum ducimus voluptatum sint id molestiae, quibusdam eaque obcaecati nulla magni laboriosam dicta ratione? Quos, esse?</p>
</details>
<details class="collapse" open> 
     <summary>Collasible Title 1</summary>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim asperiores, quidem vel repudiandae eum ducimus voluptatum sint id molestiae, quibusdam eaque obcaecati nulla magni laboriosam dicta ratione? Quos, esse?</p>
</details>
.collapse{
    	width: 50%;
        margin: 0 auto ;
        margin-bottom: .5rem;
        box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,.125);
    }
    .collapse summary::marker {
       color: gray;
    }
    .collapse summary{
    	padding: 1rem;
        border-bottom: 1px solid rgba(0,0,0,.125);
        background: #f7f7f7;
        padding-left: 2.2rem;
        position: relative;
        cursor: pointer;
    }
    .collapse p{
        margin:0;
        padding: 1rem;
    }
    details[open] summary ~ * {
      animation: sweep .5s ease-in-out;
    }
    @keyframes sweep {
      0%    {opacity: 0; transform: translateY(-10px)}
      100%  {opacity: 1; transform: translateY(0)}
    }
HTML collasible (detail - summary  tag)

:target 

Css’deki target ile yapılmış Modal örneği: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal

CSS target example 1
.item{
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 10px;
    display: block;
    border-radius: 4px;
    border-left-width: 5px;
    border-left-color: #f7c600;
}
.item:target{
    border-color: #c63100;
}
<div class="item" id="item1">item1</div>
<div class="item" id="item2">item2</div>
<div class="item" id="item3">item3</div>
<div class="item" id="item4">item4</div>
<div class="item" id="item5">item5</div>
CSS target example 2
#item5
CSS target example 3
#item2

Scroll behavior

Web sayfanızın scroll hareketinde geçişli hale getirerek kullanıcılarınız daha iyi bir deneyim yaşatır. Daha fazla bilgi için https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior ziyaret edebilirsiniz.

html{
   scroll-behavior: smooth;
}
CSS Scroll behavior smooth style

CSS master reset

CSS sıfırlaması nedir? Her tarayıcının kendine özgü varsayılan stilleri vardır ve bu yüzden yaptığımız css’lerin farklı tarayıcılarda farklı bir şekilde görünebilmektedir. Tüm tarayıcılarda aynı şekilde görünmesi için CSS’te projelerinize başlamadan önce mutlaka kullanmanız gereken CSS sıfırlaması yapılmaktadır.

* {
   border: 0;
   outline: 0;
   padding: 0;
   margin: 0;
   vertical-align: baseline;
   font-weight: inherit;
   font-family: inherit;
   font-style: inherit;
   font-size: 100%;
}

CSS Support

Belirli bir özelliği kullanırken tarayıcı tarafından destekleyip desteklemediği öğrenmek için @supports sorgusunu kullanabilirsiniz.

@supports (mix-blend-mode: overlay) {
    .example {
        mix-blend-mode: overlay
    }
}

Gradient Border

.box{
    width:200px;
    height:200px;
    border: 4px solid;
    border-image: linear-gradient(135deg, #ff0000 0%, #00FF00 25%, #FFFF00 50%, #0000FF 75% #ff00ab 100%) 1;
}
CSS border graient color

Leading-trim

Leading-trim özelliği, oluşturulan bloğun ilk ve son satırlarının üstündeki ve altındaki fazla boşluğu kırparak blok ile metin arasında eşit Aralık oluşturur.

Name:leading-trim
Value:normal | start | end | both
Initial:normal
Applies to:block containers and inline boxes
Inherited:no
Percentages:N/A
Computed value:the specified keyword
Canonical order:per grammar
Animation type:discrete

daha fazla bilgi için www.w3.org/TR/css-inline-3/#leading-trim sitesini ziyaret edebilirsiniz.

Arkadaşlar yazımızda yazım hataları veya devrik cümleler olabilir affınıza sığınarak gördüğünüz hata veya önerileriniz olursa lütfen yorum yapmayı unutmayın.
Unutmayın! Paylaşmak; kazanmanın en hızlı ve kolay yoludur. Bir sonraki blog’ta görüşmek dileğiyle esen kalın.

Bu makale yardımcı oldu mu?
EvetHayır

Paylaş

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir