CSS ve HTML'de köşeler nasıl yuvarlanır. Resimlerin köşelerini yuvarlama. CSS kullanarak yuvarlatılmış köşeler
Lütfen bu şekil için CSS stillerinin dosyaya bir kez girildiğini ve HTML etiketinin siteye sınırsız sayıda yerleştirilebileceğini unutmayın.
İhraç sonucunda, elde ederiz çerçeveli dikdörtgen.
CSS'de yuvarlatılmış köşeler nasıl yapılır?
Nitelik, köşeleri yuvarlamak için kullanılır. sınır yarıçapı.
Sadece bu özelliği ekleyebildik. Yuvarlama sonucunu normalde tarayıcıların yeni sürümlerinde görüntüler, ancak birçok kullanıcının hala bu özelliğin düzgün çalışmadığı eski sürümleri vardır. Bu nedenle, uyumluluk için, Style.css dosyasındaki bloğumuza doğrudan belirli tarayıcılara bağlı olarak bu özniteliğin birkaç açıklamasını daha ekleyeceğiz ve sonuç olarak aşağıdaki kod ortaya çıkacaktır:
HTML div etiketi bize verecek yuvarlak çerçeveli dikdörtgenve köşeler:
ve metnin çıktısını almak için HTML etiketi şöyle görünecektir:
|
pib9.ru
|
biz alırız yuvarlarılmış dikdörtgen ve metin: 
Dikdörtgen boyut açıklama özniteliklerini koddan kaldırırsanız Genişlik Ve yükseklik, köşeleri yuvarlatılmış aşağıdaki şekilleri elde edebilirsiniz:
1. Metin yok
Bu durumda, formlar ortamın boyutlarını alır: uzunluk, alanın genişliğine karşılık gelir ve form içerikle doldukça yükseklik değişir.
Seçilen Köşeleri Yuvarlama
Stillerin açıklamasında, öznitelikteki 10px parametresi sınır yarıçapı istenileni seçerek değiştirilebilen eğrilik yarıçapını gösterir. 0 olarak ayarlanırsa, yuvarlama gerçekleşmez. Bu özellik, seçilen köşeleri yuvarlamak gerektiğinde kullanılabilir.
Her bir köşe için yuvarlama yarıçapı değerlerini, yuvarlamayı iptal ettiğimiz sıfırları belirterek yazalım. Örneğin üçüncü ve dördüncü köşelerde yuvarlamayı iptal edeceğiz. Kodumuz şöyle görünecek:
1. Sol üst köşe.
2. Sağ üst köşe.
3. Sağ alt köşe.
4. Sol alt köşe.
Bu, yalnızca üst köşelerde seçili yuvarlatmalara sahip bir dikdörtgenle sonuçlanır.
Açılar, sol üst köşeden başlayarak saat yönünde sayılır: 
2. Bir stil dosyasına yazmadan HTML koduyla köşeleri yuvarlama
Bir stil dosyasına yazmadan HTML kodunu kullanarak köşeleri yuvarlatılmış bir dikdörtgen elde etmenin ikinci yolunu ele alalım.
HTML yuvarlatılmış köşeler
Tüm süreci daha da basitleştiren küçük bir özellik var - bu HTML yuvarlatılmış köşeler. CSS kodlarında olduğu gibi aynı stillerin yazıldığı HTML kodunun oluşturulmasından oluşur. Bu, CSS bloğuyla aynı öznitelikleri kullanır ve bloğu Style.css dosyasına yazma ihtiyacını ortadan kaldırır. Tek kelimeyle, CSS kodunu tamamen HTML koduyla değiştiriyoruz.
CSS bloğumuz yerine köşeleri yuvarlatılmış dikdörtgenin görüntülenmesi gereken yere yapıştırdığımız bir HTML betiği alıyoruz:
Köşeleri yuvarlamanın ilk yolu, stiller değiştirilmeden aynı şekil birden fazla kullanıldığında kullanılabilir. İkinci yöntem, stilleri bir kez kullanılan formlar için kullanılır.
3. Köşeleri yuvarlatılmış resimler. HTML görüntüsünün etrafındaki çerçeve
Ben de size faydalı bilgiler vermek istiyorum. Sık kullanılan web sitesi tasarımı için resimler, Şekillerini değiştirerek, güzel renkte ve farklı genişliklerde bir çerçeveyle çerçeveleyerek onları gerçekten daha da güzelleştirmek istiyorum. Bu şu soruyu akla getiriyor: “ Bir görüntünün köşeleri nasıl yuvarlanır?”.
Bu çok basit bir şekilde yapılır ve şimdi nasıl yapılacağını öğreneceğiz.
Resmi siteye yerleştirelim, arka plan div etiketi olarak kendisine arka plan yapalım. Aşağıdaki kodu ve resmi alıyoruz:
Kenarlıklı bir görüntünün köşelerini yuvarlama
CSS ve HTML'de görüntülerin köşelerini yuvarlama ve kenarlık ekleme, yukarıda açıklanan iki yoldan biriyle yapılabilir.
Bu makalenin ilk yöntemini kullanarak, stil dosyası ve HTML div etiketi için görüntü kodları şöyle görünecektir:
Lütfen bazı özelliklerin stil dosyasına, bazılarının da div etiketine eklenebileceğini unutmayın. Bizim durumumuzda, görüntünün genişlik ve yükseklik boyutları HTML koduna eklenir.
Bu makalede açıklanan stil dosyası kullanılmadan ikinci yöntemin HTML kodu şöyle görünür:
İki yöntemin her birinin kodlarının çalışmasının bir sonucu olarak, aynı sonucu elde ederiz - köşeleri yuvarlatılmış bir resim:
Web sitesi tasarımındaki geleneksel dikdörtgen köşeler uzun zamandır herkesi bıktırdı. Görüntülerin yardımıyla değil, border-radius özelliğinin kullanıldığı stiller aracılığıyla yapılan yuvarlatılmış köşeler revaçta. Bu özellik, tüm köşelerin veya her birinin ayrı ayrı yarıçapını belirleyen bir, iki, üç veya dört boşlukla ayrılmış değere sahip olabilir.
Masada. 1 farklı sayıda değeri ve bu durumda elde edilen blok tipini gösterir.
| kod | Tanım | Görüş |
|---|---|---|
| div (sınır yarıçapı: 10 piksel; ) | Aynı anda tüm köşeler için yuvarlama yarıçapı. | |
| div ( sınır yarıçapı: 0 10px; ) | İlk değer sol üst ve sağ alt köşelerin yarıçapını ayarlar, ikinci değer sağ üst ve sol alt köşeleri ayarlar. |  |
| div ( sınır yarıçapı: 20px 10px 0; ) | Birinci değer sol üst köşenin yarıçapını, ikinci değer aynı anda sağ üst ve sol alt köşenin yarıçapını, üçüncü değer ise sağ alt köşenin yarıçapını ayarlar. |  |
| div ( sınır yarıçapı: 20px 10px 5px 0; ) | Sol üst köşenin, sağ üst köşenin, sağ alt köşenin ve sol alt köşenin yarıçapını sırayla ayarlar. |  |
Örnek 1, köşeleri yuvarlatılmış bir bloğun nasıl oluşturulacağını gösterir.
Örnek 1. Blok köşeleri
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Bu örneğin sonucu Şekil l'de gösterilmiştir. 1.
Pirinç. 1. Köşeleri yuvarlatılmış blok
Yuvarlama yarıçapı elemanın yüksekliğinin ve genişliğinin yarısından fazlasına ayarlanarak ilginç bir etki elde edilebilir. Bu durumda, bir daire elde edersiniz. Örnek 2, resimli bir yuvarlak düğmenin nasıl oluşturulacağını gösterir.
Örnek 2: Yuvarlak düğme
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Bu örneğin sonucu Şekil l'de gösterilmiştir. 2.
Pirinç. 2. Yuvarlak düğme
Opera tarayıcısında, yuvarlama
border-radius özelliği, bir öğeye gölge eklemek gibi diğer özelliklerle de birleştirilebilir. Örnek 3, biri box-shadow ile vurgulanan bir dizi daire yaptı. Böyle bir set, sayfalarda veya fotoğraflarda gezinmek için kullanılabilir.
Örnek 3 Kızdırma
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Bu örneğin sonucu Şekil l'de gösterilmiştir. 3.
Pirinç. 3. Çemberin etrafında parlayın
Sınır yarıçapının yardımıyla, blok üzerinde sadece bir daire değil, aynı zamanda bir elips ve eliptik bir yuvarlama da yapabilirsiniz. Bunu yapmak için, bir değil, eğik çizgi boyunca iki değer yazmanız gerekir. 20px/10px yazmak, yatay yarıçapın 20 piksel ve dikey olarak 10 piksel olacağı anlamına gelir. Örnek 4, bir fotoğrafa çizgi roman başlığı eklemek için eliptik köşelerin nasıl oluşturulacağını gösterir.
Örnek 4. Elipsler
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Bu örneğin sonucu Şekil l'de gösterilmiştir. 4.
Pirinç. 4. Oval köşelerin kullanımı
Örnek 5'te gösterildiği gibi, img seçiciye border-radius özelliğini ekleyerek resimlerin köşelerinin görünümünü de değiştirebilirsiniz.
Örnek 5 Görseller
HTML5 CSS3 IE 9+ Cr Op Sa Fx
CSS3 çerçevesi izin veren özelliklerle öğe sınırlarının biçimlendirme yeteneklerini genişletir. yuvarlak köşeleröğe ve ayrıca kullanın Görüntüler bir öğenin kenarlıklarına stil vermek için.
Yuvarlatılmış köşeler ve resim çerçeveleri
1. Sınır yarıçaplı köşeleri yuvarlama
Tarayıcı Desteği
Yani: 9.0
Firefox: 4.0
Krom: 4.0
safari: 5.0, 3.1 -webkit-
opera: 10.5
iOS Safarisi: 7.1
Opera Mini: —
Android Tarayıcı: 4.1
Android için Chrome: 44
Bu özellik, satır içi ve blok elemanların köşelerini yuvarlamanıza olanak tanır. Her köşe için eğri, şeklini tanımlayan bir veya iki yarıçapla tanımlanır - daire veya elips. Yarıçap, tüm arka plana uzanır, öğenin sınırı olmasa bile, sekantın tam konumu background-clip özelliği kullanılarak belirlenir.
border-radius özelliği, tüm köşeleri aynı anda yuvarlamanıza olanak tanır ve border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left- özelliklerini kullanır. yarıçapı her köşeyi ayrı ayrı yuvarlayabilirsiniz.
border-radius özelliği için iki değer ayarlarsanız, ilk değer yuvarlanır Sol üst Ve sag alt köşe ve ikincisi sağ üst Ve sol alt.
/ ile verilen değerler tanımla yatay Ve dikey yarıçap. Mülkiyet miras alınmaz.
Seçenekler
Div (genişlik: 100px; yükseklik: 100px; kenarlık: 5px katı;) .r1 (kenarlık yarıçapı: 0 0 20px 20px;) .r2 (kenarlık yarıçapı: 0 10px 20px;) .r3 (kenarlık yarıçapı: 10px 20px ;) .r4 (kenarlık yarıçapı: 10px/20px;) .r5 (kenarlık yarıçapı: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (kenarlık yarıçapı: 10px 20px 30px 40px/30px;) .r7 ( kenarlık yarıçapı: %50;) .r8 (kenarlık-üst: yok; kenarlık-alt: yok; kenarlık-yarıçapı: 30px/90px;) .r9 (kenarlık-alt-sol-yarıçap: 100px;) .r10 (kenarlık -yarıçap: 0 %100;) .r11 (kenarlık yarıçapı: 0 %50 %50 %50;) .r12 (sol üst kenar yarıçapı: %100 20 piksel; kenar alt sağ yarıçap: %100 20 piksel ;) 
Pirinç. 1. Bloğun köşelerini yuvarlamak için farklı seçeneklere örnekler
2. sınır resmi
Tarayıcı Desteği
Yani: 11.0
Firefox: 15.0, 3.5 -moz-
Krom: 16.0, 7.0 -webkit-
safari: 6.0, 3.0 -webkit-
opera: 15.0, 11.0 -o-
iOS Safarisi: 7.1
Opera Mini: 8-o-
Android Tarayıcı: 4.4, 4.1 -webkit-
Android için Chrome: 42
Özellik, bir görüntüyü bir öğenin kenarlığı olarak ayarlamanıza izin verir. Görüntü için temel gereksinim, simetrik olması gerektiğidir. Özellik şu değerleri içerir: (border-image: genişlik kaynak dilim tekrar başlangıcı;) .
Bu kadar basit bir görüntü kullanarak, bir eleman için bu sınırları elde edebilirsiniz.
/* Örnek 1 */ div ( genişlik: 260px; yükseklik: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: streç; ) /* Örnek 2 */ div ( genişlik: 260px; yükseklik: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-resim-dilim: 30; border-image-repeat: yuvarlak; ) 
Pirinç. 2. Bir görüntü kullanarak blok sınırları tasarlama örneği
A - B - C - D dilimleri çerçevenin köşelerini oluşturur ve border-image-repeat özelliğinin değerine göre görüntünün aralarında kalan kısmı çerçevenin kalan alanını doldurur. Köşe parçasının boyutu (bu örnekte 30 sayısı), border-image-slice özelliğinin değeri kullanılarak ayarlanır.
2.1. kenarlık-görüntü-genişliği
Özellik, öğenin kenarlığı için görüntü genişliğini ayarlar. Genişlik belirtilmezse varsayılan olarak 1 olur.
| kenarlık-görüntü-genişliği | |
|---|---|
| Değerler: | |
| uzunluk | Çerçevenin genişliğini uzunluk birimleri cinsinden ayarlar - px/em. Aynı anda birden dörde kadar değer ayarlayabilirsiniz. Bir değer verilirse, çerçevenin tüm kenarlarının genişliği aynıdır, iki değer üst-alt ve sağ-sol genişliğini belirtir vb. |
| sayı | border-width değerinin çarpıldığı sayısal değer. |
| % | Elemanın çerçevesinin genişliği görüntünün boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey. |
| Oto | border-image-slice değerine karşılık gelir. |
| ilk | |
| miras | |
Sözdizimi
Div (kenarlık-görüntü-genişliği: 30px;) 3. Farklı türde değerler kullanarak bir görüntü çerçevesinin genişliğini ayarlama örneği
2.2. border-resim-kaynak
Özellik, bloğun sınırlarını süslemek için kullanılacak görüntünün yolunu belirtir.
Sözdizimi
Div (border-image-source: url(border.png);)
2.3. border-image-slice elemanları
Özellik, öğenin kenarlarını süslemek için kullanılan görüntünün bölümlerinin boyutunu belirler ve görüntüyü dokuz bölüme ayırır: dört köşe, köşeler arasında dört kenar ve bir orta kısım.
| Değerler: | |
| sayı | Çerçeve parçaları bir, iki, üç veya dört değer kullanılarak boyutlandırılabilir. Bir değer, öğenin her bir tarafı için aynı boyutta kenarlıklar ayarlar. İki değer: birincisi üst ve alt sınırların boyutunu belirler, ikincisi - sağ ve sol. Üç değer: birincisi üst sınırın boyutunu, ikincisi - sağ ve sol ve üçüncüsü - alt sınırı belirler. Dört değer: Üst, sağ, alt ve sol kenarlıkların boyutunu belirtir. Sayısal değer, px sayısını temsil eder. |
| % | Kenarlık boyutları görüntü boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey. |
| doldurmak | Değer, bir sayı veya yüzde değeriyle birlikte belirtilir. Ayarlanırsa, görüntü çerçevenin iç kenarı tarafından kırpılmaz, ancak çerçevenin içindeki alanı da doldurur. |
| ilk | Bu özelliği varsayılan değerine ayarlar. |
| miras | Bu özelliğin değerini üst öğeden devralır. |
Sözdizimi
Div (kenarlık-resim-dilim: 50 20;) 
Pirinç. 4. Görüntü çerçevesi dilimlerini ayarlama örneği
2.4. border-image-repeat
Özellik, arka plan görüntüsünün çerçevenin köşeleri arasındaki boşluğu nasıl dolduracağını kontrol eder. Tek bir değerle veya bir çift değerle ayarlanabilir.
Sözdizimi
Div (sınır-görüntü-tekrar: tekrar;) 5. Bir görüntü çerçevesinin orta kısmının farklı türde değerler kullanılarak tekrarlanmasına bir örnek
2.5. kenarlık-görüntü-başlangıç
Özellik, görüntü çerçevesini belirtilen uzunlukta öğenin sınırlarının dışına taşımanıza izin verir. Bir veya dört değer kullanılarak ayarlanabilir.
Sözdizimi
Div (sınır-görüntü-başlangıç: 10px;) 
Pirinç. 6. Farklı türde değerler kullanarak çerçeve görüntüsünü kaydırma örneği
3. Dış çerçeve ofseti ana hat ofseti
Özellik, öğenin kenarlığı ile anahat özelliğiyle oluşturulan dış kenarlık arasındaki mesafeyi belirtir.
/*Şekil 1:*/ img ( kenarlık: 1px düz pembe; anahat: 1px kesikli gri; ana hat ofseti: 3px; ) /*Şekil 2:*/ img ( kenarlık genişliği: 1px 10px; kenarlık stili: düz; border-color: pembe; ana hat: 1 piksel çizgili gri; ana hat ofseti: 3 piksel; ) /*Şekil 3:*/ img ( kenarlık: 3 piksel iç metin pembe; anahat: 1 piksel kesik gri; ana hat ofseti: 1 piksel; )
Pirinç. 7. Bir resmi dış çerçeve ile dekore etme örneği 4. Gradyan çerçevesi
border-image değeri yalnızca bir görüntü değil, aynı zamanda bir gradyan dolgusu da olabilir.
yarı saydam çerçeve
Renklerden biri şeffaftır. Bu şekilde, bir öğenin tüm kenarları için aynı anda veya her kenar için ayrı ayrı kenarlıklar belirleyebilirsiniz. Kenarlık genişliği, border-with özelliği tarafından kontrol edilir.
posta zarfı
Herkese günaydın, öğleden sonra, akşam veya gece. Tekrar tekrar seninle Dmitry Kostin. Bir keresinde farklı resimlere baktım ve sonra bazılarını beğendim. Ve yuvarlatılmış kenarları olduğu gerçeğini beğendi. Hemen daha ilginç görünüyor. bulamıyor musun Ve bugünün dersinde, fotoğrafın daha ilginç görünmesi için Photoshop'ta köşeleri nasıl yuvarlayacağınızı anlatmak istiyorum.
Photoshop'ta sevdiğim şey, birçok durumda aynı şeyin birkaç şekilde yapılabilmesidir. Yani burada. Photoshop'umuza başlayalım.
Kenar Yumuşatma Kullanarak Kenar Yumuşatma
Bu yöntem öncekine benzer, ancak yine de çok farklıdır. Her şeyi aynı imajla yapacağız.
Bir şekil oluşturarak
Burada üçüncü yöntem, önceki ikisinden zaten kökten farklıdır. Bu yüzden birkaç saniye ara verin ve devam edin. Görüntüyü değiştirmeyeceğim ve bu arabayı tekrar Photoshop'a yükleyeceğim.
Sonunun ne olduğunu görüyor musun? Resim yuvarlak kenarlı hale geldi ve bunun nedeni, yalnızca çizilmiş yuvarlak dikdörtgenimizin olduğu yerde görüntülenmesi. Ancak artık "Çerçeve" aracıyla fazladan pho'yu kırpabilir veya resmi hemen kaydedebilir ve köşeleri yuvarlatılmış ayrı bir görüntünüz olur.
Her şeyi kendiniz yapmaya çalışın ve aynı zamanda sunulan yöntemlerden hangisinin sizin için daha çok tercih edildiğini söyleyin.
Ve bu arada, Photoshop'ta boşluklarınız varsa veya mümkün olan en kısa sürede tamamen keşfetmek istiyorsanız, o zaman bir tanesine bakmanızı şiddetle tavsiye ederim. yeni başlayanlar için harika bir photoshop eğitimi. Kurs iyi yapılır, her şey harika anlatılır ve gösterilir ve her materyal çok detaylı bir şekilde analiz edilir.
Pekala, bugünlük dersimi bitiriyorum. Yeni yazılar için abone olmayı ve arkadaşlarınızla paylaşmayı unutmayın. Sizi blogumda görmek bir zevkti. seni tekrar bekliyorum Güle güle.
Saygılarımla, Dmitry Kostin
Tüm modern tarayıcılar, HTML5 köprü metni biçimlendirme standartlarını ve CCS3 görsel stillerini destekler. Ve siteniz (şablon) modern standartları destekliyorsa, grafik düzenleyicilere başvurmadan köşeleri yuvarlama, gölgeler, degrade dolgular gibi tasarımda değişiklikler yapabilirsiniz.
Her yerdeki web yöneticileri, sitelerdeki bloklar ve çerçeveler için yuvarlatılmış köşeler kullanır. Bu yazımda size sitedeki resimlerin ve fotoğrafların köşelerini 3. parti programlar kullanmadan sadece CSS yardımıyla nasıl yuvarlayacağınızı anlatacağım.
Makaledeki örneklerin ekranınızda doğru bir şekilde görüntülenmesi için tarayıcıların, FireFox, Chrome'un ve bunlara dayalı olarak yapılanların en son sürümlerini kullanmanız gerekir: Yandex.Browser, Amigo vb.
DIV blokları için yuvarlama köşeleri
Engellenecek CSS3 DIV yuvarlatılmış köşeleri vardı, şekillendirilmesi gerekiyor sınır yarıçapı, örneğin şöyle:
Sınır yarıçapı: 10px
Netlik için, köşeleri düz ve yuvarlatılmış iki blok çizelim:
Dik açılı blok
Köşeleri yuvarlatılmış blok
Resimlerin köşelerini yuvarlama
Yukarıdaki örneğe benzeterek sitedeki resimlerin, örneğin fotoğrafların köşelerini yuvarlatabilirsiniz. Netlik için sayfadan fotoğrafın köşelerini yuvarlayın
İşte CSS işlenmemiş görüntü
Ve şimdi yuvarlatılmış köşelerle:
Sınır yarıçapı: 10px
Baştan itibaren tamamen "güzel" hale getirmek için bir kenarlık ekleyin ...
Sınır yarıçapı: 10px kenarlık: 5px #ccc katı;
ve sonra gölgeler:
Sınır yarıçapı: 10 piksel kenarlık: 5px #ccc katı; kutu gölgesi: 0 0 10px #444;
Aşağıdaki varyasyon (kenarlık gölgesi olmayan yuvarlatılmış köşeler) fare altlığına çok benzer:
Sınır yarıçapı: 10 piksel kutu gölgesi: 0 0 10px #444;
Ve son olarak, görüntünün tam bir alay konusu
sınır yarıçapı: %50 kenarlık: 5px #cfc katı; kutu gölgesi: 0 0 10px #444;
Görüntüyü yeni bir pencerede açarsanız, görüntünün (görüntünün) değişmediğini ve tüm köşelerin, gölgelerin vb. css stilleri tarayıcınız tarafından.
Biraz lirik ara söz
stil sınır görüntünün boyutunu kenarlık miktarı kadar artırır. değer belirtilirse kenarlık: 5px, ardından nihai görüntü 10 piksel daha geniş ve daha uzun olacaktır. Bunu aklınızda bulundurun, bazı durumlarda sitenin düzeni "gidebilir".
Bir stil kutu gölgesi resmin boyutunu etkilemez, gölge komşu öğelerin üzerinden geçiyormuş gibi görünür. Kullanırken, sitenin düzeni zarar görmez.
WordPress'te Resimlerin Köşeleri Nasıl Yuvarlanır?
Yukarıdaki tüm örneklerde, stilleri doğrudan html kod etiketlerinin içine yazdım. Örneğin, sonuncusu şöyle görünür:
Bu, bir resmi veya fotoğrafı yeniden biçimlendirmeniz gerektiğinde iyidir. Ya her şeyi değiştirmek istersen? Her birinin görüntüsünü düzenlemek için sitenizin her yerine tırmanmayacaksınız. Çoğu durumda WordPress etiketi img birkaç stil sınıfını tanımlar. Biri resimle birlikte benzersiz dosya adına göre, diğeri boyuta göre ve diğeri hizalamaya göre. Yukarıdaki parametrelerle bunlardan birini ekleyebilirsiniz.
Örneğin, dosyada hizalamanın belirtilmediği tüm görüntüler için stil.css WordPress temanız için aşağıdakileri yazın:
Alignnone ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Ya sitedeki tüm resimler için en zor yöntem. Tüm etiketler için geçersiz kılma stili img:
Img ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Son seçenek yalnızca WordPress için değil, herhangi bir CMS için uygundur. Ve basit için bile HTML görüntüler görüntülenirken, etiketin img hiçbir stil sınıfı atanmaz. Ama dikkat et. Etiket görüntüleme seçeneklerini geçersiz kılarsanız img sitedeki TÜM resimlerin görünümünü değiştireceksiniz!
Bir sonuç yerine
Makaledeki tüm örnekler koşulludur ve yalnızca CSS'nin bazı görüntü işleme yeteneklerini göstermeyi ve bunun ne kadar basit olduğunu göstermeyi amaçlamaktadır.