Cikkajánló
7. rész   Ebben a részben a column_side azaz a G-Portálon lévő szélső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a szélső sötét színű modult. Ezt a
Általában a lapozást is mindenki bővítménnyel oldja meg. Viszont én amit lehet szeretek kóddal megoldani, mert a túl sok bővítmény lassíthatja a honlapot. Plusz kevesebb macera, mert nincs mit
Hoztam egy hozzászólás űrlapot a WordPress használóknak :) Ha unnátok az alap űrlapot, akkor cseréljétek le erre. Kicsivel több mindent tud. Lehet avatart beállítani, nekem kinézetre is szimpatikusabb, és
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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 097 megtekintés

Hozzászólások