Ջրամեկուսացման կոճակ: Safari-ում CSS փոխակերպման ժամանակ թարթումից ազատվելը: Գույնի տոնայնության հեշտ փոփոխություն
Նախքան կոճակների հետ գործ ունենալը, եկեք տեսնենք դրանց բոլորի համար ընդհանուր պարամետրերը:
HTMLԿոճակները կօգտագործեն շատ պարզ HTML կոդ.
Բաժանորդագրվել
cssՆաև բոլոր կոճակները կունենան ընդհանուր պարամետրերմակագրության տեքստի և ապընտրելու հղումների համար՝
ButtonText (տառատեսակը՝ 18px/1.5 Helvetica, Arial, sans-serif; գույնը՝ #fff; ) a (գույնը՝ #fff; տեքստի ձևավորումը՝ ոչ մեկը;)
Սովորաբար, օգտվողը ակնկալում է բավականին մեղմ էֆեկտ, երբ մկնիկը սավառնում է հղման կամ կոճակի վրա: Իսկ մեր դեպքում կոճակը փոխում է չափը՝ այն մեծանում է՝ ցույց տալով լրացուցիչ հաղորդագրություն։
Հիմնական CSS կոդըՍկսելու համար մեզ միայն պետք է կոճակին տալ ձև և գույն: Սահմանեք 28px բարձրություն և 115px լայնություն, ավելացրեք լուսանցքներ և լցոնումներ և կոճակին տվեք թեթև եզրագիծ:
#button1 (ֆոն՝ #6292c2; եզրագիծ՝ 2px կոշտ #eee; բարձրություն՝ 28px; լայնություն՝ 115px; լուսանցք՝ 50px 0 0 50px; լիցք՝ 0 0 0 7px; արտահոսք՝ թաքնված; ցուցադրում՝ արգելափակում; )
CSS3 էֆեկտներՈրոշ մարդկանց դուր է գալիս, երբ պարզ կոճակը ուղեկցվում է բավականին շատ CSS կոդով: Այս բաժինը տրամադրում է լրացուցիչ CSS3 ոճավորում մեր կոճակի համար: Դուք կարող եք անել առանց դրանց, բայց դրանք կոճակին տալիս են ավելի ժամանակակից տեսք:
Կլորացրեք շրջանակի անկյունները և ավելացրեք գրադիենտ: Ահա մի փոքր մուգ գրադիենտ հնարք, որն աշխատում է ցանկացած ֆոնի գույնի հետ:
/*Կլորացված անկյուններ*/ -webkit-border-radius՝ 15px; -moz-border-radius՝ 15px; սահման-շառավիղ՝ 15px; /*Գրադիենտ*/ ֆոնային պատկեր. -webkit-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); ֆոնային պատկեր. ֆոնային պատկեր. -o-գծային-գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. -ms-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. գծային գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
CSS անիմացիաԱյժմ եկեք սահմանենք CSS անցումը: Շարժապատկերը կօգտագործվի ցանկացած գույքի փոփոխության համար և կտևի կես վայրկյան։
Մկնիկի սավառնումՄնում է միայն ոճ ավելացնել կոճակը ընդլայնելու համար, երբ մկնիկի օգնությամբ սավառնում եք դրա վրա: Ամբողջ գրառումը ցուցադրելու համար կոճակը պետք է ունենա 230px լայնություն:
#button1:սավառնել (լայնությունը՝ 230px; )
Գույնի տոնայնության հեշտ փոփոխություն
Շատ պարզ և հանրաճանաչ css էֆեկտկոճակի համար: Երբ դուք տեղափոխում եք մկնիկի կուրսորը, սահուն փոխում է ֆոնի գույնի երանգը:
Հիմնական CSS կոդըCSS կոդը շատ նման է նախորդ օրինակին։ Օգտագործվում է տարբեր ֆոնի գույն, և ձևը փոքր-ինչ փոփոխված է: Տեքստը նույնպես կենտրոնացված է, և կոճակի գծի բարձրությունը դրված է այնպես, որ այն ուղղահայաց կենտրոնացված լինի:
#button2 (ֆոն՝ #d11717; եզրագիծ՝ 2px կոշտ #eee; բարձրություն՝ 38px; լայնություն՝ 125px; լուսանցք՝ 50px 0 0 50px; արտահոսք՝ թաքնված; ցուցադրում՝ արգելափակում; տեքստի հավասարեցում՝ կենտրոն; գծի բարձրություն՝ 38px; )
CSS3 էֆեկտներՍահմանեք անկյունների կլորացումը, ֆոնի գրադիենտը և լրացուցիչ ստվերը: Օգտագործելով rgba մենք ստվերը դարձնում ենք սև և թափանցիկ։
/*Կլորացված անկյուններ*/ -webkit-border-radius՝ 10px; -moz-border-radius՝ 10px; սահման-շառավիղ՝ 10px /*Գրադիենտ*/ ֆոնային պատկեր. -webkit-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); ֆոնային պատկեր. ֆոնային պատկեր. -o-գծային-գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. -ms-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. գծային գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); տուփ-ստվեր՝ 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS անիմացիաԱնիմացիան գործնականում նույնն է, ինչ նախորդ օրինակը:
/*Transition*/ -webkit-transition. Բոլոր 0.5 վրկ հեշտություն; -moz-անցում. Բոլոր 0.5s հեշտություն; -o-անցում. Բոլոր 0.5s հեշտություն; -ms-անցում. Բոլոր 0,5 վրկ հեշտություն; անցում. Բոլոր 0,5 վրկ հեշտություն;
Մկնիկի սավառնումՄկնիկի կուրսորը սավառնելիս կսահմանվի ֆոնի այլ գույն: Փորձեք ընտրել ավելի բաց գույնի տարբերակ Photoshop-ում հիանալի էֆեկտի համար:
#button2:սավառնել (ֆոնի գույնը՝ #ff3434; )
Այս էֆեկտը կարող է բավականին տպավորիչ լինել՝ կախված ֆոնային պատկերի ընտրությունից: Դեմո-ն օգտագործում է ոչ նկարագրական ֆոն, և էֆեկտը աննկարագրելի է թվում: Փորձեք օգտագործել այլ նկար, և դուք կարող եք ստանալ ցնցող էֆեկտ:
Հիմնական CSS կոդըԿոդի հիմնական մասը նույնն է, ինչ նախորդ օրինակները։ Նշենք, որ մենք օգտագործում ենք ֆոնային պատկեր: Ֆոնի սկզբնական դիրքը դրված է «0 0»: Երբ սավառնում եք կուրսորի վրա, դիրքը փոխվում է ուղղահայաց:
#button3 (ֆոն՝ #d11717 url ("bkg-1.jpg"); ֆոնի դիրքը՝ 0 0; տեքստ-ստվեր՝ 0px 2px 0px rgba(0, 0, 0, 0.3); տառաչափը՝ 22px; բարձրություն 58px; լայնություն՝ 155px; լուսանցք՝ 50px 0 0 50px; հորդառատ՝ թաքնված; ցուցադրում՝ արգելափակում; տեքստի հավասարեցում՝ կենտրոն; տողի բարձրությունը՝ 58px;
CSS3 էֆեկտներԱյս օրինակում առանձնահատուկ բան չկա՝ կլորացված անկյուններ և ստվերներ:
/*Կլորացված անկյուններ*/ -webkit-border-radius՝ 5px; -moz-border-radius՝ 5px; սահման-շառավիղ՝ 5px /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); տուփ-ստվեր՝ 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS անիմացիաԱյս գործի անիմացիան ավելի երկար է հարթ և հետաքրքիր էֆեկտ ստեղծելու համար:
/*Transition*/ -webkit-transition. Բոլոր 0.8 վրկ հեշտություն; -moz-անցում. Բոլոր 0.8 վրկ հեշտություն; -o-անցում. Բոլոր 0.8s հեշտություն; -ms-անցում. Բոլոր 0,8 վրկ հեշտություն; անցում. Բոլոր 0.8 վրկ հեշտություն;
Մկնիկի սավառնումԱյժմ ժամանակն է տեղափոխել ֆոնային պատկերը: Նախնական դիրքը եղել է «0 0»։ Երկրորդ պարամետրը դրեք 150px: Հորիզոնական տեղաշարժվելու համար անհրաժեշտ է փոխել առաջին պարամետրը:
#button3:սավառնել (ֆոնի դիրքը՝ 0px 150px; )
3D մոդելավորված կոճակի սեղմում
Մեր ձեռնարկի վերջին օրինակը կենտրոնանում է կոճակի սեղմումը մոդելավորելու հանրաճանաչ 3D մեթոդի վրա, երբ սավառնում եք դրա վրա մկնիկի հետ: Այս գործի անիմացիան այնքան պարզ է, որ նույնիսկ CSS անցում չի պահանջում: Բայց վերջնական արդյունքը բավականին տպավորիչ է:
Հիմնական CSS կոդըCSS կոդը մեր կոճակի համար:
#button4 (ֆոն՝ #5c5c5c; տեքստ-ստվեր՝ 0px 2px 0px rgba(0, 0, 0, 0.3); տառաչափը՝ 22px; բարձրությունը՝ 58px; լայնությունը՝ 155px; լուսանցք՝ 50px 0 0 50px; Ցուցադրել՝ բլոկ; տեքստի հավասարեցում՝ կենտրոն; տողի բարձրություն՝ 58px;)
CSS3 էֆեկտներԱյս դեպքում CSS3-ն այլևս գեղեցիկ տարբերակ չէ: Էֆեկտ ստանալու համար անհրաժեշտ են ստվերներ և գրադիենտ: Կոշտ ստվերը ստեղծում է 3D կոճակի տեսք:
/*Կլորացված անկյուններ*/ -webkit-border-radius՝ 5px; -moz-border-radius՝ 5px; սահման-շառավիղ՝ 5px /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); տուփ-ստվեր՝ 0px 6px 0px rgba(0, 0, 0, 0.8); /*Գրադիենտ*/ ֆոնային պատկեր. -webkit-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); ֆոնային պատկեր. ֆոնային պատկեր. -o-գծային-գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. -ms-linear-gradient(վերև, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.2)); ֆոնային պատկեր. գծային գրադիենտ (վերև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
Մկնիկի սավառնումԱյս դեպքում մենք ունենք ամենամեծ սավառնող հատվածը: Ստվերի երկարությունը կրճատվում է, իսկ եզրերը ստեղծում են մութ գոտու միաձուլում: Բոլորը միասին ստեղծում են կոճակ սեղմելու պատրանք։ Գրադիենտը շրջելը ուժեղացնում է էֆեկտը:
#button4:սավառնել ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); արկղ-ստվեր՝ 0px 4px 0px rgba(0, 0, 0, 0.8); /*Գրադիենտ*/ ֆոնային պատկեր՝ -webkit-linear-gradient(ներքև, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); ֆոնային պատկեր. )); ֆոնային պատկեր՝ -o-գծային-գրադիենտ(ներքև, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); ֆոնային պատկեր. -ms-գծային-գրադիենտ( ներքև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4)); ֆոնային պատկեր. գծային գրադիենտ (ներքև, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4));)
CSS-ը, անկասկած, ամենակարևոր նշագրման լեզուներից մեկն է, որը մենք օգտագործում ենք: Եվ չնայած HTML-ը նկարագրում է փաստաթղթի կառուցվածքը, դրա վարքագիծը կարող է անկանխատեսելի լինել՝ կախված բրաուզերի տարբերակից: CSS-ն այն գործիքն է, որը մեզ թույլ կտա շտկել էջի ցուցադրման բոլոր անհամապատասխանությունները, ինչպես նաև ոճավորել դրա տեսքը։
Թաքցնել տեքստը պարբերությամբԱյս տեխնիկան շատ օգտակար կլինի ընկերության տարբերանշանի համար։ Ամենից հաճախ նկարն օգտագործվում է որպես լոգո, բայց SEO-ի համար լավ կլիներ ընկերության անունը ցուցադրել h1 թեգերում։ Այս օրինակը- մեծ մասը Լավագույն միջոցըիրականացնել այն։ Փաստորեն, մենք պարզապես թաքցնում ենք տեքստը էկրանից դուրս և փոխարենը նշանակում ֆոնային նկար.
H1 (տեքստային նահանջ՝-9999px; լուսանցք՝ 0 ավտոմատ; լայնություն՝ 400px; բարձրություն՝ 100px; ֆոն՝ թափանցիկ url ("images/logo.jpg") չկրկնվող ոլորում;)
Հղումների ոճավորում՝ կախված ֆայլի ձևաչափիցԱյս օրինակը բարելավվելու նպատակ ունի օգտագործողի ինտերֆեյս. Հաճախ ինտերնետում մենք հետևում ենք հղումներին՝ բացարձակապես չիմանալով, թե դրանք ուր են տանում: Հետևյալ կոդի հատվածն օգտագործվում է հղումների կողքին փոքր պատկերակները ցուցադրելու համար: Նման նկարները կհուշեն օգտվողին, որ սա արտաքին հղում է, էլեկտրոնային հասցե, pdf ֆայլ, նկար և այլն։
/* արտաքին հղում */ a( padding-աջ՝ 20px; ֆոն՝ url(external.gif) առանց կրկնության կենտրոնի աջ; ) /* էլ. առանց կրկնելու կենտրոնի աջ; ) /* pdfs */ a( padding-right: 20px; ֆոն. url(pdf.png) առանց կրկնվելու կենտրոնի աջ;)
Ոլորման տողերի հեռացում IE-ի բազմագիծ դաշտիցInternet Explorer-ը զայրացուցիչ սովորություն ունի՝ ավելացնելով ոլորման տողեր բազմակողմ դաշտում, նույնիսկ երբ դրա բովանդակությունը չի գերազանցում տրված չափը: Այս թերությունը հեշտությամբ շտկվում է հետևյալ կոդի տողով.
Textarea (հորդառատ: auto;)
սկզբնական նամակՄեր օրերում դա շատ տարածված է բլոգներում և լրատվական կայքերում: Դուք կզարմանաք, թե որքան հեշտ է այն իրականացնել, ինչպես նաև գեղեցիկ կերպով վատթարանալ հին բրաուզերներում:
P:առաջին տառ (ցուցադրում:block; լուսանցք:5px 0 0 5px; float:ձախ; գույն:#FF3366; տառաչափ:60px; font-family:Georgia; )
CSS թափանցիկությունԹափանցիկությունը հատկություն է, որը տարբեր բրաուզերներին տարբեր կերպ է վերագրվում: Հետևյալ կոդի հատվածով դուք կարող եք թափանցիկություն վերագրել բոլոր բրաուզերներին միանգամից:
Թափանցիկ (զտիչ՝ ալֆա (անթափանցություն=50); -moz-անթափանցություն՝ 0.5; -khtml-անթափանցություն՝ 0.5; անթափանցություն՝ 0.5; )
CSS-ի վերականգնում Էրիկ Մեյերի կողմիցՓաստորեն, css-reset-ը, որն առաջարկվել է Էրիկ Մեյերի կողմից, արդեն դարձել է ամենուր օգտագործման ստանդարտ: Քանի որ այն հարմարեցվել է շատ հայտնի մշակողների կողմից, կարող եք վստահ լինել դրա որակի վրա:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, հապավում, հասցե, մեծ, մեջբերում, կոդ, del, dfn, em, տառատեսակ, img, ins, kbd, q, s, samp, փոքր, հարված, ուժեղ, ենթակետ, sup, tt, var, b, u, i, կենտրոն, dl, dt, dd, ol, ul, li, դաշտերի հավաքածու, ձև, պիտակ, լեգենդ, աղյուսակ, վերնագիր, tbody, tfoot, thead, tr, th, td ( լուսանցք՝ 0; լիցք՝ 0; եզրագիծ՝ 0; ուրվագիծ՝ 0; տառաչափ՝ 100%, ուղղահայաց հավասարեցում ելակետ; ֆոն՝ թափանցիկ; ) մարմին (գծի բարձրություն՝ 1; ) ol, ul ( ցուցակի ոճ՝ ոչ մեկը; ) բլոկի մեջբերում, q ( չակերտներ՝ ոչ մեկը; ) blockquote: առաջ, blockquote: հետո, q: առաջ, q :after ( բովանդակություն՝ ""; բովանդակություն՝ ոչ մեկը; ) /* հիշեք սահմանել ֆոկուսի ոճերը: */ :focus ( ուրվագիծը՝ 0; ) /* հիշեք ինչ-որ կերպ ընդգծել ներդիրները: */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* աղյուսակներին դեռ պետք է «cellspacing="0"» նշագրման */ աղյուսակում ( border-collapse: collapse; border-spacing : 0;)
Image PreloaderԵրբեմն օգտակար է նախապես բեռնել ձեր պատկերները՝ ցանկալի տարր մուտք գործելիս ուշացումից և թարթումից խուսափելու համար:
Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left: -10000px;)
պարզ css sprite կոճակի համարհետ կոճակի կամ կապի առկայությունը ֆոնային պատկեր- սովորական բան, բացի այդ, նման տարրեր հաճախ կիրառվում են լրացուցիչ ազդեցություններորոնք բարելավում են օգտագործողի միջերեսը: Այդպիսի էֆեկտներից է մկնիկի սավառնման ցուցիչը կոճակի վրա: Sprite-ի միջոցով մենք կարող ենք հասնել այս էֆեկտին՝ փոխելով background-positon հատկությունը տվյալ արժեքի, որպեսզի ֆոնի պատկերը ցուցադրվի, երբ մկնիկը սավառնում է կոճակի վրա: Պարզ, բայց արդյունավետ լուծում.
A (ցուցադրում՝ արգելափակում; ֆոն՝ url (sprite.png) առանց կրկնության; բարձրություն՝ 30px; լայնություն՝ 250px; ) a:սավառնում (ֆոնի դիրքը՝ 0 -30px; )
Google Font APIՈչ վաղ անցյալում Google-ը մի հրաշալի ռեսուրս է ներդրել վեբ ծրագրավորողների համար, որը թույլ է տալիս ներբեռնել և օգտագործել նոր, ոչ ստանդարտ տառատեսակներ էջում։ Ներբեռնման համար հասանելի են նույնիսկ տառատեսակների տարբեր տարբերակներ՝ թավ, շեղ և այլն: Չնայած այն հանգամանքին, որ Google-ի հավաքածուն դեռևս սահմանափակ է, առկա են բավականին մեծ թվով տառատեսակներ: Նախ, ներառեք դինամիկ ձևով կազմված CSS ֆայլ՝ տառատեսակների անուններով և ձեզ անհրաժեշտ տարբերակներով, այնուհետև պարզապես օգտագործեք տառատեսակների անունները CSS-ում, ինչպես միշտ: Լրացուցիչ տեղեկություն Google Font API-ն կարելի է կարդալ:
Inconsolata:italic|Droid+Sans"> body ( տառատեսակ-ընտանիք՝ «Tangerine», «Inconsolata», «Droid Sans», սերիֆ; տառաչափը՝ 48px; )
Հաքեր տարբեր բրաուզերների համարԵրբեմն օգտակար է որոշակի բրաուզերում շտկել սխալը, և պայմանական մեկնաբանությունները միշտ չէ, որ լինում են լավագույն լուծումըսրա համար. Քրիս Քոյերի կողմից բրաուզերի հաքերների այս ցանկը կօգնի ձեզ պարզ css-ով հատուկ բրաուզերների համար ճիշտ հատկություններ սահմանել:
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 և ժամանակակից բրաուզերներ */ html>body .yourclass ( ) /* Ժամանակակից բրաուզերներ (ոչ IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 և ստորև */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body: first -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media էկրան և (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
Ամրացված նկուղԴուք կարող եք մտածել, որ ստորագիր ստեղծելը, որը միշտ սոսնձված է էկրանի ներքևի մասում, սարսափելի խնդիր է: Այնուամենայնիվ, դա ամենևին էլ դժվար չէ, եթե ձեզ անհրաժեշտ է պարզ նկուղ: Այստեղ մենք ստիպված կլինենք օգտագործել IE6-ի մի փոքր հաքեր, բայց բացի դրանից, դա շատ հեշտ է:
#footer ( դիրքը:ֆիքսված; ձախ:0px;ներքևի:0px;բարձրությունը:30px; լայնությունը:100%; ֆոն:#999;) /* IE 6 */ * html #footer (դիրք:բացարձակ; վերև:արտահայտում(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight. document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop) + «px»);)
Պատկերի ռոտացիաՊատկերի ռոտացիան կարող է շատ օգտակար լինել, հատկապես, եթե այն կարող է օգտագործվել նոր, նախապես պտտվող պատկերը բեռնելու փոխարեն: Ենթադրենք, դուք ցանկանում եք օգտագործել միայն մեկ պատկեր սլաքի համար, բայց դուք ունեք դրանցից մի քանիսը էջում, և դրանք տեղակայված են տարբեր ուղղություններով: Ահա ձեր խնդրի լուծումը.
Img.flip (-moz-transform՝ scaleX(-1); -o-transform՝ scaleX(-1); -webkit-transform՝ scaleX(-1); փոխակերպում՝ scaleX(-1); զտիչ՝ FlipH; - ms-ֆիլտր՝ «FlipH»;)
ՄաքրելՈչ շատ վաղուց ինչ-որ մեկը որոշեց, որ ժամանակն է մաքրել լողացողները՝ առանց փաստաթղթում լրացուցիչ նշումներ ավելացնելու: Այս որոշման արդյունքում ստեղծվեց դաս, որը կարող է կիրառվել լողացող տարրեր պարունակող կոնտեյների վրա՝ դրանք մաքրելու համար։ Սա այսօր շատ հարմար և լայնորեն կիրառվող մեթոդ է։
Clearfix:after ( տեսանելիություն՝ թաքնված; ցուցադրում՝ արգելափակում; տառատեսակի չափը՝ 0; բովանդակություն՝ " "; մաքրել՝ երկուսն էլ; բարձրություն՝ 0; ) .clearfix (ցուցադրել՝ inline-block; * html .clearfix (բարձրությունը՝ 1%;) .clearfix (ցուցադրել՝ արգելափակել;) /* փակել մեկնաբանված backslash hack-ը */
Կլորացված անկյուններԺամանակակից բրաուզերներում CSS3-ի աստիճանական ընդունմամբ ստեղծեք կլորացված անկյուններդարձավ շատ հեշտ: Ցավոք սրտի, IE-ում դեռևս չկա աջակցություն CSS3-ին, ներառյալ 8-րդ տարբերակը, բայց այն կավելացվի IE9-ում:
Կլոր (-moz-border-radius՝ 10px; -webkit-border-radius՝ 10px; border-radius՝ 10px; /* ապագա սրբագրում */ -khtml-border-radius՝ 10px; /* հին Konqueror բրաուզերների համար */ )
Ոճերի վերաիմաստավորումԵս շարունակում եմ զարմանալ այն մարդկանց կողմից, ովքեր չգիտեն !important-ի մասին CSS-ում, քանի որ դա այնքան հզոր և հեշտ օգտագործման գործիք է: Շատ պարզ է, որ վերջում !important-ով ցանկացած կանոն կշրջանցի այդ տարրի նկատմամբ կիրառվող նույն կանոնը CSS ֆայլի կամ ներդիր ոճերի ցանկացած կետում:
P (տառաչափ՝ 20px !կարևոր է; )
տառատեսակի դեմքFont-face-ը լայնորեն օգտագործվում էր մինչև անցյալ տարի, թեև այն գոյություն ուներ այն ժամանակներից, երբ IE6-ը համարվում էր ժամանակակից բրաուզերը: Այս հատկությունն այժմ լավ աջակցվում է ժամանակակից բրաուզերների կողմից և առաջարկում է ձեր նախագծերում ոչ անվտանգ տառատեսակներ օգտագործելու հիանալի միջոց: Ժամանակ խնայելու համար կարող եք օգտագործել հատուկ Font Squirrel Font Face գեներատորը:
@font-face ( տառատեսակ-ընտանիք. «Graublau Web»; src: url («GraublauWeb.eot»); src: տեղական («☺»), url («GraublauWeb.woff») ձևաչափ («woff»), url («GraublauWeb.ttf») ձևաչափ («truetype»); )
Կայքի կենտրոնացումԴիզայնի ընդհանուր տեխնիկան կայքի հորիզոնական կենտրոնացումն է: Սա շատ հեշտ է իրականացնել:
Min-բարձրությունը IE-ումԱյս օրինակը շտկում է IE-ի մի պարզ, բայց անհանգստացնող սխալ՝ նվազագույն բարձրություն սահմանելիս: Ընդհանուր առմամբ, IE-ն բարձրությունը մեկնաբանում է որպես նվազագույն բարձրություն, այնպես որ, եթե IE-ի բարձրությունը սահմանված չէ ավտոմատ, ապա հետևյալ հնարքը կշտկի այս սխալը:
Տուփ ( min-բարձրություն: 500px; բարձրություն: auto !կարևոր է; բարձրություն:500px; )
Նկարի բեռնումՊատկերի բեռնման այս էֆեկտը ընդօրինակում է ajax-ի բեռնումը` ցուցադրելով նախաբեռնիչ, մինչև ամբողջ բովանդակությունը բեռնվի: Այս լուծումը կատարյալ է մեծ, դանդաղ բեռնվող պատկերների համար:
Img (ֆոն՝ url(loader.gif) առանց կրկնության 50% 50%; )
Ուղղահայաց կենտրոնացումՍա կոդի փոքր հատված է, որը թույլ կտա ուղղահայաց կենտրոնացնել կոնտեյների բովանդակությունը՝ առանց լրացուցիչ նշագծման: Պարզապես պետք է բեռնարկղը վերածել աղյուսակի բջիջի և այնուհետև սահմանել ուղղահայաց հավասարեցման հատկանիշը արժեքի:
Բեռնարկղ (min-բարձրություն՝ 10մ; էկրան՝ աղյուսակ-բջիջ; ուղղահայաց հավասարեցում՝ միջին; )
Կտրվածքների ստեղծումՍկսենք, եկեք պարզենք, թե ինչ է կտրվածքը: Կողմնակի տողերը սովորաբար հանդիպում են նորությունների և ամսագրերի կայքերում՝ որպես հոդվածի մեջ տեքստի փոքր բլոկ՝ երբեմն մարդկանց կարծիքներով կամ մեջբերումներով: Դուք ուրախ կլինեք իմանալ, որ դրանք շատ հեշտ են պատրաստվում և ճիշտ օգտագործումը, ներկառուցումները կարող են զգալիորեն բարելավել հոդվածի օգտատերերի փորձը։
Pullquote (լայնությունը՝ 300px; float՝ աջ, լուսանցք՝ 5px; տառատեսակ-ընտանիք՝ Georgia, " Times New Roman», «Times», սերիֆ; տառատեսակը՝ շեղ թավ #ff0000 ;)
Տեքստի ընտրությունՈչ բոլորը գիտեն, որ հնարավոր է փոխել բրաուզերում ընտրված տեքստի գույնը: Դրա համար կպահանջվի ընդամենը երկու ընտրիչ:
::ընտրություն (գույն՝ #000000; ֆոնի գույն՝ #FF0000; ) ::-moz-ընտրություն (գույն՝ #000000; ֆոն՝ #FF0000; )
Էջի ընդմիջման ավելացումԱյս օրինակը կրկին նպատակ ունի բարելավելու օգտատիրոջ միջերեսը, երբ տպագրվում է: Օրինակ՝ հոդված տպելիս կարող է օգտակար լինել մեկնաբանությունները հոդվածի տեքստից առանձնացնելն ու առանձին էջ տեղափոխելը։ Եթե ավելացնեք .page-break դասը մեկնաբանությունների բլոկի մեջ, ապա բոլոր մեկնաբանությունները, երբ տպագրվեն, կցուցադրվեն առանձին էջ. Ընդհանուր առմամբ, այս դասը կարող է օգտագործվել ձեր կայքի ցանկացած վայրում:
Էջի ընդմիջում (էջի ընդմիջում-մինչև:միշտ;)
Բարի օր բոլորին։ Վաղուց ես որպես բլոգ մի գրառում էի հրապարակել։ Այսօր տրամադրության տակ դեռ ուզում էի անել դրա դիզայնը։ Հեղինակի մասին շատ հարազատ գաջեթը բավականին ձանձրալի է և ոչ գրավիչ։
Արդյունքում պարզվեց, որ ստեղծվեց անհատական ոճ, բավականին գեղեցիկ և տեղեկատվական սեփական դիզայնի համար, ամենայն հավանականությամբ, նույնիսկ ոչ թե վիդջեթ, այլ պրոֆիլային քարտ: Այսպիսով, եկեք զանգահարենք նրան: Դե, նման բան
Աշխատանքային տարբերակը թեստային բլոգում հենց ներքևում գտնվող կողագոտում
Ինչ կա դրա վրա
1. Ձեր պրոֆիլի լուսանկարը:
2. Գեղեցիկ դիզայնքարտն ինքնին, որը հեշտությամբ կարգավորելի է
3. Ձեր մականունը, անունը կամ ազգանունը
4 Դուք կարող եք նշել զբաղմունքը, հոբբին
5. Ավելացնել 2 կոճակ ցանկալի էջեր. Սրանք կարող են լինել հղումներ դեպի հեղինակի մասին ձեր ամբողջական էջի, դեպի գլխավոր էջ, քարտեզ, վարպետության դասեր, հանրային ին սոցիալական ցանցերում. Ցանկացած բան:
6. Քարտը հիանալի կտեղավորվի բլոգի կողագոտում։
Պատճենեք ստորև բերված կոդը, և մենք հետագայում կքանդակենք ձեր պրոֆիլի քարտը:
![](https://ow5.ru/wp-content/uploads/2019/11/" alt=)
"alt="profile" class="profile" />!}
Վիկա Բարադ Բլոգեր
իմ blogVK խումբը
.snip1(
տառատեսակ-ընտանիք՝ «Roboto», Arial, sans-serif;
գույնը՝ #fff;
պաշտոնը` հարաբերական;
վարարում `թաքնված;
լուսանցք՝ 10px
րոպե լայնությունը՝ 230px
առավելագույն լայնությունը՝ 315px
լայնությունը՝ 100%
գույնը՝ #ffffff;
տեքստի հավասարեցում` ձախ;
գծի բարձրությունը՝ 1,4 մ;
ֆոնի գույնը՝ #141414;
}
.snip1*(
-webkit-box-sizing: border-box;
տուփի չափսերը՝ սահմանային տուփ;
-webkit-անցում. բոլոր 0.25 վրկ հեշտություն;
անցում. բոլոր 0.25 վրկ հեշտություն;
}
.snip1img(
առավելագույն լայնությունը՝ 100%
ուղղահայաց հարթեցում `վերև;
անթափանցիկություն՝ 0,85
}
.snip1 պատկերագիր (
լայնությունը՝ 100%
ֆոնի գույնը՝ #141414;
լիցք՝ 25px
պաշտոնը` հարաբերական;
}
.snip1 պատկերագիր՝ նախքան (
դիրքը `բացարձակ;
բովանդակությունը՝ «»;
ներքևում `100%;
ձախ: 0;
լայնությունը՝ 0;
բարձրությունը՝ 0;
եզրային ոճ՝ ամուր
եզրագծի լայնությունը՝ 55px 0 0 400px;
սահման-գույն՝ թափանցիկ թափանցիկ թափանցիկ #141414;
}
.snip1 պատկերագիր ա (
լիցք՝ 5px
եզրագիծ՝ 1px կոշտ #ffffff;
գույնը՝ #ffffff;
տառաչափը՝ 0,7 մ
տեքստ-տրանսֆորմ՝ մեծատառ;
լուսանցք՝ 10px 0;
ցուցադրում՝ ներկառուցված բլոկ
անթափանցիկություն՝ 0,65
լայնությունը՝ 47%
տեքստի հավասարեցում. կենտրոն;
տառատեսակի քաշը՝ 600
տառերի տարածությունը՝ 1px
տեքստ-դեկորացիա՝ ոչ մի;
}
.snip1 figcaption a:hover (
անթափանցիկություն: 1
}
.snip1 .profile(
սահման-շառավիղ` 50%
դիրքը `բացարձակ;
ներքևում `100%;
ձախ: 25px;
z-ինդեքս՝ 1;
առավելագույն լայնությունը՝ 90px
անթափանցիկություն: 1
տուփ-ստվեր՝ 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .հետևել(
լուսանցք-աջ՝ 6%
սահման-գույն՝ #2980b9;
գույնը՝ #2980b9;
}
.snip1h2(
լուսանցք՝ 0 0 5px;
տառատեսակի քաշը՝ 300
}
.հատված 1 ժ2 ընդմիջում (
ցուցադրում:բլոկ;
տառաչափը՝ 0,5 մ
գույնը՝ #2980b9;
}
.snip1p(
լուսանցք՝ 0 0 10px;
տառաչափը՝ 0,8 մ
տառերի տարածությունը՝ 1px
անթափանցիկություն՝ 0,8
}
.snip1:hover:before,
.snip1.hover:before (
ներքև: 0;
տուփ-ստվեր՝ 0 0 0px սպիտակ;
-վեբկիտ-անցում-ուշացում՝ 0 վրկ;
անցում-ուշացում՝ 0 վրկ;
}
$(."hover").mouseleave(
ֆունկցիա () (
$(this).removeClass("sover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - սա նկարի հասցեն է՝ ֆոնը վերևում
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - ձեր մանրապատկերի հասցեն: Դուք կարող եք պատճենել այն ձեր Google պրոֆիլում կամ տեղադրել մեկ այլ ավատար:
Վարդագույնով նշված տողերում գրեք ձեր մականունը, անունը, զբաղմունքը և բացատրական տեքստը։
Ըստ այդմ, կանաչ գույնով ընդգծվածն այն էջերի հասցեն է, որոնց անցումը կկատարվի կոճակը սեղմելիս:
Ես նաև մի քանի տեղ գույնով նշել եմ պրոֆիլային քարտի հիմնական ֆոնը #141414;
Կարգավորումներն ամենատարրականն են և չեմ կարծում, որ հարցեր կարող են առաջանալ։ Եթե կան - գրեք մեկնաբանություններում։ Եկեք պարզենք այն:
Մենք տեղադրում ենք պատրաստի վիդջեթի կոդը բաժնում ԴԻԶԱՅՆ - HTML/JavaScript հարմարանքբլոգի կողագոտում: Ի դեպ, կարծում եմ, որ վերեւում վատ չի երեւա, երբ օգտատերը հնարավորություն ունենա անմիջապես ճանաչելու հեղինակին։ Ֆոնը և նկարը կարելի է հեշտությամբ փոխել՝ կախված ձեր տրամադրությունից կամ սեզոնից: Միշտ նորություն կլինի։ Դե, դա կախված է ձեզանից:
Ամենայն բարիք և հաջողություն:
Սա առաջին անգամը չէ, որ ես նկատում եմ, որ CSS-ի փոխակերպումներ օգտագործելիս Safari-ում էջի որոշ տարրեր խորհրդավոր կերպով փոխում են իրենց հատկությունները: Այլ բրաուզերներում սա շատ ավելի քիչ տարածված է:
Նման արտեֆակտները հատկապես նկատելի են, երբ փոխակերպումը կատարվում է :hover կեղծ դասի վրա, այսինքն՝ նրանք աշխատում են, երբ մկնիկը սավառնում է տարրի վրա: Իմ դեպքում, .btn կոճակի ավելացումը դրա վրա մշտապես սավառնելիս առաջացրել է հարևան բլոկների հարթեցման տեքստի տեսակը:
Btn (անցում. բոլորը .2s ease-in-out;) .btn:hover (transform: scale(1.1);)
Խնդիրը կապված է ռեսուրսների բացակայության հետ և բավականին հեշտ է բուժվում։
Թարգմանել 3DԽնդիրը լուծելու ամենահեշտ ձևը ապարատային արագացումն ակտիվացնելն է, որը լռելյայն անջատված է CSS-ում 2D անիմացիայի համար: Դա անելու համար պարզապես ստեղծեք դատարկ 3D անիմացիա:
webkit-transform՝ translate3d(0,0,0);
Ամեն ինչ, բայց դա հենակ է:
կամք-փոփոխությունCSS-ում կա մի համեմատաբար նոր և դեռևս քիչ հայտնի հատկություն will-change , որը նախօրոք զննարկիչին փոխանցում է տարրի հնարավոր առաջիկա փոփոխության մասին տեղեկատվություն: Օրինակ, եթե տարրը փոխակերպվելու է, կարող եք զգուշացնել զննարկիչին այս մասին, որպեսզի խնայի իր ուժը, ինչպես ասում են։ Վերոնշյալ կոճակի դեպքում այն ունի հետևյալ տեսքը.
Btn (անցում. բոլորը .2-ները հեշտ մուտք են գործում; կամք-փոփոխություն. փոխակերպում;)
Եթե նախատեսում եք փոխել մի քանի պարամետր, կարող եք դրանք հաջորդաբար բաժանել ստորակետերով: Օրինակ՝ փոխակերպվել թափանցիկության փոփոխությամբ.
կամք-փոփոխություն՝ փոխակերպում, անթափանցիկություն;
Այսպիսով, բրաուզերը կարող է նախապես պատրաստվել ծանր մշակման և օպտիմալացնել ռեսուրսների օգտագործումը: Սա կխուսափի էջի վրա տարբեր կողմնակի ազդեցությունների հայտնվելուց:
Բաժանորդագրվեք իմ հեռագրին և եղեք առաջինը, ով կստանաք նոր նյութեր, ներառյալ նրանք, որոնք չկան կայքում:
