: Sliding Underlines On Blogger: Αυτόματη Υπογράμμιση στις προτάσειςTech Time

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Τετάρτη 27 Σεπτεμβρίου 2017

Sliding Underlines On Blogger: Αυτόματη Υπογράμμιση στις προτάσεις

Φίλες και φίλοι γεια σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο τρικ με το
οποίο όταν πηγαίνουμε τον κέρσορα πάνω από μια πρόταση αυτομάτως υπογραμμίζεται
και όταν πάρουμε τον κέρσορα από την πρόταση το τρικ εξαφανίζεται!!Εάν θέλουμε να
τραβήξουμε την προσοχή στους αναγνώστες-επισκέπτες μας, σε κάποιες λέξεις η προτάσεις,
είναι από τα καλύτερα εφέ το συγκεκριμένο!

Δείτε εδώ το DEMO

Για να το εγκαταστήσετε και εσείς ακολουθήστε τα εξής βήματα..

1ον:Θα πρέπει πρώτα να εγκαταστήσουμε τον κώδικα CSS και για να γίνει
αυτό

αντιγράψτε τον ακόλουθο κώδικα:

..............................................................................................................................................................

<style>
/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}
</style>

.......................................................................................................................................................

και για να τον επικολλήσετε

ακολουθήστε τον εικονογραφημένο οδηγό...

Αυτό ήταν τώρα όποτε θέλετε να εφαρμόσετε το εφέ θα

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript η Κείμενο

η στο HTML section της ανάρτησης

και στο παράθυρο που θα ανοίγει θα χρησιμοποιείτε τον ακόλουθο κώδικα
........................................................................................................................................

<div class="uslide">ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ/div>

και για αντίστροφα

<div class="uslide2">ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</div>

.......................................................................................................................................

Καλή επιτυχία!!!!

Πηγή κώδικα
thanks to spiceupyourblog.com/

Edit by