Slide-up-Boxes (gadget code)

Φίλοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω το κώδικα από ένα slide-up-box...δηλαδή κουτιά που περιέχουν μήνυμα , link η εικόνα, και κινούνται παρουσιάζοντας το περιεχόμενό τους, μόλις περάσει ο κέρσορας από πάνω τους...έβαλα ένα δείγμα μόνο σε αυτή την ανάρτηση (στήλη αριστερά), και σας δίνω και DEMO...


O κώδικας αποτελείται από 2 μέρη:  CSS και HTML+script....μπορείτε όμως να τους ενώσετε σε έναν, και να τους επικολλήσετε στο blog σας σαν gadget...

Κώδικας css:

<style>
                .slide-up-boxes a {
                        display: block;
                        height: 80px;
                        margin: 0 0 4px 0;
                        background: rgba(400, 600, 100, 0.7);
                        border: 3px solid #ccc;
                        height: 90px;
                        overflow: hidden;
                }
             
                .slide-up-boxes h5 {
                        color: #333;
                        text-align: center;
                        height: 40px;
                        font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
                         opacity: 1;
                         -webkit-transition: all 0.2s linear;
                         -moz-transition: all 0.2s linear;
                         -o-transition: all 0.2s linear;
                }
             
                .slide-up-boxes a:hover h5 {
                        margin-top: -75px;
                        opacity: 0;
                }
             
                .slide-up-boxes div {
                        position: relative;
                        color: white;
                        font: 12px/15px Georgia, Serif;
                        height: 70px;
                        padding: 10px;
                        opacity: 0;
                        -webkit-transform: rotate(6deg);
                        -webkit-transition: all 0.4s linear;
                        -moz-transform: rotate(6deg);
                        -moz-transition: all 0.4s linear;
                        -o-transform: rotate(6deg);
                        -o-transition: all 0.4s linear;
                }
                .slide-up-boxes a:hover div {
                        opacity: 1;
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        -o-transform: rotate(0);
                }
                .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(.png) 17px 17px no-repeat; padding-left: 10px; }
                .slide-up-boxes a:nth-child(2) div { background: #367db2 url(.png) 21px 10px no-repeat; padding-left: 10px; }
                .slide-up-boxes a:nth-child(3) div { background: #393838 url(.png) 14px 16px no-repeat; padding-left: 10px; }
               .slide-up-boxes a:nth-child(4) div { background: #088A85 url(.png) 17px 17px no-repeat; padding-left: 10px; }
        </style>


Kώδικας HTML - script :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>

<div id="demo-top-bar"></div>
        <div id="page-wrap">

                <section class="slide-up-boxes">
<a href="LINK  1" target="_blank">
                     
                                <h5>ΕΤΙΚΕΤΑ 1</h5>
                                <div>MHNYMA 1</div>                        
                        </a>
                             
                        <a href="LINK  2" target="_blank">
                                <h5>ΕΤΙΚΕΤΑ 2</h5>
                                <div>MHNYMA 2</div>                            
                        </a>
                     
                        <a href="LINK  3" target="_blank">
                                <h5>ΕΤΙΚΕΤΑ 3</h5>
                                <div>MHNYMA 3</div>                        
                        </a>

<a href="LINK  4" target="_blank">
                                <h5>ΕΤΙΚΕΤΑ 4</h5>
                                <div>MHNYMA 4</div>                        
                        </a>
                </section>
         </div>
***Eνώστε λοιπόν τους 2 κώδικες σε έναν...Το έφτιαξα να έχει 4 κουτάκια...
***τα μπλε γράμματα είναι το λινκ (που θα στέλνει)
***τα ροζ γράμματα είναι το μήνυμα που θα φαίνεται απ' έξω
***τα κόκκινα γράμματα είναι το περιεχόμενο των κουτιών
***οι διαστάσεις είναι αυτόματες στο φάρδος...είτε σε πλαινή στήλη είτε σε φαρδιά κεντρική στήλη το βάλετε, θα ανοίγει το φάρδος αυτόματα
***οι αριθμοί (ψηλά)  (400, 600, 100, 0.7) είναι το χρώμα απ' έξω...(της ετικέτας)
***οι κώδικες χρωμάτων   #c73b1b είναι διαφορετικοί μέσα σε κάθε κουτάκι
Νομίζω ότι αυτές οι επεξηγήσεις είναι αρκετές...υπάρχουν κι άλλες ρυθμίσεις....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!
Πηγή : thanks to      http://css-tricks.com/    &   http://www.ajaxline.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}