• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Css in Html einbinden

koko92

koko92

Neues Mitglied
  • Hallo Guten Tag, bin noch nicht solange in der Programmierwelt und habe noch paar Schwierigkeiten, aber ich will nicht aufgeben und hoffe jetzt auf Hilfe von euch...
  • ich habe ein CSS Code und ein HTML Code ich möchte dieses in Gmail einbinden jedoch erkennt weder mein Browser noch Gmail den Code weiß nicht wieso... da es bei Codepen einwandfrei funktioniert
  • <HTML CODE>
    <a id="dex-sign" class="play" href="#" target="_blank"></a>
  • </HTML CODE>

  • <CSS CODE >

  • @sign-x: 255px;
    @sign-y: 84px;
    @sign-frames: 85;
    @sign-duration: 3.5s;
    @sign-delay: .2s;
    #dex-sign {
    display: inline-block;
    margin: 30px 10px 15px 10px;
    width: @sign-x;
    height: @sign-y;
    background: url(#) no-repeat;
    &.white {
    background-image: url(#);
    }
    &.play {
    -moz-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
    -o-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
    -webkit-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
    animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards;
    }
    }
    a#dex-sign {
    opacity: .9;
    &:hover {
    @sign-hover-color-spin: 165deg;
    opacity: 1;
    -webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(@{sign-hover-color-spin})';
    }
    }
    @-webkit-keyframes sign-anim {
    to {
    background-position: 0 @sign-frames * -@sign-y;
    }
    }
    @-moz-keyframes sign-anim {
    to {
    background-position: 0 @sign-frames * -@sign-y;
    }
    }
    @keyframes sign-anim {
    to {
    background-position: 0 @sign-frames * -@sign-y;
    }
    }

  • </CSS CODE>



  • Würde mich auf eure Hilfe freuen. Dankeschön :)
 
Wie hast du dir Codes denn eingebettet? Hoffentlich nicht wirlich mit <html code>...</html code>.
Wenn das der Fall sein sollte schau dir erstmal dir Grundlagen an! Allgemein, bevor du dir Sachen rauskopierst und so weiter, lern die Grundlagen zu html und CSS. Es gibt dazu viele gute Tutorials. Sobald du die Grundlagen kannst, kannst du dir die Frage hier selber beantworten!
 
Natürlich nicht hab es nur reingestellt damit man schneller unterscheiden kann.

Habe alle Sachen eingehalten habe schon mehrere Sachen geschrieben aber noch nie wurde nix angezeigt..
und in diesem Fall zeigt er mir nur ein Text an die CSS Datei ist auch erfolgreich eingebunden weil der Text angepasste Schrift besitzt, jedoch wird mir das wechselnde Bild nicht angezeigt!

soll eine bewegende Signatur werden... und in Gmail eingefügt werden, jedoch zeigt er mir den Code nicht an und solange er nicht angezeigt wird weiß ich auch nicht wie ich das in Google einsetzten könnte....

Danke :)
 
Erstmal Danke für die Antwort die war schon ziemlich gut, habe nicht beachtet das es in less geschrieben war, jedoch funktioniert jetzt der Code gar nicht mehr ...
Code: 
<style>
#dex-sign {
  display: inline-block;
  margin: 30px 10px 15px 10px;
  width: 255px;
  height: 84px;
  background: url(https://image.ibb.co/m3n4v6/o.png) no-repeat;
}
#dex-sign.white {
  background-image: url(#);
}
#dex-sign.play {
  -moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
  opacity: .9;
}
a#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
<\style>

<Body>
  <a id="dex-sign" class="play" href="#"
<\Body>


Hier ist übrigens der Link nach welchen Beispiel ich dieses übernommen habe:

https://codepen.io/drygiel/pen/KbhmA?q=signature&limit=all&type=type-pens

jedoch hab ich meine eigene Unterschrift gesetzt.

Danke nochmal jeden der mir Hilft!!!
 
Hallo Sempervivum,

Ja hab es schon versucht in eine HTML Datei laufen zu lassen, jedoch funktioniert es nicht ich werde schon wahnsinnig höchstwahrscheinlich hab ich irgendwo ein Fehler drin ansonsten habe ich keine Ahnung was ich noch machen soll...

und ja war ein aus versehen mit dem style ... hab nicht drauf geachtet gerade...

Und Ja der Effekt ist cool besonders bei Emails unter mit freundlichen Grüßen...
und Nein war nicht viel Arbeit einfach das letzte Frame die eigene Unterschrift eingesetzt... und dann jedes bild ein stück mit Radiergummi bei paint gelöscht war innerhalb 10 min gemacht...

Aufjedenfall Danke für die Antwort... hoffe irgendwie wird es endlich klappen...
 
Hier ist das gute Stück:

Code: 
<!DOCTYPE html><html class=''>
<head>
   
    <title> Wb </title>
                     <meta
             
              charset='UTF-8'><meta name="robots" content="noindex"><link
                                                             
<meta name="viewport" content="width=device-width, initial-scale=1">
      <style class="#">
             
  #dex-sign {
  display: inline-block;
  margin: 30px 10px 15px 10px;
  width: 255px;
  height: 84px;
  background: url((https://image.ibb.co/m3n4v6/o.png) no-repeat;
}

#dex-sign.play {
  -moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
  opacity: .9;
}
a#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}


</style>

                                </head>
    
                                <body>
       
         <a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a>

  
</body></html>
 
Das liegt daran, dass der Kram von Sempervivums Internetlink nicht wirklich seine Arbeit getan hat :/
Was der Link machen sollte, kannst du auch über Codepen selbst machen lassen.
Einfach auf den kleinen Pfeil oben rechts beim CSS-Editor klicken und dann auf "View Compiled".
Dann kommt folgender CSS-Code raus:
Code: 
#dex-sign {
  display: inline-block;
  margin: 30px 10px 15px 10px;
  width: 255px;
  height: 84px;
  background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
}
#dex-sign.white {
  background-image: url(http://drygiel.com/projects/sign/frames-255-white.png);
}
#dex-sign.play {
  -moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
  animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
  opacity: 0.9;
}
a#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
* {
  margin: 0;
  padding: 0;
}
body,
html {
  font-size: 1em;
  color: #2c2c2c;
  height: 100%;
  font-family: "Raleway", sans-serif;
}
::selection {
  background: white;
}
::-moz-selection {
  background: white;
}
section {
  height: 100%;
  min-height: 335px;
  background-color: #fff;
  background-image: radial-gradient(center top, circle cover, #fff, #d6d6d6);
  background-image: -o-radial-gradient(center top, circle cover, #fff, #d6d6d6);
  background-image: -ms-radial-gradient(center top, circle cover, #fff, #d6d6d6);
  background-image: -moz-radial-gradient(center top, circle cover, #fff, #d6d6d6);
  background-image: -webkit-radial-gradient(center top, circle cover, #fff, #d6d6d6);
  text-align: center;
}
section:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 335px;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkYzRUQ1MTgxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkYzRUQ1MTkxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRjNFRDUxNjFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRjNFRDUxNzFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvRiGgkAAAAkSURBVHjaYvj//z8DCKuqqqaBaEYQgQyY1NTU0pAFMFQABBgAKcEQowsz06AAAAAASUVORK5CYII=");
}
section #replay {
  position: absolute;
  z-index: 9999;
  bottom: -45px;
  left: 0;
  display: inline-block;
  padding: 10px;
  background: rgba(240, 240, 240, 0.44);
  border: 1px solid #bababa;
  color: #696969;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6em;
  -moz-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
  -o-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
  -webkit-transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
  transition: left 6s cubic-bezier(1, 0.01, 1, 0.01);
}
section #replay:hover {
  left: -100000%;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
section #replay:hover + .play {
  -moz-animation: none !important;
  -o-animation: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}
section .quote {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 20%;
  padding: 30px 0 15px 0;
}
section .quote cite {
  color: #000;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 110%;
  font-size: 1.7em;
  font-variant: small-caps;
}
section .quote cite:before {
  content: "’’";
  position: absolute;
  left: -120px;
  top: 48px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-size: 8em;
  text-align: left;
  font-family: Arial;
  letter-spacing: -16px;
  font-style: normal;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.1);
}
section .quote #dex-sign {
  position: absolute;
  bottom: -95px;
  right: 0;
}
footer {
  background-color: #2c2c2c;
  color: #8a8a8a;
  padding: 25px;
  text-align: center;
}
footer a {
  text-decoration: none;
  color: #4384e6;
}
footer a:hover {
  color: white;
}

Ich habe ihn gerade selber getestet und er funktioniert bei mir.
 
Hallo Aaron, habe gerade den selben Code denn du geschickt hast in meine HTML Datei eingesetzt und es kommt doch nicht bei raus...

lade die Datei hoch kannst dir ja mal anschauen und mir sagen wo mein Fehler wieder ist...
 

Anhänge

ok keine Ahnung was da los ist :D aber jetzt funktioniert es bei mir auch....
so jetzt kommt eigendlich das Program von Anfang an wie kriege ich das denn nun in Gmail als Signatur rein?

Schonmal vielen vielen Dank Sempervivum du hast meine Kopfschmerzen schon mal erleichtert :)
 
oje :D hab noch nie ein gif erstellt ... und macht mich wahnsinnig weil überall im net steht das man seit paar jahren css in gmail einfügen kann und hab auch schon Beispiele gesehen... zwar macht er mein Code rein und er zeigt mir ihn auch aber sobald ich aktuallsiere löscht er ihn wieder weg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben