Property css "transparantie" - een eenvoudige manier om een ​​website design interessant

click fraud protection

Vandaag, de creatie van de website van het ontwerp wordt een echte kunst.Het is niet alleen een set van pagina's van een bepaalde kleur en grootte, fonts, verschillende stijlen en thema's.Om een ​​website anders dan anderen te maken, om de aandacht van bezoekers te trekken en op te sturen naar die of andere elementen met behulp van een groot aantal methoden en instrumenten.Onder hen is er een zeer populaire onroerend css - transparantie.Deze techniek is nogal in de mode en glamour, en daarom wordt vaak gebruikt.Tekst, beeld, of het geheel, bijvoorbeeld - U kunt de transparantie van de verschillende objecten pagina's geven.Het kan ook bereikt worden op verschillende manieren.Laten we ze hieronder te onderzoeken.

parameters om de transparantie van de elementen

parameters waardoor de transparantie van elementen van verschillende passen ingesteld.Ze worden gebruikt afhankelijk van de specifieke doelen en de browser, die onder de "aangepaste" ontwerp.Deze omvatten de volgende eigenschappen:

  • dekking;
  • filter;
  • PNG-afbeelding als achtergrond.Hoe hoger het getal, hoe lager het niveau van de transparantie van het element:

bezitswaarden css "transparantie" worden als volgt veranderd.De dekking varieert van 0 tot 1, in filter - van 10 tot 100. De laatste wordt gebruikt voor het browsergebaseerde Interet Explorer, en alle andere toepasselijke ligt opaciteit.Image

Transparency (veranderende)

beginnen met opties als transparantie zich zal manifesteren wanneer je de muis cursor te verplaatsen naar het item.

nagaan hoe de transparantie van de afbeelding instellen.CSS biedt twee opties.Om dit te doen, moet u deze registreren in de code html-document als volgt:

  1. Geef het pad naar de afbeelding.
  2. definieert de parameters van transparantie wanneer de cursor niet.Hiervoor gebruiken we de eigenschappen onmouseover en onmouseout, die de waarde en de ondoorzichtigheid filter voorschrijft.

Deze kenmerken kunnen in css-document en de source code om een ​​link toe te voegen om het te worden voorgeschreven.De resultaten blijken hetzelfde.

transparante tekstblokken en pagina

Zoals voor de tekst of blok (transparant div), css biedt haar optie, vergelijkbaar met het creëren van een transparante afbeelding, die wordt gebruikt verbonden css-bestand, die zal worden de nodige parameters.U kunt gaan en een eenvoudiger manier.Wanneer u de stijl blok div style of tekst p voorschrijven de volgende html-code elementen voor onmouseover en onmouseout.Beide opties werken en waarbij het gewenste resultaat.

Transparantie constante

In sommige gevallen is de transparantie van het object, een design element of tekst die u wilt op een permanente basis op te zetten.In deze situatie is de oplossing nog eenvoudiger dan bij de muis.

css element voor transparantie zal worden gegeven aan de volgende code.In blok div style voorgeschreven waarden voor achtergrond (bijvoorbeeld # ff8800), opaciteit (bijvoorbeeld 0,5) en de breedte (breedte) en opvulling (padding).

voor foto's in de code zijn het maken van waarden en ondoorzichtigheid filter, en geef het pad naar de afbeelding.

RGBA-methode

Er zijn andere opties voor het gebruik van deze eigenschap css: transparantie kan worden toegepast op de achtergrondkleur van een element van design.Het gebruikt de methode RGBA.De eerste drie letters vertegenwoordigen de basiskleuren (rood, kernsplijting, blauw), en de laatste - alpha, die het niveau van transparantie stelt.Met behulp RGBA-formaat schrijft transparantie, wijzend naar de laatste cijfer.Bijvoorbeeld, als: achtergrond: RGBA (240,2,33,0.4035).

Conclusie

Zo, met behulp van in de loop van het werk op de site ontwerp is eenvoudig maar spectaculair pand css "transparantie", kunt u het interessanter en meer merkbaar elementen van minimale inspanning te maken.De beschreven uitvoeringsvormen werkprestaties transparantie zal u helpen met dit.