Şəkillərinizi tərtib et və Stillərdə Şəkillər istifadə edin
Bir çox insanlar mətni tənzimləmək, yazı tipini, rəngini, ölçüsünü və daha çoxunu dəyişdirmək üçün CSS- dən istifadə edir. Amma bir çox insanın unutduğu bir şey, CSS-də də şəkilləri istifadə edə bilərsiniz.
Şəkilin özünü dəyişdirmək
CSS, şəkilin səhifədə necə göründüyünü düzəltməyə imkan verir. Bu, səhifələrinizin tutarlı olması üçün həqiqətən faydalı ola bilər. Bütün şəkillərdə üslub quraraq, şəkilləriniz üçün standart bir görünüş yaradırsınız. Bəzi şeylər edə bilərsiniz:
- Şəkillər ətrafında bir sərhəd və anahat əlavə edin
- Bağlanan şəkillər ətrafındakı rəngli sərhədləri çıxarın
- Görüntülərin eni və / və ya hündürlüyünü tənzimləmək
- Bir damla kölgə əlavə edin
- Görünüşü qayıt
- Görünüş üzərinə keçərkən üslubları dəyişdirin
Görünüşünüzə bir sərhəd qoymaq, başlamağınız üçün böyük bir yerdir. Ancaq yalnız sərhədi nəzərə almalıyıq - imajınızın bütün kənarlarını düşünün və marjinləri düzəldin və doldurun . İncə bir qara sərhədi olan bir görünüş gözəl görünsə də, sərhəd ilə şəkil arasında bəzi dolguların əlavə edilməsi daha yaxşı görünə bilər.
img {
sərhəd: 1px qatı qara;
padding: 5px;
}
Mümkün olduğunda həmişə qeyri-dekorativ görünüşlər bağlamaq yaxşı bir fikirdir. Ancaq bunu etdiyiniz zaman unutmayın ki, ən çox brauzerlər şəkil ətrafında rəngli bir sərhəd əlavə edirlər. Sərhədi dəyişdirmək üçün yuxarıda göstərilən kodu istifadə etsəniz, linki keçiddən kənarlaşdırmaq və ya dəyişdirməyincə keçidləri ləğv edəcəkdir. Bunu etmək üçün əlaqəli şəkillər ətrafında sərhədi aradan qaldırmaq və ya dəyişdirmək üçün bir CSS uşaq qayda istifadə etməlisiniz:
img> a {
sərhəd: none;
}
Ayrıca şəkillərinizin hündürlüyü və genişliyini dəyişdirmək və ya təyin etmək üçün CSS-dən istifadə edə bilərsiniz. Yüklənmə sürəti sayəsində şəkil ölçülərini tənzimləmək üçün brauzerdən istifadə etmək böyük bir fikir deyil, baxmayaraq ki, onlar hələ də yaxşı görünən şəkilləri yenidən ölçməkdə daha yaxşı olurlar. Və CSS ilə şəkillərinizi standart bir genişlik və ya hündürlüyə görə təyin edə bilərsiniz və hətta konteynerə nisbətən ölçüləri təyin edə bilərsiniz.
Unutmayın, şəkilləri ölçüsündə yaxşı nəticələr əldə edərkən yalnız bir ölçüsü - boyu və ya eni ölçüsünü dəyişməlisiniz. Bu, görünüşün görünüşü nisbətini qoruduğu və qəribə görünməyəcəyinə səbəb olacaq. Brauzerin aspekt nisbətini ardıcıl saxlamaq üçün digər dəyərini avtomatik olaraq təyin edin və ya onu tərk edin.
img {
eni: 50%;
boy: avtomatik;
}
CSS3, bu problemə yeni xüsusiyyətləri obyekt-uyğun və obyekt-mövqe ilə həll edir. Bu xüsusiyyətlərə görə, tam görünüş hündürlüyü və genişliyi və aspekt nisbətinin necə ələ alınacağını müəyyən edə bilərsiniz. Bu, şəkillərinizin ətrafında məktublama effektləri yaratmaq və ya zəruri ölçüyə uyğun görünüş əldə etmək üçün əkməklə yarada bilər.
CSS3 obyektinə uyğun və obyekt mövqeyi xüsusiyyətləri hələ geniş dəstəklənməməli olsa da, şəkillərinizi dəyişdirmək üçün istifadə edə biləcəyiniz ən müasir brauzerlərdə yaxşı dəstəklənən digər CSS3 xüsusiyyətləri də var. Çağırış kölgələri, yuvarlaq künclər və ən müasir brauzerlərdə şəkilləri döndərmək, çırpmaq və ya hərəkət etmək üçün dəyişikliklər. Daha sonra, bir müddət keçdikdən sonra və ya tıklandığında, ya da tıklandığında şəkilləri dəyişdirmək üçün CSS keçişlərindən istifadə edə bilərsiniz.
Şəkilləri Arxa Planları olaraq istifadə edin
CSS şəkilləri ilə xülya fonları yaratmaq asanlaşdırır.
Arxa planları bütün səhifəyə və ya yalnız bir elementə əlavə edə bilərsiniz. Arxa fon təsviri ilə səhifədə fon şəkilləri yaratmaq asandır:
bədən {
background-image: url (background.jpg);
}
Arxa bir elementə qoymaq üçün bədən seçicisini səhifənin müəyyən bir elementinə dəyişdirin.
Şəkillərlə yapabileceğiniz başqa bir şey, bir səhifənin qalan hissəsi - bir filigran kimi hərəkət etməyən bir fon şəkilləri yaratmaqdır. Yalnız stil arxa planı istifadə edin: sabit; arxa planınızla birlikdə. Arka planlarınız üçün digər variantlar fonda təkrar əmlakı istifadə edərək, sadəcə üfüqi və ya uzununa zolaq etməkdir.
Fon-təkrar yaz: repeat-x; image yuxarıya və üfüqi olaraq təkrar etmək üçün: təkrar-y; dikey olaraq döşəməyə. Arka planın arxa plan mövqeyi ilə yerləşdirə bilərsiniz.
Və CSS3 də fonlarınız üçün daha çox üslub əlavə edir. Görünüşünüzü hər hansı bir ölçülü fonya uyğunlaşdırmaq və ya pəncərənin ölçüsü ilə ölçmək üçün arxa planı təyin edə bilərsiniz. Mövqeyi dəyişə və sonra arxa planı kopyalayabilirsiniz. Lakin CSS3 haqqında ən yaxşı şeylərdən biri artıq daha mürəkkəb effektlər yaratmaq üçün birdən çox fon şəkilləri qatıla.
HTML5 stil şəkillərinə kömək edir
HTML5-də şəffaf element sənəddə tək başına dura bilən hər hansı bir şəkil ətrafında yerləşdirilməlidir. Bu barədə fikirləşməyin bir yolu, əgər şəkil əlavə olaraq görünsə, onda bu elementin içində olmalıdır. Daha sonra bu elementdən və şəkillərinizə üslub əlavə etmək üçün FIGCAPTION elementindən istifadə edə bilərsiniz.