Cikkajánló
Egy olyan szövegdoboz kódját osztom most meg veletek, ami manapság eléggé elterjedt egyes weboldalakon. Mondhatni ez a jelenlegi divat. Így mielőtt még úgyis megkérdeznétek, hogyan lehet ilyen szövegdobozt készíteni,
Hoztam egy egyszerű de mutatós CSS idézetblokkot. Egy kicsit a sima hagyományos idézetblokkot átalakítottam. Hasonló kinézeteket már biztosan láttatok egyes oldalakon. G-Portálon és rendes HTML oldalon is ugyanaz a
Hoztam még kettő darab Sosugary galéria témát, hogy ne csak egy darabból tudjatok válogatni, hanem mindjárt háromból :) A CSS kód átírása egyébként nagyon egyszerű. Kiírtam minden fontos kód
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Kép megfordul és kör alakú lesz

 

 

A kép nem minden esetben kör alakú lesz, mint az a demóban is látható. A kép szélességétől és magasságától függ, hogy milyen alakot vesz fel a kép, ha ráviszed az egeret. Minden esetben, ha linkelt képnél szeretnéd alkalmazni az effekteket úgy, hogy ha ráviszed az egeret, akkor változzon, akkor a kódrészt ebbe a részbe kell beillesztened:

 

a:link img, a:visited img {
ide jön a kódrész
}
a:hover img {
ide jön a kódrész
}

 

<style type="text/css">
img {
        background-color: #fbceb1;
        padding: 10px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
}
img:hover {
        background-color: #fbceb1;
        padding: 10px;
        border-radius: 50%;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
}
</style>

lindadesign Hozzászólások
664 megtekintés

Hozzászólások