Webring-Ringfragment CSS3-Animiert

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Webring-Ringfragment CSS3-Animiert

      Hajo,

      ich hab den alten Webring-Kasten mit den vier Links darunter gesehen und dann mal mein "Trait"-CSS3-Flex-Gebastel von der eigenen Weltenbastelseite darauf angewendet. Im Gegensatz zum Webring-Kasten hat das auch noch einen großen CSS-Anteil, aber vielleicht kann man ja doch was daraus machen, bzw. für einzelne Seiten, die das so vielleicht lieber mögen, wenn das auch eindeutig genug ist für Ringweiterleitungen.

      Zum Ausprobieren diesen Code in den folgends verlinkten Editor reinkopieren (alles was sonst da drinsteht löschen), auf "Run" drücken und rechts oben mit der Maus aufs Weltenbastler-Symbol hovern. Das wäre dann eine mögliche Einbindung auf einer Webseite und funktioniert mit HTML & CSS3 ohne Javascript/Flash.

      w3schools.com/css/tryit.asp?fi…ss3_flexbox_align-content


      Spoiler anzeigen

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <style>
      5. div.infoContainer {visibility:hidden;display:flex;
      6. justify-content:center;
      7. -webkit-justify-content:center;
      8. width:480px;
      9. margin-left: auto; margin-right:auto;
      10. }
      11. div.infoBox {visibility:hidden;
      12. overflow:hidden; width:82px;height:82px;
      13. transition-timing-function:ease-in-out;
      14. -webkit-transition-timing-function:ease-in-out;
      15. -webkit-transition-property:all;
      16. transition-property:all;
      17. transition-duration:1s;
      18. -webkit-transition-duration:1s;
      19. transition-delay:0s;
      20. -webkit-transition-delay:0s;
      21. flex-shrink:999;
      22. }
      23. div.ring {width: 82px;height: 82px;cursor:help;visibility: visible ! important;float:left;background:url(http://www.weltenbastler.net/webring/uploads/lym520-logo.png) no-repeat left top;}
      24. div.infoBox:hover{background-color:#777777;
      25. flex-shrink:1;
      26. -webkit-flex-shrink: 1;
      27. visibility: visible;
      28. display:block;
      29. overflow:hidden;
      30. height:82px;
      31. width: 480px;order:1;-webkit-order: 1;
      32. border-top-right-radius: 10px;
      33. border-top-left-radius: 44px;
      34. border-bottom-left-radius: 44px;
      35. border-bottom-right-radius: 10px;
      36. cursor:text;}
      37. div.ringContent{background:url(http://www.weltenbastler.net/wbbanner.jpg) no-repeat right center; height:82px;}
      38. </style>
      39. </head>
      40. <body>
      41. <div class="infoContainer"><div class="infoBox">
      42. <a href="http://www.weltenbastler.net/"><div class="ring"></div></a><div class="ringContent"><div style="padding:2px;">« <a href="http://www.weltenbastler.net/cgi-bin/ring/prev.pl?ringid=weltenbastler;siteid=DeineID" target="_top">Letzte</a><br>» <a href="http://www.weltenbastler.net/cgi-bin/ring/next.pl?ringid=weltenbastler;siteid=DeineID" target="_top">Nächste</a><br>
      43. ·&nbsp;&nbsp;<a href="http://www.weltenbastler.net/cgi-bin/ring/list.pl?ringid=weltenbastler;siteid=DeineID" target="_top">Liste</a><br>
      44. ? <a href="http://www.weltenbastler.net/cgi-bin/ring/rand.pl?ringid=weltenbastler;siteid=DeineID" target="_top">Zufall</a></div>
      45. </div></div></div>
      46. </body>
      47. </html>
      Alles anzeigen


      Die Box ist 82px hoch und 480px breit, bzw. erstmal 82px breit, schiebt dann aber alles drumrum weg wenn sie den Platz braucht. Das ließe sich auch mit einer Z-Achse schöner regeln, indem sie einfach alles überdeckt
      anstatt wegzuschieben. (Achja, das Beispiel funktioniert nur solange Lyms Logo das generische Weltenbastler-Logo bleibt, und dass das Logo selbst auf die Heimseite verlinken soll klappt auch noch nicht)

      Gern auch weiter bebasteln, das geht noch hübscher. :)

      /Edit: Jetzt ists nochmal hübscher, die runden Ecken links schmiegen sich an das Logo an.
      /Edit2: Das verschwinden der großen Grafik ist noch abrupt, das lässt sich aber mit geringerer Opazität bei Nicht-Hovern nochmal abstufen. Also die wird dann sofort halb-durchsichtig ist erst im nächsten Schritt weg, anstatt von 100% auf 0% zu springen. Das hatt ich bei was anderem auch schon drin X_X
      > Möchte in Fantasy-Ausrichtung an den Erfolg von Scientology anknüpfen.
    • Schiiiick!
      Ich fühle mich geradezu genötigt, das Ringfragment auf meiner Laharia-Homepage aufzupeppen - aber anders ;).

      Das Problem bei mir ist halt, dass doch noch gelegentlich jemand mit IE8 reinschneit, und da ist dein Fragment nicht mehr zentriert, wenn es aufploppt. (Wenigstens IE7 ist endgültig tot und aus.)
      Don't diagnose and drive.

      Dieser Bastler hat sich freiwillig dazu verpflichtet, ab sofort je Woche einen wertvollen Bastelpost mehr zu verfassen als bisher. Er möchte damit das Forum zu mehr Aktivität anregen. Hilf ihm und mach einfach mit!
    • <= auch Linux, aber ich hab eine Virtualbox mit Windows 7 rumfliegen

      In IE8 funktioniert das ganze Auf- und Zuschieben nicht, es ist *plopp* einfach da, und zwar rechts vom Astrolabium. Zentriert ist immer nur das Astrolabium.
      Don't diagnose and drive.

      Dieser Bastler hat sich freiwillig dazu verpflichtet, ab sofort je Woche einen wertvollen Bastelpost mehr zu verfassen als bisher. Er möchte damit das Forum zu mehr Aktivität anregen. Hilf ihm und mach einfach mit!
    • An sich ne schöne Sache :thumbup:, aber für Uneingeweihte hat das Astrolabium für sich alleine ja leider keinerlei Aussagekraft, so dass man weder weiß, was das soll, noch dass man da mit der Maus drüberfahren soll. Deswegen sollte das Ding unbedingt noch "idiotensicherer" gestaltet werden.