Ergebnis 1 bis 7 von 7
  1. #1
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    playButton mittles css

    Hi, ich habe mir mittels css ein Play Symbol erstellt allerdings Probleme damit.

    Problem 1: das Play symbol (das Dreieck) ist nicht mittig im kreis es will mir nicht gelingen das es mittig wird.

    Problem 2: Wenn man den Kreis hovered wird der Durchmesser größer. Klick man allerdings auf das Symbol so das das Pause Symbol kommt,
    funktioniert die Animation nicht mehr. Warum??

    HTML-Code:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <style type="text/css">
    #playButton{
        position: absolute;
        top:100px;
        left: 120px;
        width: 100px;
        height: 150px;
    }
    
    .play {
      display: block;
      width: 0;
      height: 0;
      border-top: 35px solid transparent;
      border-bottom: 35px solid transparent;
      border-left: 55px solid #2c3e50;
      position: relative;
      z-index: 1;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
    }
    .play:before {
      content: '';
      position: absolute;
      top: -75px;
      left: -88px;
      bottom: -50px;
      right: -35px;
      border-radius: 50%;
      border: 5px solid #2c3e50;
      z-index: 2;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
    }
    .play:after {
      content: '';
      opacity: 0;
      transition: opacity 0.6s;
      -webkit-transition: opacity 0.6s;
      -moz-transition: opacity 0.6s;
    }
    .play:hover:before, .play:focus:before {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
    }
    .play.active {
      border-color: transparent;
    }
    .play.active:after {
      content: '';
      opacity: 1;
      width: 40px;
      height: 60px;
      background: #2c3e50;
      position: absolute;
      right: 2px;
      top: -40px;
      border-left: 10px solid #2c3e50;
      box-shadow: inset 30px 0 0 0 white;
    }
    </style>
    <script>
    	function run() {
    		const icon = $('.play');
    		icon.click(function() {
    		    icon.toggleClass('active');
    			return false;
      		});
    	}
    </script>
    </head>
    <body onload="run()">
    <div id="playButton"><a role="button" href="#" title="Play/Pause" class="play"></a></div>	
    </body>
    </html>
    Noch was ein anchor Tag ohne href ist ja nicht valide. Wenn ich aber den anchor die role="button" gebe schon? oder nicht?
    Habe das jetzt schon öfter in Quelltexten so gesehen.

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.281

    AW: playButton mittles css

    Noch was ein anchor Tag ohne href ist ja nicht valide.
    Wer behauptet denn so einen Quatsch?

  3. #3
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    AW: playButton mittles css

    Das weiß ich jetzt nicht mehr, der Bolzen kam aber mal aus dem Forum hier. Glaube das war noch zu Julijan's Zeiten.
    Also etwas länger her.

    Laut Spezifikation:
    If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.
    https://www.w3.org/TR/2011/WD-html5-...#the-a-element

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: playButton mittles css

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Problem 1: das Play symbol (das Dreieck) ist nicht mittig im kreis es will mir nicht gelingen das es mittig wird.
    Code:
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 55px solid #2c3e50;
    dein dreieck geht also 35px nach oben und unten und 55px nach links
    dann ist das
    Code:
    top: -75px;
    left: -88px;
    bottom: -50px;
    right: -35px;
    nie ein rahmen um die mitte
    mit durchmesser 150 wäre das ein rahmen um die mitte:
    Code:
    bottom: -75px;
    top: -75px;
    left: -102px;
    right: -48px;
    75px nach oben und unten die 55px durch 2 sind ca. 27 die du nach links draufrechnest und nach rechts abziehst

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Problem 2: Wenn man den Kreis hovered wird der Durchmesser größer. Klick man allerdings auf das Symbol so das das Pause Symbol kommt,
    funktioniert die Animation nicht mehr. Warum??
    .play:focus:before
    der focus bleibt, lass das einfach weg

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.632

    AW: playButton mittles css

    Die Berechnung ist leider etwas komplizierter (man will ja das Dreieck mittig platzieren, so dass alle drei Ecken gleich weit vom Rand weg sind) - hab' das mal per Auge zentriert:
    Code:
    <html>
    <head>
    <style type="text/css">
    #playButton{
        position: absolute;
        top:100px;
        left: 120px;
        width: 100px;
        height: 150px;
    }
    
    .play {
      display: block;
      width: 0;
      height: 0;
      border-top: 35px solid transparent;
      border-bottom: 35px solid transparent;
      border-left: 55px solid #2c3e50;
      position: relative;
      z-index: 1;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
    }
    .play:before {
      content: '';
      position: absolute;
      top: -63px;
      left: -97px;
      bottom: -62px;
      right: -26px;
      border-radius: 50%;
      border: 5px solid #2c3e50;
      z-index: 2;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
    }
    .play:after {
      content: '';
      opacity: 0;
      transition: opacity 0.6s;
      -webkit-transition: opacity 0.6s;
      -moz-transition: opacity 0.6s;
    }
    .play:hover:before, .play:focus:before {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
    }
    .play.active {
      border-color: transparent;
    }
    .play.active:after {
      content: '';
      opacity: 1;
      width: 40px;
      height: 60px;
      background: #2c3e50;
      position: absolute;
      right: 10px;
      top: -30px;
      border-left: 10px solid #2c3e50;
      box-shadow: inset 30px 0 0 0 white;
    }
    </style>
    <script>
    	window.onload = function run() {
    		[].forEach.call(document.getElementsByClassName('play'), function(icon){
    			icon.addEventListener("click", function() {
    				icon.classList.toggle('active');
      			});
      		});
    	}
    </script>
    </head>
    <body>
    <div id="playButton"><span role="button" title="Play/Pause" class="play"></span></div>	
    </body>
    </html>

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.631

    AW: playButton mittles css

    Zitat Zitat von kkapsner Beitrag anzeigen
    man will ja das Dreieck mittig platzieren, so dass alle drei Ecken gleich weit vom Rand weg sind
    ok, das macht sinn
    ich hab das mal ein wenig umgebaut, da mir das mit den ganzen absolut-positionierten elementen nicht gefallen hat
    mein dreieck liegt mit border-width: 37px 0 37px 74px; relativ auf den positionen
    Code:
    -74/-37
             0/0
    -74/37
    damit ergibt sich ein umkreis-mittelpunkt von (-74 + 0 -74)/3 = -49,3 für x, y = 0 das sieht man zwar, aber rechnerisch (-37 + 0 + 37)/3 = 0
    den kreis wieder mit durchmesser 150 width: 150px; height: 150px; und rand 5 border: 5px solid #2c3e50; muss damit
    positioniert werden bei top: -80px; left: -129px; da mit mittelpunkt bei y = 0 und radius von 75 plus rand von 5 top bei -80 liegen muss
    left ergibt sich wieder aus radius von 75 plus rand von 5 mit mittelpunkt bei x = -49 ergibt das ein left von -129

    das pause-symbol welches eigentlich auf den koordinaten
    Code:
    -74/0    0/0
    
    -74/74   0/74
    liegt muss jetzt auch verschoben werden, damit es mittig im kreis liegt. der mittelpunkt des kreises ist -49, der des pause-symbols -37, damit muss es noch 12 weiter nach links und bekommt ein left: -12px;
    da sich der kreis jetzt auch nach dem pause-symbol ausrichtet, muss bei diesem auch wieder top / left angepasst werden. wieder radius 75 plus rand 5 bei mittelpunkt -37/37 ergibt das -117 als left und -43 als top

    das ganze sieht dann so aus
    Code:
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <style type="text/css">
          #test {
            position: relative;
            display: block;
            top:100px;
            left: 100px;
            width: 400px;
            height: 400px;
          }
          
          .play {
            width: 74px;
            height: 0px;
            cursor: pointer;
            background: transparent;
            padding: 0;
            border-style: solid;
            border-width: 37px 0 37px 74px;
            border-color: transparent transparent transparent #202020;
          }
          
          .play.paused {
            position: relative;
            left: -12px;
            height: 74px;
            border-style: double;
            border-width: 0px 0px 0px 74px;
          }
          
          .play:before {
            position: relative;
            display: block;
            content: '';
            top: -80px;
            left: -129px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid #2c3e50;
            transition-duration: 0.5s;
            transition-property: transform;
          }
          
          .play.paused:before {
            top: -43px;
            left: -117px;
          }
          
          .play:hover:before {
            transform: scale(1.1);
            transition-duration: 0.5s;
          }
        </style>
        <script>
          function run()
          {
            const icon = $('.play');
            icon.click(function()
            {
              icon.toggleClass('paused');
              return false;
            });
          }
        </script>
      </head>
      <body onload="run()">
        <spawn id="test"><button class='play'></button></spawn>
      </body>
    </html>
    ich kenn mich mit css zwar nicht so aus, aber das gefällt mir besser
    Geändert von tsseh (28-02-2018 um 09:58 Uhr)

  7. #7
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    AW: playButton mittles css

    Cool danke, mir gefallen beide Lösung sehr gut. Hätte das wie kkapsner auch nur PI*Augenmas eingeloted.


    Noch was die vorwärts/rückwärts Tasten wollte ich über Spitze klammer machen + pipe Symbol >>|
    Kennt einer eine Schriftart in der sich Öffnung der klammer vergrößert oder verkleinert?

Ähnliche Themen

  1. Antworten: 21
    Letzter Beitrag: 12-12-2012, 23:42
  2. Schaltnetz mittles Formularfeldern visualisieren
    Von afoeder im Forum Allgemeines
    Antworten: 7
    Letzter Beitrag: 04-05-2007, 14:47

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •