InternetDisseny web

Css propietat "transparència" - una forma senzilla de fer que el lloc d'un disseny més interessant

Avui dia, la creació de disseny de llocs web es converteix en una forma d'art. Això no és només un conjunt d'elements de la pàgina d'un determinat color i mida, fonts de diferents estils i pintures temàtiques. Per tal de fer que el seu lloc diferent dels altres, per atreure l'atenció dels visitants i dirigir-la a certs elements, s'utilitza un gran nombre de mètodes i eines. Entre ells hi ha una molt popular de propietats de CSS - transparència. Aquesta tècnica és molt de moda i glamour, i per tant s'utilitza sovint. La transparència pot donar diferents objectes pàgines de la web - bloc de text o la imatge completa, per exemple. També aconseguir de diferents maneres. Examinem a continuació.

Els paràmetres especifiquen els elements de transparència

Paràmetres per regular la transparència dels elements diversos. S'utilitzen en funció dels objectius específics, així com el navegador, que està sota el disseny "ajustat". Aquests inclouen les següents propietats:

  • opacitat;
  • filtrar;
  • PNG-imatge com a fons.

Valor de la propietat CSS "transparència" es canvien de la següent manera: com més gran sigui el nombre, menor és el nivell de transparència de l'element. L'opacitat, que varia de 0 a 1, en el filtre - de 10 a 100. I l'últim s'utilitza per al navegador Interet Explorer i tots els altres béns opacitat aplicable.

La transparència de la imatge (canviar)

Anem a començar amb les opcions que apareixeran transparents quan es mou l'element arrossegant el ratolí.

Considerem com especificar la transparència de la imatge. CSS ofereix dues opcions. Per a això, ha de registrar directament en el codi HTML-document de la següent manera:

    1. Especificar la ruta a la imatge.
    2. Definim els paràmetres de transparència quan el cursor no ho és. Per a això, utilitzem les propietats de la onMouseOver i onmouseout, que estableix el valor de l'opacitat i el filtre.

    Les mateixes característiques es poden prescriure en css-document i el codi font per afegir una referència a la mateixa. Els resultats resulten de la mateixa.

    La transparència dels blocs de text i de pàgina

    Pel que fa al text o bloc (div transparent), CSS ofereix la seva opció, similar a crear una imatge transparent, vostè ha d'utilitzar el css-arxiu connectada, en el qual s'estableixen els paràmetres desitjats. Pot anar a una manera més senzilla. En configurar l'estil div bloc d'estil o de text p imposar entre codi HTML a onMouseOver i onmouseout elements. Les dues opcions funcionen i produeixen el resultat desitjat.

    constant de la transparència

    En alguns casos, la transparència d'un objecte, un element de disseny o el text que voleu establir de manera permanent. En aquesta situació, la solució és encara més simple que quan es passa el cursor del ratolí.

    css element de transparència ha de donar el codi següent. En l'estil div bloc prescriure valors per al fons (per exemple, # ff8800), opacitat (per exemple, 0,5) i l'amplada (amplada) i el farcit (farcit).

    Per a la imatge de valors de codi estan fent i el filtre d'opacitat, i especificar la ruta a la imatge.

    RGBA-mètode

    Hi ha altres opcions per utilitzar aquesta propietat CSS: la transparència es pot aplicar a la base de color de qualsevol element de disseny. Utilitza el mètode RGBA. Les tres primeres lletres corresponen als colors bàsics (vermell, fissió, blau), i l'últim - alfa, que estableix el nivell de transparència. Usant RGBA format prescriu la transparència, apuntant a l'última xifra. Per exemple, com: Fons: RGBA (240,2,33,0.4035).

    conclusió

    D'aquesta manera, mitjançant l'ús en el curs dels treballs sobre el disseny del lloc característica simple però eficaç css "transparència", pot fer que els elements amb un mínim esforç més interessant i més notable. Les realitzacions descrites són característiques de transparència personalitzats l'ajudaran amb això.

    Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 ca.unansea.com. Theme powered by WordPress.