Meta tags:
description=CSS, HTML, Javascript;
keywords=Jekyll, theme, themes, responsive, blog, modern;

Headings (most frequently used words):

renk, kapsayıcı, örneği, container, geçişi, kaynaklar, popout, efekti, alanlarda, hareketli, sorgu, sorguları, oval, geçiş, araçlarındaki, yapısına, bileşen, geliştirici, fatih, görünüm, tarayıcı, desteği, doğrusal, konik, köşeleri, type, name, kısayolu, örnekleri, tek, kullanılır, kenar, nun, not, defteri, avatar, query, geçişli, ve, çizgileri, nasıl, css, html, javascript, köşeli, hayrioğlu, elemanla, çözüm, birimleri,

Text of the page (most frequently used words):
https (44), container (36), #kapsayıcı (25), com (24), bir (22), ile (17), #için (16), css (16), #codepen (15), card (11), pen (11), #queries (10), #daha (10), www (9), #status (9), var (8), #renk (8), #göre (8), #fatih (7), örneği (7), #sorguları (7), tanımı (7), hayrioğlu (7), blog (6), border (6), kenar (6), mükemmel (6), tanım (5), inline (5), gradient (5), size (5), büyük (5), olarak (5), yapı (5), kolonlu (5), grid (5), sorgusu (5), template (5), columns (5), type (5), query (4), popout (4), son (4), oval (4), dev (4), değeri (4), hover (4), effect (4), bunu (4), avatar (4), 1200px (4), width (4), min (4), 2024 (4), efekti (4), yapılan (4), yukarıdaki (4), main (4), sayfa (4), sonra (4), iki (4), web (4), youtube (4), html (4), gelir (4), ine (4), bileşeni (4), karşılık (4), geçişi (4), the (3), kart (3), farklı (3), harita (3), örneğin (3), içindeki (3), javascript (3), kadar (3), bileşen (3), alanlarda (3), see (3), kitap (3), kodu (3), watch (3), içinde (3), developer (3), hareketli (3), olduğu (3), tarihinde (3), çalışacağım (3), çok (3), solda (3), yer (3), fancy (3), fazla (3), alan (3), normal (3), eleman (3), linear (3), tabi (3), kalın (3), resmi (3), 2021 (3), sağlıcakla (3), image (3), sorgu (3), resim (3), ait (3), birimleri (3), satıriçi (3), köşeli (3), name (3), kaynaklar (3), burada (3), sorunu (2), sadece (2), olarakta (2), blok (2), olduğunda (2), are (2), tek (2), t_afif (2), birlikte (2), değer (2), ekseninin (2), org (2), çözmek (2), tüm (2), ancak (2), docs (2), smashingmagazine (2), düşünelim (2), sağda (2), sorgularıyla (2), guide (2), sorgularının (2), alır (2), popüler (2), sorguların (2), ayrı (2), zaman (2), tarayıcı (2), aklıma (2), geldi (2), defteri (2), not (2), nun (2), yapmak (2), önce (2), desteği (2), tarayıcıların (2), vardır (2), adet (2), max (2), böck (2), medya (2), safari (2), nasıl (2), yuvarlak (2), webkit (2), ana (2), birleştiren (2), tanımladık (2), and (2), chrome (2), öne (2), tanımını (2), zingat (2), temani (2), ocak (2), kapsayıcının (2), üzerine (2), kod (2), afif (2), çizgilerini (2), cqb (2), kullanımı (2), anlatmaya (2), yazıda (2), kapsayici (2), nin (2), radius (2), your (2), for (2), tricks (2), birden (2), çözümü (2), cqi (2), geçiş (2), genelde (2), biraz (2), youtu (2), kolay (2), kabi (2), işini (2), tip (2), mümkün (2), kullanılıyor (2), örnekleri (2), bottom (2), hem (2), genişliğe (2), oluyor (2), collection (2), belli, atalım, yapıyoruz, i̇simlendirme, kullanılır, sorgulama, hangi, artık, sabit, uygulanacağını, terorisine, kalsın, elemana, bilgi, sıralama, genişlik, önemli, kolaylaştırmak, işi, buna, güncellersek, bulsak, yaptıktan, olmadı, tanımlanmıştır, elemanlara, isim, göz, kısayoldur, tanımlara, tanımıdır, başlıyoruz, yaparak, ebeveynine, yakın, sorgulanabileceğini, bilirse, gösterir, eksen, her, tanımlayacağımız, ekseni, ekseninde, akış, metin, yapıldığında, karışmaması, sağlar, eksende, belirtiliyor, teorisine, konuya, seçeneği, genel, kısayol, ona, yazabiliyoruz, elemanına, gireriz, yapılmasını, kapsayıcısı, başlangıç, stil, birer, elemanlar, isimlendirme, kısayolu, yapalım, aslında, dir, sorgulayıp, haritanın, deyip, kazandırmak, elemanla, çözüm, köşeliye, eklememiz, gerekiyor, ovallik, elemanlarına, başarılı, örnekte, kapsayıcısını, büyüttük, ayrıca, resme, gölge, ekledik, img, gayet, hizalıyoruz, siz, kullanması, güzel, avantaj, olsa, karışıklığı, beni, düşündürdü, projenize, yazısı, bri, tanesini, seçip, ilerleyebilirsiniz, elemanı, yapan, örnekler, altına, durumda, out, hakkında, alanın, dışına, taşacak, uygulamayı, şubat, css3, resmin, kitabım, i̇letişim, sass, git, dersleri, yazılar, menüyü, gelince, veya, küçültüyoruz, transform, farenin, geldiğinde, büyüttüğümüzde, istediğimiz, sonuç, ortaya, çıktı, scale, sizlere, position, absolute, yapılanlar, serisinde, yazımda, part1, pop, bırakmıştık, benzer, yapıdaki, tasarımı, dökmeye, çalıştığımız, yazının, resmindekine, yapısı, ilan, biz, sağdaki, yanındaki, alanları, dinamik, değiştirmek, istedik, kartlarının, listelendiği, varsa, çalıştığına, çıkacağını, ilk, duyduğumda, proje, orada, uğraştığımız, girizgahtan, değinelim, ilanların, özelliği, duyunca, murat, çorlu, sayfasını, kodlarken, haritadaki, yeterli, listelenen, creating, ylgmdwo, qwgnzym, jlevin, eyvgbwy, sparshgupta007, xwaqoox, dannievinther, qbqzrwq, p_q2j8ek, zr1fiobwr2ltkuk6, 1zdrqhifox0, yceen2r2egztobxg, 2023, ainalem, mwqwmgd, alanda, özelliklerden, olsun, sonunda, vmin, kalacağı, düşündük, gelen, yeni, birini, matthewtole, inceleyip, sizelere, yazmanın, sevinci, içerisindeyim, dilimize, çevirmeye, yapıda, yapılır, üstüne, yapma, örneklerini, gördüm, geçişli, çizgileri, frontendhorse, elemanın, 1412060617398177794, miriam, xqrgjo, cursor, eyjwywdlijozfq, chromiumdev, tanımlamak, herhangi, kevinpowell, doğrusal, yüksek, tuttum, ac255e, ffb56b, right, i̇nternette, ediyorum, gezerken, gördüğüm, basit, etkisi, paylaşma, yazılarıma, devam, 1742727550579691789, rwvwolg, çizgi, mozilla, 50f1163fb23d, stable, caniuse, logrocket, complete, css_container_queries, a2dmca3wrje, piccalil, actually, coming, mxb, sorgular, pagination, takvim, robby_webdesign, 1622339281598676993, moderncss, units, fluid, typography, chriscoyier, kodcular, 1650636630401662980, jh3yy, 1734300848547627030, learnwithjason, demystifying, devtools, medium, kalınlığını, çıkması, sarasoueidan, sorunları, 76297213, 296373, bram, animating, çalışmasının, birçok, 1621181175577411588, örnek, sonuca, gitmiş, ekleyip, içini, beyaz, stackoverflow, andiicodes, dolduruyoruz, önceki, üretilmiş, teması, kullanılmıştır, hpstr, theme, jekyll, sonraki, 1536955048806080512, seyedi, ojdevxz, codewithshripal, 1572177594291830784, argyleink, 1470763758972653571, tejinder_id, istediğiniz, çizgilerinin, muhtemelen, property, animayonlu, çizgisi, dikkat, açı, tanımının, yapmalıyız, seçenekler, döndürdüğümüzde, görmek, conic, konik, hemen, bulduk, uygulamada, kullanmayız, işte, animasyon, görünmesi, before, saydam, box, shadow, inset, background, mask, köşeleri, açıyı, i̇şe, hareket, katmakta, tanımındaki, yön, açılı, verip, components, component, işlem, maarten, sorun, çözüyor, kullanmak, düşünülüyor, yaklaşımını, görene, van, projelerde, hoof, yapısına, 1700px, mobile, öncelik, verdiğimiz, işler, olduğunu, şartlar, geliştirdiğimiz, kullanıyoruz, konunun, alakası, derseniz, ekipler, örneklere, durumlarının, yapısından, başladığımız, yine, kodluyoruz, sağ, kolonda, detay, diğer, yazdık, yapılarını, alanı, genişliğinin, 1cqw, sogrularını, kendine, birimler, görüş, birimlerine, yüksekliğinin, viewport, benzerdir, bakış, alanına, değil, kapsayıcıya, 1cqh, 1cqi, örneğinde, peki, zoom, seviyesi, oynayarak, etkiyi, görebiliriz, fatihhayri, taki, 1cqb, ihtiyacımızı, öğrendiklerimize, yapmaya, çalışalım, 1cqmax, düşük, 1cqmin, birçoğumuz, olan, level, here, beta, gcnmyyr7f6w, ishadeed, article, finally, kullanılan, wwdc, yazıyı, yazdığımda, türkiye, deki, destek, oranı, features, from, net, art, direction, with, picture, zvr1wbgwvt8, oddbird, news, containerqueries, apple, videos, play, wwdc2022, 10048, 12824, görünüyordu, zamanların, satan, konuyu, tanımları, anlamak, bence, çıkan, ortada, kitaplar, bookstore, listesi, alışveriş, sepeti, ögeleri, tutup, taşıyabiliyoruz, dünyasında, mxbck, firefox, görünüm, aşağıdaki, gibi, etiketleme, göremedim, geliştirici, araçlarındaki, yerde, şey, herbiri, yapıp, kodlamak, yerine, çözebilmek, yapılı, sistemlerde,

Text of the page (random words):
css html javascript fatih hayrioğlu nun not defteri menüyü aç ana sayfa tüm yazılar css dersleri git kitap sass i̇letişim 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 kapsayıcı sorguları 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 kapsayıcı sorguları nasıl kullanılır 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 1 fr 1 fr container name sayfa içinde birden fazla kapsayıcı tanımı yapıldığında karışmaması için isimlendirme seçeneği de var i̇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 1 fr 1 fr container kısayolu 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 kapsayıcı 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 kapsayıcı 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 1 fr container card min width 1200px card container grid template columns 1 fr 1 fr container card min width 1700px card container grid template columns 1 fr 1 fr 1 fr mükemmel mükemmel mükemmel bileşen yapısına 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çlarındaki görünüm chrome ve firefox da aşağıdaki gibi bir etiketleme var safari de göremedim tarayıcı 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 i̇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 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