Cikkajánló
Megszületett a honlapverseny eredményhirdetése. Az első 3 helyezett sok-sok nyereménnyel lett gazdagabb. Részletes végeredmény nincsen. Akik nem kerültek be az első 3-ba, azok holtversenyben mind a 4. helyen végeztek
Biztos gondoltatok már rá, milyen jó lenne, ha nem csak úgy lehetne kiemelt képet beállítani az oldalra, ha azt előtte feltöltjük, hanem simán mondjuk URL cím megadásával is lehessen,
Mostanra már nagyon elterjedtek a mobilok és a tabletek, így nagyon sokan ilyen készülékeken böngésznek weboldalakat. Ezért gondoltam bemutatok egy teljesen egyszerű bővítményt, amivel körülbelül 3 kattintással mobilbarát verziót
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ó
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>

lindadesign Hozzászólások
2 144 megtekintés

Hozzászólások