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>
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>
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)}
}
:target
Css’deki target ile yapılmış Modal örneği: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
.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>
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 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;
}
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.