2016-03-26 13 views
2

Ekran görüntüsünde olduğu gibi değişken renklere sahip düzensiz bir kenarlık oluşturmaya ne dersiniz? CSS üst üste gelen renklerle düzensiz kenarlık oluşturma

enter image description here

bir grafik düzenleyici bir sınır görüntü oluşturma ve docs tarif edildiği gibi daha sonra border-image özelliğini kullanarak değerlendirmiştir. Bununla birlikte, bu teknik, çok sayıda arka plan renginin (ekran görüntüsünde gri ve beyazın) kenarlık "dalgalarına" girme etkisine ulaşmamı sağlamaya izin vermeyecektir.

Başka bir çözüm, sadece Photoshop'un arka plan beyaz ve gri tüm arka planını üretmek ve sadece web sitesinde kullanmak olacaktır. Bunu performans nedenleriyle gerçekten önlemek istedim ve gri, kontrol edilmiş bir desen parçası üretmeyi ve tekrarlamayı tercih ediyorum. Ayrıca, ekran görüntüsünde de gördüğünüz gibi, karanlık parça bir karuselden bir görüntüdür - görüntülerin hepsi farklı renklerde gelir, böylece karusel kabına bir kenarlık resmi uygulamak da bir çözüm değildir.

Bazı tavsiyeler için minnettarım. Teşekkürler.

+0

İlgili cevap - http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/25903879#25903879. Bunu, bu cevapta 'radyal-degrade' kullanarak yapabilirsiniz, ancak renklerin sırası değiştirilmelidir. – Harry

+0

[Here] (https: // jsfiddle.net/k3mj2om3 /) referansınız için yukarıda verilen cevapta olduğu gibi aynı yaklaşımı kullanan bir demodur. * Farklı renklerde gelecektir * bölüm degrade renklerini değiştirerek elle ele alınmalıdır. Bunun bir yolu olduğunu sanmıyorum (eğer SVG kullanıyor olsanız bile, "clip-path" temelli bir yaklaşıma gitmedikçe renklerin işlenmesi gerekir - ki bu IE'de desteklenmez). – Harry

+0

** Potansiyel yakın seçmenlere not ** - Bağladığım konu sadece kullanıcıya fikir verebilecek bir konu. Bu soru ** bu soruda belirtilmiş birkaç ekstra koşul olduğundan, bunun bir kopyası değil. – Harry

cevap

8

kullanma SVG:

Sen SVG'yi kullanarak bunu yapabilirsiniz. Bu yaklaşımın oldukça karmaşık olduğunu söyleyebilirim çünkü yaklaşım tekrarlanan daireler için desenler kullanıyor, şeffaf kesimleri üretmeye yarayan desene sahip bir maske. Bu maske daha sonra tam etkiyi üretmek için görüntüye uygulanır. Bu bence, sizin istediğinize en yakın ve aynı zamanda iyi bir tarayıcı desteğine sahip. IE10 +, Edge, Firefox, Chrome, Opera ve Safari'de iyi çalışıyor.

Ancak dikkat edilmesi gereken birkaç nokta vardır - (1) Bir şekilde carousel çalışmalarınızı SVG image ile yapmanız gerekir, aksi halde maskenin etkisi olmaz (2) dairelerin yarıçapı kabın genişliği olarak değişir değiştirin ve böylece sabit boyutlu bir kapsayıcıyı (veya) JS kullanarak viewBox özniteliğine atama yapmalısınız (veya yarıçapın değişmesini önlemek için bir ayar bulmaya çalışıyorum, hiç bir şey bilmiyorum). CSS kullanarak

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 100px; 
 
} 
 
.masked svg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
path { 
 
    fill: #fff; 
 
} 
 
image { 
 
    mask: url("#mask"); 
 
}
<div class='masked'> 
 
    <svg viewBox='0 0 1200 100' preserveAspectRatio='none'> 
 
    <defs> 
 
     <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100"> 
 
     <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" /> 
 
     </pattern> 
 
     <mask id="mask"> 
 
     <rect height="100%" width="100%" fill="url(#circles)" /> 
 
     </mask> 
 
    </defs> 
 
    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" /> 
 
    </svg> 
 
    Lorem Ipsum Dolor Sit Amet... 
 
</div>

:

Bu CSS maskeleri kullanılarak yapılabilir ama ne yazık ki bu özellik için tarayıcı desteği korkunç edilebilir. Şu anda yalnızca WebKit destekli tarayıcılarda () desteklenen . Diğer tarayıcıların desteklenmesi gerekmiyorsa, bu harika bir seçenektir. Yapmamız gereken tek şey, aşağıdaki snippette olduğu gibi maske için radyal bir degrade (X ekseninde tekrarlanan) oluşturmak, istenen büyüklüğü vermek ve buna göre konumlandırmaktır.

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 80px; 
 
} 
 
.masked:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/1000/100/nature/1); 
 
    -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%); 
 
    -webkit-mask-size: 100% calc(100% - 12px), 12px 12px; 
 
    -webkit-mask-position: 0% 0%, 0px 68px; 
 
    -webkit-mask-repeat: repeat-x; 
 
}
<div class="masked">Lorem Ipsum Dolor Sit Amet</div>

+1

Merhaba, vay, bu ciddi bir css sihirbazı oluyor :) Her ne kadar nihayet, arka planımın imajlarını kullanmanın çok daha basit bir yaklaşımıyla çözülmekteydim, bu cevap kesinlikle çok değerliydi ve benzer sorunlara çözüm getirecekti. Çoğu durumda. Teşekkürler Harry! – luqo33

+1

Hoşgeldin @ luqo33. Size yardımcı olmaktan mutluluk duyuyorum :) (PS: Soruna SVG etiketi eklediğimde sorun olur mu, çünkü sizin de söylediğiniz gibi, yaklaşım başkalarına da yardımcı olabilir ve etiket ekleyerek bulmayı kolaylaştırır). Etiket ekleme – Harry

+1

iyi bir fikir. – luqo33

İlgili konular