Εντυπωσιακό CSS3 Image Circle Hover Effect για Blogger

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
20/10/2012 από
adavalas

Σε αυτό το σύντομο tutorial θα σας παρουσιάσουμε τον τρόπο να προσθέτετε κυκλικές εικόνες που να συνοδεύονται από ένα  nice hover effect.  Είναι ένας απλός τρόπος, όπως θα δείτε και στο μικρό μας βοήθημα που ακολουθεί για να κάνετε το blog σας ελκυστικό σε εμφανισιακό επίπεδο. Μπορείτε να χρησιμοποιήσετε αυτή την κυκλική εικόνα σαν link στην σελίδα σας ή στο post, όπως στην σελίδα επικοινωνίας, στην σελίδα ποιοι είμαστε και άλλες υποσελίδες του δικτυακού σας ιστοτόπου. Για το tutorial μας χρησιμοποιείται CSS  και HTML και όπως θα διαπιστώσετε η κατασκευή ιστοσελίδας μπορεί να είναι μια πολύ ενδιαφέρουσα υπόθεση.

Ακολουθεί το tutorial μας

1. Κάντε Log in στο blogger account και δώστε Click drop down όπως στην εικόνα που ακολουθεί.

2. Τώρα επιλέξτε “Template”  όπως στην εικόνα που ακολουθεί.

3. Τώρα μπορείτε live στο blog, κάντε κλικ στο EDIT HTML Button

4. Τώρα κάντε κλικ στο  Proceed button.

5.Βρείτε τον κώδικα αυτό χρησιμοποιώντας Ctrl+F  ]]></b:skin>

6.  Κάντε Paste τον ακόλουθο κώδικα πριν τον κώδικα ]]></b:skin>

/* Bloggertrix  */
.Btrix-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
    position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
    height: 150px;
    border-radius: 50%;}
.Btrix-info-wrap {
    background: #07CFE0 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
    display: block;position: absolute;width: 150px;height: 150px;
    border-radius: 50%;
    background-position: center center; 
    -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
    opacity: 0;background: #07CFE0;pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
    background-image: url(http://2.bp.blogspot.com/-4XCvJshy9x8/UIDjlYZiXDI/AAAAAAAAFQY/ttkRA-S1f6g/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
    background-image: url(http://2.bp.blogspot.com/-Jb6h8JyvgY0/UIDkIf-Qz6I/AAAAAAAAFQg/mkh-ENaD86c/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
    background-image: url(http://3.bp.blogspot.com/-Ll04NZIOfmk/UIDkJV5vrtI/AAAAAAAAFQo/fYqC8FW7g7U/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
    color: #fff;
    text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: -60px 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
    display: block;color: #e7615e;font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
    color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;}
.Btrix-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
    content: '';
    display: table;}
.Btrix-grid:after {
    clear: both;}
.Btrix-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}

* Μπορείτε να αλλάξετε την εικόνα που χρησιμοποιείται στο παράδειγμα μας που χρησιμοποιεί μια εικόνα με διαστάσεις 180×180 pixel

7. Πηγαίντε στο blogger  και κάντε κλικ στο  drop-down όπως στο 1ο βήμα και επιλέξτε Layout

8. Κάντε κλικ στο Add Gadget και επιλέξτε  ‘HTML/Javascript

9. Κάντε paste τον ακόλουθο κώδικα.

<section>

<ul>
<li>
<div>
<div>
<div>
<div></div>
<div>
<h3>
Fashion</h3>
By Blogger Trix  <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>

<li>
<div>
<div>
<div>
<div></div>
<div>
<h3>
Nature</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>

<li>
<div>
<div>
<div>
<div></div>
<div>
<h3>
Car</h3>
By Blogger Trix  <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li></ul></section>

*Μπορείτε να αλλάξετε το header αναλόγως της εικόνας ή του image URL

10.  Κάντε save στο template. Τελειώσατε αυτό είναι όλο.








Hide ↑

Aσφάλεια στο opencart

04 September 2014

Με το θέμα της διαδικτυακής ασφάλειας να γίνεται ένας ολοένα και μεγαλύτερης σημασίας ζήτημα κατά την

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.