Grupa: Viesis

UWM FORUMS · PORTFOLIO · VIETŅU TOP
JAUNĀKAIS FORUMĀ · BIEDRU SARAKSTS · INFO MEKLĒTĀJS · IZSEKOTĀS TĒMAS · NOBALSO


Ierakstus pievienot var tikai reģistrējies lietotājs!
  UWM AKTUĀLI: DISKUSIJA: Reputācijas restarts - DISKUSIJA: Steam spēļu izloze - NODERĪGI: "CW sistēma" uCoz modulī
  • Lappuse 1 no 1
  • 1
uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Jauni efekti kā attēlot bildes ar CSS3 palīdzību
Jauni efekti kā attēlot bildes ar CSS3 palīdzību
Antikrists
Ceturtdiena, 26.10.2017, 0:58:48 | Ieraksts #1
FORUMA APSARGS
Foruma ieraksti: 602

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis


Jaunākie apbalvojumi:


@Antikrists raksta .. :

Pielietojumam iespēju daudz jo būtībā nekas sarežģits , lai pielietotu kā vien ienak prātā.

Izvēlies kuru vajag

Code
<div class="grow pic"><img alt="girl" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="shrink pic"><img alt="city" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="sidepan pic"><img alt="kick" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="tilt pic"><img alt="" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="morph pic"><img alt="" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="blur pic"><img alt="plane" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="bw pic"><img alt="sea" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="brighten pic"><img alt="sea" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="sepia pic"><img alt="people" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="contrast pic"><img alt="dog" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="invert pic"><img alt="ipad" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>

<div class="opacity pic"><img alt="soccer" src="http://bildites.lv/images/w9uzjzns/86990/original.jpg" /></div>


Tāpat arī no CSS

Code
/*Visu bilzu stils*/
.pic {
height: 188px;
width: 188px;
overflow: hidden; /*Slepj visu kas netiek bloka*/
margin: 9px;
border: 10px solid #fff; /*Visam operetajsistemam*/
border: 10px solid #eee\9; /* IE6, IE7, IE8*/
-webkit-box-shadow: 2px 3px 10px #6E6E6E;
box-shadow: 2px 3px 10px #6E6E6E;
float: left;}
.pic:hover { cursor: pointer;}
/*Visi bilzu izmeri pec noklusejuma*/
.pic img {
width: 220px;
height: 188px;}

/*Palielinasana*/

.grow img {
height: 188px;
width: 188px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.grow img:hover {
width: 300px;
height: 300px;
margin-left: -50px;
margin-top: -50px;}

/*Samazinasana*/

.shrink img {
height: 200px;
width: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.shrink img:hover {
width: 300px;
height: 300px;}

/*Virziba pa kreisi*/

.sidepan img {
width: 250px;
height: 200px;
margin-left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.sidepan img:hover {
margin-left: -50px;}

/*Nedaudz sasverta uz sanu*/

.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);}

/*No kvadrata uz rinki*/

.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border: 10px solid #333;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}

/*Miglaina*/

.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.blur img:hover {
-webkit-filter: blur(2px);}

/*Melnbalta*/

.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.bw:hover {
-webkit-filter: grayscale(100%);}

/*Spilgta*/

.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.brighten img:hover {
-webkit-filter: brightness(60%);}

/*Sepija*/

.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.sepia img:hover {
-webkit-filter: sepia(100%);}

/*Kontrasts*/

.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.contrast img:hover {
-webkit-filter: contrast(185%);}

/*Inversija*/

.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.invert img:hover {
-webkit-filter: invert(100%); }

/*Daudz efektu*/

.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.opacity img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 300px;
height: 300px;
margin-left: -60px;
margin-top: -10px}


Bildes vietā liec $IMG_URL1$ vai citu ... screen url ... un taml

Iznākums , uzej uz bildes un redzesi




.
.


uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Jauni efekti kā attēlot bildes ar CSS3 palīdzību
  • Lappuse 1 no 1
  • 1
Meklēšana:

UWM apmeklēja:

RESPEKTABLĀKIE PORTĀLA FORUMA KLAVIATŪRISTI :
Foruma viszinis
Korijs
UWM karma: 380
Foruma atkarīgais
wuxmachine
UWM karma: 157
Foruma atkarīgais
Robiits
UWM karma: 87
Foruma šamanis
0wn3r
UWM karma: 80
Foruma atkarīgais
H[o_0]LiGaN
UWM karma: 78
Foruma atkarīgais
Spanky
UWM karma: 76
Foruma viszinis
Ar4ssS
UWM karma: 74
Foruma atkarīgais
Profth3tic
UWM karma: 55
Foruma atkarīgais
emciits
UWM karma: 52
Foruma atkarīgais
JackDaniel
UWM karma: 51
Foruma atkarīgais
Antikrists
UWM karma: 51
Foruma atkarīgais
Ken_D
UWM karma: 50
Ielāde...