ev > Proqramlar > Yanıb-sönən düymə. Safari-də CSS çevrilməsi zamanı titrəmələrdən xilas olmaq. D simulyasiya edilmiş düyməni basmaq


Yanıb-sönən düymə. Safari-də CSS çevrilməsi zamanı titrəmələrdən xilas olmaq. D simulyasiya edilmiş düyməni basmaq




Düymələrlə məşğul olmamışdan əvvəl onların hamısı üçün ümumi olan parametrlərə nəzər salaq.

HTML

Düymələr çox sadə HTML kodundan istifadə edəcək:

Abunə ol

css

Həmçinin, bütün düymələrdə yazının mətni və keçidlərin seçimi üçün ümumi parametrlər olacaq:

ButtonText (şrift: 18px/1.5 Helvetica, Arial, sans-serif; rəng: #fff; ) a (rəng: #fff; mətn dekorasiyası: heç biri; )

Tipik olaraq, istifadəçi siçanı keçid və ya düymənin üzərinə gətirərkən kifayət qədər yumşaq effekt gözləyir. Və bizim vəziyyətimizdə düymə ölçüsü dəyişir - əlavə bir mesaj göstərərək artır.

Əsas CSS kodu

Başlamaq üçün düyməyə yalnız forma və rəng vermək lazımdır. 28px hündürlüyü və 115px enini təyin edin, kənarlar və dolgu əlavə edin və düyməyə yüngül haşiyə verin.

#button1 (fon: #6292c2; haşiyə: 2px bərk #eee; hündürlük: 28px; en: 115px; kənar: 50px 0 0 50px; doldurma: 0 0 0 7px; daşqın: gizli; ekran: blok; )

CSS3 effektləri

Bəzi insanlar sadə bir düymənin kifayət qədər çox CSS kodu ilə müşayiət olunmasını bəyənirlər. Bu bölmə düyməmiz üçün əlavə CSS3 üslubunu təmin edir. Onlarsız edə bilərsiniz, lakin onlar düyməyə daha müasir bir görünüş verirlər.

Çərçivənin künclərini yuvarlaqlaşdırın və gradient əlavə edin. Budur, hər hansı bir fon rəngi ilə işləyən bir az qaranlıq gradient hiyləsi.

/*Dairəvi künclər*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; sərhəd radiusu: 15px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); fon-şəkil: xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS Animasiyası

İndi CSS keçidini təyin edək. Animasiya istənilən xüsusiyyət dəyişikliyi üçün istifadə olunacaq və yarım saniyə davam edəcək.

Siçan üzərinə sürüşdürün

Siçan ilə üzərinə gətirdiyiniz zaman düyməni genişləndirmək üçün stil əlavə etmək qalır. Bütün postu göstərmək üçün düymənin eni 230px olmalıdır.

#button1:hover (en: 230px; )

Rəng tonunun asan dəyişməsi

Bir düymə üçün çox sadə və populyar CSS effekti. Siçan kursorunu hərəkət etdirdiyiniz zaman fon rənginin tonunu rəvan dəyişir.

Əsas CSS kodu

CSS kodu əvvəlki nümunəyə çox bənzəyir. Fərqli fon rəngindən istifadə edilir və forma bir qədər dəyişdirilir. Mətn də mərkəzləşdirilib və düymə üçün xəttin hündürlüyü elə qurulub ki, o, şaquli mərkəzləşsin.

#button2 (fon: #d11717; haşiyə: 2px bərk #eee; hündürlük: 38px; en: 125px; kənar: 50px 0 0 50px; daşqın: gizli; ekran: blok; mətni düzən: mərkəz; xətt hündürlüyü: 38px; )

CSS3 effektləri

Künclərin yuvarlaqlaşdırılmasını, fon üçün gradienti və əlavə kölgəni təyin edin. Rgba istifadə edərək kölgəni qara və şəffaf edirik.

/*Dairəvi künclər*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; sərhəd radiusu: 10px /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); fon-şəkil: xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Kölgə*/ -webkit-box-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2); qutu-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS Animasiyası

Animasiya praktiki olaraq əvvəlki nümunə ilə eynidir.

/*Keçid*/ -webkit-keçid: Bütün 0.5s asanlığı; -moz-keçid: Bütün 0.5s asanlığı; -o-keçid: Bütün 0.5s asanlığı; -ms-keçid: Bütün 0.5s asanlığı; keçid: Bütün 0.5s asanlığı;

Siçan üzərinə sürüşdürün

Siçan kursorunu hərəkət etdirən zaman fərqli fon rəngi təyin olunacaq. Mükəmməl effekt əldə etmək üçün Photoshop-da daha açıq rəng seçiminə cəhd edin.

#button2:fazla üzərinə sürün (fon rəngi: #ff3434; )

Bu effekt fon şəklinin seçimindən asılı olaraq olduqca təsir edici ola bilər. Demo qeyri-adi fondan istifadə edir və effekt qeyri-adi görünür. Fərqli bir şəkil istifadə etməyə çalışın və nəticədə heyrətamiz effekt əldə edə bilərsiniz.

Əsas CSS kodu

Kodun əsas hissəsi əvvəlki nümunələrlə eynidir. Qeyd edək ki, biz fon şəklini istifadə edirik. Fonun ilkin mövqeyi "0 0" olaraq təyin edilmişdir. Kursorun üzərinə gətirdiyiniz zaman mövqe şaquli olaraq dəyişir.

#button3 (fon: #d11717 url("bkg-1.jpg"); fon mövqeyi: 0 0; mətn kölgəsi: 0px 2px 0px rgba(0, 0, 0, 0.3); şrift ölçüsü: 22px; hündürlük : 58px; en: 155px; kənar: 50px 0 0 50px; daşqın: gizli; displey: blok; mətni hizalayın: mərkəz; xəttin hündürlüyü: 58px; )

CSS3 effektləri

Bu nümunədə xüsusi bir şey yoxdur - yuvarlaq künclər və kölgələr.

/*Dairəvi künclər*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; sərhəd radiusu: 5px /*Kölgə*/ -webkit-box-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2); qutu-kölgə: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS Animasiyası

Bu iş üçün animasiya hamar və maraqlı effekt yaratmaq üçün daha uzundur.

/*Transition*/ -webkit-transition: Bütün 0.8s asanlığı; -moz-keçid: Bütün 0.8s asanlığı; -o-keçid: Bütün 0.8s asanlığı; -ms-keçid: Bütün 0.8s asanlığı; keçid: Bütün 0.8s asanlığı;

Siçan üzərinə sürüşdürün

İndi fon şəklini köçürməyin vaxtı gəldi. İlkin mövqe "0 0" idi. İkinci parametri 150px olaraq təyin edin. Üfüqi olaraq keçmək üçün ilk parametri dəyişdirməlisiniz.

#button3:hover (fon mövqeyi: 0px 150px; )

3D simulyasiya edilmiş düyməni basmaq

Təlimatımızdakı son nümunə, siçan ilə üzərinə gətirdiyiniz zaman düymənin kliklənməsini simulyasiya etməyin məşhur 3D üsuluna diqqət yetirir. Bu iş üçün animasiya o qədər sadədir ki, CSS keçidini belə tələb etmir. Ancaq son nəticə olduqca təsir edicidir.

Əsas CSS kodu

Düyməmiz üçün CSS kodu.

#button4 (fon: #5c5c5c; mətn kölgəsi: 0px 2px 0px rgba(0, 0, 0, 0.3); şrift ölçüsü: 22px; hündürlük: 58px; en: 155px; kənar: 50px 0 0 50px; daşqın: gizli ; displey: blok; mətni hizalayın: mərkəzə; xəttin hündürlüyü: 58px; )

CSS3 effektləri

Bu halda, CSS3 artıq gözəl seçim deyil. Effekt əldə etmək üçün kölgələr və gradient tələb olunur. Sərt kölgə 3D düyməsinin görünüşünü yaradır.

/*Dairəvi künclər*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; sərhəd radiusu: 5px /*Kölgə*/ -webkit-box-kölgə: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-kölgə: 0px 6px 0px rgba(0, 0, 0, 0.8); qutu-kölgə: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); fon-şəkil: xətti-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Siçan üzərinə sürüşdürün

Bu vəziyyətdə ən böyük hover bölməmiz var. Kölgənin uzunluğu azalır və kənarlar qaranlıq zonanın qarışığını yaradır. Hamısı birlikdə düyməni basmaq illüziyasını yaradır. Qradienti çevirmək effekti artırır.

#button4:hover ( yuxarı kənar: 52px; /*Kölgə*/ -webkit-box-kölgə: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-kölgə: 0px 4px 0px rgba(0) , 0, 0, 0.8); qutu-kölgə: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(alt, rgba(0, 0,) 0, 0), rgba(0, 0, 0, 0.4)); fon şəkli: -moz-xətti-gradient(alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); fon şəkli: -o-xətti-gradient(alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); fon şəkli: -ms-xətti-gradient( alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4); fon şəkli: xətti gradient (alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); )

Hamıya xeyirli gün. Uzun müddət əvvəl blog olaraq bir yazı dərc etdim. Bu gün əhval-ruhiyyə altında hələ də onun dizaynını etmək istəyirdim. Müəllif haqqında çox doğma gadget olduqca darıxdırıcı və cəlbedici deyil.

Nəticədə, öz dizaynınız üçün olduqca gözəl və məlumatlandırıcı, çox güman ki, hətta bir widget deyil, profil kartı olan fərdi bir üslub yaratmaq ortaya çıxdı. Ona görə də gəlin ona zəng edək. Yaxşı, buna bənzər bir şey

Ən aşağıda yan paneldə test bloqunda işləyən versiya


Üstündə nə var

1. Profil şəkliniz.
2. Fərdiləşdirməsi asan olan kartın özünün gözəl dizaynı
3. Ləqəbiniz, adınız və ya soyadınız
4 Peşəni, hobbini təyin edə bilərsiniz
5.Tələb olunan səhifələrə 2 düymə əlavə edin. Bunlar müəllif haqqında tam səhifənizə, əsas səhifəyə, xəritəyə, ustad dərslərinə, sosial şəbəkələrdəki ictimaiyyətə keçidlər ola bilər. Hər şey.
6. Kart bloqun yan panelinə mükəmməl uyğunlaşacaq.

Aşağıdakı kodu kopyalayın və biz sizin profil kartınızı əlavə edəcəyik.



"alt="profile" class="profile" />!}

Vika Barad Blogger


Mənim blogum VK qrupu


https://w-dog.ru/wallpapers/10/19/380923269777589.jpg- bu şəklin ünvanıdır - yuxarı hissədəki fon

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc- miniatürünüzün ünvanı. Siz onu Google profilinizdə kopyalaya və ya başqa avatar quraşdıra bilərsiniz.

Çəhrayı ilə işarələnmiş sətirlərə ləqəbinizi, adınızı, məşğuliyyətinizi və izahlı mətninizi yazın.

Müvafiq olaraq, yaşıl rənglə vurğulanan, düyməyə basıldıqda keçidin ediləcəyi səhifələrin ünvanıdır.

Mən də bir neçə yerdə profil kartının əsas fonunu rənglə qeyd etdim #141414;

Parametrlər ən elementardır və sualların yaranacağını düşünmürəm. Əgər varsa - şərhlərdə yazın. Gəlin bunu anlayaq.

Bölmədə bitmiş widget kodunu quraşdırırıq DİZAYN - HTML/JavaScript Qadceti blogun yan panelində. Yeri gəlmişkən, hesab edirəm ki, istifadəçinin müəlliflə dərhal tanış olmaq imkanı olanda yuxarıda pis görünməyəcək. Arxa fon və şəkil əhvalınızdan və ya mövsümünüzdən asılı olaraq asanlıqla dəyişdirilə bilər. Həmişə yeni olacaq. Yaxşı, bu sizə bağlıdır.

Hər vaxtınız xeyir və uğurlar.

CSS, şübhəsiz ki, istifadə etdiyimiz ən vacib işarələmə dillərindən biridir. HTML sənədin strukturunu təsvir etsə də, brauzerin versiyasından asılı olaraq onun davranışı gözlənilməz ola bilər. CSS bizə səhifənin ekranındakı bütün uyğunsuzluqları düzəltməyə, eləcə də onun görünüşünü tərtib etməyə imkan verəcək bir vasitədir.

Mətni paraqrafla gizlətmək

Bu texnika şirkət loqosu üçün çox faydalı olacaq. Çox vaxt bir şəkil loqo kimi istifadə olunur, lakin SEO üçün etiketlərdə şirkətin adını göstərmək yaxşı olardı h1. Bu nümunə bunu həyata keçirməyin ən yaxşı yoludur. Əslində, biz sadəcə mətni ekrandan kənarda gizlədirik və əvəzinə fon şəkli təyin edirik.

H1 ( mətn girintisi:-9999px; kənar: 0 avtomatik; en: 400px; hündürlük: 100px; fon: şəffaf url("şəkillər/logo.jpg") təkrarsız sürüşdürmə; )

Fayl formatından asılı olaraq bağlantıların üslubu

Bu nümunə istifadəçi interfeysini təkmilləşdirmək məqsədi daşıyır. Çox vaxt İnternetdə biz bağlantıları izləyirik, hara apardıqlarını tamamilə bilmirik. Aşağıdakı kod parçası keçidlərin yanında kiçik nişanları göstərmək üçün istifadə olunur. Bu cür şəkillər istifadəçiyə bunun xarici keçid, e-poçt ünvanı, pdf faylı, şəkil və s.

/* xarici keçid */ a( padding-sağ: 20px; fon: url(external.gif) təkrar olunmayan mərkəz sağ; ) /* e-poçt */ a( padding-sağ: 20px; fon: url(email.png ) təkrar olunmayan mərkəz sağ; ) /* pdfs */ a( padding-sağ: 20px; fon: url(pdf.png) təkrar olunmayan mərkəz sağ; )

IE-də çoxsətirli sahədən sürüşmə çubuqlarının çıxarılması

Internet Explorer-in məzmunu verilən ölçüdən çox olmadıqda belə, çoxsətirli sahəyə sürüşdürmə çubuqları əlavə etmək kimi zəhlətökən bir vərdiş var. Bu çatışmazlıq aşağıdakı kod xətti ilə asanlıqla düzəldilir:

Mətn sahəsi (daşmaq: avtomatik; )

ilkin məktub

Bu günlərdə bloqlarda və xəbər saytlarında çox yaygındır. Tətbiq etməyin nə qədər asan olduğuna təəccüblənəcəksiniz, həm də köhnə brauzerlərdə gözəl şəkildə pisləşir.

P:birinci hərf(ekran:blok; kənar:5px 0 0 5px; float:sol; rəng:#FF3366; şrift ölçüsü:60px; şrift ailəsi:Gürcüstan; )

CSS şəffaflığı

Şəffaflıq müxtəlif brauzerlərə fərqli təyin olunan xüsusiyyətdir. Aşağıdakı kod parçası ilə siz eyni anda bütün brauzerlərə şəffaflıq təyin edə bilərsiniz.

Şəffaf (filtr:alfa(şəffaflıq=50); -moz-şəffaflıq:0,5; -khtml-şəffaflıq: 0,5; qeyri-şəffaflıq: 0,5; )

Eric Meyer tərəfindən CSS sıfırlaması

Əslində, css sıfırlama Eric Meyer tərəfindən təklif olunan , artıq hər yerdə istifadə standartına çevrilmişdir. Bir çox tanınmış tərtibatçılar tərəfindən uyğunlaşdırıldığı üçün onun keyfiyyətinə əmin ola bilərsiniz.

html, gövdə, div, span, applet, obyekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ünvan, big, sit, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, sahələr dəsti, forma, etiket, əfsanə, cədvəl, başlıq, tbody, tfoot, thead, tr, th, td ( kənar: 0; padding: 0; haşiyə: 0; kontur: 0; şrift ölçüsü: 100%; şaquli hizalama : əsas; fon: şəffaf; ) gövdə ( sətir hündürlüyü: 1; ) ol, ul ( siyahı üslubu: heç biri; ) blok sitat, q ( sitatlar: heç biri; ) blok sitat: əvvəl, blok sitat: sonra, q: əvvəl, q :after ( məzmun: ""; məzmun: heç biri; ) /* fokus üslublarını təyin etməyi unutmayın! */ :focus ( kontur: 0; ) /* əlavələri bir şəkildə vurğulamağı unutmayın! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* cədvəllər işarələmədə hələ də "cellspacing="0"" lazımdır */ cədvəl ( sərhəd-daralma: çökmə; sərhəd aralığı : 0; )

Şəkil Önyükləyicisi

Bəzən istədiyiniz elementə daxil olarkən gecikmə və titrəmənin qarşısını almaq üçün şəkillərinizi əvvəlcədən yükləmək faydalıdır.

Div.loader( fon:url(şəkillər/hover.gif) təkrarsız; fon:url(şəkillər/hover2.gif) təkrarsız; fon:url(şəkillər/hover3.gif) təkrarsız; kənar-sol: -10000px; )

bir düymə üçün sadə css sprite

Arxa fon şəkli ilə düymə və ya keçidin olması adi haldır və istifadəçi təcrübəsini artırmaq üçün bu cür elementlərə tez-tez əlavə effektlər tətbiq olunur. Belə effektlərdən biri də siçanın üzərinə sürüşdürmə indikatorudur. Sprite ilə biz bu effekti xassəni dəyişdirərək əldə edə bilərik fon mövqeyi, siçan düymənin üzərinə gətirildikdə fon şəklini göstərmək üçün müəyyən edilmiş dəyərə. Sadə, lakin təsirli bir həll.

A (ekran: blok; fon: url(sprite.png) təkrarsız; hündürlük: 30px; en: 250px; ) a:hover (fon mövqeyi: 0 -30px; )

Google Font API

Bir müddət əvvəl Google veb tərtibatçıları üçün səhifədə yeni, qeyri-standart şriftləri yükləməyə və istifadə etməyə imkan verən gözəl resurs tətbiq etdi. Hətta yükləmək üçün müxtəlif şrift seçimləri mövcuddur, qalın, kursiv və s. Google kolleksiyasının hələ də məhdud olmasına baxmayaraq, kifayət qədər çox sayda şrift mövcuddur. Birincisi, şriftlərin adı və sizə lazım olan variantları ilə dinamik şəkildə tərtib edilmiş CSS faylını daxil edin və sonra həmişəki kimi sadəcə CSS-də şrift adlarından istifadə edin. Google Font API haqqında əlavə məlumatı oxumaq olar.

Inconsolata:italic|Droid+Sans"> bədən ( şrift ailəsi: "Naringi", "Inconsolata", "Droid Sans", serif; şrift ölçüsü: 48px; )

Müxtəlif brauzerlər üçün hack

Bəzən müəyyən bir brauzerdə bir səhvi düzəltmək faydalıdır və şərti şərhlər həmişə bunun üçün ən yaxşı həll yolu deyil. Chris Coyier tərəfindən edilən bu brauzer hack siyahısı sadə css ilə xüsusi brauzerlər üçün düzgün xassələri təyin etməyə kömək edəcək.

/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 və müasir brauzerlər */ html>body .yourclass ( ) /* Müasir brauzerlər (IE 7 deyil) */ html>/**/body .sizin sinif ( ) /* Opera 9.27 və aşağı */ html:birinci uşaq .sizin sinifiniz ( ) /* Safari */ html bədən:sonuncu uşaq .sinfiniz ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ gövdə:növüncü(1) .sinfiniz ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ bədən:birinci -of-növ .sizin sinifiniz ( ) /* Safari 3+, Chrome 1+ */ @media ekranı və (-webkit-min-cihaz-piksel nisbəti:0) ( .sizin sinifiniz ( ) )

Sabit zirzəmi

Həmişə ekranın altına yapışdırılmış altbilgi yaratmağın çətin bir iş olduğunu düşünə bilərsiniz. Ancaq sadə bir zirzəmiyə ehtiyacınız varsa, bu heç də çətin deyil. Burada bir az IE6 hack istifadə etməli olacağıq, lakin bundan başqa, bu, çox asandır.

#footer (mövqe:sabit; sol:0px; alt:0px; hündürlük:30px; en:100%; fon:#999; ) /* IE 6 */ * html #footer ( mövqe: mütləq; yuxarı: ifadə(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px");)

Şəklin fırlanması

Şəklin fırlanması çox faydalı ola bilər, xüsusən yeni, əvvəlcədən döndərilmiş bir şəkil yükləmək əvəzinə istifadə edilə bilərsə. Tutaq ki, siz ox üçün yalnız bir şəkil istifadə etmək istəyirsiniz, lakin səhifədə onlardan bir neçəsi var və onlar müxtəlif istiqamətlərdə yerləşdirilib. Probleminizin həlli budur:

Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; - ms filtri: "FlipH"; )

Clearfix

Çox keçməmiş, kimsə sənədə əlavə işarələr əlavə etmədən üzənləri təmizləməyin vaxtı olduğuna qərar verdi. Bu qərarın nəticəsi olaraq, onları təmizləmək üçün üzən elementləri ehtiva edən konteynerə tətbiq oluna bilən bir sinif yaradıldı. Bu, bu gün çox rahat və geniş istifadə olunan bir üsuldur.

Clearfix:sonra (görünürlük: gizli; displey: blok; şrift ölçüsü: 0; məzmun: " "; aydın: hər ikisi; hündürlük: 0; ) .clearfix ( ekran: inline-block; ) /* şərh edilmiş tərs xətt hackinə başlayın */ * html .clearfix ( hündürlük: 1%; ) .clearfix ( displey: blok; ) /* şərh edilmiş tərs kəsişməni bağla */

Dairəvi künclər

Müasir brauzerlərdə CSS3-ün tədricən qəbulu ilə yuvarlaq künclər yaratmaq çox asan oldu. Təəssüf ki, 8-ci versiya daxil olmaqla, IE-də CSS3 üçün hələlik dəstək yoxdur, lakin o, IE9-da əlavə olunacaq.

Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* gələcək yoxlama */ -khtml-border-radius: 10px; /* köhnə Konqueror brauzerləri üçün */ )

Üslubların yenidən müəyyənləşdirilməsi

Bilməyən insanlara heyran olmağa davam edirəm !vacib CSS-də çox güclü və istifadəsi asan bir vasitədir. Çox sadə, istənilən qayda ilə !vacib sonunda, CSS faylının və ya daxili üslubların istənilən yerində həmin elementə tətbiq edilən eyni qaydanı ləğv edəcək.

P( şrift ölçüsü:20px !vacib; )

şrift üzü

Font-face keçən ilə qədər geniş istifadə olunmurdu, baxmayaraq ki, IE6 müasir brauzer hesab edildiyi günlərdən bəri mövcuddur. Bu əmlak indi müasir brauzerlər tərəfindən yaxşı dəstəklənir və layihələrinizdə təhlükəli şriftlərdən istifadə etmək üçün əla yol təklif edir. Vaxta qənaət etmək üçün xüsusi Font Squirrel Font Face generatorundan istifadə edə bilərsiniz.

@font-face ( font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") formatı("truetype"); )

Saytın mərkəzləşdirilməsi

Ümumi dizayn texnikası saytın üfüqi mərkəzləşdirilməsidir. Bunu həyata keçirmək çox asandır.

IE-də minimum hündürlük

Bu nümunə minimum hündürlüyü təyin edərkən IE-də sadə, lakin bezdirici səhvi düzəldir. Ümumiyyətlə, IE hündürlüyü minimum hündürlük kimi şərh edir, ona görə də IE-nin hündürlüyü avtomatik olaraq təyin olunmayıbsa, aşağıdakı hiylə bu səhvi düzəldəcək.

Qutu ( min hündürlük:500px; hündürlük:avtomatik !vacib; hündürlük:500px; )

Şəkil yüklənir

Bu şəkil yükləmə effekti bütün məzmun yüklənənə qədər önyükləyicini göstərərək ajax yüklənməsini təqlid edir. Bu həll böyük, yavaş yüklənən şəkillər üçün mükəmməldir.

Şəkil (fon: url(loader.gif) təkrar yoxdur 50% 50%; )

Şaquli mərkəzləşdirmə

Bu, əlavə işarələmədən istifadə etmədən konteynerin məzmununu şaquli mərkəzləşdirməyə imkan verən kiçik kod parçasıdır. Siz sadəcə konteyneri cədvəl hüceyrəsi kimi göstərməlisiniz və sonra dəyəri atribut üçün təyin etməlisiniz şaquli düzləşdirmə.

Konteyner (min-hündürlük: 10em; ekran: masa xanası; şaquli düzülmə: orta; )

Kəsiklərin yaradılması

Başlamaq üçün, bir kəsimin nə olduğunu anlayaq? Yan panellər adətən xəbər və jurnal saytlarında məqalə daxilində kiçik bir mətn bloku kimi, bəzən insanların fikirləri və ya sitatları ilə tapılır. Onların hazırlanmasının çox asan olduğunu bilməkdən məmnun olacaqsınız və düzgün istifadə edildikdə, daxiletmələr məqalənin istifadəçi təcrübəsini xeyli yaxşılaşdıra bilər.

Pullquote (en: 300px; float: sağ; kənar: 5px; şrift ailəsi: Georgia, "Times New Roman", Times, serif; şrift: kursiv qalın #ff0000; )

Mətn seçimi

Brauzerdə seçilmiş mətnin rəngini dəyişdirməyin mümkün olduğunu hamı bilmir. Bunun üçün yalnız iki seçici tələb olunacaq.

::seçim (rəng: #000000; fon rəngi: #FF0000; ) ::-moz-seçmə (rəng: #000000; fon: #FF0000; )

Səhifə sonu əlavə edilir

Bu nümunə, yenidən çap edildikdə istifadəçi interfeysini təkmilləşdirməyi hədəfləyir. Məsələn, məqalə çap edərkən şərhləri məqalənin mətnindən ayırıb ayrıca səhifəyə köçürmək faydalı ola bilər. Şərhlər blokuna .page-break sinfini əlavə etsəniz, çap edildikdə bütün şərhlər ayrıca səhifədə göstəriləcək. Ümumiyyətlə, bu sinifdən saytınızın istənilən yerində istifadə etmək olar.

Səhifə fasiləsi (səhifədən əvvəl: həmişə; )

Mən ilk dəfə deyil ki, CSS çevrilmələrindən istifadə edərkən Safari-də səhifədəki bəzi elementlərin öz xassələrini müəmmalı şəkildə dəyişdiyini görürəm. Digər brauzerlərdə bu daha az yaygındır.

Bu cür artefaktlar transformasiya psevdo-sinifdə olduqda xüsusilə nəzərə çarpır : süpürmək, yəni siçan elementin üzərinə gətirildikdə işə salınırlar. Mənim vəziyyətimdə düymə artır .btn siçanı onun üzərinə sürdükdə, qonşu bloklarda mətnin hamarlanması tipində daimi olaraq dəyişikliyə səbəb olur.

Btn (keçid: hamısı .2s asan giriş; ) .btn:hover ( transform: miqyas(1.1); )

Problem göstərmə üçün resursların olmaması ilə əlaqədardır və olduqca asanlıqla həll olunur.

Translate3D

Problemi həll etməyin ən asan yolu, CSS-də 2D animasiya üçün standart olaraq qeyri-aktiv olan hardware sürətləndirilməsini aktivləşdirməkdir. Bunun üçün sadəcə boş 3D animasiya yaradın.

webkit-transform: translate3d(0,0,0);

Hər şey, amma bir qoltuqağacıdır.

dəyişəcək

CSS-də nisbətən yeni və hələ də az tanınan bir xüsusiyyət var dəyişəcək, hansı elementin qarşıdakı mümkün dəyişikliyi barədə brauzeri əvvəlcədən məlumatlandırır. Məsələn, bir element dəyişdiriləcəksə, brauzeri bu barədə xəbərdar edə bilərsiniz ki, necə deyərlər, gücünə qənaət etsin. Yuxarıdakı düymənin vəziyyətində bu belə görünür:

Btn (keçid: bütün .2s asan-çıxış; dəyişəcək: çevirmək; )

Bir neçə parametri dəyişdirməyi planlaşdırırsınızsa, onları ardıcıl olaraq vergüllə ayıra bilərsiniz. Məsələn, şəffaflıq dəyişikliyi ilə çevrilmək üçün:

iradə dəyişdirmək: çevirmək, qeyri-şəffaflıq;

Beləliklə, brauzer əvvəlcədən ağır emal üçün hazırlaşa və resurslardan istifadəni optimallaşdıra bilər. Bu, səhifədə müxtəlif yan təsirlərin görünməsinin qarşısını alacaq.

Teleqramıma abunə olun və saytda olmayanlar da daxil olmaqla yeni materialları ilk əldə edən siz olun.