TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

11 CSS -kuvan leijuva tehoste Weeblylle

6

Edellisessä artikkelissamme näimme kuinka luoda peittokuvia leijuessa ja tässä artikkelissa tarkastelemme, miten luodaan yksinkertaisia ​​kuvan leijaustehosteita Weebly -sivustollesi. CSS -ominaisuuksien siirtymistä, muunnosta, suodatusta ja opasiteettia käytetään luomaan leijuva vaikutus Weebly -sivuston kuviin. Voit joko kopioida / liittää koko widget -koodin "Upota koodi" -elementtiin tai lisätä CSS -tyylin "Otsikkokoodi" -osaan ja HTML -koodin sivun " Upota koodi " -elementtiin.

Weeblyn CSS -kuvan leijuutehosteet

Voit hallita 11 eri tehostetta – loitontaa, lähentää, suurentaa, kutistaa, kyllästää, kontrastia, kirkkautta, harmaasävyä, sumennusta, värien kääntämistä ja opasiteettia. Alla on esitetty CSS- ja HTML -koodi sekä kunkin tyylin esittely.

  • Muista korvata Image-URL omalla kuvan URL-osoitteella. Voit joko ladata kuvia Omaisuus -osiosta tai käyttää Weebly -sivustosi eri sivujen URL -osoitteita tai käyttää toisen sivuston URL -osoitteita.
  • Voit muuttaa mittakaavan, harmaasävyn, kirkkauden, kontrastin jne. Arvoja omilla arvoillasi. Esimerkiksi "-webkit-filter: kirkkaus (0,25);" vähentää kirkkauden 25%: iin, jonka voit muuttaa "-webkit-filter: kirkkaus (1,25)" lisätäksesi kirkkautta 125%: iin.
  • Suodatinominaisuutta ei tueta Internet Explorerissa.

Tässä on täydellinen koodi kullekin kuvan leijailutehosteen tyypille. Voit tarkastella esikatselua viemällä hiiren kuvan päälle.

1 Suurenna kuvaa leijuessaan

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Loitonna kuvaa leijuessaan

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Suurenna kuvan kokoa liikuttaessa

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Pienennä kuvan kokoa liikuttaessa

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Muuta kuvan värien kylläisyyttä hiiren avulla

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Muunna kuva harmaasävyksi hiiren avulla

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Muuta kuvan kontrastia kuvanäytöllä

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Muuta kirkkautta kuvansiirron aikana

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Muuta kuvan sumeutta hiirellä

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 Käännä kuvan värit hiirellä

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Muuta peittävyyden väriä hiiren avulla

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Koska kaikki nämä tehosteet on luotu yleisellä CSS: llä, voit käyttää näitä koodeja millä tahansa HTML -sivulla. Tämä on esimerkiksi WordPress -sivusto, ja olemme käyttäneet WordPressissä " Custom HTML " -lohkoa kaikkien CSS -kuvien peittokuvatehosteiden esittelyyn.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja