Tamam, yani en son check-in yaptığımızda, CSS Grid kullanıyorduk ve bunları CSS ile birleştiriyorduk clip-path ve mask süslü şekillerle ızgaralar oluşturma teknikleri.
İşte birlikte yaptığımız harika ızgaralardan sadece biri:
İkinci tur için hazır mısınız? Hala CSS Grid ile çalışıyoruz, clip-path, ve mask, ancak bu makalenin sonunda, resimleri görüntülemek için otantik, etkileşimli bir deneyim sağlayan bazı rad hover efektleri de dahil olmak üzere, ızgara üzerinde görüntüleri düzenlemenin farklı yollarını bulacağız.
Ve tahmin et ne oldu? kullanıyoruz geçen sefer kullandığımız işaretlemenin aynısı. İşte yine:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Önceki makale gibi, sadece içinde görüntülerin bulunduğu bir kaba ihtiyacımız var. Başka bir şey yok!
İç İçe Görüntü Izgarası
Geçen sefer, ızgaralarımız tipik görüntü ızgaralarıydı. Onları maskelediğimiz düzgün şekiller dışında, görüntüleri içeri nasıl yerleştirdiğimize göre oldukça standart simetrik ızgaralardı.
Bir görüntüyü ızgaranın ortasına yerleştirmeyi deneyelim:
Dört görüntü için 2✕2'lik bir ızgara ayarlayarak başlıyoruz:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Henüz karmaşık bir şey yok. Bir sonraki adım, iç içe görüntü için alan oluşturmak üzere görüntülerimizin köşesini kesmektir. ayrıntılı bir makalem var zaten kullanarak köşeler nasıl kesilir clip-path ve mask. benimkini de kullanabilirsin çevrimiçi jeneratör köşeleri maskelemek için CSS'yi almak için.
Burada ihtiyacımız olan, köşeleri eşit bir açıyla kesmektir. 90deg. aynısını kullanabiliriz konik gradyan tekniği bunu yapmak için o makaleden:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }kullanabiliriz clip-path aynı makaleden köşeleri kesmek için bir yöntem, ancak tüm görüntüler için aynı konfigürasyona sahip olduğumuz için degradelerle maskeleme burada daha uygundur - tek ihtiyacımız olan bir döndürme (değişken ile tanımlanır) --_a) efekti elde edin, böylece dış kenarlar yerine içeriden maskeliyoruz.
Artık iç içe geçmiş görüntüyü maskelenmiş alanın içine yerleştirebiliriz. İlk olarak, HTML'de beşinci bir görüntü öğemiz olduğundan emin olalım:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Onu oraya yerleştirmek için iyi ol 'mutlak konumlandırmaya güveneceğiz:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}The inset özelliği, görüntüyü tek bir bildirim kullanarak merkeze yerleştirmemizi sağlar. Resmin boyutunu biliyoruz (değişken ile tanımlanmış) --s) ve kabın boyutunun %100'e eşit olduğunu biliyoruz. Biraz matematik yapıyoruz ve her kenardan uzaklık şuna eşit olmalı: (100% - var(--s))/2.
neden kullandığımızı merak ediyor olabilirsiniz. clip-path hiç burada. Tutarlı bir boşluk olması için iç içe görüntü ile kullanıyoruz. Kaldıracak olsaydık, tüm resimler arasında aynı boşluğa sahip olmadığımızı fark ederdiniz. Bu şekilde, etrafında uygun boşluk bırakmak için beşinci görüntüden biraz kesiyoruz.
Tam kod tekrar:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Şimdi, birçoğunuz şunu da merak ediyor olabilir: Son resmi en üste yerleştirip ona bir kenarlık ekleyebildiğimiz zaman bu kadar karmaşık şeyler neden? Bu, iç içe geçmiş görüntünün altındaki görüntüleri maskesiz gizler, değil mi?
Bu doğru ve aşağıdakileri alacağız:
Yok hayır maskIçinde clip-path. Evet, kodun anlaşılması kolaydır, ancak küçük bir dezavantajı vardır: yanılsamayı mükemmel kılmak için kenarlık renginin ana arka planla aynı olması gerekir. Bu küçük dezavantaj, arka plandan bağımsız gerçek şeffaflık karşılığında kodu daha karmaşık hale getirmem için yeterli. Sınır yaklaşımının kötü veya yanlış olduğunu söylemiyorum. Arka planın bilindiği çoğu durumda tavsiye ederim. Ancak yeni şeyler keşfetmek ve en önemlisi, çevrelerine bağlı olmayan bileşenler oluşturmak için buradayız.
Bu sefer başka bir şekil deneyelim:
Bu sefer iç içe görüntüyü kare yerine daire yaptık. Bu kolay bir iş border-radius Ama bir kullanmamız gerekiyor dairesel kesim diğer görseller için Ancak bu sefer güveneceğiz. radial-gradient() yerine conic-gradient() bu güzel yuvarlak görünümü elde etmek için.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Tüm görüntüler önceki örnekle aynı konfigürasyonu kullanır, ancak her seferinde merkez noktasını güncelleriz.
Yukarıdaki şekil, her daire için merkez noktasını göstermektedir. Yine de, asıl kodda, onları birleştirirsek sürekli bir daire elde etmek için tüm noktaların aynı konumda (ızgaranın merkezinde) olmasını sağlamak için boşluğu da hesaba kattığımı fark edeceksiniz.
Şimdi düzenimizi elde ettiğimize göre, fareyle üzerine gelme efekti hakkında konuşalım. Fark etmediyseniz, havalı bir fareyle üzerine gelme efekti, iç içe görüntünün boyutunu artırır ve diğer her şeyi buna göre ayarlar. Boyutu artırmak nispeten kolay bir iştir, ancak varsayılan olarak degradeler canlandırılamadığından degradeyi güncellemek daha karmaşıktır. Bunu aşmak için kullanacağım font-size Radyal degradeyi canlandırabilmek için hack yapın.
Gradyanın kodunu kontrol ederseniz, eklediğimi görebilirsiniz. 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));olduğu biliniyor em birimler, ana öğenin font-size, yani değiştirerek font-size arasında .gallery ayrıca hesaplananı değiştirecek em değer — kullandığımız numara bu. animasyon yapıyoruz font-size değerinden 0 belirli bir değere dönüştürülür ve sonuç olarak, degrade canlandırılır, büyüyen iç içe görüntünün boyutunu takip ederek kesilen kısım daha büyük hale getirilir.
Hover efektine dahil olan kısımları vurgulayan kod:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}The font-size degradeleri veya canlandırılamayan diğer özellikleri canlandırmak istiyorsak hile yararlıdır. @property ile tanımlanan özel özellikler böyle bir sorunu çözebilir, ancak bunun için destek yazarken hala eksik.
Keşfettim font-size hile @SelenIT2 çözmeye çalışırken Twitter'da bir meydan okuma.
Başka bir şekil mi? Hadi gidelim!
Bu sefer iç içe görüntüyü eşkenar dörtgen şeklinde kırptık. Buraya nasıl geldiğimizi anlamak için bir alıştırma olarak kodu incelemene izin vereceğim. Yapının örneklerimizdekiyle aynı olduğunu fark edeceksiniz. Tek fark, şekli oluşturmak için gradyanı nasıl kullandığımızdır. Kazın ve öğrenin!
Dairesel Görüntü Izgarası
Daha da heyecan verici bir görüntü ızgarası oluşturmak için burada ve önceki makalelerde öğrendiklerimizi birleştirebiliriz. Bu sefer, ızgaramızdaki tüm görüntüleri dairesel yapalım ve fareyle üzerine gelindiğinde, diğer fotoğrafları kapsadığı için her şeyi ortaya çıkarmak için bir görüntüyü genişletelim.
Izgaranın HTML ve CSS yapısı öncekinden yeni bir şey değil, o yüzden o kısmı atlayalım ve bunun yerine istediğimiz dairesel şekle ve vurgulu efekte odaklanalım.
Kullanacağız clip-path ve onun circle() işlevi - tahmin ettiniz! - resimlerden bir daire kesin.
Bu rakam şunu gösteriyor clip-path İlk resim için kullanılır. Sol taraf görüntünün ilk durumunu, sağ taraf ise üzerine gelindiği durumu gösterir. Kullanabilirsiniz bu çevrimiçi araç oynamak ve görselleştirmek için clip-path değerleri.
Diğer resimler için dairenin merkezini güncelleyebiliriz (70% 70%) aşağıdaki kodu almak için:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}nasıl tanımladığımıza dikkat edin. clip-path içeride bir geri dönüş olarak değerler var(). Bu yol, fareyle üzerine gelindiğinde değeri ayarlayarak değeri daha kolay güncellememizi sağlar. --_c değişken. Kullanırken circle(), merkez noktasının varsayılan konumu 50% 50%, bu yüzden daha özlü kod için bunu atlıyoruz. Bu yüzden sadece ayar yaptığımızı görüyorsunuz 50% yerine 50% at 50% 50%.
Ardından, diğer resimleri kapsayabilmemiz için fareyle üzerine gelindiğinde resmimizin boyutunu ızgaranın genel boyutuna yükseltiriz. Biz de sağlamak z-index üzerine gelinen görüntüde daha yüksek bir değere sahiptir, bu nedenle bizim yığın bağlamı.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}neler oluyor
place-selfEmlak? Neden buna ihtiyacımız var ve neden her görüntünün belirli bir değeri var?
Bir önceki makalede yaşadığımız sorunu hatırlıyor musunuz? yapboz parçalarının ızgarasını oluşturmak? Taşma oluşturmak için resimlerin boyutunu büyüttük, ancak bazı resimlerin taşması yanlıştı. kullanarak onları düzelttik. place-self özelliği.
Burada da aynı sorun. Görüntülerin boyutunu artırıyoruz, böylece her biri ızgara hücrelerini aşıyor. Ama hiçbir şey yapmazsak, hepsi ızgaranın sağ ve alt taraflarında taşacak. İhtiyacımız olan şey:
- sağ alt kenarı taşan ilk görüntü (varsayılan davranış),
- sol alt kenardan taşan ikinci resim,
- sağ üst kenardan taşan üçüncü görüntü ve
- sol üst kenardan taşan dördüncü görüntü.
Bunu elde etmek için, her görüntüyü kullanarak doğru şekilde yerleştirmemiz gerekir. place-self özelliği.
Hakkında bilginiz yoksa place-self, bunun kısaltması justify-self ve align-self elemanı yatay ve dikey olarak yerleştirmek için. Bir değer aldığında, her iki hizalama da aynı değeri kullanır.
Genişleyen Görüntü Panelleri
Önceki bir makalede, her şeyi kontrol edebileceğimiz bir görüntü ızgarası için geçerli olan harika bir yakınlaştırma efekti yarattım: satır sayısı, sütun sayısı, boyutlar, ölçek faktörü, vb.
Özel bir durum, yalnızca bir sıraya ve tam genişlikte bir konteynere sahip olduğumuz klasik genişleyen panellerdi.
Bu örneği alıp şekillerle birleştireceğiz!
Devam etmeden önce, yazımı okumanızı şiddetle tavsiye ederim. diğer makale anlatmak üzere olduğumuz hilelerin nasıl çalıştığını anlamak için. Şuna bir bakın, biz de burada panel şekillerini oluşturmaya odaklanmaya devam edeceğiz.
İlk olarak, kodu basitleştirerek ve bazı değişkenleri kaldırarak başlayalım.
Yalnızca bir satıra ihtiyacımız var ve sütun sayısı resim sayısına göre ayarlanmalıdır. Bu, artık satır sayısı için değişkenlere ihtiyacımız olmadığı anlamına gelir (--n) ve sütunlar (--m ) ama kullanmamız gerekiyor grid-auto-flow: column, biz yeni resimler ekledikçe kılavuzun sütunları otomatik olarak oluşturmasına izin verir. Konteynerimiz için sabit bir yükseklik düşüneceğiz; varsayılan olarak, tam genişlikte olacaktır.
Görüntüleri eğimli bir şekle sokalım:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Bir kez daha, her görüntü kendi ızgara hücresinde bulunur, bu nedenle görüntüler arasında istediğimizden daha fazla boşluk olur:
Bir örtüşme oluşturmak için görüntülerin genişliğini artırmamız gerekiyor. değiştiriyoruz min-width: 100% ile min-width: calc(100% + var(--s)), Burada --s şekli kontrol eden yeni bir değişkendir.
Şimdi ilk ve son resimleri düzeltmemiz gerekiyor, böylece sayfadan boşluk kalmayacak şekilde akıp gidiyorlar. Başka bir deyişle, ilk görüntünün sol tarafındaki eğimi ve son görüntünün sağ tarafındaki eğimi kaldırabiliriz. yenisine ihtiyacımız var clip-path özellikle bu iki resim için.
Ayrıca taşmayı da düzeltmemiz gerekiyor. Varsayılan olarak, tüm görüntüler her iki tarafta da taşacaktır, ancak ilki için sağ tarafta bir taşma, son resim için bir sol taşma ihtiyacımız var.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Nihai sonuç, eğimli görüntülerden oluşan güzel bir genişleyen paneldir!
İstediğiniz kadar resim ekleyebiliriz ve ızgara otomatik olarak ayarlanacaktır. Artı, şekli kontrol etmek için sadece bir değeri kontrol etmemiz gerekiyor!
Aynı düzeni flexbox ile yapabilirdik, çünkü tek bir sıra elemanla uğraşıyoruz. Burada benim uygulamam.
Elbette, eğimli görüntüler harika, peki ya bir zikzak deseni? Bunu zaten alay ettim son makalenin sonu.
Burada yaptığım tek şey değiştirmek clip-path ile mask… ve tahmin et ne oldu? ayrıntılı bir makalem var zaten bu zikzak şeklini oluşturmak - bir çevrimiçi bahsetmiyorum bile kodu almak için jeneratör. Her şeyin nasıl bir araya geldiğini görüyor musunuz?
Buradaki en zor kısım, zikzakların mükemmel şekilde hizalandığından emin olmaktır ve bunun için her biri için bir ofset eklememiz gerekiyor. :nth-child(odd) görüntü öğesi.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}kullanımına dikkat edin. --_p geri dönecek olan değişken 0% ama eşit olacak --_s garip görüntüler için
İşte sorunu gösteren bir demo. Ofsetin nasıl tanımlandığını görmek için fareyle üzerine gelin --_p - hizalamayı düzeltiyor.
Ayrıca, önceki örnekte yaptığımız gibi, ilk ve son görüntü için nasıl farklı bir maske kullandığımıza dikkat edin. Sadece ilk resmin sağ tarafında ve son resmin sol tarafında bir zikzak yapmamız gerekiyor.
Ve neden kenarları yuvarlak değil? Haydi Yapalım şunu!
Kodun ürkütücü ve anlaşılması zor görünebileceğini biliyorum, ancak olan tek şey, bu ve daha önce paylaştığım diğer makalelerde ele aldığımız farklı hilelerin bir kombinasyonu. Bu durumda zikzak ve eğik şekillerle aynı kod yapısını kullanıyorum. Bu örneklerle karşılaştırın, hiçbir fark bulamazsınız! Bunlar aynı hileler yakınlaştırma etkisi hakkındaki önceki makalem. O zaman, benim kullanıyorum diğer yazı ve çevrimiçi oluşturucum bu yuvarlak şekilleri oluşturan maskenin kodunu almak için.
Zig-zag için ne yaptığımızı hatırlarsanız, tüm görüntüler için aynı maskeyi kullandık, ancak daha sonra mükemmel bir örtüşme oluşturmak için tek görüntülere bir ofset eklemek zorunda kaldık. Bu durumda, tek sayılı görüntüler için farklı bir maskeye ihtiyacımız var.
İlk maske:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
İkinci olan:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Burada yaptığım tek çaba, ikinci maskeyi boşluk değişkenini içerecek şekilde güncellemek (--g) görüntüler arasında bu boşluğu oluşturmak için.
Son dokunuş, ilk ve son görüntüyü düzeltmektir. Önceki tüm örneklerde olduğu gibi, ilk görüntü düz bir sol kenara ihtiyaç duyarken, sonuncusu düz bir sağ kenara ihtiyaç duyar.
İlk görüntü için, sahip olması gereken maskeyi her zaman biliyoruz, bu aşağıdaki gibidir:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Son görüntü için, öğelerin sayısına bağlıdır, bu nedenle o öğenin olup olmadığı önemlidir. :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}Bu kadar! Üç farklı düzen ama her seferinde aynı CSS numaraları:
- yakınlaştırma efekti oluşturmak için kod yapısı
- şekilleri oluşturmak için bir maske veya klip yolu
- bazı durumlarda mükemmel bir örtüşmeye sahip olduğumuzdan emin olmak için tek öğeler için ayrı bir yapılandırma
- şekli yalnızca bir tarafta tutmak için ilk ve son görüntü için özel bir yapılandırma.
Ve işte hepsinin bir arada olduğu büyük bir demo. Tek ihtiyacınız olan, görmek istediğiniz düzeni etkinleştirmek için bir sınıf eklemek.
Ve işte Flexbox uygulamasına sahip olanı
Tamamlayan
Oof, işimiz bitti! Bu makale ile sonuncusu arasında birçok CSS hilesi ve örneği olduğunu biliyorum, burada yazdığım diğer makalelerden bahsettiğim diğer tüm hilelerden bahsetmiyorum bile. Her şeyi bir araya getirmek zamanımı aldı ve her şeyi bir anda anlamak zorunda değilsiniz. Bir okuma size tüm düzenler hakkında iyi bir genel bakış sağlayacaktır, ancak tüm püf noktalarını kavramak için makaleyi bir kereden fazla okumanız ve her bir örneğe odaklanmanız gerekebilir.
İşaretlemedeki resim sayısı dışında HTML'ye hiç dokunmadığımızı fark ettiniz mi? Yaptığımız tüm düzenler, bir resim listesinden başka bir şey olmayan aynı HTML kodunu paylaşır.
Bitirmeden önce size son bir örnek bırakacağım. Serin bir vurgulu efektli iki anime karakteri arasında bir "karşı".
Senden ne haber? Öğrendiklerinize dayanarak bir şeyler yaratabilir misiniz? Karmaşık olması gerekmiyor - o anime eşleşmesinde yaptığım gibi havalı veya komik bir şey hayal edin. Sizin için iyi bir alıştırma olabilir ve yorum bölümünde mükemmel bir koleksiyonla bitirebiliriz.
