Seite 1 von 1
Netter Click effect
Verfasst: Di 31. Dez 2024, 07:35
von 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/
Re: Netter Click effect
Verfasst: Di 31. Dez 2024, 08:39
von 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;
}
Re: Netter Click effect
Verfasst: Mi 1. Jan 2025, 08:57
von stobi_de
Hm... da mache ich was falsch.
Re: Netter Click effect
Verfasst: Mi 1. Jan 2025, 09:22
von 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
