Css görüntü kırpma. CSS Kullanarak Uzun Metin Nasıl Kesilir

Sabit yükseklik ve genişlikte bir blok içinde görüntülenmesi gereken isteğe bağlı uzunlukta bir metin vardır. Bu durumda, metin tam olarak uymuyorsa, verilen bloğa tamamen uyan bir metin parçası görüntülenmeli ve ardından bir üç nokta ayarlanmalıdır.

Bu görev oldukça yaygındır ancak aynı zamanda göründüğü kadar önemsiz de değildir.

CSS'de tek satırlık metin seçeneği

Bu durumda text-overflow: elips özelliğini kullanabilirsiniz. Bu durumda konteynerin şu özelliğe sahip olması gerekir: taşma eşit gizlenmiş veya klips

Blok ( genişlik: 250 piksel; beyaz boşluk: nowrap; taşma: gizli; metin taşması: üç nokta;)

CSS'de çok satırlı metin seçeneği

Çok satırlı metni kırpmanın ilk yolu kullanmaktır. CSS özellikleri sözde öğeleri uygula :önce Ve :sonrasında. HTML işaretlemesine başlayalım

Ve şimdi mülklerin kendileri

Box ( taşma : gizli ; yükseklik : 200 piksel ; genişlik : 300 piksel ; satır yüksekliği : 25 piksel ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ; ) .box > * :first -child ( float : sağ ; genişlik : 100% ; sol kenar boşluğu : -5px ; ) .box :after ( content : "\02026" ; kutu boyutlandırma : içerik kutusu ; float : sağ ; konum : göreceli ; top : -25 piksel ; genişlik: 3 em; sağ dolgu: 5 piksel; arka plan boyutu: %100 %100; (255, 255, 255, 0), beyaz %50;

Başka bir yol da, çok satırlı metin için sütun genişliğini ayarladığımız sütun genişliği özelliğini kullanmaktır. Ancak bu yöntemi kullanırken sonuna üç nokta koymak mümkün olmayacaktır. HTML:

Block ( overflow : gizli ; yükseklik : 200 piksel ; genişlik : 300 piksel ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; sütun genişliği : 150px ; yükseklik : 100% ; )

Tarayıcılar için CSS kullanarak çok satırlı metni çözmenin üçüncü bir yolu var Web kiti. İçinde önekle birlikte birkaç spesifik özellik kullanmamız gerekecek -web kiti. Bunlardan en önemlisi -webkit-line-clamp'tır ve bir blokta çıkarılacak satır sayısını belirtmenize olanak tanır. Çözüm güzel ancak sınırlı sayıda tarayıcı grubunda çalışması nedeniyle oldukça sınırlı

Blok ( taşma : gizli ; metin taşması : üç nokta ; görüntüleme : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : dikey ; )

JavaScript'te çok satırlı metin seçeneği

Burada, metnimizin başlangıçta yerleştirildiği ek bir görünmez blok kullanılır, ardından bu bloğun yüksekliği istenen bloğun yüksekliğinden küçük veya ona eşit oluncaya kadar her seferinde bir karakter kaldırılır. Ve sonunda metin orijinal bloğa taşınır.

var bloğu = belge. querySelector(".block"), metin = blok. innerHTML, klon = belge. createElement("div"); klon tarzı. konum = "mutlak"; klon tarzı. görünürlük = "gizli"; klon tarzı. genişlik = blok. clientWidth + "px"; klon içHTML = metin; belge. vücut. AppendChild(klon); var l = metin . uzunluk - 1; for (; l >= 0 && clone. clientHeight > blok. clientHeight; -- l) ( clone.innerHTML = text. substring (0, l) + "...";) blok. içHTML = klon . içHTML;

Bu, jQuery eklentisiyle aynıdır:

(function ($ ) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( konum: "mutlak" , görünürlük : "gizli" , yükseklik : "otomatik" )); ( clone .text ( text .substring ( 0 , l ) + "..." ); el .text ( clone .remove ( ) ); ( bunu döndür . her biri (işlev () ( truncate ( $ ( this )); )( jQuery ));

Herkese merhaba, benim adım Anna Blok ve bugün grafik programları kullanmadan görsellerin nasıl kırpılacağından bahsedeceğiz.

Bu nerede yararlı olabilir?

Her şeyden önce, resim içeren içeriğin büyük olasılıkla belirli bir blok için kırpılmayacağı sitelerde.

Çarpıcı bir örnek: WordPress'te blog.

Diyelim ki makalenizin kapağının 1:1 (kare) en boy oranına sahip olmasını istiyorsunuz. Eylemleriniz:

1. İnternetten uygun bir görsel indirin;
2. Photoshop'ta istediğiniz oranlarda kırpın;
3. Bir makale yayınlayın.

Siteyi ziyaret ettiğinizde beklediğiniz sonucu göreceksiniz.

Ancak diyelim ki Photoshop'ta görseli kırpmayı unuttunuz ve internetten kapak olarak rastgele bir görsel indirdiniz, o zaman ne olacak? Doğru, düzen bozulacak. Ve eğer hiç CSS kullanmadıysanız, bir HD görüntü metnin tüm görünümünü tamamen engelleyebilir. Bu nedenle, görüntüleri kırpabilmek önemlidir. CSS yardımı stiller.

Bunun yalnızca CSS kullanılarak değil aynı zamanda SVG kullanılarak nasıl uygulanabileceğine dair farklı durumlara bakalım.

örnek 1

Arka plan resmi kullanılarak yerleştirilen resmi kırpmayı deneyelim. Küçük bir HTML işaretlemesi oluşturalım

CSS stiline geçelim. arka plan resmini kullanarak bir resim ekliyoruz, resmimiz için çerçeveleri belirliyoruz, arka plan konumunu kullanarak resmi ortalıyoruz ve arka plan boyutunu ayarlıyoruz:

jpg); arka plan konumu: merkez merkez; arka plan boyutu:kapak; genişlik:300 piksel; yükseklik:300 piksel; )

Bu, bir görüntüyü kırpmanın ilk ve en basit yöntemiydi. Şimdi ikinci örneğe bakalım.

Örnek 2

İçinde şimdi biçimlendireceğimiz bir görselin bulunduğu img etiketinin bulunduğu aynı kutu konteynerinin hala elimizde olduğunu varsayalım.

Ayrıca yaratacağımız nesneye göre imajımızı da ortalayacağız. Ve oldukça nadir kullanılan bir özelliği kullanıyoruz: object-fit.

Box ( konum: göreceli; taşma:gizli; genişlik:300 piksel; yükseklik:300 piksel; ) .box img ( konum: mutlak; üst:%50; sol:%50; transform:translate(-%50,-%50); genişlik:300 piksel; yükseklik:300 piksel; nesneye sığdırma:kapak)

Bana göre bu en iyi yöntemdir. Gönderiler için tamamen farklı oranlarda görseller kullanmanız bloglar için idealdir.

Burada HTML ve CSS hakkında daha fazla bilgi edinebilirsiniz:

Örnek 3

Ayrıca SVG öğelerine eklersek görüntüler için kırpma da oluşturabiliriz. Örnek olarak bir daireyi ele alalım. Etiketleri kullanarak SVG oluşturabiliriz. İçinde bir daire etiketi ve bir desen etiketi içerecek bir svg kenarlık etiketi oluşturun. Desen etiketine resim etiketini yazıyoruz. İçinde xlink:href özelliğini belirtiyoruz ve bir resim ekliyoruz. Ayrıca genişlik ve yükseklik özelliklerini de ekleyeceğiz. Ama hepsi bu değil. Doldurma değerini eklememiz gerekecek. Çalışmamızın tamamlanmış sayılması için, resim etiketine, resmimizi tüm dairenin etrafında "baştan sona" doldurmamıza olanak sağlayacak koruyucuAspectRatio yardımcı niteliğini ekleyeceğiz.

Bu yöntemi evrensel olarak adlandıramam. Ancak istisnai durumlarda kullanılabilir. Örneğin, bir blogun konusuna değinirsek, bu yöntem, makaleyi yazan yazarın avatarına ideal olarak uyabilir.

Burada HTML ve CSS hakkında daha fazla bilgi edinebilirsiniz:

Sonuçlar:
Web sitelerindeki görselleri kırpmanın 3 yöntemini inceledik: arka plan resmi kullanmak, img etiketini kullanmak ve gömme ile svg deseniyle ilişkilendirmek raster görüntüler resim etiketini kullanarak. SVG kullanarak bir görüntüyü kırpmanın başka yöntemlerini biliyorsanız, bunları yorumlarda paylaşın. Sadece benim için değil, başkalarının da bunları bilmesi faydalı olacaktır.

Düzen veya ön uç geliştirmeyle ilgili sorularınızı FrontendHelp çevrimiçindeki profesyonellere sormayı unutmayın.

Bu yazımızda size bunlardan bahsedeceğiz 3 Hızlı ve Kolay CSS Tekniği sayfanızda görselin yalnızca bir kısmını göstermek için kullanabilirsiniz.

Burada kullanılan tüm yöntemler aslında yalnızca birkaç satır gerektiriyor CSS kod. Ancak bu kelimenin tam anlamıyla sünnet değildir ( CSS henüz bunu yapamayız), sadece resmin yalnızca görmek istediğimiz kısmını gizleyip gösteririz.

Bir görüntüyü belirli bir boyuta getirmek istiyorsanız, yani örneğin haber bölümünde bunun bir ön izlemesini (görüntünün daha küçük bir kopyası) veya buna benzer bir şey oluşturmak istiyorsanız bu teknikler çok yararlı olabilir.

Teknik 1 - Negatif Kenar Boşluklarını Kullanma ( Negatif Marjlar)

Negatif kenar boşlukları kullanmak istemiyorsanız bu tekniği kullanmanızı öneririz. №2 . Belirli bir genişliğe ve yüksekliğe sahip bir ebeveyn (paragraf) içerir. Bu paragrafın özelliği var konumlandırma göreceli olarak ayarlayın. Genişlik ve yükseklik görüntülenen alanın boyutlarını tanımlar. Ve bir paragrafın içine yerleştirilen bir resmin şu özelliği vardır: konumlandırma mutlak olarak ayarlayın. Daha sonra özellikleri kullanabiliriz tepe Ve sol Resmin hangi bölümünün gösterilip hangisinin gösterilmeyeceğini belirleme sürecinde resmi istediğimiz gibi düzenleyin.

HTMLönceki teknikteki kodla aynı:

Teknik 3 - Dilimleme Özelliğini Kullanma ( Klip Özelliği)

Bu teknik en kolayı olmalı çünkü klip özelliği elemanın gösterilmesi gereken kısmını tanımlar. Bu mükemmel bir çözüm gibi görünüyor, ancak tek yakalama: kırpılmış eleman mutlaka konumlandırılmalıdır. Öğeyi kullanabilmek için şunu eklememiz gerekecek: ek eleman, görüntünün görünen alanının boyutunu hesaplayın, bu boyutu ebeveyne ekleyin, ebeveyni kullanın... Ne kadar çok iş var değil mi?

Ah, bir sorun daha: Kırpılan öğenin boyutu, kırpma boyutuna küçültülmüyor, ancak orijinal boyut olarak kalıyor (kırpmanın dışındaki resim basitçe gizleniyor). Görünür alanı ebeveynin sol üst köşesine taşımak için mutlak konumlandırmayı kullanmalıyız.

Ancak değinmeden geçilemez dilimleme özelliği. Ve böylece kod tekrar...

Sorun

Köşeleri kesmek sadece bununla ilgili değil hızlı yol hedefe ulaşmanın yanı sıra hem baskı tasarımında hem de web tasarımında popüler bir stil seçeneğidir. Çoğunlukla kabın bir veya daha fazla köşesinin 45° açıyla kesilmesini içerir. Son zamanlarda skeuomorfizmin zayıflamaya başlaması nedeniyle düz tasarım Bu etki özellikle popülerdir. Köşeler yalnızca bir tarafta kesildiğinde ve her köşe, öğenin yüksekliğinin %50'sini kapladığında, bir ok şekli oluşturulur; bu, aynı zamanda düğmelerin ve içerik haritası gezinme öğelerinin tasarımında da sıklıkla kullanılır.

Ancak CSS'de bu etkiyi basit, temiz tek satırlık satırlarla oluşturmak için hala yeterli araç yok. Bu nedenle, birçok geliştirici arka plan resimlerini kullanma eğilimindedir: ya kesik köşeleri üçgenlerle kaplar (düz bir arka plan üzerinde) ya da köşelerin zaten kesilmiş olduğu bir veya daha fazla resmi kullanarak arka planın tamamını oluşturur. Açıkçası, bu tür yöntemler tamamen esnek değildir, bakımı zordur ve ek HTTP istekleri ve web sitesi dosyalarının genel boyutu nedeniyle gecikmeyi artırır.

Kesilmiş köşenin (yarı şeffaf Bul ve Rezervasyon alanının sol alt kısmı) tasarıma mükemmel şekilde uyduğu bir web sitesi örneği

Çözüm

Bir Olası çözüm bize yüce CSS degradelerini sunun. Diyelim ki sadece bir kesik köşe istiyoruz, örneğin sağ alt köşe. İşin püf noktası, degradelerin açının yönünü (örneğin 45 derece) ve renk geçiş sınırlarının konumunu mutlak değerlerde alabilme yeteneğinden yararlanmaktır; bu değerler, öğenin genel boyutları değiştirildiğinde değişmez. arka plan değişime aittir. Yukarıdakilerden, bizim için bir doğrusal degradenin yeterli olacağı anlaşılmaktadır.

Kesilen köşeyi oluşturmak için şeffaf bir soluk kenarlık ve aynı konumda ancak arka planla eşleşen renkte başka bir soluk kenarlık ekleyeceğiz. CSS kodu aşağıdaki gibi olacaktır (15 piksellik bir köşe için):

arka plan: #58a;
arka plan:linear-gradient(-45deg, şeffaf 15 piksel, #58a 0);

Basit, değil mi? Sonucu şekilde görebilirsiniz.

Teknik olarak ilk duyuruya bile ihtiyacımız yok. Bunu yalnızca geçici bir çözüm olarak ekledik: CSS degradeleri desteklenmiyorsa ikinci bildirim dikkate alınmaz, böylece en azından düz renkli bir arka plan elde ederiz. Şimdi diyelim ki iki kesik köşeye ihtiyacımız var, diyelim ki her iki alt köşeye. Bu sadece bir degradeyle yapılamaz, bu yüzden iki degradeye ihtiyacımız olacak. İlk düşünceniz şöyle bir şey olabilir:

arka plan: #58a;
arka plan: doğrusal degrade (-45 derece, şeffaf 15 piksel, #58a 0), doğrusal degrade (45 derece, şeffaf 15 piksel, #655 0);

Ancak bu işe yaramıyor. Varsayılan olarak, her iki degrade de öğenin tüm alanını kaplar, böylece birbirlerini gizlerler. Arka plan boyutunu kullanarak her birini öğenin yarısıyla sınırlandırarak onları küçültmeliyiz:
arka plan: #58a;

arka plan boyutu: %50 %100;

Sonucu şekilde görebilirsiniz.

Her ne kadar arka plan boyutu uygulamış olsak da degradeler hala birbiriyle örtüşüyor. Bunun nedeni, arka plan tekrarını kapatmayı unutmamızdır, böylece arka planların her biri iki kez tekrarlanır. Sonuç olarak, arka planlardan biri diğerini hâlâ gizlemektedir, ancak bu kez tekrar yoluyla. Yeni bir versiyon kod şuna benzer:
arka plan: #58a;
arka plan: lineer-gradient(-45deg, şeffaf 15px, #58a 0) sağ, lineer-gradient(45deg, şeffaf 15px, #655 0) sol;
arka plan boyutu: %50 %100;

Sonucu resimde görebilir ve sonunda orada olduğundan emin olabilirsiniz! - İşler! Muhtemelen bu efektin dört köşeye nasıl uygulanacağını zaten tahmin etmişsinizdir. Dört degradeye ve aşağıdakine benzer koda ihtiyacınız olacak:

arka plan: #58a;
arka plan: doğrusal degrade (135 derece, şeffaf 15 piksel, #58a 0) sol üst,

doğrusal-gradyan(-135 derece, şeffaf 15 piksel, #655 0) sağ üst,

doğrusal-gradyan(-45 derece, şeffaf 15 piksel, #58a 0) sağ alt,

doğrusal-gradyan(45 derece, şeffaf 15 piksel, #655 0) sol alt;
arka plan boyutu: %50 %50;
arka planda tekrarlama: tekrarlama yok;

TAVSİYE
Hata ayıklamayı kolaylaştırmak için farklı renkler (#58a ve #655) kullandık. Uygulamada her iki degrade de aynı renkte olacaktır.
Ancak önceki koddaki sorun, bakımının zor olmasıdır. Değiştirmek için beş düzenleme gerekiyor arka plan rengi ve dört tanesi açıyı değiştirmek için. Bir ön işlemci kullanılarak oluşturulan bir karışım, tekrar sayısını azaltabilir. Bu kod SCSS'de şöyle görünecektir:
SCSS
@eğimli köşeleri karıştır($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
arka plan: $bg;
arka plan:
doğrusal-gradyan(135deg, şeffaf $tl, $bg 0)
Sol üst,
lineer-gradient(225deg, şeffaf $tr, $bg 0)
sağ üst,
lineer-gradient(-45deg, şeffaf $br, $bg 0)
sağ alt,
doğrusal-gradyan(45 derece, şeffaf $bl, $bg 0)
sol alt;
arka plan boyutu: %50 %50;
arka planda tekrarlama: tekrarlama yok;
}

Daha sonra gerektiğinde aşağıda gösterildiği gibi 2-5 argümanla çağrılabilir:
SCSS
@include eğimli köşeler(#58a, 15px, 5px);
Bu örnekte, border-radius'un belirttiğimizde nasıl çalıştığına benzer şekilde, sol üst ve sağ alt köşeleri 15 piksel, sağ üst ve sol alt köşeleri ise 5 piksel kırpılmış bir öğe elde edeceğiz. dört değerden az. Bu mümkün çünkü SCSS karışımımızdaki argümanların varsayılan değerlerine de dikkat ettik - ve evet, bu varsayılan değerler diğer argümanlara da atıfta bulunabilir.
KENDİN DENE!
http://play.csssecrets.io/bevel-corners-gradients

Kavisli kesilmiş köşeler

Bir web sitesinde kavisli kesilmiş köşeleri kullanmanın mükemmel bir örneği. http://g2geogeske.com tasarımcı bunları merkezi bir tasarım öğesi haline getirdi: gezinmede, içerikte ve hatta altbilgide mevcutlar.
Yöntemin degradelerle bir varyasyonu, kavisli kesik köşeler oluşturmanıza olanak tanır; bu, yuvarlatılmış köşelerin ters çevrilmiş bir versiyonuna benzediği için birçok kişinin "iç kenarlık yarıçapı" olarak adlandırdığı bir efekttir. Tek fark, doğrusal olanlar yerine radyal degradelerin kullanılmasıdır:
arka plan: #58a;
arka plan: radyal degrade(sol üstteki daire, şeffaf 15 piksel, #58a 0) sol üst,

radyal-gradyan(sağ üstte daire, şeffaf 15 piksel, #58a 0) sağ üst,

radyal degrade(sağ altta daire, şeffaf 15 piksel, #58a 0) sağ alt,

radyal degrade(sol altta daire, şeffaf 15 piksel, #58a 0) sol alt;
arka plan boyutu: %50 %50;
arka planda tekrarlama: tekrarlama yok;

Önceki teknikte olduğu gibi, açının boyutu, renk geçiş sınırlarının konumları ile kontrol edilebilir ve bir karışım, bu kodu daha sonraki bakımlar için daha uygun hale getirebilir.

KENDİN DENE!
http://play.csssecrets.io/scoop-corners

String SVG ve border-image ile çözüm

Gradyan tabanlı çözüm işe yarasa da birkaç dezavantajı var:
Kod çok uzun ve tekrarlarla dolu. En yaygın durumda, dört köşenin tamamını aynı miktarda kırpmamız gerektiğinde, bu değeri değiştirmek kodda dört değişiklik yapılmasını gerektirir.

Benzer şekilde, arka plan rengini değiştirmek de dört düzenleme gerektirir ve geri dönüş çözümünü hesaba katarsanız, beşinin tümü; Kesilmiş köşenin boyutundaki değişiklikleri canlandırmak inanılmaz derecede zordur ve bazı tarayıcılarda bu tamamen imkansızdır. Neyse ki istenilen sonuca göre birkaç yöntem daha kullanabiliriz. Bunlardan biri birleşmeyi içeriyor kenar resmi köşelerin oluşturulduğu bir SVG kodu dizisiyle.

Nasıl çalıştığını bilmek kenar resmi(Bu bilgiyi hafızanızda tazelemeniz gerekirse, bir ipucu bulacaksınız), gerekli olanın neye benzemesi gerektiğini zaten hayal edebiliyor musunuz? SVG-kod?

Genel boyutlar bizim için önemli olmadığından (border-image ölçeklendirmeyi halledecektir ve SVG görselleri boyutlardan bağımsız olarak mükemmel şekilde ölçeklendirilmiştir - çok şükür) Vektör grafikleri!), Daha uygun ve daha kısa değerlerle çalışılabilmesi için tüm boyutlar birliğe eşitlenebilir. Kesilen köşenin değeri bire eşit olacak, düz kenarların değeri de bire eşit olacaktır. Sonuç (daha kolay görüntüleme için büyütülmüş). Bunun için gerekli kod aşağıda gösterilmiştir:
kenarlık: 15 piksel katı şeffaf;


genişlik=”3″ yükseklik=”3″ dolgu=”%2358a”>\
\
’);

Dilimleme adım boyutunun 1 olduğunu unutmayın. Bu 1 piksel anlamına gelmiyor; gerçek boyut SVG dosyasının koordinat sistemi tarafından belirlenir (bu nedenle birimlerimiz yoktur). Yüzdeleri kullansaydık, görüntünün 1/3'ünü %33,34 gibi kesirli bir değerle yaklaşık olarak hesaplamamız gerekirdi. Yaklaşık değerlere başvurmak her zaman risklidir, çünkü farklı tarayıcılar Değerler değişen doğruluk derecelerine yuvarlanabilir. Ve SVG dosyasının koordinat sistemindeki değişim birimlerine sadık kalarak tüm bu yuvarlamaların getirdiği baş ağrısından kendimizi kurtarıyoruz.

Gördüğünüz gibi kesik köşeler mevcut ancak arka plan yok. Bu sorun iki şekilde çözülebilir: ya bir arka plan tanımlayın ya da ekleyin anahtar kelime orta dilim öğesinin atılmaması için border-image bildirimini doldurun. Örneğimizde ayrı bir arka plan tanımlamayı tercih ettik çünkü bu tanım, bu çözümü desteklemeyen tarayıcılar için de geçici bir çözüm görevi görecek.

Ek olarak, kesilen köşelerin artık önceki tekniğe göre daha küçük olduğunu fark etmişsinizdir, bu da kafa karıştırıcı olabilir. Çerçeve genişliğini 15px olarak ayarladık! Bunun nedeni, gradyan çözümünde bu 15 pikselin, gradyan yönüne dik olan gradyan çizgisi boyunca ölçülmesidir. Ancak çerçevenin genişliği çapraz olarak değil, yatay/dikey olarak ölçülür.

Bununla nereye varacağımı hissediyor musun? Evet, evet, yine aktif olarak kullandığımız her yerde bulunan Pisagor teoremi. Şekildeki diyagram işleri daha açık hale getirmelidir.

Kısaca aynı görsel sonucu elde etmek için degrade yönteminde kullanacağımız boyutun 2 katı kenar genişliğine ihtiyacımız var. Bu durumda, diyagonal boyutu sevilen 15 piksele mümkün olduğunca yaklaştırma göreviyle karşı karşıya kalmadığımız sürece, yaklaşık 20 piksele yaklaşmak en makul olan bir piksel olacaktır:

border-image: 1 url('veri:resim/svg+xml,\

genişlik=”3″ yükseklik=”3″ dolgu=”%2358a”>\

0,2"/>\
’);
arka plan: #58a;
Ancak gördüğünüz gibi sonuç pek de beklediğimiz gibi değil.

Özenle kesilen köşelerimiz nereye gitti? Korkma genç Padawan, köşeler hâlâ yerli yerinde. #655 gibi farklı bir arka plan rengi ayarlarsanız ne olduğunu hemen anlayacaksınız.
Aşağıdaki resimde de görüldüğü gibi köşelerimizin kaybolmasının nedeni arka plandır: Yukarıda tanımladığımız arka plan sadece onları gizlemektedir. Bu rahatsızlığı ortadan kaldırmak için yapmamız gereken tek şey, arka planın çerçeve alanının altına kaymasını önlemek için arka plan klipi kullanmaktır:
kenarlık: 20 piksel katı şeffaf;
border-image: 1 url('veri:resim/svg+xml,\

genişlik=”3″ yükseklik=”3″ dolgu=”%2358a”>\

0,2"/>\
’);
arka plan: #58a;

Artık sorun çözüldü ve alanımız eskisi gibi görünüyor. Üstelik bu sefer köşelerin boyutunu tek bir düzenlemeyle kolayca değiştirebiliyoruz: çerçevenin genişliğini ayarlamanız yeterli. Hatta kenar genişliği animasyonu desteklediği için bu efekti canlandırabiliriz!

Arka planı değiştirmek artık beş yerine iki düzenleme gerektiriyor. Ek olarak, arka planımız köşelere uygulanan efekte bağlı olmadığından, kenarlardaki renk hala #58a olduğu sürece ona bir degrade veya başka bir desen verebiliriz.

Örneğin, hsla(0,0%,100%,.2)'den şeffafa doğru radyal bir degrade kullanıyoruz. Çözülmesi gereken sadece küçük bir sorun kaldı. Kenarlık görüntüsü desteklenmiyorsa, geri dönüş çözümü kesik köşelerin yokluğuyla sınırlı olmayacaktır. Arka plan kırpıldığı için alanın kenarı ile içeriği arasında daha az boşluk olacaktır. Bunu düzeltmek için arka plan için kullandığımız çerçevenin aynı rengini tanımlamamız gerekiyor:
kenarlık: 20 piksel düz #58a;
border-image: 1 url('veri:resim/svg+xml,\

genişlik=”3″ yükseklik=”3″ dolgu=”%2358a”>\
\
’);
arka plan: #58a;
arka plan klibi: dolgu kutusu;

Tanımımızın bulunduğu tarayıcılarda kenar resmi destekleniyorsa bu renk göz ardı edilecektir, ancak kenarlık görüntüsünün başarısız olduğu durumlarda ek kenarlık rengi daha şık bir geri dönüş çözümü sağlayacaktır. Tek dezavantajı, arka plan rengini değiştirmek için gereken düzenleme sayısını üçe çıkarmasıdır.
KENDİN DENE!
http://play.csssecrets.io/bevel-corners

Kırpma Yolu Çözümü

Kenar görüntüsü çözümü çok kompakt olmasına ve DRY prensiplerini iyi takip etmesine rağmen bazı sınırlamalar getirmektedir. Örneğin, arka planımız hala tamamen veya en azından kenarlar boyunca düz bir renkle dolu olmalıdır.

Doku, desen veya doğrusal degrade gibi farklı türde bir arka plan kullanmak istersek ne olur? Bu tür kısıtlamalara sahip olmayan başka bir yöntem daha var, ancak elbette kullanımında belirli kısıtlamalar var.

Mülkü hatırla klip yolu“Eşkenar dörtgen nasıl yapılır” sırrından? CSS kırpma yollarının şaşırtıcı bir özelliği vardır: yüzde değerlerini (bir öğenin genel boyutlarını belirtme şeklimiz) mutlak değerlerle karıştırmanıza olanak tanır ve inanılmaz esneklik sağlar. Örneğin, bir öğeyi eğimli köşeleri olan (yatay olarak ölçülen) 20 piksellik bir dikdörtgen şeklinde kırpan kırpma yolunun kodu şöyle görünür:
arka plan: #58a;
klip yolu: çokgen(
20px 0, hesapla(100% - 20px) 0, 100% 20px,
%100 calc(%100 - 20px), calc(%100 - 20px) %100,
20 piksel %100, 0 hesaplama(%100 - 20 piksel), 0 20 piksel);
Kısalığına rağmen, bu kod pasajı DRY ilkelerine uymaz ve en çok kullanılanlardan biri haline gelir. büyük problemler, eğer bir önişlemci kullanmıyorsanız. Aslında bu kod, bu kitapta sunulan tüm saf CSS çözümlerinin WET ilkesinin en iyi örneğidir, çünkü köşenin boyutunu değiştirmek için sekiz (!) kadar düzenleme gerektirir.

Öte yandan, arka plan tek bir düzenlemeyle değiştirilebilir, yani en azından buna sahibiz. Bu yaklaşımın avantajlarından biri, kesinlikle herhangi bir arka planı kullanabilmemiz ve hatta görüntüler gibi yedek öğeleri kırpabilmemizdir. Resimde kesik köşeler kullanılarak stilize edilmiş bir görüntü gösterilmektedir. Önceki yöntemlerin hiçbiri bu etkiyi sağlayamıyor. Ayrıca Clip-path özelliği animasyonu destekliyor ve sadece bir köşenin boyutundaki değişimi değil, farklı şekiller arasındaki geçişleri de canlandırabiliyoruz.

Tek yapmanız gereken farklı bir kırpma yolu kullanmak. Ayrıntılı olması ve sınırlı tarayıcı desteğine sahip olmasının yanı sıra, bu çözümün dezavantajı, dolgunun yeterince geniş olduğundan emin olmazsak, öğenin kırpılması hiçbir bileşenini almadığından metnin de kesilmesidir. dikkate alın. Buna karşılık, degrade yöntemi metnin kesik köşelerin ötesine uzanmasına izin verir (sonuçta bunlar yalnızca arka planın bir parçasıdır) ve border-image yöntemi normal kenarlıklarla aynı şekilde çalışır; metni yeni bir yüzeyde sarar. astar.

KENDİN DENE!
http://play.csssecrets.io/bevel-corners-clipped

GELECEĞİN KESİLMİŞ KÖŞELERİ
Gelecekte kesik köşelerin etkisini elde etmek için CSS degradelerine, kırpmaya veya SVG'ye başvurmak zorunda kalmayacağız. Yeni mülk köşe şekli, dahil CSS Arka Planları ve Kenarlıklar Seviye 4 Kırpma miktarını belirlemek için gerekli olan kenarlık-yarıçap özelliği ile birlikte farklı şekillerde kesilmiş köşeler efekti oluşturmak için kullanılacaktır. Örneğin görüntünün her tarafında 15 piksellik kesik köşeleri tanımlamak için aşağıdaki basit kod yeterlidir:

kenarlık yarıçapı: 15px;
köşe şekli: eğim;

Ayrıca oku

Sitedeki her şeyin her zaman düzenli olmasını isteriz, ancak örneğin belirli sınırlara uyması gereken metin içeren bloklarınız var, bu bir makalenin duyurusu veya bir ürünün açıklaması olabilir. Bu durumda metnimiz keyfi uzunluktadır. Elbette, hiçbir şeyin ters gitmemesi için metni sürekli olarak alanın boyutuna göre ayarlayabilirsiniz, ancak bunu ekstra metin saklanıyordu.

Bunun için basit bir CSS çözümü var. Özelliğin kullanılması metin taşması: üç nokta Bu, uzun bir testle bir çizgiyi kırpmanıza olanak tanır. Bu çözümün işe yaraması için ana bloğun genişliğini belirtmeniz ve özelliğe sahip olmanız gerekir. taşma eşit gizlenmiş veya klips .

Tek satırlık metin çözümü:

Kutu metni ( text-overflow: elips; //metin taşması olan uzun blokların görüntüsü: gizli; //taşan metni gizle genişliği: %100; //metin boşluklu bloğun genişliği: nowrap; //yasaklanması metni sarma)

Tüm ekipmanları ve araçları şu ya da bu şekilde canlıydı.

Tüm ekipmanları ve araçları şu ya da bu şekilde canlıydı.

Çok satırlı metin için çözüm:

Ancak CSS'de çok satırlı metni kırpmak için sözde öğelere başvurmanız gerekecek :önce Ve :sonrasında .

Kutu metni ( taşma: gizli; yükseklik: 200 piksel; satır yüksekliği: 25 piksel; ) .box-text:before ( içerik: ""; kayan nokta: sol; genişlik: 5 piksel; yükseklik: 200 piksel; ) .box-text > * :first-child ( float: right; width: 100%; border-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: right; konum: göreceli; üst: -25px; genişlik: 3em; sağ dolgu: 5px; arka plan boyutu: %100; rgba(255, 255, 255, 0), beyaz %50

Ormanın sol tarafı karanlıktı, gölgedeydi; sağdaki ise ıslak, parlak, güneşte parıldayan, rüzgarda hafifçe sallanan. Her şey çiçek açıyordu; bülbüller gevezelik ediyor ve yuvarlanıyorlardı, bazen yakında, bazen uzakta.

Ormanın sol tarafı karanlıktı, gölgedeydi; sağdaki ise ıslak, parlak, güneşte parıldayan, rüzgarda hafifçe sallanan. Her şey çiçek açıyordu; bülbüller gevezelik ediyor ve yuvarlanıyorlardı, bazen yakında, bazen uzakta.