ΣΗΜΕΙΩΣΕΙΣ ΣΕ BLOG ΜΕ CSS

Φίλοι bloggers γεια σας !!! Ενα ωραίο κόλπο με CSS βρήκα σε μια σελίδα, και σας το παρουσιάζω, βλέποντας πόση δύναμη και ομορφιά μπορεί να δώσει ένας κώδικας css, σε μια κατασκευή.Kάντε μια σελίδα σας, ....σημειωματάριο (δυνατότητα των windows7)!!!Δοκιμάστε το, και θα καταλάβετε...
(Aπλά πατήστε το κουμπί "NEW NOTE), και γράψτε όσες σημειώσεις θέλετε...
DEMO & DEMO


O ΚΩΔΙΚΑΣ: (Μπορείτε να το βάλετε και σαν gadget)


<button id="newNoteButton" onclick="newNote()">New Note</button>
<script>
document.getElementById("newNoteButton").disabled = !db;
</script>

<style>
body {
    font-family: 'Lucida Grande', 'Helvetica', sans-serif;
}

.note {
    background-color: rgb(255, 240, 70);
    height: 250px;
    padding: 10px;
    position: absolute;
    width: 200px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.note:hover .closebutton {
    display: block;
}

.closebutton {
    display: none;
    background-image: url(http://www.webkit.org/demos/sticky-notes/deleteButton.png);
    height: 30px;
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
}

.closebutton:active {
    background-image: url(http://www.webkit.org/demos/sticky-notes/deleteButtonPressed.png);
}

.edit {
    outline: none;
}

.timestamp {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    font-size: 9px;
    background-color: #db0;
    color: white;
    border-top: 1px solid #a80;
    padding: 2px 4px;
    text-align: right;
}
</style>








<script>
var db = null;

try {
    if (window.openDatabase) {
        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) {
    db = null;
    alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
}

var captured = null;
var highestZ = 0;
var highestId = 0;

function Note()
{
    var self = this;

    var note = document.createElement('div');
    note.className = 'note';
    note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
    note.addEventListener('click', function() { return self.onNoteClick() }, false);
    this.note = note;

    var close = document.createElement('div');
    close.className = 'closebutton';
    close.addEventListener('click', function(event) { return self.close(event) }, false);
    note.appendChild(close);

    var edit = document.createElement('div');
    edit.className = 'edit';
    edit.setAttribute('contenteditable', true);
    edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);
    note.appendChild(edit);
    this.editField = edit;

    var ts = document.createElement('div');
    ts.className = 'timestamp';
    ts.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
    note.appendChild(ts);
    this.lastModified = ts;

    document.body.appendChild(note);
    return this;
}

Note.prototype = {
    get id()
    {
        if (!("_id" in this))
            this._id = 0;
        return this._id;
    },

    set id(x)
    {
        this._id = x;
    },

    get text()
    {
        return this.editField.innerHTML;
    },

    set text(x)
    {
        this.editField.innerHTML = x;
    },

    get timestamp()
    {
        if (!("_timestamp" in this))
            this._timestamp = 0;
        return this._timestamp;
    },

    set timestamp(x)
    {
        if (this._timestamp == x)
            return;

        this._timestamp = x;
        var date = new Date();
        date.setTime(parseFloat(x));
        this.lastModified.textContent = modifiedString(date);
    },

    get left()
    {
        return this.note.style.left;
    },

    set left(x)
    {
        this.note.style.left = x;
    },

    get top()
    {
        return this.note.style.top;
    },

    set top(x)
    {
        this.note.style.top = x;
    },

    get zIndex()
    {
        return this.note.style.zIndex;
    },

    set zIndex(x)
    {
        this.note.style.zIndex = x;
    },

    close: function(event)
    {
        this.cancelPendingSave();

        var note = this;
        db.transaction(function(tx)
        {
            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);
        });
     
        var duration = event.shiftKey ? 2 : .25;
        this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
        this.note.offsetTop; // Force style recalc
        this.note.style.webkitTransformOrigin = "0 0";
        this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
        this.note.style.opacity = '0';

        var self = this;
        setTimeout(function() { document.body.removeChild(self.note) }, duration * 1000);
    },

    saveSoon: function()
    {
        this.cancelPendingSave();
        var self = this;
        this._saveTimer = setTimeout(function() { self.save() }, 200);
    },

    cancelPendingSave: function()
    {
        if (!("_saveTimer" in this))
            return;
        clearTimeout(this._saveTimer);
        delete this._saveTimer;
    },

    save: function()
    {
        this.cancelPendingSave();

        if ("dirty" in this) {
            this.timestamp = new Date().getTime();
            delete this.dirty;
        }

        var note = this;
        db.transaction(function (tx)
        {
            tx.executeSql("UPDATE WebKitStickyNotes SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ? WHERE id = ?", [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]);
        });
    },

    saveAsNew: function()
    {
        this.timestamp = new Date().getTime();
     
        var note = this;
        db.transaction(function (tx)
        {
            tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
        });
    },

    onMouseDown: function(e)
    {
        captured = this;
        this.startX = e.clientX - this.note.offsetLeft;
        this.startY = e.clientY - this.note.offsetTop;
        this.zIndex = ++highestZ;

        var self = this;
        if (!("mouseMoveHandler" in this)) {
            this.mouseMoveHandler = function(e) { return self.onMouseMove(e) }
            this.mouseUpHandler = function(e) { return self.onMouseUp(e) }
        }

        document.addEventListener('mousemove', this.mouseMoveHandler, true);
        document.addEventListener('mouseup', this.mouseUpHandler, true);

        return false;
    },

    onMouseMove: function(e)
    {
        if (this != captured)
            return true;

        this.left = e.clientX - this.startX + 'px';
        this.top = e.clientY - this.startY + 'px';
        return false;
    },

    onMouseUp: function(e)
    {
        document.removeEventListener('mousemove', this.mouseMoveHandler, true);
        document.removeEventListener('mouseup', this.mouseUpHandler, true);

        this.save();
        return false;
    },

    onNoteClick: function(e)
    {
        this.editField.focus();
        getSelection().collapseToEnd();
    },

    onKeyUp: function()
    {
        this.dirty = true;
        this.saveSoon();
    },
}

function loaded()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
            loadNotes();
        }, function(tx, error) {
            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
                loadNotes();
            });
        });
    });
}

function loadNotes()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes", [], function(tx, result) {
            for (var i = 0; i < result.rows.length; ++i) {
                var row = result.rows.item(i);
                var note = new Note();
                note.id = row['id'];
                note.text = row['note'];
                note.timestamp = row['timestamp'];
                note.left = row['left'];
                note.top = row['top'];
                note.zIndex = row['zindex'];

                if (row['id'] > highestId)
                    highestId = row['id'];
                if (row['zindex'] > highestZ)
                    highestZ = row['zindex'];
            }

            if (!result.rows.length)
                newNote();
        }, function(tx, error) {
            alert('Failed to retrieve notes from database - ' + error.message);
            return;
        });
    });
}

function modifiedString(date)
{
    return 'Last Modified: ' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}

function newNote()
{
    var note = new Note();
    note.id = ++highestId;
    note.timestamp = new Date().getTime();
    note.left = Math.round(Math.random() * 400) + 'px';
    note.top = Math.round(Math.random() * 500) + 'px';
    note.zIndex = ++highestZ;
    note.saveAsNew();
}

if (db != null)
    addEventListener('load', loaded, false);
</script>


ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή στο ένα demo....
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

ΣΗΜΕΙΩΣΕΙΣ ΣΕ BLOG ΜΕ CSS

Φίλοι bloggers γεια σας !!! Ενα ωραίο κόλπο με CSS βρήκα σε μια σελίδα, και σας το παρουσιάζω, βλέποντας πόση δύναμη και ομορφιά μπορεί να δώσει ένας κώδικας css, σε μια κατασκευή.Kάντε μια σελίδα σας, ....σημειωματάριο (δυνατότητα των windows7)!!!Δοκιμάστε το, και θα καταλάβετε...
(Aπλά πατήστε το κουμπί "NEW NOTE), και γράψτε όσες σημειώσεις θέλετε...
DEMO & DEMO


O ΚΩΔΙΚΑΣ: (Μπορείτε να το βάλετε και σαν gadget)


<button id="newNoteButton" onclick="newNote()">New Note</button>
<script>
document.getElementById("newNoteButton").disabled = !db;
</script>

<style>
body {
    font-family: 'Lucida Grande', 'Helvetica', sans-serif;
}

.note {
    background-color: rgb(255, 240, 70);
    height: 250px;
    padding: 10px;
    position: absolute;
    width: 200px;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.note:hover .closebutton {
    display: block;
}

.closebutton {
    display: none;
    background-image: url(http://www.webkit.org/demos/sticky-notes/deleteButton.png);
    height: 30px;
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
}

.closebutton:active {
    background-image: url(http://www.webkit.org/demos/sticky-notes/deleteButtonPressed.png);
}

.edit {
    outline: none;
}

.timestamp {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    font-size: 9px;
    background-color: #db0;
    color: white;
    border-top: 1px solid #a80;
    padding: 2px 4px;
    text-align: right;
}
</style>








<script>
var db = null;

try {
    if (window.openDatabase) {
        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) {
    db = null;
    alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
}

var captured = null;
var highestZ = 0;
var highestId = 0;

function Note()
{
    var self = this;

    var note = document.createElement('div');
    note.className = 'note';
    note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
    note.addEventListener('click', function() { return self.onNoteClick() }, false);
    this.note = note;

    var close = document.createElement('div');
    close.className = 'closebutton';
    close.addEventListener('click', function(event) { return self.close(event) }, false);
    note.appendChild(close);

    var edit = document.createElement('div');
    edit.className = 'edit';
    edit.setAttribute('contenteditable', true);
    edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);
    note.appendChild(edit);
    this.editField = edit;

    var ts = document.createElement('div');
    ts.className = 'timestamp';
    ts.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
    note.appendChild(ts);
    this.lastModified = ts;

    document.body.appendChild(note);
    return this;
}

Note.prototype = {
    get id()
    {
        if (!("_id" in this))
            this._id = 0;
        return this._id;
    },

    set id(x)
    {
        this._id = x;
    },

    get text()
    {
        return this.editField.innerHTML;
    },

    set text(x)
    {
        this.editField.innerHTML = x;
    },

    get timestamp()
    {
        if (!("_timestamp" in this))
            this._timestamp = 0;
        return this._timestamp;
    },

    set timestamp(x)
    {
        if (this._timestamp == x)
            return;

        this._timestamp = x;
        var date = new Date();
        date.setTime(parseFloat(x));
        this.lastModified.textContent = modifiedString(date);
    },

    get left()
    {
        return this.note.style.left;
    },

    set left(x)
    {
        this.note.style.left = x;
    },

    get top()
    {
        return this.note.style.top;
    },

    set top(x)
    {
        this.note.style.top = x;
    },

    get zIndex()
    {
        return this.note.style.zIndex;
    },

    set zIndex(x)
    {
        this.note.style.zIndex = x;
    },

    close: function(event)
    {
        this.cancelPendingSave();

        var note = this;
        db.transaction(function(tx)
        {
            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);
        });
     
        var duration = event.shiftKey ? 2 : .25;
        this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
        this.note.offsetTop; // Force style recalc
        this.note.style.webkitTransformOrigin = "0 0";
        this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
        this.note.style.opacity = '0';

        var self = this;
        setTimeout(function() { document.body.removeChild(self.note) }, duration * 1000);
    },

    saveSoon: function()
    {
        this.cancelPendingSave();
        var self = this;
        this._saveTimer = setTimeout(function() { self.save() }, 200);
    },

    cancelPendingSave: function()
    {
        if (!("_saveTimer" in this))
            return;
        clearTimeout(this._saveTimer);
        delete this._saveTimer;
    },

    save: function()
    {
        this.cancelPendingSave();

        if ("dirty" in this) {
            this.timestamp = new Date().getTime();
            delete this.dirty;
        }

        var note = this;
        db.transaction(function (tx)
        {
            tx.executeSql("UPDATE WebKitStickyNotes SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ? WHERE id = ?", [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]);
        });
    },

    saveAsNew: function()
    {
        this.timestamp = new Date().getTime();
     
        var note = this;
        db.transaction(function (tx)
        {
            tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
        });
    },

    onMouseDown: function(e)
    {
        captured = this;
        this.startX = e.clientX - this.note.offsetLeft;
        this.startY = e.clientY - this.note.offsetTop;
        this.zIndex = ++highestZ;

        var self = this;
        if (!("mouseMoveHandler" in this)) {
            this.mouseMoveHandler = function(e) { return self.onMouseMove(e) }
            this.mouseUpHandler = function(e) { return self.onMouseUp(e) }
        }

        document.addEventListener('mousemove', this.mouseMoveHandler, true);
        document.addEventListener('mouseup', this.mouseUpHandler, true);

        return false;
    },

    onMouseMove: function(e)
    {
        if (this != captured)
            return true;

        this.left = e.clientX - this.startX + 'px';
        this.top = e.clientY - this.startY + 'px';
        return false;
    },

    onMouseUp: function(e)
    {
        document.removeEventListener('mousemove', this.mouseMoveHandler, true);
        document.removeEventListener('mouseup', this.mouseUpHandler, true);

        this.save();
        return false;
    },

    onNoteClick: function(e)
    {
        this.editField.focus();
        getSelection().collapseToEnd();
    },

    onKeyUp: function()
    {
        this.dirty = true;
        this.saveSoon();
    },
}

function loaded()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
            loadNotes();
        }, function(tx, error) {
            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
                loadNotes();
            });
        });
    });
}

function loadNotes()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes", [], function(tx, result) {
            for (var i = 0; i < result.rows.length; ++i) {
                var row = result.rows.item(i);
                var note = new Note();
                note.id = row['id'];
                note.text = row['note'];
                note.timestamp = row['timestamp'];
                note.left = row['left'];
                note.top = row['top'];
                note.zIndex = row['zindex'];

                if (row['id'] > highestId)
                    highestId = row['id'];
                if (row['zindex'] > highestZ)
                    highestZ = row['zindex'];
            }

            if (!result.rows.length)
                newNote();
        }, function(tx, error) {
            alert('Failed to retrieve notes from database - ' + error.message);
            return;
        });
    });
}

function modifiedString(date)
{
    return 'Last Modified: ' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}

function newNote()
{
    var note = new Note();
    note.id = ++highestId;
    note.timestamp = new Date().getTime();
    note.left = Math.round(Math.random() * 400) + 'px';
    note.top = Math.round(Math.random() * 500) + 'px';
    note.zIndex = ++highestZ;
    note.saveAsNew();
}

if (db != null)
    addEventListener('load', loaded, false);
</script>


ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή στο ένα demo....
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

ΚΑΝΤΕ ΤΟ BLOG ΣΑΣ ΣΧΕΔΙΑΣΤΙΚΟ ΠΙΝΑΚΑ

Πατήστε εδώ, και ζωγραφίστε

Αν έχετε ήδη πατήσει και ζωγραφίσατε, τότε χρειάζεστε τις παρακάτω συμβουλές...
***με CTL Z  γυρνάτε μια κίνηση πίσω
***ρυθμίστε τα εργαλεία σας από τις ρυθμίσεις δεξιά, ψηλά, επάνω...
***μπαίνει και σαν gadget...
Ο ΚΩΔΙΚΑΣ:
<table border="0" cellpadding="2" cellspacing="0" style="width: 55px;"><tbody>
<tr>       <td style="background: none repeat scroll 0% 0% rgb(239, 239, 239);" valign="top" width="53"><a href="javascript:javascript:(function()%7Bwindow.add_js=function(s)%7Bvar%20k=(document.getElementsByTagName('head')%5B0%5D%7C%7Cdocument.body).appendChild(document.createElement('script'));k.src=s;k.type='text/javascript';%7D;window.MarkUp=window.MarkUp%7C%7C%7B%7D;window.MarkUp.id='af6d7429-e503-11df-b97b-001517bacb5f';add_js('http://api.markup.io/bootstrap.js?v=1&'+(+(new%20Date)))%7D)();">Πατήστε εδώ, και ζωγραφίστε</a></td>     </tr>
</tbody></table>
ΚΑΛΗ ΔΙΑΣΚΕΔΑΣΗ!!!
Πηγή: www.bloggerzbible.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

ΚΑΝΤΕ ΤΟ BLOG ΣΑΣ ΣΧΕΔΙΑΣΤΙΚΟ ΠΙΝΑΚΑ

Πατήστε εδώ, και ζωγραφίστε

Αν έχετε ήδη πατήσει και ζωγραφίσατε, τότε χρειάζεστε τις παρακάτω συμβουλές...
***με CTL Z  γυρνάτε μια κίνηση πίσω
***ρυθμίστε τα εργαλεία σας από τις ρυθμίσεις δεξιά, ψηλά, επάνω...
***μπαίνει και σαν gadget...
Ο ΚΩΔΙΚΑΣ:
<table border="0" cellpadding="2" cellspacing="0" style="width: 55px;"><tbody>
<tr>       <td style="background: none repeat scroll 0% 0% rgb(239, 239, 239);" valign="top" width="53"><a href="javascript:javascript:(function()%7Bwindow.add_js=function(s)%7Bvar%20k=(document.getElementsByTagName('head')%5B0%5D%7C%7Cdocument.body).appendChild(document.createElement('script'));k.src=s;k.type='text/javascript';%7D;window.MarkUp=window.MarkUp%7C%7C%7B%7D;window.MarkUp.id='af6d7429-e503-11df-b97b-001517bacb5f';add_js('http://api.markup.io/bootstrap.js?v=1&'+(+(new%20Date)))%7D)();">Πατήστε εδώ, και ζωγραφίστε</a></td>     </tr>
</tbody></table>
ΚΑΛΗ ΔΙΑΣΚΕΔΑΣΗ!!!
Πηγή: www.bloggerzbible.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Amazing CSS Slideshow

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....
Βάλτε απλά σαν gadget τον παρακάτω κώδικα:


<style type='text/css'>

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<style>
#cssplayGallery a,
body {behavior:url(cssplay18/trigger.htc)}

#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background-color: 'transparent';
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}

#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}

#cssplayGallery a img {display:block; border:0px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}

#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}

#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}

#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}

#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}

#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}

#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}

#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}

#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}

#cssplayGallery a.p8:active {top:200px; z-index:13;}


/* non-IE browsers */

#cssplayGallery a:focus {opacity:0;}

#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}

#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}

#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}

#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}

#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}

#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}

#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}

#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}

#cssplayGallery a.p8:focus {top:200px; z-index:13;}</style>

<center>ΤΙΤΛΟΣ ΜΕΝΟΥ</center>

<div id="cssplayGallery">

<div class="cover"></div>

<a class="p1" href="#url" tabindex="1"><img src="JPG" alt="" /></a>

<a class="p2" href="#url" tabindex="2"><img src="JPG" alt="" /></a>

<a class="p3" href="#url" tabindex="3"><img src="JPG" alt="" /></a>

<a class="p4" href="#url" tabindex="4"><img src="JPG" alt="" /></a>

<a class="p5" href="#url" tabindex="5"><img src="JPG" alt="" /></a>

<a class="p6" href="#url" tabindex="6"><img src="JPG" alt="" /></a>

<a class="p7" href="#url" tabindex="7"><img src="JPG" alt="" /></a>

<a class="p8" href="#url" tabindex="8"><img src="JPG" alt="" /></a>

<a class="p9" href="#url" tabindex="9"><img src="JPG" alt="" /></a>

</div>

***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........

***MH βάλετε περισσότερες εικόνες...

***μη βγάλετε τα στοιχεία του δημιουργού...εκτιμήστε τον κόπο που έκανε να σας το χαρίσει...

***τους  κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....

***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!

Πηγή :   www.cssplay.co.uk/   thanks to Stu Nicholls

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Amazing CSS Slideshow

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....
Βάλτε απλά σαν gadget τον παρακάτω κώδικα:


<style type='text/css'>

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<style>
#cssplayGallery a,
body {behavior:url(cssplay18/trigger.htc)}

#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background-color: 'transparent';
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}

#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}

#cssplayGallery a img {display:block; border:0px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}

#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}

#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}

#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}

#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}

#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}

#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}

#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}

#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}

#cssplayGallery a.p8:active {top:200px; z-index:13;}


/* non-IE browsers */

#cssplayGallery a:focus {opacity:0;}

#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}

#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}

#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}

#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}

#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}

#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}

#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}

#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}

#cssplayGallery a.p8:focus {top:200px; z-index:13;}</style>

<center>ΤΙΤΛΟΣ ΜΕΝΟΥ</center>

<div id="cssplayGallery">

<div class="cover"></div>

<a class="p1" href="#url" tabindex="1"><img src="JPG" alt="" /></a>

<a class="p2" href="#url" tabindex="2"><img src="JPG" alt="" /></a>

<a class="p3" href="#url" tabindex="3"><img src="JPG" alt="" /></a>

<a class="p4" href="#url" tabindex="4"><img src="JPG" alt="" /></a>

<a class="p5" href="#url" tabindex="5"><img src="JPG" alt="" /></a>

<a class="p6" href="#url" tabindex="6"><img src="JPG" alt="" /></a>

<a class="p7" href="#url" tabindex="7"><img src="JPG" alt="" /></a>

<a class="p8" href="#url" tabindex="8"><img src="JPG" alt="" /></a>

<a class="p9" href="#url" tabindex="9"><img src="JPG" alt="" /></a>

</div>

***απλά βάλτε τις φωτογραφίες σας, όπου βλέπετε "JPG"........

***MH βάλετε περισσότερες εικόνες...

***μη βγάλετε τα στοιχεία του δημιουργού...εκτιμήστε τον κόπο που έκανε να σας το χαρίσει...

***τους  κώδικες CSS σας τους έβαλα αναλυτικά, για να μην εξαρτάται από την "εξαφάνιση" τους....

***να ξέρετε οτι ένας κώδικας CSS μπαίνει πάντα ανάμεσα στις λέξεις <style> CSS </style>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!!!

Πηγή :   www.cssplay.co.uk/   thanks to Stu Nicholls

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Amazing CSS Slideshow

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....

Διαβάστε περισσότερα »

Image Zoom 2 (code)

Φίλοι bloggers γεια σας !!!Το προηγούμενο zoom in άρεσε πάρα πολύ, και έτσι σκέφτηκα να παρουσιάσω άλλο ένα zoom του Professor Cloud !!! Εφαρμογές θα βρείτε σε πολλά εμπορικά e-shops όπου χρησιμοποιούν με αυτό το κώδικα τη μεγέθυνση του προϊόντων τους...DEMO
Στις εικόνες δείτε πού μπαίνουν οι κώδικες:

...και ΠΡΙΝ το </head> , επικολλήστε τον κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://pantel.googlecode.com/files/cloud-zoom.1.0.2.js"></script>

...μετά πηγαίνετε =>

και επικολλήστε τον κώδικα :

<div class="zoom-section">    
      <div class="zoom-small-image"><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1" alt='' title="ΤΙΤΛΟΣ ΤΟΥ GALLERY" /></a></div>
      <div class="zoom-desc">
        <h3>OI ΕΙΚΟΝΕΣ ΜΟΥ</h3>    
        <p><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class='cloud-zoom-gallery' title='TITLOΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 1" alt = "Thumbnail 1"/></a>
     
          <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 2' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: ' ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 2' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 2" alt = "Thumbnail 2"/></a>                
        <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 3' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 3' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 3" alt = "Thumbnail 3"/></a></p>
          </div>
</div>

***Δεν είναι μόνον zoom in, αλλά και gallery εικόνων
***Διαλέξτε τις ανάλογες εικόνες (μικρή-100px)(μεσαία-400px)(μεγάλη-1400px)...η ίδια εικόνα δηλαδή σε 3 διαφορετικές διαστάσεις....
***Η google ξανά έβαλε  σε εφαρμογή το slideshow των εικόνων στις αναρτήσεις, χωρίς να μεγεθύνει πιά την εικόνα "read more" (το διόρθωσε)...έτσι θα σας δημιουργήσει μία μικρή σύγχυση στην αλλαγή του thumbnail ....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν χρειαστείτε βοήθεια, στείλτε μήνυμα η σχόλιο)

Πηγή : thanks to  Professor Cloud

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Image Zoom 2 (code)

Φίλοι bloggers γεια σας !!!Το προηγούμενο zoom in άρεσε πάρα πολύ, και έτσι σκέφτηκα να παρουσιάσω άλλο ένα zoom του Professor Cloud !!! Εφαρμογές θα βρείτε σε πολλά εμπορικά e-shops όπου χρησιμοποιούν με αυτό το κώδικα τη μεγέθυνση του προϊόντων τους...DEMO
Στις εικόνες δείτε πού μπαίνουν οι κώδικες:

...και ΠΡΙΝ το </head> , επικολλήστε τον κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://pantel.googlecode.com/files/cloud-zoom.1.0.2.js"></script>

...μετά πηγαίνετε =>

και επικολλήστε τον κώδικα :

<div class="zoom-section">    
      <div class="zoom-small-image"><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img src="ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1" alt='' title="ΤΙΤΛΟΣ ΤΟΥ GALLERY" /></a></div>
      <div class="zoom-desc">
        <h3>OI ΕΙΚΟΝΕΣ ΜΟΥ</h3>    
        <p><a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 1' class='cloud-zoom-gallery' title='TITLOΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 1' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 1" alt = "Thumbnail 1"/></a>
     
          <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 2' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: ' ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 2' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 2" alt = "Thumbnail 2"/></a>                
        <a href='ΔΙΕΥΘΥΝΣΗ URL ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ 3' class='cloud-zoom-gallery' title='ΤΙΤΛΟΣ' rel="useZoom: 'zoom1', smallImage: 'ΔΙΕΥΘΥΝΣΗ URL ΜΕΣΑΙΑΣ ΕΙΚΟΝΑΣ 3' "><img class="zoom-tiny-image" src="ΔΙΕΥΘΥΝΣΗ URL ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ 3" alt = "Thumbnail 3"/></a></p>
          </div>
</div>

***Δεν είναι μόνον zoom in, αλλά και gallery εικόνων
***Διαλέξτε τις ανάλογες εικόνες (μικρή-100px)(μεσαία-400px)(μεγάλη-1400px)...η ίδια εικόνα δηλαδή σε 3 διαφορετικές διαστάσεις....
***Η google ξανά έβαλε  σε εφαρμογή το slideshow των εικόνων στις αναρτήσεις, χωρίς να μεγεθύνει πιά την εικόνα "read more" (το διόρθωσε)...έτσι θα σας δημιουργήσει μία μικρή σύγχυση στην αλλαγή του thumbnail ....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν χρειαστείτε βοήθεια, στείλτε μήνυμα η σχόλιο)

Πηγή : thanks to  Professor Cloud

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Image Zoom 2 (code)

Διαβάστε περισσότερα »

Απλό CSS + HTML Slideshow / gallery

Νέοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα απλό image gallery...μπορείτε να δείτε το DEMO και να δοκιμάσετε να φτιάξετε ένα παρόμοιο, παρουσιάζοντας τις δικές σας εικόνες...


Ο ΚΩΔΙΚΑΣ CSS: (ΠΑΝΩ από το </head>)

<style type="text/css">

<!--/* The slideshow CSS. Customize to meet your taste. */.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:336px;
height:375px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #99CC00;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #FFFFFF;
width:332px;
}
.slideshow  > ul > li > img {
border:2px solid #FFFFFF;
margin:0px;
padding:0px;
width:80px;
height:60px;
}

/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}-->
</style>


O ΚΩΔΙΚΑΣ  HTML: (σαν Gadget / JavaScript)


<div class="slideshow">
    <ul>
        <li>
            <img src="ΕΙΚΟΝΑ 1" />
                        <div>
      <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 1" alt="ΤΙΤΛΟΣ" />  </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>  <img src="ΕΙΚΟΝΑ 2" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 2" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 3" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 3" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 4" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 4" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
    </ul>
</div>

***Οι άπειροι, μπορούν να ενώσουν και τους 2 κώδικες και να το δουν πως φαίνεται στο  DEMO BLOG μου
***Φυσικά και μπορείτε να ενώσετε και τους 2 κώδικες και να το βάλετε στο blog σας σαν gadget !

***Αντικαταστήστε τις λέξεις ΛΙΝΚ, ΚΕΙΜΕΝΟ, ΤΙΤΛΟΣ, ΛΙΝΚ με τα ανάλογα δικά σας...

***Oσοι γνωρίζουν πως, μπορούν να πειράξουν μεγέθη, χρώματα κλπ στον πρώτο κώδικα...όσοι δεν γνωρίζουν, ας το αφήσουν όπως είναι, η να ρωτήσουν απορίες στα σχόλια, η με email ...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
(Πηγή θα βρείτε όταν δείτε και το demo)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}