Képeffekt variációk css kódban G-Portálon és FTP kapcsolatos oldalon
Szerencsére a képekkel is lehet bűvészkedni, hála a css kódok határtalanságának. Mutatok is 4 példát, melyeket a saját css kódotokba másolva alkalmazhattok.
Példák képeffektre css kódokban:
|
< style type="text/css" >
img , a img { /* nem linkelt kép és linkelt kép */
background: url(''); background-color: #cccccc ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
opacity:1.0; filter:alpha(opacity=100); }
img:hover , a img:hover { /* nem linkelt kép és linkelt kép kattintáskor szürke lesz */
background: url(''); background-color: #888888 ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity:1.0;
} < /style >
| |
|
< style type="text/css" >
img , a img { /* nem linkelt kép és linkelt kép */
background: url(''); background-color: #cccccc ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
opacity:1.0; filter:alpha(opacity=100); }
img:hover , a img:hover { /* nem linkelt kép és linkelt kép kattintáskor fényes lesz */
background: url(''); background-color: #888888 ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
filter: brightness(200%); -webkit-filter: brightness(150%);
} < /style >
| |
|
< style type="text/css" >
img , a img { /* nem linkelt kép és linkelt kép */
background: url(''); background-color: #cccccc ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
opacity:1.0; filter:alpha(opacity=100); }
img:hover , a img:hover { /* nem linkelt kép és linkelt kép kattintáskor árnyékolt lesz */
background: url(''); background-color: #222222 ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
filter: drop-shadow(4px 4px 4px grey); -webkit-filter: drop-shadow(4px 4px 4px grey);
} < /style >
| |
|
< style type="text/css" >
img , a img { /* nem linkelt kép és linkelt kép */
background: url(''); background-color: #888888 ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
opacity:1.0; filter:alpha(opacity=100); }
img:hover , a img:hover { /* nem linkelt kép és linkelt kép kattintáskor sepia lesz */
background: url(''); background-color: #222222 ;
padding: 2px 2px 2px 2px; margin: 0px; border: 0px solid #000000 ;
filter: sepia(100%); -webkit-filter: sepia(100%);
} < /style >
|
|
AJÁNLOM AZ OLDALT
