Cikkajánló
Amikor rákattintunk egy cikkre, hogy teljes egészében elolvassuk, akkor sok helyen van a cikk alatt egyfajta cikkajánló. Nálam is van ilyen. Arról már írtam, hogy azt kóddal hogyan lehet
Mivel egy ideje nem sok friss volt az oldalon így hoztam pár dolgot. 3 féle .psd fejlécet készítettem a napokban, plusz elhoztam a kivágott képeket is, amiket felhasználtam a
A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom,
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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 038 megtekintés

Hozzászólások