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 » 3D Matereālu izskats
3D Matereālu izskats
Antikrists
Ceturtdiena, 07.05.2015, 8:35:16 | 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 .. :

Paraugā kā filmu portāla matereālu izskats , bet var pielāgot arī citam.

Code
<style type="text/css">      

           
/*************************************      
Build the scene and rotate on hover      
**************************************/      

.scene {      
      width: 260px;      
      height: 370px;      
      margin: 30px;      
      float: left;      
      -webkit-perspective: 1000px;      
      -moz-perspective: 1000px;      
      perspective: 1000px;      
}      

.movie {      
      width: 260px;      
      height: 370px;      
      -webkit-transform-style: preserve-3d;      
      -moz-transform-style: preserve-3d;      
      transform-style: preserve-3d;      
      -webkit-transform: translateZ(-130px);      
      -moz-transform: translateZ(-130px);      
      transform: translateZ(-130px);      
      -webkit-transition: -webkit-transform 350ms;      
      -moz-transition: -moz-transform 350ms;      
      transition: transform 350ms;      
}      

.movie:hover {      
      -webkit-transform: rotateY(-78deg) translateZ(20px);      
      -moz-transform: rotateY(-78deg) translateZ(20px);      
      transform: rotateY(-78deg) translateZ(20px);      
}      

/*************************************      
Transform and style the two planes      
**************************************/      

.movie .poster,      
.movie .info {      
      position: absolute;      
      width: 260px;      
      height: 370px;      
      background-color: #fff;      
      -webkit-backface-visibility: hidden;      
      -moz-backface-visibility: hidden;      
      backface-visibility: hidden;      
}      

.movie .poster {      
      -webkit-transform: translateZ(130px);      
      -moz-transform: translateZ(130px);      
      transform: translateZ(130px);      
      background-size: cover;      
      background-repeat: no-repeat;      
}      

.movie .info {      
      -webkit-transform: rotateY(90deg) translateZ(130px);      
      -moz-transform: rotateY(90deg) translateZ(130px);      
      transform: rotateY(90deg) translateZ(130px);      
      border: 1px solid #B8B5B5;      
      font-size: 0.8em;      
      text-align: justify;      
      font-family: Tahoma, Geneva, sans-serif;      
}      

/*************************************      
Shadow beneath the 3D object      
**************************************/      

.csstransforms3d .movie::after {      
      content: '';      
      width: 260px;      
      height: 260px;      
      position: absolute;      
      bottom: 0;      
      box-shadow: 0 30px 50px rgba(0,0,0,0.3);      
      -webkit-transform-origin: 100% 100%;      
      -moz-transform-origin: 100% 100%;      
      transform-origin: 100% 100%;      
      -webkit-transform: rotateX(90deg) translateY(130px);      
      -moz-transform: rotateX(90deg) translateY(130px);      
      transform: rotateX(90deg) translateY(130px);      
      -webkit-transition: box-shadow 350ms;      
      -moz-transition: box-shadow 350ms;      
      transition: box-shadow 350ms;      
}      

.csstransforms3d .movie:hover::after {      
      box-shadow: 20px -5px 50px rgba(0,0,0,0.3);      
}      

/*************************************      
Movie information      
**************************************/      

.info header {      
      color: #FFF;      
      padding: 7px 10px;      
      font-weight: bold;      
      height: 165px;      
      background-size: contain;      
      background-repeat: no-repeat;      
      text-shadow: 0px 1px 1px rgba(0,0,0,1);      
}      

.info header h1 {      
      margin: 0 0 2px;      
      font-size: 1.4em;      
}      

.info header .rating {      
      border: 1px solid #FFF;      
      padding: 0px 3px;      
}      

.info p {      
      padding: 1.2em 1.4em;      
      margin: 2px 0 0;      
      font-weight: 400;      
      color: #666;      
      line-height: 1.4em;      
      border-top: 10px solid #555;      
}      

/*************************************      
Generate "lighting" using box shadows      
**************************************/      

.movie .poster,      
.movie .info,      
.movie .info header {      
      -webkit-transition: box-shadow 350ms;      
      -moz-transition: box-shadow 350ms;      
      transition: box-shadow 350ms;      
}      

.csstransforms3d .movie .poster {      
      box-shadow: inset 0px 0px 40px rgba(255,255,255,0);      
}      

.csstransforms3d .movie:hover .poster {      
      box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);      
}      

.csstransforms3d .movie .info,      
.csstransforms3d .movie .info header {      
      box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);      
}      

.csstransforms3d .movie:hover .info,      
.csstransforms3d .movie:hover .info header {      
      box-shadow: inset 0px 0px 40px rgba(0,0,0,0);      
}      

/*************************************      
Posters and still images      
**************************************/      
.info {      
      background-repeat: no-repeat;      
      background-size: 260px 185px !important;      
}      

.poster {      
      background-repeat: no-repeat;      
      background-size: 260px 370px !important;      
}      

/*************************************      
Fallback      
**************************************/      
.no-csstransforms3d .movie .poster,      
.no-csstransforms3d .movie .info {      
      position: relative;      
}      

/*************************************      
Media Queries      
**************************************/      
@media screen and (max-width: 60.75em){      
      .scene {      
      float: none;      
      margin: 30px auto 60px;      
      }      
}      
           
</style>      
<div class="scene">      
<div class="movie" onclick="return true">      
      <div class="poster" style="background-image: url($IMG_URL1$);"></div>      
      <div class="info" style="background-image: url($IMG_URL2$);">      
      <header>      
          <h1>$TITLE$ </h1><br>      
          <span class="1">Kategorija : $CATEGORY_NAME$</span><br>      
          <span class="2">Gads : $OTHER1$</span>      
      </header>      
      <p>      
               
          <a href="$ENTRY_URL$"><?if(len($MESSAGE$)>395)?><?substr($MESSAGE$,0,353)?> ... <span style="color:red">Lasīt tālāk »</span><?else?>$MESSAGE$ <?endif?>
               
               
      </a>      
      </p>      
      </div>      
      </div>      
      </div>


Pirms uziet ar peli -

$IMG_URL1$ - Choose File - Pievienojot bildi izvēlies vertikālu



Uzejot ar peli -

$IMG_URL2$ - Tur pat - Choose File blakus spiežot krustiņu izvēlies piemēram - Anaconda movie wallpaper googlē atrasto bildi.



-----------

Code
<span class="2">Gads : $OTHER1$</span>
  

Ziņā - Site News modulim atķeksē - Module settings vajadzīgos laukus - Additional field 1 , Additional field 2 ... citos modulos $AUTOR_SITE$ vai taml.

Lai pēc tam nebūtu jāzīle kas tie tur tādi par papildus laukiem eju uz http://tavs web.lv/panel/?a=signs un piemēram - Site News modulī - NEW ENTRY FORM OF THE SITE NEWS MODULE - Rediģē nosaukumus tapat citos kur varbūt tev ir autora saits vai taml.

Papildus lauku ziņā

Code
<span class="2">Gads : $OTHER1$</span>

<span class="3">Režisors : $OTHER2$</span>

<span class="4">Aktieri : $OTHER3$</span>


Un taml cik nu vēl var papildus info.
Pielikumi: 7208908.png(239.5 Kb) · 6999277.png(94.3 Kb)



.
.


uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » 3D Matereālu izskats
  • 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...