Radošajiem māksliniekiem
Mājaslapu izveidei, aprīkošanai
Atpūtai, izklaidei, diskusijām
Grupa: Viesis
Ienākt
  • |
    • Reģistrācija
    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 » Matereālu izskats kino jaunumiem, rakstiem un tamlīdzīgi
    Matereālu izskats kino jaunumiem, rakstiem un tamlīdzīgi
    Antikrists
    Otrdiena, 07.02.2017, 4:23:12 | Ieraksts #1
    FORUMA APSARGS
    Foruma ieraksti: 606
    UWM Reputācija:
    uWEBMEISTARS ordeņi:

    1. līmenis

    2. līmenis

    3. līmenis

    Jaunākie apbalvojumi:


    		@Antikrists raksta .. :
    Matereālu izskata divi veidi jebkādam saturam, var izmantot kā informeri.

    Kā tas ir šajā gadijumā matereālu izskati pielāgoti savām vajadzībām kā informeri.

    Code
    <div class="primary">
    <div class="internal">
    <?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>
    <div class="cover" style="background-image: url('$IMG_URL1$')">
    <span class="headline">$TITLE$<br><br></span>
    <span class="category" style="left: 2px; bottom: 5px;">$CATEGORY_NAME$</span>

    <span class="category" style="right: 2px; bottom: 5px;">
    <span class="tooltip">Info

    <em>Skatijumi: $READS$<br>Reitings: $RATING$<br>Komentāri: $COMMENTS_NUM$<i></i></em></span></span>
    <div class="rear" onclick="location.href='$ENTRY_URL$'">

    <span class="subrear"><center>$MESSAGE$</center></span>

    </div></div></div>

    <style type="text/css">
    .internal {
    display: block;
    width: 97%;
    float: left;
    margin: 0.65%;
    }
    .cover {
    display: block;
    position: relative;
    padding-bottom: 135%;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    box-shadow:0 5px 5px #000000;
    -moz-box-shadow:0 5px 5px #000000;
    -webkit-box-shadow:0 5px 5px #000000;
    }
    .headline {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 26px;
    overflow: hidden;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    text-align: center;
    padding: 0 2px 4px 2px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    }
    .rear {
    z-index: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 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;
    }
    .rear:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    }
    .subrear {
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    bottom: 28px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    font-family: Arial;
    font-style: italic;
    font-size: 12px;
    color: #FFFFFF;
    padding: 2px;
    text-align: left;
    }
    .rear b {
    position: absolute;
    left: 5px;
    bottom: 5px;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.85);
    padding: 1px 5px;
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    -ms-transition: all 1.5s linear;
    transition: all 1.5s linear;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    }
    .rear b a {
    color: #4444CCCCCC;
    text-decoration: none;
    }
    .rear:hover b {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    }
    .category {
    position: absolute;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
    animation: increase 1.5s linear;
    -webkit-animation: increase 1.5s linear;
    -moz-animation: increase 1.5s linear;
    -o-animation: increase 1.5s linear;
    -ms-animation: increase 1.5s linear;
    }
    @keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-webkit-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-moz-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-o-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-ms-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    .tooltip {
    z-index: 5;
    position: relative;
    cursor: pointer;
    }
    .tooltip em {
    display: none;
    }
    .tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.65);
    color: #4444CCCCCC;
    padding: 3px 5px;
    bottom: 22px;
    right: 0;
    width: 100px;
    box-shadow: 0 0 5px #363636;
    border-radius: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 0 0 5px #363636;
    -moz-box-shadow: 0 0 5px #363636;
    }
    .tooltip:hover em i {
    position: absolute;
    bottom: -7px;
    right: 5px;
    border-top: 7px solid #000;
    border-left: 7px solid transparent;
    display: block;
    }
    @media all and (max-width: 640px) {
    .internal {
    width: 48%;
    margin: 1%;
    }
    </style>

    Orģināls ar 2 kolonām.

    Code
    <div class="internal">
    <?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>
    <div class="cover" style="background-image: url('$IMG_URL1$')">
    <span class="headline">$TITLE$</span>
    <span class="category" style="left: 2px; bottom: 5px;">$CATEGORY_NAME$</span>
    <span class="category" style="right: 2px; bottom: 5px;">
    <span class="tooltip">INFO<em>Skatijumi: $READS$<br>Reitings: $RATING$<br>Komentāri: $COMMENTS_NUM$<i></i></em></span></span>   
    <div class="rear" onclick="location.href='$ENTRY_URL$'">
    <span class="subrear">$MESSAGE$</span>
    <b><a href="$PROFILE_URL$">$USERNAME$</a> | $DATE$</b>
    </div></div></div>

    <style type="text/css">
    .internal {
    display: block;
    width: 48%;  
    float: left;
    margin: 1%;
    }
    .cover {
    display: block;
    position: relative;
    padding-bottom: 62%;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    box-shadow:0 5px 5px #000000;
    -moz-box-shadow:0 5px 5px #000000;
    -webkit-box-shadow:0 5px 5px #000000;
    }
    .headline {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 16px;
    overflow: hidden;    
    text-transform: uppercase;    
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    text-align: center;
    padding: 0 2px 4px 2px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    }
    .rear {
    z-index: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 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;
    }
    .rear:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    }
    .subrear  {
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    bottom: 28px;
    overflow: hidden;  
    background: rgba(0, 0, 0, 0.45);
    font-family: Arial;
    font-style: italic;
    font-size: 12px;
    color: #FFFFFF;
    padding: 2px 3px;
    text-align: left;
    }
    .rear b {
    position: absolute;
    left: 5px;
    bottom: 5px;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.85);
    padding: 1px 5px;
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    -ms-transition: all 1.5s linear;
    transition: all 1.5s linear;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    }
    .rear b a {
    color: #CCCCCC;
    text-decoration: none;
    }
    .rear:hover b {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    }
    .category {
    position: absolute;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
    animation: increase 1.5s linear;
    -webkit-animation: increase 1.5s linear;
    -moz-animation: increase 1.5s linear;
    -o-animation: increase 1.5s linear;
    -ms-animation: increase 1.5s linear;
    }    
    @keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-webkit-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-moz-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-o-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-ms-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    .tooltip {
    z-index: 5;    
    position: relative;
    cursor: pointer;
    }
    .tooltip em {
    display: none;
    }
    .tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.65);
    color: #CCCCCC;
    padding: 3px 5px;
    bottom: 22px;
    right: 0;
    width: 100px;
    box-shadow: 0 0 5px #363636;
    border-radius: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 0 0 5px #363636;
    -moz-box-shadow: 0 0 5px #363636;
    }
    .tooltip:hover em i {
    position: absolute;
    bottom: -7px;
    right: 5px;
    border-top: 7px solid #000;
    border-left: 7px solid transparent;
    display: block;
    }
    @media all and (max-width: 480px) {
    .internal {
    width: 98%;  
    float: none;
    margin: 1%;    
    }   
    </style>


    Orģināls ar 3 kolonām.

    Code


    <div class="internal">
    <?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>
    <div class="cover" style="background-image: url('$IMG_URL1$')">
    <span class="headline">$TITLE$</span>
    <span class="category" style="left: 2px; bottom: 5px;">$CATEGORY_NAME$</span>
    <span class="category" style="right: 2px; bottom: 5px;">
    <span class="tooltip">INFO<em>Skatijumi: $READS$<br>Reitings: $RATING$<br>Komentāri: $COMMENTS_NUM$<i></i></em></span></span>  
    <div class="rear" onclick="location.href='$ENTRY_URL$'">
    <span class="subrear">$MESSAGE$</span>
    <b><a href="$PROFILE_URL$">$USERNAME$</a> | $DATE$</b>
    </div></div></div>

    <style type="text/css">
    .internal {
    display: block;
    width: 32%;  
    float: left;
    margin: 0.65%;
    }
    .cover {
    display: block;
    position: relative;
    padding-bottom: 135%;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    box-shadow:0 5px 5px #000000;
    -moz-box-shadow:0 5px 5px #000000;
    -webkit-box-shadow:0 5px 5px #000000;
    }
    .headline {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 16px;
    overflow: hidden;    
    text-transform: uppercase;    
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    text-align: center;
    padding: 0 2px 4px 2px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    }
    .rear {
    z-index: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 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;
    }
    .rear:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    }
    .subrear  {
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    bottom: 28px;
    overflow: hidden;  
    background: rgba(0, 0, 0, 0.45);
    font-family: Arial;
    font-style: italic;
    font-size: 12px;
    color: #FFFFFF;
    padding: 2px;
    text-align: left;
    }
    .rear b {
    position: absolute;
    left: 5px;
    bottom: 5px;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.85);
    padding: 1px 5px;
    box-shadow:0 2px 3px #000000;
    -moz-box-shadow:0 2px 3px #000000;
    -webkit-box-shadow:0 2px 3px #000000;
    -webkit-transition: all 1.5s linear;
    -moz-transition: all 1.5s linear;
    -o-transition: all 1.5s linear;
    -ms-transition: all 1.5s linear;
    transition: all 1.5s linear;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    }
    .rear b a {
    color: #CCCCCC;
    text-decoration: none;
    }
    .rear:hover b {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    }
    .category {
    position: absolute;
    text-transform: uppercase;
    font-family: Impact;
    font-size: 12px;
    font-weight: 500;
    color: #CCCCCC;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
    animation: increase 1.5s linear;
    -webkit-animation: increase 1.5s linear;
    -moz-animation: increase 1.5s linear;
    -o-animation: increase 1.5s linear;
    -ms-animation: increase 1.5s linear;
    }
    @keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-webkit-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-moz-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-o-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    @-ms-keyframes increase {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
    }
    .tooltip {
    z-index: 5;    
    position: relative;
    cursor: pointer;
    }
    .tooltip em {
    display: none;
    }
    .tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.65);
    color: #CCCCCC;
    padding: 3px 5px;
    bottom: 22px;
    right: 0;
    width: 100px;
    box-shadow: 0 0 5px #363636;
    border-radius: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 0 0 5px #363636;
    -moz-box-shadow: 0 0 5px #363636;
    }
    .tooltip:hover em i {
    position: absolute;
    bottom: -7px;
    right: 5px;
    border-top: 7px solid #000;
    border-left: 7px solid transparent;
    display: block;
    }
    @media all and (max-width: 640px) {
    .internal {
    width: 48%;  
    margin: 1%;    
    }     
    </style>


    Iznākums



    -------------------------------------------------------------------------------------------
    -------------------------------------------------------------------------------------------

    ----------------------------------------------

    Cits matereālu izskats kurš izmantots kā informeris.

    Code

    <a href="$ENTRY_URL$">
    <div class="v_mat">
    <div class="v_mat_img">
    <img src="$IMG_URL1$" alt="$TITLE$">
    <div class="v_mat_blur">
    <span class="v_mat_blur_img" style="background-image: url('$IMG_URL1$')"></span>
    <div class="v_mat_title"><h1>$TITLE$</h1>
    <div class="v_mat_message">$MESSAGE$</div>
    </div>
    </div>
    <div class="v_mat_info">
    <div class="v_mat_left">$CATEGORY_NAME$</div>
    <div class="v_mat_right"></div>
    </div>
    </div>
    </div>
    </a>

    <style type="text/css">

    .v_mat {box-shadow: 0 0 3px 1px rgba(0,119,255,.45); display: inline-block; float: left; width: calc(100% - 10px); height: 330px; margin: 5px; background: rgba(0,0,0,.15); border-radius: 3px; overflow: hidden;}
    .v_mat:hover {box-shadow: 0 0 3px 3px rgba(0,119,255,.65);}
    .v_mat_img {width: 100%; height: 330px;}
    .v_mat_img img {width: 100%; height: 330px; object-fit: cover;}
    .v_mat_blur {width: 100%; height: 50px; overflow: hidden; transform: translate(0,-53px); box-shadow: 0 -2px 0 0 rgba(0,119,255,.65);}
    .v_mat_blur_img {display: block; width: calc(100% + 20px); height: 320px; transform: translate(0,-255px); background-position: center; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); margin: -10px;}
    .v_mat_title {width: calc(110% - 30px); height: 50px; padding: 0 15px; transform: translate(0,-300px); color: rgba(0,0,0,.75); background-color: rgba(255,255,255,.25); overflow: hidden;}
    .v_mat_title h1 {line-height: 42px; text-transform: uppercase; font-family: 'Roboto',sans-serif;font-size: 10px; font-weight: bold;}
    .v_mat_info {width: 100%; height: 20px; display: table; transform: translate(0,-353px); opacity: .65; background: rgba(0,0,0,.45);}
    .v_mat_left, .v_mat_right {width: calc(50% - 10px); padding: 0 5px; display: table-cell; vertical-align: middle; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.85); font-size: 12px; font-weight: bold;}
    .v_mat_right {text-align: right;}
    .v_mat_message {height: 0; width: calc(100% - 10px); padding: 0 5px; overflow: hidden; font-size: 12px; line-htight: 12px; font-weight: normal; background: rgba(255,255,255,.3)}

    .v_mat:hover .v_mat_blur {height: 330px; transform: translate(0,-303px);}
    .v_mat:hover .v_mat_blur_img {transform: translate(0,0);}
    .v_mat:hover .v_mat_title {height: 280px}
    .v_mat:hover .v_mat_message {height: 250px; transform: translate(0,0);}
    .v_mat:hover .v_mat_info {background: rgba(0,0,0,.85); opacity: 1; transform: translate(0,-353px);}

    .v_mat, .v_mat_info, .v_mat_blur, .v_mat_title, .v_mat_message {transition: all linear .2s;}

    </style>


    Orģināls, platāks ,1 vai 2 kolonām.

    Code
    <a href="$ENTRY_URL$">  
      <div class="v_mat">  
      <div class="v_mat_img">  
      <img src="$IMG_URL1$" alt="$TITLE$">  
      <div class="v_mat_blur">  
      <span class="v_mat_blur_img" style="background-image: url('$IMG_URL1$')"></span>  
      <div class="v_mat_title"><h1>$TITLE$</h1>  
      <div class="v_mat_message">$MESSAGE$</div>  
      </div>  
      </div>  
      <div class="v_mat_info">  
      <div class="v_mat_left">$CATEGORY_NAME$</div>  
      <div class="v_mat_right">$DATE$ - $TIME$</div>  
      </div>  
      </div>  
      </div>  
      </a>
    <style type="text/css">

    .v_mat {box-shadow: 0 0 3px 1px rgba(0,119,255,.45); display: inline-block; float: left; width: calc(50% - 10px); height: 300px; margin: 5px; background: rgba(0,0,0,.15); border-radius: 3px; overflow: hidden;}
    .v_mat:hover {box-shadow: 0 0 3px 3px rgba(0,119,255,.65);}
    .v_mat_img {width: 100%; height: 300px;}
    .v_mat_img img {width: 100%; height: 300px; object-fit: cover;}
    .v_mat_blur {width: 100%; height: 50px; overflow: hidden; transform: translate(0,-53px); box-shadow: 0 -2px 0 0 rgba(0,119,255,.65);}
    .v_mat_blur_img {display: block; width: calc(100% + 20px); height: 320px; transform: translate(0,-255px); background-position: center; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); margin: -10px;}
    .v_mat_title {width: calc(100% - 30px); height: 50px; padding: 0 15px; transform: translate(0,-300px); color: rgba(0,0,0,.75); background-color: rgba(255,255,255,.25); overflow: hidden;}
    .v_mat_title h1 {line-height: 42px; text-transform: uppercase; font-family: 'Roboto',sans-serif;font-size: 17px; font-weight: bold;}
    .v_mat_info {width: 100%; height: 20px; display: table; transform: translate(0,-353px); opacity: .65; background: rgba(0,0,0,.45);}
    .v_mat_left, .v_mat_right {width: calc(50% - 10px); padding: 0 5px; display: table-cell; vertical-align: middle; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.85); font-size: 12px; font-weight: bold;}
    .v_mat_right {text-align: right;}
    .v_mat_message {height: 0; width: calc(100% - 10px); padding: 0 5px; overflow: hidden; font-size: 12px; line-htight: 12px; font-weight: normal; background: rgba(255,255,255,.3)}

    .v_mat:hover .v_mat_blur {height: 330px; transform: translate(0,-303px);}
    .v_mat:hover .v_mat_blur_img {transform: translate(0,0);}
    .v_mat:hover .v_mat_title {height: 280px}
    .v_mat:hover .v_mat_message {height: 200px; transform: translate(0,0);}
    .v_mat:hover .v_mat_info {background: rgba(0,0,0,.85); opacity: 1; transform: translate(0,-353px);}

    .v_mat, .v_mat_info, .v_mat_blur, .v_mat_title, .v_mat_message {transition: all linear .2s;}

    </style>


    Iznākums
    Pielikumi: 0530841.png (544.0 Kb) · 4020285.png (428.1 Kb)


    .
    .


    uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Matereālu izskats kino jaunumiem, rakstiem un tamlīdzīgi
    • 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...

     uWEBMEISTARS - weblapu veidošanas platformu pamācību un pakalpojumu interneta vides 'rokasgrāmata' / 2011-2024 - visas tiesības aizsargātas (c) UWM
    Mājaslapa izmanto internetā brīvi pieejamus, kā arī pašu radītus materiālus, kuru pārpublicēšanas gadījumā atsauce uz UWM kā avotu ir obligāta!