Burak Behlül

TailwindCSS 4’e gelen yenilikler TailwindCSS 4'e gelen yeni özellikler, TailwindCSS’i yazmamızı kolaylaştırıyor. Kod çakışmalarını ve çok kod yazmamızı engelliyor. Ayrıca, artık yüksek performanslı yeni bir motor ( engine ) ile derlenecek. Tüm derlemelerde 5 kat hızlı olacak. TailwindCSS v4 (Resim, I.) 1  — İlk başta en çok kullandığımız @tailwindcss utils yerine @tailwind base; @tailwind components; @tailwind utilities; bunu kullanıyoruz: @import "tailwindcss" ; 2  — Sadece bunlarla sınırlı değil, tailwindcss.config.js ‘deki module . exports = { theme : { extend : { colors : { primary : '#4ade80' , }, spacing : { 72 : '18rem' , }, }, }, }; tanımlama yerine artık her şey CSS’de tanımlanacak: :root { --color-primary : #4ade80 ; } .button { @apply bg-[ color :var(--color-primary)] text-white p- 2 rounded; } 3  — Artık, tailwindcss.config.js ‘de taratma için dosya yolu belirtmemize gerek yok...

Scss Hakkında Her şey Merhaba size bugün bir ön derleyici bir dilin altyapısını öğreteceğim. Scss, css’den farklı olarak birçok özelliğe sahiptir. Bunların başında bir programlama dili gibi içerisinde farklı şeylerin bulunması. (Görsel, I.) Nesting yapısı: .div { .div1 { } } // or header { nav { ul { li { a { } } } } } & kullanımı: h1 { & :hover { } & #icon { } } Mixin kullanımı: @mixin func( $ArkaplanRengi , $YaziBoyutu ){ background-color : $ArkaplanRengi ; font-size : $YaziBoyutu ; } Include ile Mixin’ı kullanmak: h1 { @include func(red, 18px ); } % ile sabit kod kümesi oluşturmak: %ornek{ color : blue; padding : 15px ; } extend ile %’yi kullanmak: h1 { @extend %ornek; } if yapısı: @if $kosul { //code } @else if $kosul { //code } @else { //code } Değişken tanımlama: $mavi : blue; $headerSize : 20px ; For kullanımı: $resul...

 CSS Best Pratices: First Way Herkese merhaba! Bu gün sizlerle, işinizi epey kolaylaştıracak CSS teknikleri öğreneceğiz. İlk Kısaltma : Böyle kullanmak yerine, şöyle kolayca kullanabilirsiniz: İkinci Kısaltma : Böyle uğraşacağına, daha kısa bir yol ile hızlıca hallet: Üçüncü Kısaltma : Sadece bir kod ile çöz! Dördüncü Kısaltma : Bu komut ile birlikte, kolaylıkla dark mode yapabileceksiniz. Fakat arka plan rengini beyaz yapmayı unutmayın. Ayrıca tersine çevirmek içinde aynı komutu kullanmalısınız. Beşinci Kısaltma : Böyle uzun kod yazmak yerine, hepsine aynı özelliği verebilirsiniz: Altıncı Kısaltma : Detaylı kullanımı için bakınız: Flex . Yedinci Kısaltma : Bu yapı  :where() benzeyebilir fakat farkı, CSS dökümanı’nda nerede olursa olsun, yazdığınız bu kod diğer kodları bastırır. Sekizinci Kısaltma : Dedik ki, eğer div etiketinden sonra div etiketi varsa, onun rengini kırmızı yap. Daha fazla bilgi için: has()

  İşinize Yarayacak CSS Araçları Can I Use Bu site, CSS özelliklerini hangi tarayacağının ve sürümünün desteklediğini gösterir. CSS yazanlar için hayatî bir site. Can I Use, örnek. Utopia Birçok özelliği içinde barındıran güzel sitelerden biri. Bu site ile birlikte Responsive tasarlarımıza kolay bir şekilde odaklabilirsiniz. Griddy Adından da anlaşılacağı üzere, bir Grid oluşturucu. Bu site ile birlikte, kolay bir şekilde Grid oluşturabilirsiniz. Bir Griddy örneği. CSS Gradient CSS’de otomatik gradyan oluşturabileceğiz, kolay bir kullanım aracı. Dilediğiniz şekilde, renkleri karıştırabilir ve güzel bir uyum çıkarabilirsiniz. CSS Gradient, arayüzü. Blobmaker CSS’de kolay bir şekilde; daireler, özel şekiller oluşturabilirsiniz. Blobmaker. Getwaves Bu sitede de, kolay bir şekilde dalga şekilleri oluşturabilirsiniz. Getwaves, site görünümü. Neumorphism Pek çok şeyi destekleyen bu site ile beraber kolay bir şekilde kutularınıza, birçok özellik verebilirsiniz. Neumor...