CSS-egenskapen "öppenhet" är ett enkelt sätt att göra webbdesignen mer intressant
Idag blir webbdesign skapandeverklig konst. Detta är inte bara en uppsättning av sidelement av en viss färg och storlek, teckensnitt av olika stilar och tematiska ritningar. För att göra webbplatsen till skillnad från andra, för att locka besökarnas uppmärksamhet och rikta den till vissa element, används ett stort antal metoder och verktyg. Bland dem finns det en mycket populär css-egenskap - transparens. Denna teknik är ganska modern och spektakulär, och används därför ofta. Du kan ge öppenhet för olika objekt på webbplatssidan - till exempel text, ett helt block eller bild. Det uppnås också på olika sätt. Tänk på dem nedan.
Inställningar för objekttransparens
Parametrar för justering av gradentransparenselement några. De används beroende på specifika mål, liksom webbläsaren som designen är "anpassad" för. Dessa inkluderar följande egenskaper:
- opacitet;
- filter;
- PNG-bild som bakgrund.
Värdena på css-egenskapen "transparens" förändrassom följer: ju större antal, desto lägre nivå för transparens för elementet. I opacitet varierar det från 0 till 1, i filter - från 10 till 100. Det senare används för webbläsaren Interet Explorer, och för alla andra används opacitetegenskapen.
Bildtransparens (variabel)
Låt oss börja med alternativet när transparens kommer att visas när du håller muspekaren över ett element.
Tänk på hur du ställer in bildens transparens. CSS erbjuder två alternativ. För att göra detta måste du registrera det direkt i html-dokumentkoden enligt följande:
- Ange sökvägen till bilden.
- Vi bestämmer transparensalternativen när du håller muspekaren och nej. För att göra detta använder du egenskaperna onmouseover och onmouseout, där vi föreskriver värdena på opacitet och filter.
Samma egenskaper kan registreras i css-dokumentet och lägga till en länk i källkoden i källkoden. Resultaten blir desamma.
Öppenhet i text och sidblock
När det gäller text eller block (div transparens),css föreslår att du använder ett alternativ som liknar skapa transparens, dvs. använda en ansluten css-fil där de nödvändiga parametrarna kommer att ställas in. Du kan gå på ett enklare sätt. När du ställer in stilarna i div-stilblocket eller texten p, skriver du följande html-kod för onmouseover- och onmouseout-elementen. Båda alternativen fungerar och ger önskat resultat.
Öppenhet konstant
I vissa fall måste transparensen för ett objekt, designelement eller text ställas in löpande. I denna situation är lösningen ännu enklare än att sväva över musen.
För css kommer transparens att ställas inföljande kod. I div-stilblocket anger du värdena för bakgrund (till exempel # ff8800), opacitet (t.ex. 0,5) samt bredd och stoppning.
För en bild lägger vi till värdena på opacitet och filter i koden och anger också sökvägen till bilden.
RGBA-metod
Det finns andra användningsfall.av den här css-egenskapen: transparens kan tillämpas på bakgrundsfärgen för alla designelement. Använd RGBA-metoden för att göra detta. De tre första bokstäverna indikerar huvudfärgerna (röd, hel, blå) och den sista alfa, som anger nivån på transparens. Med RGBA-formatet föreskriver vi graden av öppenhet och indikerar den på den sista siffran. Till exempel så här: bakgrund: rgba (240,2,33,0,4035).
slutsats
Så att använda medan du arbetar medWebbplatsens design är en enkel men effektiv css "transparens" -egenskap, du kan göra dess element mer intressanta och märkbara med ett minimum av ansträngning. De beskrivna alternativen för att ange transparensegenskaper hjälper dig med detta.
</ p>
