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
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
112 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

Vízszintes menü 05.

 

Menü kódja
 

<div align="center">
    <ul class="sonarmenu">
        <li>
            <a href="/">Főoldal</a>
        </li>
        <li>
            <a href="/">Segítségek</a>
        </li>
        <li>
            <a href="/">Kódok</a>
        </li>
        <li>
            <a href="/">Grafika</a>
        </li>
        <li>
            <a href="/">Flash</a>
        </li>
    </ul>
</div>


CSS kód
 

<style type="text/css">
ul.sonarmenu{
    list-style: none;
        width: 560px;
}
ul.sonarmenu li{
 display: inline;
}
ul.sonarmenu a{
    position: relative;
    display: inline-block;
    color: black;
    text-decoration: none;
    margin: 10px 10px;
    text-transform: uppercase;
    font-family: "Trebuchet MS";
    font-size: 15px;
    letter-spacing: 2px;
    border-bottom: 2px solid transparent;
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
    outline: none;
    border-bottom: 2px solid #eeeeee;
}
ul.sonarmenu a::before, ul.sonarmenu a:after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    border: 12px double rgba(0,0,0,0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}
ul.sonarmenu a:after{
    width: 60px;
    height: 60px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}
ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
    -webkit-animation: pulsate 1.2s infinite;
    -moz-animation: pulsate 1.2s infinite;
    -ms-animation: pulsate 1.2s infinite;
    animation: pulsate 1.2s infinite;
}
@-webkit-keyframes pulsate{</p>
<p> 30%{
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
    opacity: 0.3;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-moz-keyframes pulsate{
30%{
    opacity: 1;
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
    opacity: 0.3;
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
}
@-ms-keyframes pulsate{
30%{
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
    opacity: 0.3;
    -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-keyframes pulsate{
30%{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
    opacity: 0.3;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}</style>


2 195 megtekintés

Hozzászólások