CSS sprite generálás egyszerűen (2019.04.17)
Hozzászólások
Számos megoldás van sprite készítésére, ha rákeresel hogy css sprite generator, akkor találhatsz jó sokat.
Hogy legyen egy konkrét példa, ez is egy ilyen program. Előnye, hogy el lehet menteni a sprite összeállításokat ("Save project"), mint projekt és később meg lehet nyitni ("open"), módosítani és annak megfelelően legyártja az új CSS kódokat.
A kezdéshez csak húzd a képeket a bal oldali dobozba, vagy
A generálandó CSS class módosítható, ha egy képet kiválasztasz.
Combined Image Filepath: hova kerüljön a sprite
Combined Image URL: a CSS-ben lévő háttérkép url
Label: megjegyzés a CSS-ben
Ha minden kész, akkor "Generate".
Ilyesmi lesz a CSS:
/* iconfinder_-38_3057674.png */
.sprite1
{
background:url('/images/css-sprites.png') -128px -0px;
display:inline-block;
width:128px;
height:128px;
}
/* iconfinder_Twitter-icon_380450.png */
.sprite2
{
background:url('/images/css-sprites.png') -256px -0px;
display:inline-block;
width:128px;
height:128px;
}
De minta HTML-t is generál.
Érdekel a webfejlesztés, weboldalak készítése?
Kattints ide oktató videókért!
Hozzászólások
Moderálási elvek, szabályzat