css arşivleri - Murat Bilginer

CSS 3 Flexbox 3 – Flexbox Justify-Content Özelliği

Murat Bilginer — Thu, 23 Nov 2023 06:31:48 +0000

Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakacağız. İlk olarak justify-content özelliğine bakalım. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css Şu anki güncellemelerimiz sonrası uygulama aşağıdaki gibi gözüküyor. justify-content Özelliği “justify-content” özelliği,...

The post CSS 3 Flexbox 3 – Flexbox Justify-Content Özelliği appeared first on Murat Bilginer.

Tailwind CSS 2023 7 – React Projesi İçin Tailwind CSS Kurulumu ve İlk Ayarlar

Murat Bilginer — Wed, 15 Nov 2023 03:01:35 +0000

Merhabalar. Bu yazımda bir React projenize Tailwind CSS’i kullanmak için nasıl kurarsınız ve ayarlarını yaparsınız bunlara bakacağız. Öncelikle react-tailwind isminde bir klasör oluşturup bu klasör içinde bir React projesi oluşturalım. React projesi nasıl oluşturulur diye soruyorsanız, aşağıdaki yazıma göz atabilirsiniz. Projeyi oluşturduysanız devam ediyoruz. Tailwind Kurulumu Tailwind CSS kurulumu için aşağıdaki komutu terminalde çalıştıralım. Tailwind...

The post Tailwind CSS 2023 7 – React Projesi İçin Tailwind CSS Kurulumu ve İlk Ayarlar appeared first on Murat Bilginer.

React Tutorial 2023 20 – React İle CSS Kullanımı

Murat Bilginer — Thu, 09 Nov 2023 05:46:24 +0000

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim. Merhabalar. Bu yazımda React ile CSS’leri nasıl kullanıyoruz buna bakacağız. Bir önceki yazımda oluşturduğum ProductCard ve onun için yazdığım Style ögeleri üzerinden devam edeceğim. Ancak bu sefer kodlarımızı bildiğimiz CSS dosyası içinde yazacağız. Ve...

The post React Tutorial 2023 20 – React İle CSS Kullanımı appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 33 !important Kavramı

Murat Bilginer — Sun, 18 Sep 2022 06:24:34 +0000

Merhabalar, bu yazımda !important kavramına bakacağız. !important; uygulanan bir stili öncelikli duruma getirmek için kullanabileceğimiz bir önem derecesini ifade eder. Web sitelerini tasarlarken kendi CSS kodlarımız özensiz ve hızlı iş bitirme endişesinden dolayı kendini tekrar eden bir hale gelebiliyor. Bu durumda aynı html öğesini ya da aynı sınıf elemanı birden çok kere seçmiş olabiliyoruz. Ve bazı durumlarda CSS kodlarımız çakışabiliyor...

The post FrontEnd Developer RoadMap – CSS3 Tutorial 33 !important Kavramı appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 32 List-Style-Type Kavramı – Liste Biçimlendirme

Murat Bilginer — Sun, 18 Sep 2022 05:38:35 +0000

Merhabalar bu yazımda liste biçimlendirme CSS kodlarına bakacağız. list-style-type: none; /* Bu liste elamanlarının yanında çıkan styleri belirler. None yapılması kaldırılması anlamına gelir.*/ list-style-type’ın alabileceği value’ler ve açıklamaları. Value Description disc Default value. The marker is a filled circle armenian The marker is traditional Armenian numbering circle The marker is a circle cjk-ideographic The marker...

The post FrontEnd Developer RoadMap – CSS3 Tutorial 32 List-Style-Type Kavramı – Liste Biçimlendirme appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 31 Text-Align Kavramı – Text Hizalama

Murat Bilginer — Sun, 18 Sep 2022 05:21:01 +0000

Merhabalar, bu yazımda text-align yani Text Hizalama konusuna bakacağız. text-align özelliği, Metinleri sayfa içinde veya kullanıldığı element içinde hizalamak için kullanılır. text-align’ın alabileceği değerler aşağıdaki gibidir. Değer Açıklama left Metni sola hizalar. right Metni sağa hizalar. center Metni ortalar. justify Metni her iki yanına yaslar. initial Varsayılan değerine geri döndürür. inherit Değerini üst öğesinden miras alır....

The post FrontEnd Developer RoadMap – CSS3 Tutorial 31 Text-Align Kavramı – Text Hizalama appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 30 Text Biçimlendirme

Murat Bilginer — Sun, 18 Sep 2022 05:10:21 +0000

Merhabalar, bu yazımda text biçimlendirme CSS kodlarımıza bakacağız. Aşağıda kullanım örneği ve açıklama satırında neler yaptığını açıklamaya çalıştım. Aşağıda örnek kodları inceleyebilirsiniz. text-transform:capitalize; /* İlk harfleri büyük yapar.*/ line-height: 150%; /* Yazının Satır Yüksekliğini Belirtir */ word-spacing: 3px; /* Kelimeler arası boşluğu belirler. */ letter-spacing: 1px; /* Harfler arası boşluğu belirler. */ text-decoration: none; /*...

The post FrontEnd Developer RoadMap – CSS3 Tutorial 30 Text Biçimlendirme appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 29 Icon Kullanımı

Murat Bilginer — Sun, 18 Sep 2022 05:03:29 +0000

Merhabalar, bu yazımda hazır icon kütüphanelerinden sayfalarımıza nasıl iconlar ekleyebiliriz buna bakacağız. Bunun için ilk olarak aşağıdaki sayfaya gidelim. Bu kodu Html’e head tag’leri arasına ekleyelim. Burada yüzlerce free icon var. Kullanmak istediğinize tıklayın. Gösterdiğim yere tıklayıp kodu alıyoruz. Bunların özellikleriyle oynanabilir. a etiketi içine alarak iconlar linklendirilebilir. Bir sonraki yazımda görüşmek üzere.

The post FrontEnd Developer RoadMap – CSS3 Tutorial 29 Icon Kullanımı appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 28 Font Özelliği

Murat Bilginer — Sun, 18 Sep 2022 04:48:25 +0000

Merhabalar, bu yazımda font özelliğine bakacağız. Hazır fontlar nasıl kullanılır bunları da göreceğiz. İlk olarak standart değerlere bakalım. Hangisi düzgün şekilde belirtilen yerde varsa kullanılır. Eğer hiçbiri yoksa tarayıcının varsayılanı kullanılır. Dışardan Google Font’unu kullanmak isteyelim. Bu sayfaya gidelim. Örneğin roboto fontunu kullanmayı seçelim. Kullanmak istediklerimizi seçelim. Sağdaki linki alıp kullanacağımız yerde head tagleri içine...

The post FrontEnd Developer RoadMap – CSS3 Tutorial 28 Font Özelliği appeared first on Murat Bilginer.

FrontEnd Developer RoadMap – CSS3 Tutorial 27 Border Kavramı

Murat Bilginer — Sun, 18 Sep 2022 04:35:03 +0000

Merhabalar, bu yazımda Html içindeki nesnelerin kenarlıklarını ayarlamak için border kavramına bakacağız. Temel Kullanım 1. değer kalınlık 2. değer şekli 3. değer rengidir. Bu şekilde bir defada uygulanırsa bütün kenarlara uygulanır. Ancak biz sadece istediğimiz kenarlara border uygulayabiliriz. Şimdi tek tek bakalım. Her kenarlığa ayrı ayrı renk verilebilir. Bir sonraki yazımda görüşmek üzere.

The post FrontEnd Developer RoadMap – CSS3 Tutorial 27 Border Kavramı appeared first on Murat Bilginer.