Open in app

Sign In

Write

Sign In

Tahsin Safa Elmalı
Tahsin Safa Elmalı

769 Followers

Home

About

Nov 26, 2022

CSS — Box sizing Nedir?

Merhaba arkadaşlar bugün sizlere CSS tarafında box-sizing özelliği ile HTML elemanlarımızın width ve height değerlerini nasıl kontrol edebileceğimizden bahsetmek istiyorum. Öncelike box-sizing özelliğini eklemeden iki tane kutu oluşturalım. Bu kutunun belli width,height, padding, margin ve border değerleri olsun. (Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Result kısmından çıktılarına bakabilirsiniz)

CSS

4 min read

CSS — Box sizing Nedir?
CSS — Box sizing Nedir?
CSS

4 min read


Jul 2, 2022

CSS — min-content & max-content & fit-content Nedir?

Bir HTML elemanının genişlik (width) değerini tanımlayabileceğimiz pek çok yol vardır. Örneğin: Width değeri auto olan bir elemanı sayfada kullandığımızda, eleman yatay konumda uygun olan tüm genişlik kadar uzar. (Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz) Burada width değerini 2 farklı şekilde belirleyebiliriz: Measurements değerler (100%,200px, 5rem…

CSS

3 min read

CSS — min-content & max-content & fit-content Nedir?
CSS — min-content & max-content & fit-content Nedir?
CSS

3 min read


May 14, 2022

CSS — Layout Modları Nelerdir? Flow Layout ve Display Özelliği

Her HTML elemanının bir layout’u bulunmaktadır. Bu layout, bir layout algoritması tarafından hesaplanır. Bunlar layout modları olarak adlandırılır ve 7 farklı layout modu bulunmaktadır: Normal Flow Table layout Float layout Positioned layout Multi-column layout Flexible box layout Grid layout Bir yazı içerisinde tüm bu layout modlarını ele almak zor olacağı…

CSS

3 min read

CSS — Layout Modları Nelerdir? Flow Layout ve Display Özelliği
CSS — Layout Modları Nelerdir? Flow Layout ve Display Özelliği
CSS

3 min read


Feb 11, 2022

CSS — Box Model Nedir?

Alright Safa, can you explain what is the box model in CSS? Birçok CSS özelliğine aşina olmama rağmen girdiğim bir Frontend mülakatında bu soru ile karşılaştığımda açıkçası bir cevap veremedim. Bana sordukları soruyu aynı şekilde onlara sormuştum: Hmm… Box model?? 🙄 🤔 Birkaç ipucu aldıktan sonra içimden “Aaa… Demek buna…

CSS

7 min read

CSS — Box Model Nedir?
CSS — Box Model Nedir?
CSS

7 min read


Oct 17, 2021

React — React Portal Nedir?

Bu yazının demo projesi GitHub’da bulunmaktadır — Demo projesinin bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. Bugün sizlere React Portal nedir kullanım alanları nelerdir bunlardan bahsetmek istiyorum. Hadi başlayalım! React Portal Nedir? React Portal, bir parent component’e ait bir child componentini, bulunduğu DOM hiyerarşisinin dışında render etmenizi sağlar. Peki bu ne demek? Bir…

React

4 min read

React — React Portal Nedir?
React — React Portal Nedir?
React

4 min read


Sep 12, 2021

CSS Battle — Target #5 — Acid Rain

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin beşinci yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in beşinci challenge’ına bakıyor olacağız. Hadi başlayalım! Target #5 — Acid Rain Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

CSS

4 min read

CSS Battle — Target #5 — Acid Rain
CSS Battle — Target #5 — Acid Rain
CSS

4 min read


Sep 2, 2021

CSS Battle — Target #4 — Ups n Downs

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin dördüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in dördüncü challenge’ına bakıyor olacağız. Hadi başlayalım! Target #4 — Ups n Downs Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

CSS

3 min read

CSS Battle — Target #4 — Ups n Downs
CSS Battle — Target #4 — Ups n Downs
CSS

3 min read


Apr 18, 2021

CSS Battle — Target #3 — Push Button

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin üçüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in üçüncü challenge’ına bakıyor olacağız. Hadi başlayalım! Target #3 — Push Button Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

CSS

3 min read

CSS Battle — Target #3 — Push Button
CSS Battle — Target #3 — Push Button
CSS

3 min read


Apr 15, 2021

CSS Battle — Target #2 — Carrom

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin ikinci yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in ikinci challenge’ına bakıyor olacağız. Hadi başlayalım! Target #2 — Carrom Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

CSS

3 min read

CSS Battle — Target #2 — Carrom
CSS Battle — Target #2 — Carrom
CSS

3 min read


Apr 10, 2021

CSS Battle — Target #1 — Simply Square

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. Yeni bir seri ile karşınızdayım. Bu serimizde cssbattle.dev sitesindeki challenge’ları nasıl çözdüğümü, detayları ile beraber göstermek istiyorum. Bu çözümlerimin kesinlikle en ideal çözüm olduğunu iddia etmiyorum :) Sadece kendi çözümlerimi, sizlere detayları ile beraber…

CSS

2 min read

CSS Battle — Target #1 — Simply Square
CSS Battle — Target #1 — Simply Square
CSS

2 min read

Tahsin Safa Elmalı

Tahsin Safa Elmalı

769 Followers

https://safaelmali.com/

Following
  • Onur Dayıbaşı

    Onur Dayıbaşı

  • Chidume Nnamdi 🔥💻🎵🎮

    Chidume Nnamdi 🔥💻🎵🎮

  • Veli Bacık

    Veli Bacık

  • Eric Elliott

    Eric Elliott

  • Zafer Ayan

    Zafer Ayan

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech