Bir süre önce, Geoff bir mektup yazdı. havalı bir vurgulu efekti hakkında makale. Efekt, CSS sözde öğelerinin, dönüşümlerinin ve geçişlerinin bir kombinasyonuna dayanır. Birçok yorum, aynı etkinin arka plan özellikleri kullanılarak yapılabileceğini göstermiştir. Geoff, ilk düşüncesinin bu olduğundan bahsetti ve ben de böyle düşünüyordum. Üzerine düştüğü sözde öğenin kötü olduğunu söylemiyorum, ancak aynı etkiyi elde etmek için farklı yöntemler bilmek ancak iyi bir şey olabilir.

Bu gönderide, bu vurgulu efekti yeniden işleyeceğiz, ancak onu yalnızca CSS kullanan diğer vurgulu efekt türlerine de genişleteceğiz. background özellikleri.

Görebilirsiniz background bu demoda iş başında olan özelliklerin yanı sıra özel özellikleri nasıl kullanabileceğimizi ve calc() daha fazlasını yapma işlevi. Bunların hepsini nasıl birleştireceğimizi öğreneceğiz, böylece güzel bir şekilde optimize edilmiş kodla kalıyoruz!

Fareyle üzerine gelme efekti #1

Geoff'un makalesinde detaylandırdığı etkinin yeniden üretimi olan ilk efektle başlayalım. Bu etkiyi elde etmek için kullanılan kod şudur:

.hover-1 {
  background: linear-gradient(#1095c1 0 0) var(--p, 0) / var(--p, 0) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
  color: #fff;
}

Renk geçişini (isteğe bağlı) atlarsak, efekti elde etmek için yalnızca üç CSS bildirimine ihtiyacımız olur. Muhtemelen kodun ne kadar küçük olduğuna şaşırmışsınızdır, ancak oraya nasıl geldiğimizi göreceksiniz.

Önce basit bir şeyle başlayalım background-size geçiş:

Doğrusal bir gradyanın boyutunu canlandırıyoruz 0 100% için 100% 100%. Bu genişlik gidiyor demektir 0 için 100% arka planın kendisi tam yükseklikte kalırken. Şimdiye kadar karmaşık bir şey yok.

Optimizasyonlarımıza başlayalım. İlk önce gradyanımızı rengi yalnızca bir kez kullanacak şekilde dönüştürüyoruz:

background-image: linear-gradient(#1095c1 0 0);

Sözdizimi biraz garip görünebilir, ancak tarayıcıya iki renk durağına bir rengin uygulandığını söylüyoruz ve bu, CSS'de bir degrade tanımlamak için yeterli. Her iki renk durağı da 0, böylece tarayıcı otomatik olarak sonuncuyu yapar 100% ve degrademizi aynı renkle doldurur. Kısayollar, FTW!

İle background-size, yüksekliği atlayabiliriz çünkü degradeler varsayılan olarak tam yüksekliktedir. şuradan bir geçiş yapabiliriz background-size: 0 için background-size: 100%.

.hover-1 {
  background-image: linear-gradient(#1095c1 0 0);
  background-size: 0;
  background-repeat: no-repeat;
  transition: .4s;
}
.hover-1:hover {
  background-size: 100%;
}

Tekrarını önlemek için özel bir özellik tanıtalım. background-size:

.hover-1 {
  background-image: linear-gradient(#1095c1 0 0);
  background-size: var(--p, 0%);
  background-repeat: no-repeat;
  transition: .4s;
}
.hover-1:hover {
  --p: 100%;
}

tanımlamıyoruz --p başlangıçta, bu nedenle geri dönüş değeri (0% bizim durumumuzda) kullanılacaktır. Fareyle üzerine gelindiğinde, geri dönüşün yerini alan bir değer tanımlarız ( 100%).

Şimdi, aşağıdakileri elde etmek için steno versiyonunu kullanarak tüm arka plan özelliklerini birleştirelim:

.hover-1 {
  background: linear-gradient(#1095c1 0 0) left / var(--p, 0%) no-repeat;
  transition: .4s;
}
.hover-1:hover {
  --p: 100%;
}

Yaklaşıyoruz! tanıttığımı unutmayın. left değer (için background-position) boyutu tanımlarken zorunludur background kısa gösterim. Ayrıca, vurgulu efektimizi elde etmek için yine de buna ihtiyacımız var.

Fareyle üzerine gelindiğinde konumu da güncellememiz gerekiyor. Bunu iki adımda yapabiliriz:

1. Fareyle üzerine gelindiğinde sağdan boyutu artırın.
2. Farenin solundan boyutu küçültün.

Bunu yapmak için, güncellememiz gerekiyor background-position hover üzerinde de:

Kodumuza iki şey ekledik:

• A background-position değeri right Üzerinde gezinme
• A transition-duration of 0s üzerinde background-position

Bu, fareyle üzerine gelindiğinde anında değiştirdiğimiz anlamına gelir. background-position itibaren left (bakın, bu değere ihtiyacımız vardı!) right böylece arka planın boyutu sağ taraftan artacaktır. Ardından, fare imleci bağlantıdan ayrıldığında, geçiş tersten oynatılır. right için left, arka planın boyutunu sol taraftan küçültüyormuşuz gibi görünüyor. Hover efektimiz tamamlandı!

Ama sadece üç bildirime ihtiyacımız olduğunu söyledin ve dört tane var.

Bu doğru, güzel av. bu left ve right değerler değiştirilebilir 0 0 ve 100% 0, sırasıyla; ve gradyanımız varsayılan olarak zaten tam yükseklikte olduğundan, şunu kullanarak elde edebiliriz: 0 ve 100%.

.hover-1 {
  background: linear-gradient(#1095c1 0 0) 0 / var(--p, 0%) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
  background-position: 100%;
}

Bakın nasıl background-position ve --p aynı değerler mi kullanılıyor? Şimdi kodu üç bildirime indirebiliriz:

.hover-1 {
  background: linear-gradient(#1095c1 0 0) var(--p, 0%) / var(--p,0%) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
}

özel mülk --p hem arka plan konumunu hem de boyutunu tanımlar. Fareyle üzerine gelindiğinde, ikisini de güncelleyecektir. Bu, özel özelliklerin gereksiz kodu azaltmamıza ve özellikleri birden fazla kez yazmaktan kaçınmamıza nasıl yardımcı olabileceğini gösteren mükemmel bir kullanım örneğidir. Özel özellikleri kullanarak ayarımızı tanımlarız ve ikincisini yalnızca üzerine gelindiğinde güncelleriz.

Ancak Geoff'in tarif ettiği etki, soldan başlayıp sağda biten tersini yapıyor. Aynı değişkene güvenemeyeceğimiz göründüğünde bunu nasıl yaparız?

Yine de bir değişken kullanabilir ve ters etkiyi elde etmek için kodumuzu biraz güncelleyebiliriz. İstediğimiz şey gitmek 100% için 0% yerine 0% için 100%. bir farkımız var 100% kullanarak ifade edebileceğimiz calc(), Şöyle:

.hover-1 {
  background: linear-gradient(#1095c1 0 0) calc(100% - var(--p,0%)) / var(--p,0%) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
}

--p değişecek 0% için 100%, ancak arka planın konumu değişecektir. 100% için 0%, Sayesinde calc().

Hala üç bildirimimiz ve bir özel özelliğimiz var, ancak farklı bir etki var.

Bir sonraki vurgulu efektine geçmeden önce, muhtemelen fark etmiş olduğunuz önemli bir şeyin altını çizmek istiyorum. Özel özelliklerle uğraşırken kullanıyorum 0% (birimle) birimsiz yerine 0. Birimsiz sıfır, özel özellik tek başınayken çalışabilir, ancak içeride başarısız olur calc() birimi açıkça tanımlamamız gereken yer. Bu tuhaflığı açıklamak için başka bir makaleye ihtiyacım olabilir, ancak özel özelliklerle uğraşırken her zaman birimi eklemeyi unutmayın. StackOverflow'ta iki cevabım var (okuyun ve okuyun) daha fazla ayrıntıya girer.

Fareyle üzerine gelme efekti #2

Bu etki için daha karmaşık bir geçişe ihtiyacımız var. Neler olduğunu anlamak için adım adım bir resme bakalım.

İlk önce bir background-position geçiş ve ardından bir background-size XNUMX. Bunu koda çevirelim:

.hover-2 {
  background-image: linear-gradient(#1095c1 0 0);
  background-size: 100% .08em; /* .08em is our fixed height; modify as needed. */
  background-position: /* ??? */;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
.hover-2:hover {
  transition: background-size .3s .3s, background-position .3s;
  background-size: 100% 100%;
  background-position: /* ??? */;
}

İki geçiş değerinin kullanımına dikkat edin. Fareyle üzerine gelindiğinde, önce konumu ve sonra boyutu değiştirmemiz gerekiyor, bu yüzden boyuta bir gecikme ekliyoruz. Fare dışarı çıktığında, tersini yaparız.

Şimdi soru şu: hangi değerleri kullanıyoruz background-position? Yukarıdakileri boş bıraktık. bu background-size değerler önemsizdir, ancak background-position değiller. Ve gerçek konfigürasyonu korursak, gradyanımızı hareket ettiremeyiz.

Gradyanımızın genişliği şuna eşittir: 100%, bu yüzden yüzde değerlerini kullanamayız background-position hareket ettirmek için.

ile kullanılan yüzde değerleri background-position özellikle ilk kez kullandığınızda her zaman bir acıdır. Davranışları sezgisel değildir, ancak iyi tanımlanmış ve arkasındaki mantığı alırsak anlaşılması kolaydır. Neden bu şekilde çalıştığını tam olarak açıklamak için başka bir makale gerektiğini düşünüyorum, ama işte burada Stack Overflow'ta yayınladığım başka bir "uzun" açıklama. Bu cevabı okumak için birkaç dakikanızı ayırmanızı tavsiye ederim, daha sonra bana teşekkür edeceksiniz!

İşin püf noktası, genişliği farklı bir şeyle değiştirmektir. 100%. hadi kullanalım 200%. Öğeyi aşan arka plan hakkında endişelenmiyoruz çünkü taşma yine de gizli.

.hover-2 {
  background-image: linear-gradient(#1095c1 0 0);
  background-size: 200% .08em;
  background-position: 200% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
.hover-2:hover {
  transition: background-size .3s .3s, background-position .3s;
  background-size: 200% 100%;
  background-position: 100% 100%;
}

Ve işte elde ettiğimiz şey:

Kodumuzu optimize etme zamanı. İlk vurgulama efektinden öğrendiğimiz fikirleri alırsak, bu işi yapmak için stenografi özelliklerini kullanabilir ve daha az bildirim yazabiliriz:

.hover-2 {
  background:
    linear-gradient(#1095c1 0 0) no-repeat
    var(--p, 200%) 100% / 200% var(--p, .08em);
  transition: .3s var(--t, 0s), background-position .3s calc(.3s - var(--t, 0s));
}
.hover-2:hover {
  --p: 100%;
  --t: .3s;
}

Tüm arka plan özelliklerini steno versiyonunu kullanarak bir araya getiriyoruz, sonra kullanıyoruz --p değerlerimizi ifade etmek. Boyutlar değişir .08em için 100% ve konumundan 200% için 100%

Ayrıca başka bir değişken kullanıyorum --t , geçiş özelliğini optimize etmek için. Fareyle üzerine gelindiğinde, bir .3s bize bunu veren değer:

transition: .3s .3s, background-position .3s 0s;

Fare çıkışında, --t tanımsızdır, bu nedenle geri dönüş değeri kullanılacaktır:

transition: .3s 0s, background-position .3s .3s;

Olmamalı mıydık? background-size içinde transition?

Bu gerçekten yapabileceğimiz başka bir optimizasyon. Herhangi bir özellik belirtmezsek, bu, özelliklerin "tümü" anlamına gelir, bu nedenle geçiş, özellikler (dahil olmak üzere) "tümü" için tanımlanır. background-size ve background-position). Sonra tekrar için tanımlanır background-position bunun için tanımlamaya benzer background-size, Daha sonra background-position.

“Benzer”, bir şeyin “aynı” olduğunu söylemekten farklıdır. Fareyle üzerine gelindiğinde daha fazla özelliği değiştirirseniz bir fark göreceksiniz, bu nedenle son optimizasyon bazı durumlarda uygun olmayabilir.

Yine de kodu optimize edip yalnızca bir özel özellik kullanabilir miyiz?

Evet yapabiliriz! Ana Tudor paylaştı nasıl oluşturulacağını açıklayan harika bir makale KURU anahtarlama burada bir özel özellik birden çok özelliği güncelleyebilir. Burada ayrıntılara girmeyeceğim, ancak kodumuz şu şekilde revize edilebilir:

.hover-2 {
  background:
    linear-gradient(#1095c1 0 0) no-repeat
    calc(200% - var(--i, 0) * 100%) 100% / 200% calc(100% * var(--i, 0) + .08em);
  transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - calc(var(--i, 0) * .3s));
}
.hover-2:hover {
  --i: 1;
}

The --i özel özellik başlangıçta tanımsızdır, bu nedenle geri dönüş değeri, 0, kullanıldı. Vurgulu olsa da, değiştiririz 0 ile 1. Her iki durum için de matematik yapabilir ve her biri için değerleri alabilirsiniz. Bu değişkeni, üzerine gelindiğinde tüm değerlerimizi aynı anda güncelleyen bir "anahtar" olarak görebilirsiniz.

Yine, oldukça havalı bir fareyle üzerine gelme efekti için yalnızca üç bildirime geri döndük!

Fareyle üzerine gelme efekti #3

Bu efekt için bir yerine iki gradyan kullanacağız. Birden fazla degradeyi birleştirmenin, süslü vurgulu efektler oluşturmanın başka bir yolu olduğunu göreceğiz.

İşte ne yaptığımızın bir diyagramı:

İşte bunun CSS'de nasıl göründüğü:

.hover-3 {
  background-image:
    linear-gradient(#1095c1 0 0),
    linear-gradient(#1095c1 0 0);
  background-repeat: no-repeat;
  background-size: 50% .08em;
  background-position:
    -100% 100%,
    200% 0;
  transition: background-size .3s, background-position .3s .3s;
}
.hover-3:hover {
  background-size: 50% 100%;
  background-position:
    0 100%,
    100% 0;
  transition: background-size .3s .3s, background-position .3s;
}

Kod, ele aldığımız diğer vurgulu efektlerle neredeyse aynı. Tek fark, iki farklı pozisyona sahip iki degradeye sahip olmamızdır. Konum değerleri garip görünebilir, ancak yine de bu, yüzdelerin konum değerleriyle nasıl çalıştığıyla ilgilidir. background-position CSS'deki mülk, bu yüzden okumanızı şiddetle tavsiye ederim Yığın Taşması yanıtı cesur ayrıntılara girmek istiyorsanız.

Şimdi optimize edelim! Fikri artık anladınız - steno özellikleri, özel özellikleri kullanıyoruz ve calc() işleri toparlamak için.

.hover-3 {
  --c: no-repeat linear-gradient(#1095c1 0 0);
  background:
    var(--c) calc(-100% + var(--p, 0%)) 100% / 50% var(--p, .08em),
    var(--c) calc( 200% - var(--p, 0%)) 0    / 50% var(--p, .08em);
  transition: .3s var(--t, 0s), background-position .3s calc(.3s - var(--t, 0s));
}
.hover-3:hover {
  --p: 100%;
  --t: 0.3s;
}

Ekstra bir özel özellik ekledim, --c, her iki yerde de aynı gradyan kullanıldığından gradyanı tanımlar.

Ben kullanıyorum 50.1% bunun yerine bu demoda 50% degradeler arasında bir boşluk görünmesini engellediği için arka plan boyutu için. ben de ekledim 1% benzer nedenlerle pozisyonlara

Switch değişkenini kullanarak ikinci optimizasyonu yapalım:

.hover-3 {
  --c: no-repeat linear-gradient(#1095c1 0 0);
  background:
    var(--c) calc(-100% + var(--i, 0) * 100%) 100% / 50% calc(100% * var(--i, 0) + .08em),
    var(--c) calc( 200% - var(--i, 0) * 100%) 0 / 50% calc(100% * var(--i, 0) + .08em);
  transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
}
.hover-3:hover {
  --i: 1;
}

Buradaki kalıpları görmeye başladınız mı? Yaptığımız etkilerin zor olması o kadar da zor değil. Daha çok kod optimizasyonunun “son adımı”. Çok sayıda özelliğe sahip ayrıntılı kod yazarak başlıyoruz, ardından işleri olabildiğince basitleştirmek için basit kuralları izleyerek (örn. stenografi kullanmak, varsayılan değerleri kaldırmak, gereksiz değerlerden kaçınmak vb.) azaltıyoruz.

Fareyle üzerine gelme efekti #4

Bu son efekt için zorluk seviyesini yükselteceğim, ancak diğer örneklerden yeterince bilginiz var ki, bununla ilgili herhangi bir sorun yaşayacağınızdan şüpheliyim.

Bu vurgulu efekti, iki konik gradyan ve daha fazla hesaplamaya dayanır.

İlk olarak Adım 1'de sıfır boyutlu her iki gradyanımız var. Adım 2'de her birinin boyutunu büyütüyoruz. Genişliklerini Adım 3'te gösterildiği gibi öğeyi tamamen kaplayana kadar artırmaya devam ediyoruz. konumlarını güncellemek için alt Bu, vurgulu efektin "sihirli" kısmıdır. Her iki degrade de aynı renklendirmeyi kullanacağından, 4. Adımdaki konumlarını değiştirmek görsel bir fark yaratmayacaktır - ancak 5. Adımda fareyi küçülttüğümüzde bir fark göreceğiz.

Adım 2 ve Adım 5'i karşılaştırırsanız, farklı bir eğilimimiz olduğunu görebilirsiniz. Bunu koda çevirelim:

.hover-4 {
  background-image:
    conic-gradient(/* ??? */),
    conic-gradient(/* ??? */);
  background-position:
    0 0,
    100% 0;
  background-size: 0% 200%;
  background-repeat: no-repeat;
  transition: background-size .4s, background-position 0s;
}
.hover-4:hover {
  background-size: /* ??? */ 200%;
  background-position:
    0 100%,
    100% 100%;
}

Pozisyonlar oldukça açık. Bir degrade sol üstte başlar (0 0) ve sol altta biter (0 100%) diğeri sağ üstte başlarken (100% 0) ve sağ altta biter (100% 100%).

kullanıyoruz transition onları ortaya çıkarmak için arka plan konumları ve boyutları üzerinde. için sadece bir geçiş değerine ihtiyacımız var. background-size. Ve daha önce olduğu gibi, background-position anında değişmesi gerekiyor, bu yüzden bir 0s geçiş süresi için değer.

Boyutlar için, her iki degradenin de 0 genişliğe ve öğe yüksekliğinin iki katına sahip olması gerekir (0% 200%). Fareyle üzerine gelindiğinde boyutlarının nasıl değiştiğini daha sonra göreceğiz. İlk önce gradyan konfigürasyonunu tanımlayalım.

Aşağıdaki şema, her bir degradenin konfigürasyonunu göstermektedir:

İkinci gradyan için (yeşil renkle gösterilmiştir) içinde kullanmak için yüksekliği bilmemiz gerektiğini unutmayın. conic-gradient yaratıyoruz. Bu sebeple ekleyeceğim line-height bu, elemanın yüksekliğini ayarlar ve ardından, dışarıda bıraktığımız konik gradyan değerleri için aynı değeri deneyin.

.hover-4 {
  --c: #1095c1;
  line-height: 1.2em;
  background-image:
    conic-gradient(from -135deg at 100%  50%, var(--c) 90deg, #0000 0),
    conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0);
  background-position:
    0 0,
    100% 0;
  background-size: 0% 200%;
  background-repeat: no-repeat;
  transition: background-size .4s, background-position 0s;
}
.hover-4:hover {
  background-size: /* ??? */ 200%;
  background-position:
    0 100%,
    100% 100%;
}

Geriye kalan son şey arka planın boyutunu bulmak. Sezgisel olarak, her degradenin öğenin genişliğinin yarısını alması gerektiğini düşünebiliriz, ancak bu aslında yeterli değildir.

Yüksekliğe eşit bir boşluk elde ederiz, bu yüzden aslında yapmamız gereken her degradenin boyutunu artırmaktır. yüksekliğin yarısı tüm öğeyi kaplamaları için üzerine gelin.

.hover-4:hover {
  background-size: calc(50% + .6em) 200%;
  background-position:
    0 100%,
    100% 100%;
}

Bunları önceki örneklerde olduğu gibi optimize ettikten sonra elde ettiğimiz şey:

.hover-4 {
  --c: #1095c1;
  line-height: 1.2em;
  background:
    conic-gradient(from -135deg at 100%  50%, var(--c) 90deg, #0000 0)
      0  var(--p, 0%) / var(--s, 0%) 200% no-repeat,
    conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0)
      100% var(--p, 0%) / var(--s, 0%) 200% no-repeat;
  transition: .4s, background-position 0s;
}
.hover-4:hover {
  --p: 100%;
  --s: calc(50% + .6em);
}

Yalnızca bir özel özelliği olan sürüm ne olacak?

Bunu senin için bırakacağım! Dört benzer vurgulu efekte baktıktan sonra, son optimizasyonu tek bir özel özelliğe indirebilmelisiniz. Çalışmanızı yorum bölümünde paylaşın! Ödül yok, ancak herkesin yararına olan farklı uygulamalar ve fikirlerle sonuçlanabilir!

Bitirmeden önce, şu son vurgulu efektin bir versiyonunu paylaşmama izin verin. ana tudor pişmiş. Bu bir gelişme! Ancak bilinen bir hata nedeniyle Firefox desteğinden yoksun olduğunu unutmayın. Yine de, daha da havalı vurgulu efektler oluşturmak için degradelerin karışım modlarıyla nasıl birleştirileceğini gösteren harika bir fikir.

Tamamlayan

Dört süper havalı vurgulu efekt yaptık! Ve farklı efektler olsalar da, hepsi aynı CSS kullanma yaklaşımını benimser. background özellikler, özel özellikler ve calc(). Farklı kombinasyonlar, hepsi bize temiz, bakımı kolay kod bırakan aynı teknikleri kullanarak farklı sürümler oluşturmamızı sağladı.

Fikir almak isterseniz şöyle yaptım 500 koleksiyon (evet, 500!) 400'ü sahte öğeler olmadan yapılan vurgulu efektler. Bu yazıda ele aldığımız dördü, buzdağının sadece görünen kısmı!