Today i was messing with photoshop and a cool idea popped in my head. Why not create some metro styled buttons with transitions and animation to navigate your forum using SimplePortal HTML blocks top or bottom.

Nothing fancy but sure will call users attention.

Demo: Metro Blocks

Download the ZIP below and upload the images to the image folder. Make sure the URL to the images are correct in the code.

Create a HTML block Top or Bottom and add the following:

Code Select Expand


<ul class="portfolio-grid">
<li>
<a href="#" class="animated flipInX">
<img src="../images/1.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/2.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/3.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/4.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/5.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/6.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/7.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/8.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/9.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/10.png" alt="img01"/>
</a>
</li>
</ul>


In your ccs.index file add this at the very bottom:

Code Select Expand

.portfolio-grid {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.portfolio-grid li {
display: inline-block;
margin: 5px 5px 5px 5px;
vertical-align: top;
        width:212px;
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
        width: 100%;
border: none;
outline: none;
display: block;
position: relative;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
        border-radius: 50%;
        z-index: 9999;
}

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}

Have fun!

Icons used by IcoMoon App - Icon Font Generator

Nice but not working well

look my poligon

Nice but not working well

look my poligon

Thanx.  Did you added the css code in your block or in the css index?

up ... all work well - it's my fault, on PortaMx 1.51 I should use script block

up ... all work well - it's my fault, on PortaMx 1.51 I should use script block

Awesome. Glad it worked. I didnt know PortaMx uses 'script' as other portals use 'html'.  I just learned something new ;)

suggestion to optimize:

Code Select Expand

<li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/1.png" alt="img01"/>
                        </a>
                    </li>

replase like this:

Code Select Expand

<li>
                        <a target="_blank" href="#" class="animated flipInX">
                            <img src="../images/1.png" title="YOUR_TITLE" alt="YOUR_TITLE"/>
                        </a>
                    </li>

open in new tab  :cool:

Awesome! Thanx!