2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
227 napja
553 néző

WordPress themes

WordPress themes
228 napja
177 néző

G-Portál themes

G-Portál themes
228 napja
103 néző

Tumblr themes

Tumblr themes
228 napja
153 néző

Szöveg a kép mögött 3.

Ez is egy olyan szövegdoboz, ha a képre viszed az egeret, akkor jelenik meg a benne lévő tartalom, ami lehet üdvözlő szöveg, Chat, Facebook doboz, stb.
 

Annyi hátránya van ennek a doboznak, hogy csak úgy simán nem lehet középre igazítani sajnos. Legalábbis én nem jöttem erre rá. Egy középre igazított táblázatba tettem bele a kódot és így a modulban középen helyezkedik el :) A táblázat miatt  a G-Portálosoknak a szövegdoboz betűtípusánál kell az !important is a kódsor végére, ahogy a kódban is látjátok!
 

Demó

 

Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero. Curabitur eu libero sodales eros aliquam sagittis sit amet sit amet odio. Vivamus lorem nisl, varius sit amet vehicula blandit, mattis tempus mi. Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero.


Navigáció
 

 

 

Szövegdoboz kódja
 

<center>
    <table align="center" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <div class="container">
                        <img alt="" src="/images/scripts/image-effects/001.png" />
                        <div class="textbox">
                            <p class="text">
                                Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero. Curabitur eu libero sodales eros aliquam sagittis sit amet sit amet odio. Vivamus lorem nisl, varius sit amet vehicula blandit, mattis tempus mi. Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero.</p>
                            <center>
                                <p>
                                    <br />
                                    <strong>Navigáció</strong><br />
                                    &nbsp;</p>
                                <div class="tabla">
                                    <div class="sorok">
                                        <div class="cellak">
                                            <p>
                                                <a href="ide jön a menü linke">Menüpont</a></p>
                                        </div>
                                        <div class="cellak">
                                            <p>
                                                <a href="ide jön a menü linkje">Menüpont</a></p>
                                        </div>
                                    </div>
                                    <div class="sorok">
                                        <div class="cellak">
                                            <p>
                                                <a href="ide jön a menü linkje">Menüpont</a></p>
                                        </div>
                                        <div class="cellak">
                                            <p>
                                                <a href="ide jön a menü linkje">Menüpont</a></p>
                                        </div>
                                    </div>
                                </div>
                            </center>

                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</center>


CSS kód
 

<style type="text/css">
.container {
    position:relative;
}
.container .textbox {
    background-color: #000000;
    width:400px;
    height:465px;
    border-radius:5px;
    -webkit-box-shadow: #ffffff;
    box-shadow: 0px 0px 15px 2px #ffffff;
    position:absolute;
    top:0;
    left:0;
    -webkit-transform: scale(0);
    transform: scale(0);
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    opacity: 0.6;
}
.container:hover .textbox {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.text {
    font-family: Arial !important;
    font-size: 13px !important;
    color: #B9B9B9 !important;
    text-shadow: 1px 1px 1px #000000;
    text-align: justify;
    line-height: 19px !important;
    padding: 10px;
}
.textbox { /* ez felel azért, ahogy megjelenik a szövegdoboz, ha ráviszed az egeret */
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.tabla{
    display: table;
}
.sorok{
    display: table-row;
}
.cellak{
    width: 170px;
    background: #DA5B58;
    display: table-cell;
    padding: 10px;
    border-top: 1px solid #B9B9B9;
}
.cellak a:link, .cellak a:visited, .cellak a:hover{ /* link kinézete */
    color: #000000 !important;
    font-family: Arial !important;
    font-size: 13px !important;
}
</style>


2 325 megtekintés

Hozzászólások