CSS arşivleri - Murat Bilginer https://muratbilginer.net/category/frontend-developer-road-map/css/ Blog Thu, 23 Nov 2023 11:01:46 +0000 tr hourly 1 https://muratbilginer.net/wp-content/uploads/2025/03/MuratBilginerIco-3.png CSS arşivleri - Murat Bilginer https://muratbilginer.net/category/frontend-developer-road-map/css/ 32 32 CSS 3 Grid 6 – grid-area Özelliği https://muratbilginer.net/css-3-grid-6-grid-area-ozelligi/ https://muratbilginer.net/css-3-grid-6-grid-area-ozelligi/#respond Thu, 23 Nov 2023 11:01:46 +0000 https://muratbilginer.net/?p=49559 Merhaba. grid-area özelliği, CSS Grid Layout modelinde kullanılan bir özelliktir ve bir öğenin bir grid konteynırında hangi satır ve sütunlarda yer alacağını belirlemek için kullanılır. Bu özellik, öğelerin grid üzerinde yerleşimini kontrol etmek için kullanılan diğer özelliklerle birlikte çalışır. grid-area özelliği, bir öğenin konumunu belirlemek için bir dizi değeri kabul eder. Bu değerler şu sırayla...

The post CSS 3 Grid 6 – grid-area Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-grid-6-grid-area-ozelligi/feed/ 0 CSS 3 Grid 4 – Grid Ögeleri ve Yerleşim – grid-column & grid-row https://muratbilginer.net/css-3-grid-4-grid-ogeleri-ve-yerlesim-grid-column-grid-row/ https://muratbilginer.net/css-3-grid-4-grid-ogeleri-ve-yerlesim-grid-column-grid-row/#respond Thu, 23 Nov 2023 10:32:40 +0000 https://muratbilginer.net/?p=49551 Merhabalar. Bir önce yazımızda bir grid container oluşturduk. Şimdi elemanların yerleşimlerine bakacağız. CSS Grid modeli, web tasarımında öğeleri yerleştirmek için güçlü bir araçtır. Bu model, sütun ve satırlar arasında esnek bir düzen sağlar, sayfa tasarımını daha anlamlı ve yönetilebilir kılar. CSS Grid Öğelerinin Yerleşimi Nedir? CSS Grid, içeriği bir matris gibi düzenlemenizi sağlar ve bu...

The post CSS 3 Grid 4 – Grid Ögeleri ve Yerleşim – grid-column & grid-row appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-grid-4-grid-ogeleri-ve-yerlesim-grid-column-grid-row/feed/ 0 CSS 3 Grid 3 – Grid Oluşturma Rows & Columns https://muratbilginer.net/css-3-grid-3-grid-olusturma-rows-columns/ https://muratbilginer.net/css-3-grid-3-grid-olusturma-rows-columns/#respond Thu, 23 Nov 2023 10:19:01 +0000 https://muratbilginer.net/?p=49548 Merhabalar. CSS Grid Sütun ve Satırları: Esnek ve Karmaşık Düzenler İçin Temel Taşlar CSS Grid, web tasarımında esnek ve karmaşık düzenler oluşturmak için güçlü bir araçtır. Bu model, sayfa düzenini belirlemenin yanı sıra, içeriği özelleştirmek ve responsivite eklemek için de kullanılır. CSS Grid Sütun ve Satırları Nedir? CSS Grid, sütunlar ve satırlar üzerine kurulu bir...

The post CSS 3 Grid 3 – Grid Oluşturma Rows & Columns appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-grid-3-grid-olusturma-rows-columns/feed/ 0 CSS 3 Grid 2 – Grid Container ve Ögeleri? https://muratbilginer.net/css-3-grid-2-grid-container-ve-ogeleri/ https://muratbilginer.net/css-3-grid-2-grid-container-ve-ogeleri/#respond Thu, 23 Nov 2023 10:04:35 +0000 https://muratbilginer.net/?p=49545 Merhabalar. Grid yazılarımız boyunca bir proje üzerinde ilerleyeceğim. Başlangıç kodları aşağıdaki gibidir. Sizde aynen uygulayabilirsiniz. Bunun üzerine eklemeler yapacağız. index.html grid.css grid.js Başlangıç görüntümüz aşağıdaki gibi. CSS Grid, modern web tasarımında kullanılan güçlü bir düzen modelidir. Bu model, sayfa düzenini oluşturmak için kullanılır ve hem sütun (column) hem de satır (row) düzenlerini kontrol etmeyi sağlar....

The post CSS 3 Grid 2 – Grid Container ve Ögeleri? appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-grid-2-grid-container-ve-ogeleri/feed/ 0 CSS 3 Flexbox 10 – Items İçin Flex-Basis Özelliği https://muratbilginer.net/css-3-flexbox-10-items-icin-flex-basis-ozelligi/ https://muratbilginer.net/css-3-flexbox-10-items-icin-flex-basis-ozelligi/#respond Thu, 23 Nov 2023 08:55:55 +0000 https://muratbilginer.net/?p=49537 Merhabalar. Bu yazımda Items için flex-basis özelliklerine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. 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...

The post CSS 3 Flexbox 10 – Items İçin Flex-Basis Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-flexbox-10-items-icin-flex-basis-ozelligi/feed/ 0 CSS 3 Flexbox 9 – Items İçin Flex-Shrink Özelliği https://muratbilginer.net/css-3-flexbox-9-items-icin-flex-shrink-ozelligi/ https://muratbilginer.net/css-3-flexbox-9-items-icin-flex-shrink-ozelligi/#respond Thu, 23 Nov 2023 08:40:28 +0000 https://muratbilginer.net/?p=49530 Merhabalar. Bu yazımda Items için flex-shrink özelliklerine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. 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...

The post CSS 3 Flexbox 9 – Items İçin Flex-Shrink Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-flexbox-9-items-icin-flex-shrink-ozelligi/feed/ 0 CSS 3 Flexbox 8 – Items İçin Flex-Grow Özelliği https://muratbilginer.net/css-3-flexbox-8-items-icin-flex-grow-ozelligi/ https://muratbilginer.net/css-3-flexbox-8-items-icin-flex-grow-ozelligi/#respond Thu, 23 Nov 2023 08:25:19 +0000 https://muratbilginer.net/?p=49525 Merhabalar. Bu yazımda Items için flex-grow özelliklerine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. 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...

The post CSS 3 Flexbox 8 – Items İçin Flex-Grow Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-flexbox-8-items-icin-flex-grow-ozelligi/feed/ 0 CSS 3 Flexbox 7 – Items İçin Order Özelliği https://muratbilginer.net/css-3-flexbox-7-items-icin-order-ozelligi/ https://muratbilginer.net/css-3-flexbox-7-items-icin-order-ozelligi/#respond Thu, 23 Nov 2023 08:17:00 +0000 https://muratbilginer.net/?p=49520 Merhabalar. Bu yazımda Items için order özelliğine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. 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...

The post CSS 3 Flexbox 7 – Items İçin Order Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-flexbox-7-items-icin-order-ozelligi/feed/ 0 CSS 3 Flexbox 6 – Flexbox Align-Self Özelliği https://muratbilginer.net/css-3-flexbox-6-flexbox-align-self-ozelligi/ https://muratbilginer.net/css-3-flexbox-6-flexbox-align-self-ozelligi/#respond Thu, 23 Nov 2023 07:30:55 +0000 https://muratbilginer.net/?p=49512 Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakmaya devam ediyoruz. align-self özelliğine bakacağız. 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. align-self Özelliği align-self özelliği,...

The post CSS 3 Flexbox 6 – Flexbox Align-Self Özelliği appeared first on Murat Bilginer.

]]> https://muratbilginer.net/css-3-flexbox-6-flexbox-align-self-ozelligi/feed/ 0 CSS 3 Flexbox 5 – Flexbox Align-Content Özelliği https://muratbilginer.net/css-3-flexbox-5-flexbox-align-content-ozelligi/ https://muratbilginer.net/css-3-flexbox-5-flexbox-align-content-ozelligi/#respond Thu, 23 Nov 2023 07:12:18 +0000 https://muratbilginer.net/?p=49502 Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakmaya devam ediyoruz. align-content özelliğine bakacağız. 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. align-content Özelliği align-content özelliği,...

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

]]> https://muratbilginer.net/css-3-flexbox-5-flexbox-align-content-ozelligi/feed/ 0