css kelimesini resmeden ressam

Size İlham Verip Ufkunuzu Açacak 6 CSS Özelliği!

Hepimiz CSS programlama dilini öğrenirken kitaplar, bootcampler, online eğitimler gibi birçok yöntemden yararlanırız. Bu yöntemlerle CSS’i temel olarak öğrenir, syntaxı(sözdizimi) kolay olduğu için de CSS’i çok iyi bildiğimizi zannedip Semantic UI, Bootstrap, Tailwind CSS gibi frameworkler kullanmaya başlarız.

Bu frameworkleri kullanmanın vermiş olduğu kolaylıkla artık CSS kullanmaya gerek duymayacak hale geliriz. Bir zaman sonra sürekli framework kullandığımızdan dolayı ortaya koyduğumuz ürünler birbirini taklit etmeye başlar.

Artık bu durum öyle bir noktaya geldi ki örneğin bir web sitesini ilk kez ziyaret ettiğinizde bu web sitesinde hangi CSS frameworklerinin kullanılıp kullanılmadığını fark edebiliyorsunuz. Bu durum da ilerleyen zamanlarda yaptığınız işten sıkılma, müşteri memnuniyetsizliği gibi geri dönütler almanıza neden olabilir.

boring on pc

CSS’te öğreneceğimiz yeni özellikler ile bu duruma düşmekten kurtulabilir, işlerimizde yapacağımız ufak dokunuşlar ile müşterilerimizin gönlünde taht kurup yaptığımız işten zevk almaya başlayabiliriz.

Bu yazımda sizlere yaptığınız işte size ilham verip CSS bilginizi arttıracağını düşündüğüm 6 farklı CSS özelliğini anlatmaya çalıştım. Haydi başlayalım!

1) ::selection Pseudo-element

::selection pseudo-elementi sayesinde imleç ile üzerinden geçtiğiniz yazıyı farklı css özellikleriyle biçimlendirebilirsiniz.

                    
.ornek-1::selection {
   background-color: #000;
   color: red;
}

.ornek-2::selection {
   background: transparent;
   text-shadow: 1px 0 4px red;
}


Css selection pseudo-element gif

Kodu Dene

2) caret-color

caret-color özelliği ile inputa focus olunduğu zamanki imlecin rengini değiştirebilirsiniz.

                    

input {
  caret-color: red;
}

caret-color example image

Kodu Dene

3) Smooth Scrolling

CSS’in çok fazla bilinmeyen özelliklerinden biri olan scroll-behavior, tarayıcıdaki kaydırmaların nasıl yapılması gerektiğini ifade eden harika bir özelliktir. scroll-behavior varsayılan olarak “auto” dur. Bu özellik “smooth” yapıldığında sayfa kaydırmaları yumuşak animasyonlu şekilde gerçekleşecektir.

NOT: Bu özellik Safari ve Opera tarayıcılarında henüz desteklenmemektedir. (Bir özelliğin hangi tarayıcılar tarafından desteklenip desteklenmediğini caniuse sitesinden öğrenebilirsiniz.)

                    

html {
  scroll-behavior: smooth;
}

Smooth scroll gif

Kodu Dene

4) Custom scrollbar

Web sitelerinde aşağı yada yukarı hareket etmek için kullanılan genellikle scrollbar olarak adlandırılan kaydırma çubuğunu css özelliklerini kullanıp farklı tarayıcılarda az da olsa farklı şekillerde görünebilen bu yardımcı aracı dilediğimiz gibi özelleştirebilirsiniz.

Scrollbarın rengi, arkaplan rengi, köşeleri, genişliği gibi birçok özelliğini değiştirme işlemi aşağıdaki kodlar ile yapılabilir. Bu kodlar sayesinde site üzerinde scrollbar çıkan her yerde özelleştirilmiş kaydırma çubuğu gözükmüş olacak.

Bu kodlarla uğraşmak istemeyip  hazır eklenti kullanmak isteyenler için jquery tabanlı Malihu Custom Scrollbar eklentisini önerebilirim.

                    

#style-1::-webkit-scrollbar 
{
	width: 12px; /* scrollbar genişliği */
	background-color: #F5F5F5; /* scrollbar rengi */
}

#style-1::-webkit-scrollbar-track
{
        border: 1px solid #bbb; /* dışta kalan barın kenarlıklar */
	border-radius: 10px; /* dışta kalan barın uç kısmını ovalleştirme */
	background-color: #F5F5F5; /* dışta kalan barın arkaplan rengi */
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px; /* scrolbarın uç kısmını ovalleştirme */
	background-color: #3a22a3; /* scrolbarın arkaplan rengi */
}

#style-2::-webkit-scrollbar
{
	width: .4em;
	background-color: #f5f5f5;
}

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-2::-webkit-scrollbar-thumb
{
	background-color: #ccc;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
    rgba(0, 0, 0, .5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, .5) 50%,
    rgba(0, 0, 0, .5) 75%,
    transparent 75%,
    transparent)
}

custom scrollbar

Kodu Dene

5) Truncate Text

Metni istenilen sayıda satıra kadar göstermek için -webkit-line-clamp özelliğini kullanabilirsiniz. Metni, son satırda sonuna üç nokta ekleyerek gösterecektir.

                    

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical; /* içeriğini yatay mı yoksa dikey olarak mı düzenleyeceğini belirler. */
  -webkit-line-clamp: 2; /* kaçıncı satırdan itibaren metni kesmek istiyorsak o satır numarasını yazıyoruz */
  overflow: hidden;
}

line clamp özelliği görseli

Kodu Dene

6) Custom cursor

Varsayılan pointerınız yerine resim hatta emoji bile gösterebilirsiniz.

                    

.emoji-cursor {
  background: purple;
  cursor: url("data:image/svg+xml;utf8,🐥"), auto;
}

.image-cursor {
  background: yellowgreen;
  cursor: url(https://picsum.photos/60), auto;
}

custom cursor gif

Kodu Dene

BONUS) user-select

Bazen web sitemizdeki tüm içeriklerin veya bazı içeriklerin başkaları tarafından kopyalanmasını istemeyebiliriz. Veya bazı durumlarda (metnin tek seferde seçilip kopyalanabilmesi gibi) tüm metnin sol click ile tek seferde seçilmesini isteyebiliriz. Bu gibi durumlarda user-select özelliği devreye giriyor. Bu özellik dört farklı değer alabilir. Bunlar sırasıyla;

  • auto : Varsayılan değer. Tarayıcı izin verirse metinler seçilebilir.
  • none : Metin seçimini engeller.
  • all : Tek tıklama ile metin tamamının seçimini yapar.
  • text : Metin kullanıcılar tarafından seçilebilir.
                    

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select-all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Kodu Dene

NOT: Eğer sitenizdeki tüm içeriklerin başkaları tarafından kopyalanmasını istemiyorsanız user-select özelliği tek başına yeterli olmaz. Çünkü F12 tuşu veya CTRL + U tuş kombinasyonu kullanıldığı zaman web sitesi içerisindeki kaynak kodlara ve içeriklere ulaşabilmek mümkün hale geliyor. Bu tuşları devre dışı bırakmak için javascript kodu yazmamız gereklidir.

Ama hâla yeterli değil!

Çünkü içeriklerinizi ödünÇALMAK isteyen kişiler Google Chrome tarayıcısında sırasıyla Ayarlar -> Gizlilik ve Güvenlik -> Site ayarları -> İçerik ayarları -> JavaScript yollarını izleyip “Sitelerin Javascript kullanmasına izin verme” seçeneğini seçerek sitelerde kullanılan javascript kodlarını pasif hale getirebilir. Bu da yazmış olduğumuz javascript kodlarını devre dışı bırakır.

Diğer yandan web scrapping denen yöntem sayesinde özel yazılmış botlar ile sitenizdeki tüm içerikleri çekebilirler.

Peki ne yapabiliriz?

İçeriklerinize çok fazla önem veriyorsanız ve başkaları tarafından kullanılmasını istemiyorsanız eğer DMCA kullanarak içeriklerinizi bir nevi lisanslayabilir ve ardından kopyalanan içeriklerinizi şikayet edebilirsiniz.

Yazımızın sonuna geldik dostlar. Umarım vaktinizi ayırdığınıza değmiş faydalı bilgiler edinmişsinizdir.  Bir sonraki yazıda görüşmek dileğiyle…

Bu gönderiyi paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir