CSS nuosavybės "skaidrumas" yra paprastas būdas padaryti svetainės dizainą įdomiau

Šiandien tampa interneto svetainių dizaino kūrimastikras menas. Tai nėra tik tam tikros spalvos ir dydžio puslapio elementų rinkinys, skirtingų stilių šriftai ir teminiai brėžiniai. Tam, kad svetainė taptų nepanaši į kitas, patrauktų lankytojų dėmesį ir nukreiptų ją į tam tikrus elementus, naudojama daugybė metodų ir įrankių. Tarp jų yra labai populiari css savybė - skaidrumas. Ši technika yra gana madinga ir įspūdinga, todėl dažnai naudojama. Galite suteikti skaidrumą įvairiems svetainės objektams - pavyzdžiui, tekstui, visam blokui ar paveikslui. Tai taip pat pasiekiama įvairiais būdais. Apsvarstykite juos žemiau.

Prekės skaidrumo nustatymai

Laipsnio reguliavimo parametraikeletas skaidrumo elementų. Jie naudojami priklausomai nuo konkrečių tikslų, taip pat nuo naršyklės, kuriai dizainas yra „pritaikytas“. Tai apima šias savybes:

• neskaidrumas;
• filtras;
• PNG vaizdas kaip fonas.

Pasikeičia css savybės „skaidrumas“ vertėstaip: kuo didesnis skaičius, tuo mažesnis elemento skaidrumo lygis. Nepermatomumas kinta nuo 0 iki 1, filtre - nuo 10 iki 100. Pastarasis naudojamas „Interet Explorer“ naršyklei, o visoms kitoms - neskaidrumo savybė.

Vaizdo skaidrumas (kintamas)

Pradėkime nuo parinkties, kada skaidrumas pasirodys, kai užveskite pelės žymeklio elementą.

Apsvarstykite, kaip nustatyti nuotraukos skaidrumą. CSS siūlo dvi galimybes. Norėdami tai padaryti, turite tiesiogiai užregistruoti jį HTML dokumento kode taip:

1. Nurodykite kelią į atvaizdą.
2. Mes nustatome skaidrumo parinktis, kai užveskite pelės žymeklį ir ne. Norėdami tai padaryti, naudokite savybes onmouseover ir onmouseout, kuriose nurodome neskaidrumo ir filtro reikšmes.

Tos pačios charakteristikos gali būti registruojamos css-dokumente, o šaltinio kode pridėkite tik nuorodą į jį. Rezultatai bus vienodi.

Teksto ir puslapių blokų skaidrumas

Dėl teksto ar bloko (skaidraus skaidrumo),css siūlo naudoti parinktį, panašią į vaizdo skaidrumo kūrimą, tai yra, naudokite prijungtą css failą, kuriame bus nustatyti būtini parametrai. Galite eiti paprastesniu keliu. Nustatydami „div“ stiliaus bloko arba teksto p stilius, parašykite šį html kodą: „Mouseover“ ir „Mouseout“ elementams. Abi parinktys veikia ir suteikia norimą rezultatą.

Skaidrumas pastovus

Kai kuriais atvejais reikia nuolat nustatyti objekto, dizaino elemento ar teksto skaidrumą. Esant tokiai situacijai, sprendimas yra dar paprastesnis nei užveskite pelę.

Css elementui bus nustatytas skaidrumassekantis kodas. „Div“ stiliaus bloke nurodykite fono reikšmes (pavyzdžiui, # ff8800), nepermatomumą (pvz., 0,5), taip pat plotį ir apmušalą.

Paveikslėlį į kodą pridedame neskaidrumo ir filtro reikšmes, taip pat nurodome kelią į paveikslėlį.

RGBA metodas

Yra ir kitų naudojimo atvejų.šios CSS savybės: skaidrumą galima pritaikyti bet kokio dizaino elemento fono spalvai. Norėdami tai padaryti, naudokite RGBA metodą. Pirmosios trys raidės nurodo pagrindines spalvas (raudona, visa, mėlyna), o paskutinė - alfa, nustatančias skaidrumo lygį. Naudodamiesi RGBA formatu, mes nustatome skaidrumo laipsnį, nurodydami jį paskutiniu skaitmeniu. Pvz., Toks: fonas: rgba (240,2,33,0.4035).

Išvada

Taigi naudodamiesi dirbdamiSvetainės dizainas yra paprastas, bet veiksmingas CSS „skaidrumo“ turtas, todėl jūs galite padaryti jo elementus įdomesnius ir pastebimus, įdėjus šiek tiek pastangų. Apibūdintos skaidrumo charakteristikų nustatymo parinktys jums tai padės.