fatihhayrioglu.com
Open in
urlscan Pro
185.199.111.153
Public Scan
Submitted URL: http://fatihhayrioglu.com/
Effective URL: https://fatihhayrioglu.com/
Submission: On February 10 via api from US — Scanned from DE
Effective URL: https://fatihhayrioglu.com/
Submission: On February 10 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" role="presentation" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<div class="gsc-input-box" id="gsc-iw-id1">
<table cellspacing="0" cellpadding="0" role="presentation" id="gs_id50" class="gstl_50 gsc-input" style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="ara" aria-label="ara" id="gsc-i-id1" dir="ltr" spellcheck="false"
style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; background: url("https://www.google.com/cse/static/images/1x/tr/branding.png") left center no-repeat rgb(255, 255, 255); outline: none;"></td>
<td class="gsib_b">
<div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" title="Arama kutusunu temizle" role="button" style="display: none;"><span class="gscb_a" id="gs_cb50" aria-hidden="true">×</span></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13">
<title>ara</title>
<path
d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z">
</path>
</svg></button></td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="sonuçları temizle"> </div>
</td>
</tr>
</tbody>
</table>
</form>Text Content
Menüyü Aç
* Ana Sayfa
*
* Tüm Yazılar
* CSS Dersleri
* Git
* Kitap
* Sass
* İletişim
×
ara
Özel Arama
FATIH HAYRIOĞLU'NUN NOT DEFTERI
CSS - HTML - JAVASCRIPT
CSS3 Kitabım
Kitap Hakkında
6 Şubat 2024 tarihinde Fatih Hayrioğlu
AVATAR POPOUT EFEKTI
CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan
içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak
uygulamayı anlatmaya çalışacağım.
KÖŞELI ALANLARDA POPOUT EFEKTI
Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0;
ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz.
Farenin üzerine geldiğinde resmi büyüttüğümüzde transform: scale(1.4);
istediğimiz sonuç ortaya çıktı.
OVAL ALANLARDA POPOUT EFEKTI
Oval alanlarda popout efekti yapmak için köşeliye göre bir fazla kapsayıcı
.resim-kabi daha eklememiz gerekiyor. Ovallik kazandırmak için .kapsayici ve
.resim-kabi elemanlarına border-radius tanımladık. Bu örnekte farklı olarak
resim ve kapsayıcısını da büyüttük. Ayrıca resme gölge de ekledik.
TEK ELEMANLA ÇÖZÜM
Oval örneğin sadece bir adet HTML elemanı (<img>) ile yapan örnekler de var.
https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/ Temani Afif’in
yazısı gayet başarılı.
See the Pen Fancy hover effect on avatar by Temani Afif (@t_afif) on CodePen.
Az eleman kullanması güzel bir avantaj olsa da kodu karışıklığı beni biraz
düşündürdü. Siz projenize göre bri tanesini seçip ilerleyebilirsiniz.
Kalın sağlıcakla.
KAYNAKLAR
* https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/
* https://www.smashingmagazine.com/2023/09/re-creating-pop-out-hover-effect-css-part1/
* https://youtu.be/1zDRqHifoX0?si=YcEEn2r2EGztObXg
* https://youtu.be/mi-p_q2J8Ek?si=ZR1FIoBwr2LTKuK6
* https://codepen.io/dannievinther/pen/yLgMdWO
* https://codepen.io/sparshgupta007/pen/XWaQoOX
* https://codepen.io/jlevin/pen/eYvgBwy
* https://codepen.io/ainalem/pen/QWGNzYm
* https://codepen.io/t_afif/pen/qBQzrwq
* https://codepen.io/matthewtole/pen/MWQWmGd
29 Ocak 2024 tarihinde Fatih Hayrioğlu
KAPSAYICI SORGULARI (CONTAINER QUERY)
CSS’e gelen yeni özelliklerden birini daha inceleyip sizelere yazmanın sevinci
içerisindeyim. Dilimize kapsayıcı sorguları olarak çevirmeye çalışacağım.
Bu özelliği duyunca daha önce zingat’ta Murat Çorlu ile harita sayfasını
kodlarken sağda harita solda haritadaki ilanların listelendiği ilan kartlarının
olduğu bir yapıdaki tasarımı HTML’e dökmeye çalıştığımız zaman aklıma geldi.
(Yazının ana resmindekine benzer bir sayfa yapısı) Biz burada sağdaki harita ve
yanındaki alanları dinamik olarak değiştirmek istedik. Yeterli alan varsa solda
listelenen alanda 3 kolonlu bir yapı, daha az yer olduğunda 2 kolonlu yapı, daha
da az yer olduğunda tek kolonlu bir yapı olsun ve en sonunda sadece haritanın
kalacağı bir yapı düşündük.
Bunu medya sorguları ile çözmek mümkün olmadı. Daha sonra bunu yapmak için bir
JavaScript çözümü bulsak ta en son sabit bir genişlik ve 2 kolonlu kalsın deyip
bırakmıştık. Kapsayıcı sorguların (container queries) çıkacağını ilk duyduğumda
bu proje ve orada medya sorgularıyla uğraştığımız zaman aklıma geldi. Bu kadar
girizgahtan sonra kapsayıcı sorgularının nasıl çalıştığına değinelim.
KAPSAYICI SORGULARI NASIL KULLANILIR?
Kapsayıcı sorgularının genel teorisine ait tanımlara göz atalım.
CONTAINER-TYPE
En yakın ebeveynine container-type tanım yaparak başlıyoruz. Bu tanım ile bu
eleman bir kapsayıcı eleman olduğu belirtiliyor. Başlangıç değeri normal‘dir.
Aslında tüm elemanlar birer stil kapsayıcısı (Bir yazıda da bu konuya gireriz)
olduğu için normal değeri alır. container-type tanımı iki adet daha değer alır.
* inline-size: Metin akış ekseni olarakta tanımlayacağımız satıriçi(inline)
eksen tanımıdır. Genelde bu değer kullanılıyor.
* size: Her iki eksende de kapsayıcının sorgulanabileceğini gösterir. Hem
satıriçi hem de blok ekseninde sorgulama yapılmasını sağlar.
main {
container-type: inline-size;
}
Bu tanımı yaptıktan sonra bu kapsayıcı içindeki elemanlara artık belli genişliğe
göre sorgulayıp ona göre kod yazabiliyoruz. Örneğin main içindeki
.card-container elemanına 1200px genişliğe göre tanım yapalım:
@container (min-width: 1200px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
CONTAINER-NAME
Sayfa içinde birden fazla kapsayıcı tanımı yapıldığında karışmaması için
isimlendirme seçeneği de var. İsimlendirme işini container-name tanımı ile
yapıyoruz. Bu tanım tarayıcıların işini kolaylaştırmak için tanımlanmıştır.
Tarayıcı hangi elemana kapsayıcı sorgusu uygulanacağını bilirse işi daha kolay
oluyor. Yukarıdaki kodu buna göre güncellersek:
main {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 1200px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
CONTAINER KISAYOLU
Bu iki tanımı birleştiren bir kısayol da vardır. container tanımı bu iki tanımı
birleştiren bir kısayoldur.
main {
container: card / inline-size;
}
Sıralama önemli önce isim sonra tip.
KAPSAYICI SORGU BIRIMLERI
Kapsayıcı sorguların terorisine ait son bilgi de kapsayıcı sorgu birimleri
Kapsayıcı sogrularını kendine ait birimleri vardır. Bu birimler görüş alanı
birimlerine viewport (vw, vh, vmin, vd.) benzerdir. Tabi burada bakış alanına
değil de kapsayıcıya göre işlem yapılır.
* 1cqw - Sorgusu yapılan kapsayıcı genişliğinin 1% ‘ine karşılık gelir.
* 1cqh - Sorgusu yapılan kapsayıcı yüksekliğinin 1% ‘ine karşılık gelir.
* 1cqi - Sorgusu yapılan kapsayıcı satıriçi ekseninin 1% ‘ine karşılık gelir.
* 1cqb - Sorgusu yapılan kapsayıcı blok ekseninin 1% ‘ine karşılık gelir.
* 1cqmin - cqi ve cqb‘nin en düşük değeri
* 1cqmax - cqi ve cqb‘nin en büyük değeri
KAPSAYICI SORGU ÖRNEKLERI
Peki zingat’taki ihtiyacımızı bu öğrendiklerimize göre yapmaya çalışalım.
See the Pen container query by Fatih Hayrioğlu (@fatihhayri) on CodePen.
Yukarıdaki codepen örneğinde zoom seviyesi ile oynayarak ta etkiyi görebiliriz.
Mobile öncelik verdiğimiz için diğer şartlar için kod yazdık.
.card-container {
grid-template-columns: 1fr;
}
@container card (min-width: 1200px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
@container card (min-width: 1700px) {
.card-container {
grid-template-columns: 1fr 1fr 1fr;
}
}
Mükemmel. Mükemmel. Mükemmel.
BILEŞEN YAPISINA GEÇIŞ
Kapsayıcı sorguları genelde yukarıdaki yapıda kullanmak için düşünülüyor ancak
youtube’da Maarten Van Hoof yaklaşımını görene kadar.
Web dünyasında son zamanların popüler kullanımı olan bileşen yapılarını
birçoğumuz kullanıyoruz. Kapsayıcı sorgularıyla bu konunun ne alakası var
derseniz. Farklı ekipler için geliştirdiğimiz bir bileşeni düşünelim. Örneklere
kart yapısından başladığımız için yine bir kart bileşeni kodluyoruz. Bu bileşeni
sayfa içinde, sağ kolonda ve detay durumlarının olduğunu düşünelim. Büyük
projelerde bu tip işler büyük sorun oluyor. Kapsayıcı sorguları bu sorunu da
çözüyor.
Max Böck’ün codepen.io örneği bu konuyu ve tanımları anlamak için mükemmel
bence. 3 kolonlu bir yapı var. Solda öne çıkan kitap, ortada en çok satan
kitaplar listesi ve sağda da alışveriş sepeti var. Bu ögeleri tutup
taşıyabiliyoruz.
See the Pen Container Query Bookstore by Max Böck (@mxbck) on CodePen.
Yukarıdaki kart bileşeni 3 yerde kullanılıyor. Herbiri için ayrı ayrı tanım
yapıp kodlamak yerine kapsayıcı sorguları ile çözebilmek bileşen yapılı
sistemlerde mükemmel bir şey.
GELIŞTIRICI ARAÇLARINDAKI GÖRÜNÜM
Chrome ve Firefox’da aşağıdaki gibi bir etiketleme var. Safari’de göremedim.
TARAYICI DESTEĞI
Popüler ve çok kullanılan tarayıcıların desteği var. Bu yazıyı yazdığımda
Türkiye’deki destek oranı %94.7 olarak görünüyordu.
Kalın sağlıcakla.
KAYNAKLAR
* https://ishadeed.com/article/container-queries-are-finally-here/
* https://www.youtube.com/watch?v=gCNMyYr7F6w
* https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/
* https://developer.apple.com/videos/play/wwdc2022/10048/
* https://www.oddbird.net/2021/04/05/containerqueries/
* https://www.youtube.com/watch?v=zVR1WBGWVT8
* https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/
* https://mxb.dev/blog/container-queries-web-components/
* https://piccalil.li/blog/container-queries-are-actually-coming/
* https://www.youtube.com/watch?v=A2dMca3WrJE
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
* https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
* https://blog.logrocket.com/css-container-queries-guide/
* https://caniuse.com/css-container-queries
* https://web.dev/blog/cq-stable?hl=en
* https://medium.com/kodcular/css-container-sorgular%C4%B1-50f1163fb23d
* https://developer.chrome.com/docs/devtools/css/container-queries?hl=en
* https://www.learnwithjason.dev/demystifying-css-container-queries/
* https://x.com/jh3yy/status/1734300848547627030?s=20
* https://x.com/chriscoyier/status/1650636630401662980?s=20 Takvim örneği
* https://moderncss.dev/container-query-units-and-fluid-typography/
* https://x.com/Robby_WebDesign/status/1622339281598676993?s=20 pagination
örneği
* https://codepen.io/kevinpowell/pen/RwvWoLg
* https://x.com/ChromiumDev/status/1742727550579691789?s=20
* https://codepen.io/collection/XQrgJo?cursor=eyJwYWdlIjozfQ== Miriam’s CodePen
collection
* https://x.com/FrontendHorse/status/1412060617398177794?s=20
22 Ocak 2024 tarihinde Fatih Hayrioğlu
RENK GEÇIŞLI VE HAREKETLI KENAR ÇIZGILERI
İnternette gezerken gördüğüm kodu basit etkisi büyük örnekleri paylaşma
yazılarıma devam ediyorum. Herhangi bir elemanın kenar çizgilerini birden fazla
renk tanımlamak ve üstüne bunu hareketli yapma örneklerini çok gördüm. Bu yazıda
bunu anlatmaya çalışacağım.
DOĞRUSAL RENK GEÇIŞI ÖRNEĞI
border-image: linear-gradient(to bottom right,#ffb56b,#ac255e) 1;
border-image ve linear-gradient birlikte kullanımı ile çözümü hemen bulduk.
Mükemmel. Tabi uygulamada kenar çizgilerini bu kadar büyük kullanmayız
muhtemelen. Örneğin daha öne çıkması için kenar çizgi kalınlığını yüksek tuttum.
KONIK RENK GEÇIŞI ÖRNEĞI
conic-gradient ile daha farklı seçenekler görmek mümkün.
HAREKETLI RENK GEÇIŞI ÖRNEĞI
İşe hareket katmakta kolay. linear-gradient tanımındaki yön tanımını açılı verip
bu açıyı animasyon ile döndürdüğümüzde işte animayonlu kenar çizgisi. Tabi
burada dikkat açı tanımının @property tanımını da yapmalıyız.
KÖŞELERI OVAL RENK GEÇIŞ ÖRNEĞI
border-image ile border-radius birlikte çalışmasının sorunları var. Birçok örnek
sorunu çözmek için :before ve mask ile sonuca gitmiş. Ancak background‘a renk
geçişi ekleyip box-shadow: inset ile içini beyaz (istediğiniz renk) ile
dolduruyoruz. Son olarakta kenar çizgilerinin görünmesi için saydam olarak
tanımladık.
Kalın sağlıcakla.
KAYNAKLAR
* https://www.bram.us/2021/01/29/animating-a-css-gradient-border/
* https://stackoverflow.com/a/76297213/296373
* https://x.com/andiicodes/status/1621181175577411588?s=20
* https://x.com/tejinder_id/status/1536955048806080512?s=20
* https://x.com/argyleink/status/1470763758972653571?s=20
* https://x.com/codewithshripal/status/1572177594291830784?s=20
* https://codepen.io/seyedi/pen/OJdEVXZ
Önceki
* 1
Sonraki
© 2024 Fatih Hayrioğlu. Jekyll ile üretilmiş ve HPSTR Theme teması
kullanılmıştır.