Property css "öppenhet" - ett enkelt sätt att göra webbplatsen mer intressant design

Idag blir skapandet av webbdesign en konstform. Detta är inte bara en uppsättning sidelement av en viss färg och storlek, teckensnitt i olika stilar och tematiska målningar. För att göra din webbplats skiljer sig från andra, för att locka besökare uppmärksamhet och styra den till vissa delar, som används ett stort antal metoder och verktyg. Bland dem finns en mycket populär egenskap css - transparens. Denna teknik är ganska inne och glamorösa, och därför används ofta. Öppenhet kan ge olika objekt sidor på webbplatsen - textblocket eller hela bilden, till exempel. Det uppnås också på olika sätt. Låt oss undersöka dem nedan.

Parametrar specificerar de delar av öppenhet

Parametrar för att reglera insyn i delar av flera. De används beroende på de specifika mål, liksom webbläsare som är under "justeras" designen. Dessa inkluderar följande egenskaper:

• opacitet;
• filter;
• PNG-bild som bakgrund.

Egenskapsvärdes css "transparens" byts enligt följande: ju högre siffra, desto lägre är graden av öppenhet hos elementet. Opaciteten varierar det 0-1, i filtret - från 10 till 100. Och senare används för Interet Explorer, och alla andra tillämpliga opacitet egendom.

Transparency bild (ändra)

Låt oss börja med de alternativ som kommer att visas transparent när du flyttar objektet genom att dra med musen.

Låt oss överväga hur man anger insynen i bilden. CSS erbjuder två alternativ. För att göra detta måste du registrera det direkt i koden html-dokument på följande sätt:

1. Ange sökvägen till bilden.
2. Vi definierar parametrarna för öppenhet när markören inte. För att göra detta använder vi egenskaper onMouseOver och onmouseout, som föreskriver värdet av opacitet och filter.

Samma egenskaper kan anges i css-dokument och källkoden för att lägga till en referens till den. Resultaten visar sig densamma.

Insyn i text och sida block

När det gäller text eller blockera (transparent div), erbjuder css eget gottfinnande, liknande skapa en transparent bild, måste du använda den anslutna css-fil, där de önskade parametrarna är inställda. Du kan gå och ett enklare sätt. När du ställer in stilen blocket div style eller text p föreskriva följande html-kod för att onMouseOver och onmouseout element. Båda alternativen arbeta och producera det önskade resultatet.

öppenhet konstant

I vissa fall, insynen i ett föremål, ett designelement eller text du vill ställa in löpande. I denna situation är lösningen ännu enklare än när du håller muspekaren.

Css element för öppenhet kommer att ges av följande kod. I block div style förskriva värden för bakgrunden (t ex # ff8800), opacitet (t ex 0,5) och bredden (bredden) och stoppning (padding).

För bild kodvärden gör och opacitet filter, och ange sökvägen till bilden.

RGBA-metoden

Det finns andra alternativ för att använda den här egenskapen css: transparens kan tillämpas på basfärgen någon designelement. Den använder RGBA metod. De tre första bokstäverna står för grundfärgerna (röd, fission, blå) och den sista - alfa, som sätter grad av öppenhet. Använda RGBA-format föreskriver öppenhet, pekar den till den sista siffran. Till exempel, enligt följande: Bakgrund: RGBA (240,2,33,0.4035).

slutsats

Genom att använda i samband med arbetet med webbdesign enkel men effektiv funktion css "öppenhet" kan du göra det mer intressant och mer märkbar element med minimal ansträngning. De beskrivna utförandena är anpassade funktioner öppenhet kommer att hjälpa dig med detta.