Netter Click effect

[stobi_de]

https://codepen.io/hexagoncircle/pen/bGZdWyw

Morgen!
Habe mal wieder eine nette Spielerei gefunden. Bekomme das aber nicht in Mobi.
Indizierte Inputs scheint Mobi nicht zu kennen.

Es gibt so ein paar klasse Sachen, die scheinbar nicht einfach zu integrieren sind.
Kommen noch ein paar, habe gerade Testlaune

https://codepen.io/freedommayer/pen/vYxRoem

Das sind so ein paar wirklich nette Sachen, manche blöd, manche gewiss gut brauchbar
https://freefrontend.com/css-text-effects/

[Tommy Herrmann]

... nur mal auf die Schnelle ein Versuch (stimmt noch nicht wirklich):

https://www.mobirise-tutorials.com/Vorl ... orial.html

(Seite wird wieder gelöscht)

Inhalt:

Code: Alles auswählen

<div class="hero-banner">
  <div class="hero-banner__title" aria-hidden="true">Wonderful title</div>
  <img class="hero-banner__image" src="https://www.mobirise-tutorials.com/Tutorials/images/winter.jpg">
  <h1 class="hero-banner__title hero-banner__stroked-title">Wonderful title</h1>
</div>

<div class="content">
  Wonderful content.
</div>

CSS:

Code: Alles auswählen

.hero-banner {
  align-items: center;
  display: flex;
  height: 50vh;
  position: relative;
  justify-content: center;
}
.hero-banner__image {
  border-radius: 20px;
  position: absolute;
  transform: rotate(-15deg);
  max-width: 450px;
  justify-content: center;
}
.hero-banner__title {
  color: #fff;
  font-size: 100px;
  font-weight: 700;
  padding: 0 20px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
}
.hero-banner__stroked-title {
  color: transparent;
  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;
}                

[stobi_de]

Hm... da mache ich was falsch.

[Tommy Herrmann]

Moin und frohes neues Jahr

… ja - also so richtig ausprobiert habe ich das jetzt auch nicht. Da war eigentlich nur "fixed" mit "absolut" zu ersetzen. Die Schrift ist aber so nicht richtig responsive und liegt am Handy als Outline (text-stroke) über dem Bild und ansonsten darunter