Changeset 112807 in spip-zone


Ignore:
Timestamp:
Dec 14, 2018, 1:58:22 PM (5 weeks ago)
Author:
real3t@…
Message:

Changement de l'effet au survol du logo : il se soulève avec une ombre en dessous (inspiré de https://www.joomla-monster.com/blog/web-development/css3-powered-hover-effects-for-your-logo)

Location:
_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/logosite.html

    r104022 r112807  
    11[<div id="logo">
    22        <a href="./" title="<:soyezcreateurs:accueil_site:> [(#NOM_SITE_SPIP|supprimer_tags|attribut_html)]">
    3                 <img src="(#LOGO_SITE_SPIP_NORMAL|extraire_attribut{src})" width="[(#LOGO_SITE_SPIP_NORMAL|largeur)]" height="[(#LOGO_SITE_SPIP_NORMAL|hauteur)]" alt="[(#NOM_SITE_SPIP|supprimer_tags|attribut_html)]" />
     3                <span>
     4                        <img src="(#LOGO_SITE_SPIP_NORMAL|extraire_attribut{src})" width="[(#LOGO_SITE_SPIP_NORMAL|largeur)]" height="[(#LOGO_SITE_SPIP_NORMAL|hauteur)]" alt="[(#NOM_SITE_SPIP|supprimer_tags|attribut_html)]" />
     5                </span>
    46        </a>
    57</div>]
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r112806 r112807  
    14651465#header #citations dd p { text-align:right; }
    14661466#header #logo { clear: left; float: left; height: 50px; }
    1467 #header #logo a, #header #logo a, #header #logo a { transform: scale(0.95); display: inline-block;}
    1468 #header #logo a:hover, #header #logo a:focus, #header #logo a:active { background-color: transparent !important; display: inline-block; transform: scale(1.00); }
     1467#header #logo a { position: relative; display: inline-block; }
     1468#header #logo span { position: relative; display: inline-block; -webkit-transition-duration: 0.3s;
     1469        transition-duration: 0.3s;
     1470        -webkit-transition-property: transform;
     1471        transition-property: transform;
     1472}
     1473#header #logo a:before {
     1474        pointer-events: none;
     1475        position: absolute;
     1476        content: '';
     1477        bottom: -10px;
     1478        left: 5%;
     1479        height: 10px;
     1480        width: 90%;
     1481        filter: alpha(opacity=0);
     1482        opacity: 0;
     1483        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
     1484        background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
     1485        background: -moz-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
     1486        background: -o-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
     1487        -o-transition-duration: 0.3s;
     1488        -ms-transition-duration: 0.3s;
     1489        -webkit-transition-duration: 0.3s;
     1490        transition-duration: 0.3s;
     1491        -o-transition-property: transform, opacity;
     1492        -ms-transition-property: transform, opacity;
     1493        -webkit-transition-property: transform, opacity;
     1494        transition-property: transform, opacity;
     1495}
     1496#header #logo a:hover:before,
     1497#header #logo a:focus:before,
     1498#header #logo a:active:before {
     1499        filter: alpha(opacity=100);
     1500        opacity: 1;
     1501}
     1502#header #logo a:hover, #header #logo a:focus, #header #logo a:active { background-color: transparent !important; }
     1503#header #logo a:hover span,
     1504#header #logo a:focus span,
     1505#header #logo a:active span {
     1506        -o-transform: translateY(-10px);
     1507        -ms-transform: translateY(-10px);
     1508        -webkit-transform: translateY(-10px);
     1509        transform: translateY(-10px);
     1510}
    14691511
    14701512/* xiti et compteurs */
Note: See TracChangeset for help on using the changeset viewer.