Hozzon létre egy fotó effekt fényességet css3-mal
Ebben a bemutatóban megmutatom, hogyan lehet újra létrehozni egy fényes kép hatását a CSS3 gradiensekkel.
HTML struktúra
Tehát ebben a rövid mini-bemutatóban az alap HTML5 struktúrát alkalmazzuk. A lehető legkevesebb lehetőséggel, mivel a kívánt hatást érdemes elérni, elsősorban a CSS használatával. Ezért a legjobb, ha a HTML a lehető legtisztább és szemantikai lehet.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Tehát az oldalszerkezet és a csomagolás mellett alapvetően csak egy DIV elem van (osztályfotóval), amelybe az IMG tagot helyeztük el.
Ez az összes HTML! Most menj a CSS szekcióba.
Először egyszerűen állítsa be az oldalstílusokat, hogy szorosan kezelhesse a fotóelemet. Itt csak hozzáadjuk a háttérszínt az egész oldalhoz és telepítjük a DIV csomagolót.
DIV-y stílusok hozzárendelése fotóval
A következő lépés stílusok hozzárendelése a tartalmi divhoz. Itt határozzuk meg a blokk magasságát és szélességét. Ebben a szakaszban ez a legfontosabb feladat, valamint a pozíció tulajdonságának a relatívhoz való beállítása. Az összes többi pusztán esztétikai célokat szolgál. Úgy tűnik, mintha egy dupla árnyékblokk lenne az egész kép és a keret körül 1px.
Most a kép jól néz ki. De nincs valami - a legfényesebb hatás. És ez a mini-tankönyv utolsó lépése.
Stílusok hozzárendelése a fotópszeudo elemhez: korábban
Ez az egész hatás legfontosabb lépése, stílusok hozzárendelése a pszeudo-elem divhez: korábban. Így készíthet fényes képet a fénykép tetején anélkül, hogy további HTML-jelölést kellene hozzáadnia. Ez szemantikusabb. Itt teljesen elhelyezzük ezt az elemet a fotó tetején (ezért fontos az előző lépéspozíció beállítása: relatív), és alkalmazzuk a CSS3 gradienseket az új pszeudoelem hátterére.
Tudom, hogy ezek a számok a kezdő tervezők nagyon félelmetesnek tűnnek. De alapvetően RGBA értékek (a színértékek, amelyekre alkalmazhatunk opacitást) a "stop" gradiensek belsejében. Hogyan magyarázzuk meg, mi történik ... a felsõ sarkok két felét a felsõ sarkon az ALSÓ JOBBRA. Az első fél teljes átláthatósággal kezdődik, 50% átlátszó fehérre. A második fél a teljes átláthatósághoz vezet (így alakul át egy átlós vonal), és ez továbbra is fennáll.
következtetés
Remélem, élvezni fogja ezt a bemutatót.
Kiadás: A webformyself parancs.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
