Dieser CSS Card Effekt macht süchtig! Spotlight Border Animation [DE/Tutorial]

No video

Dieser CSS Card Effekt macht süchtig! Spotlight Border Animation [DE/Tutorial]

Рет қаралды 46,508

Unleashed Design

Күн бұрын

Пікірлер: 96

@sebastianernst3290 Жыл бұрын

Ich finde es wirklich unter aller Kanone, was manche hier so unter dein Video schreiben. Danke für die kostenfreien Lerninhalte 👌 und immer weiter so

@UnleashedDesign Жыл бұрын

Vielen Dank freut mich wenn es dir gefällt :) Development ist einfach ein Topic was jeder anders sieht :D

@jaberer Жыл бұрын

Wow, sehr cool, ich habe das letzte Mal vor ein "paar" Jährchen mit HTML, CSS und JavaScript aktiv gearbeitet, damals gab es noch kein LESS, SASS, usw. Und nun versuche ich wieder in der Richtung einzusteigen. Da hat sich doch so einiges getan, echt krass. Wie gesagt, ist alles schon etwas her ;-) Und ich muss sagen, echt Wahnsinn, wie sich das entwickelt hat. Zum Video: Es war zwar anfangs etwas tricky das in reinem plain CSS umzusetzen aber letztendlich hat alles wunderbar geklappt. Der Aufbau des Effekts ist sehr gut strukturiert und verständlich erklärt. Vielen Dank für dieses und die vielen anderen Videos von dir. Ich glaube, ich habe einen neuen Suchtchannel, kann somit jetzt mein Netflixabo getrost kündigen :-P

@TheRealHoernchen Жыл бұрын

Echt mega bin immer wieder erstaunt, was CSS und JS so alles hinkriegen

@UnleashedDesign Жыл бұрын

Ja ich auch immer wieder :D

@AlexanderFischer82 Жыл бұрын

Finde den Effekt sehr stark, beeindruckend. Tutorial auch richtig top. Spannend wäre noch zu sehen, ob und wie man die Performance optimieren kann, damit das mousemove Event nicht feuert ohne Ende. Kann mir vorstellen, dass das bei 100 Cards schon merklich ist.

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir meine Videos und der Effekt gefallen :)

@UnleashedDesign Жыл бұрын

Das ist die Bit Rate des von KZfaq komprimieren Videod 😂 KZfaq macht auf meinem schönen 11GB Format 240 Mb 😅

@maddin5000 Жыл бұрын

Als ersten Schritt könnte man schonmal das `card.getBoundingClientRect()` aus dem `mousemove`-Handler rausholen und die card rects stattdessen nur einmal/initial bzw. nur bei einer Änderung der Card-Liste abfragen.

@mariokartgameplay6622 Жыл бұрын

Der Effekt sieht echt toll aus. Danke für das Video :)

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@Wolveknight5 Жыл бұрын

Tolles Video. Super einfach erklärt, was wirklich für den Effekt wichtig ist. Weiter so!

@kaiammeer Жыл бұрын

Wow, absolut gutes Tutorial. Das macht Appetit darauf sich wieder mit Webdesign zu beschäftigen. Vielen Dank dafür.

@UnleashedDesign Жыл бұрын

Dann wurde das Ziel ja erreicht ! :)

@etwasadas613 Жыл бұрын

Erinnert mich sehr stark an das Video von Hyperplexed.

@haimitch Жыл бұрын

Absolut genial der Effekt. Bitte mehr davon 🤩👍🏼

@UnleashedDesign Жыл бұрын

Wird immer mal wieder ein Video dazu kommen :)

@eugenz22 Жыл бұрын

Fantastisch! Ganz anderer Stil wie bei anderen. Gut auf den Punkt gebracht! Weiter so! Der Erfolg bleibt nicht lange aus!

@UnleashedDesign Жыл бұрын

Was genau meinst du mit "anderer Stil" ? :)

@Alpagut88 Жыл бұрын

Echt cool. Je mehr ich solche Videos schaue desto lustloser geh ich morgens an mein Job ran

@UnleashedDesign Жыл бұрын

Warum das ?

@Alpagut88 Жыл бұрын

@@UnleashedDesign weil ich als was anderes arbeite als Entwickler:) bin 35 und in der IT tätig doch nicht als Entwickler. IT Support. Ich habe Spaß daran solche Videos wie deine anzuschauen doch den Mut bringen und wirklich damit anfangen bzw. den Beruf zu änden ist eine schwierige Entscheidung

@Liggedias Жыл бұрын

Bin grad auf dieses Video gestoßen und bin sehr angetan! Das Tutorial ist sehr gut aufgebaut und deine Art zu Erklären angenehm. Der Effekt ist auch echt klasse. Weiter so! Hab mal ein Abo da gelassen :)

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir meine Videos gefallen :)

@marckrug Жыл бұрын

Danke für deine wirklich sehr schönen Tutorials!

@UnleashedDesign Жыл бұрын

gerne :) freut mich wenn sie dir gefallen.

@PicSta Жыл бұрын

Hab ich schon bei einem englischsprachigen KZfaqr gesehen und war auch sofort beeindruckt. Ich werde es bestimmt bei einem meiner nächsten Projekte verwenden. Und danke für die deutsche Version von dir.

@UnleashedDesign Жыл бұрын

Ja man sieht das viel wegen Linear, diese Seite hat ja jeden zweiten Preis gewonnen für Design usw. :D

@RosaJD Жыл бұрын

Der Effekt ist mega, ich bin Schockverliebt 🤩👍🏻

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@johnengert5768 Жыл бұрын

Beeindruckend. HTML, CSS und Javascript lernen bietet unglaublich viele Möglichkeiten für Designs.

@UnleashedDesign Жыл бұрын

Ja absolut :D

@ancuvidesign 6 ай бұрын

Super Video vielen Dank dafür 😊

@UnleashedDesign 6 ай бұрын

Freut mich wenn dir das Video gefallen hat :)

@syntafin Жыл бұрын

Sehr schön und übersichtlich aufgebaut.

@UnleashedDesign Жыл бұрын

Danke :)

@microfx Жыл бұрын

cooler Kanal! Mega Produktionsqualität!

@UnleashedDesign Жыл бұрын

Danke freut mich wenn es dir gefällt :)

@murators4732 Жыл бұрын

Mega cooler Effekt. Danke fürs teieln!

@UnleashedDesign Жыл бұрын

Danke freut mich wenn es dir gefällt :) gerne Teile ich den Effekt mit der Community :D

@marcelmaier6765 Жыл бұрын

Servus Johannes, Marcel hier von HTMLWorld damals (falls du dich noch erinnerst) .. :D Super Tutorial! Geiler Effekt, werde den sicher auch mal verwenden. Kleiner Verbesserungsvorschlag: Wenn du wie bei 14:00 beginnst viele Positionsänderungen o.ä. zu machen, hilft es fürs Verständnis oft, wenn du zuerst einen Pseudo-Background wie ein stechendes Rot etc. verwendest. Dann sieht man immer direkt, was die einzelnen Anweisungen genau ändern. Das hattest du zu Beginn auch für das Grid-Layout gemacht. Aber ist Meckern auf hohem Niveau .. Finde es erstaunlich, wie viel Zeit und Arbeit du in deine Videos packst, mit einer Menge Liebe zum Detail. Ich habe selten so einen qualitativ hochwertigen Content gesehen! Weiter so und alles Gute für die Zukunft :)

@UnleashedDesign Жыл бұрын

Danke :D klar kenn ich dich noch ;) Pläne deinen Channel wiederzubeleben? Ja das stimmt danke für den Input :) werde ich mir für das nächste Video mal mitnehmen

@marcelmaier6765 Жыл бұрын

@@UnleashedDesign Das freut mich zu hören, wenn Feedback Anklang findet :) Achtung .. bin nicht Hendrik, er war ja der Inhaber. Ich hatte zum Ende einfach nur etwas unterstützt. Ich hatte Hendrik vor Ewigkeiten mal kontaktiert. Aber ich glaube wir beide finden nicht mehr die Zeit KZfaq zu machen. (auch wenn es mir unheimlich Spaß machen würde) Aber es freut mich echt tierisch, dass du das alles durchgezogen hast und als Freelancer arbeitest.

@stefansl Жыл бұрын

Sehr cool! Und schön angenehm erklärt. Weiter so!

@UnleashedDesign Жыл бұрын

Danke freut mich das es dir gefällt :)

@DjTongewalt Жыл бұрын

Mega.. sehr geiler Effekt... 😍

@FabioEste94 Жыл бұрын

Danke 🙏

@InverserPro Жыл бұрын

Thank you. It's cool!

@knusperinge8732 Жыл бұрын

Super Effekt und echt super erklärt

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt.

@nexTabDE Жыл бұрын

Toll aufgebaut! Sehr nachvollziehbar und irgendwie "spannend", wie der Effekt nach und nach entstanden ist, hat mir wirklich extrem gut gefallen, danke dafür. 🙂

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video und die Art gefällt :)

@_djengis Жыл бұрын

Uhh.... Das is sexy! Ersmal nen Abo! :P

@sammydailyshorts Жыл бұрын

Sehr geiles Video, danke!

@HaloElite Жыл бұрын

Sehr gutes Video! Klasse und verständlich erklärt. Nur den Punkt mit der relativen Position der Child-Elemente zur Maus Position hätte man eventuell noch etwas ausarbeiten können. Aber evtl. würde das auch den Rahmen sprengen, da es an sich ja eher ein eigenes Video zu "getBoundingClientRect" bräuchte.

@UnleashedDesign Жыл бұрын

Ja, man kann immer relativ Tief in jede Funktion gehen, bei mir auf dem Channel kann man das immer auf dem Thumbnail die Punkte beziehen :) um so mehr um so weniger Basics erkläre ich

@johanneslang3084 Жыл бұрын

richtig Cool Top Video

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@stefandahlmann4538 Жыл бұрын

Mir gefällt der gezeigte Effekt sehr gut. Gerne mehr so Effekte in zukünftigen Videos, wie auch Bewegungsefekte.

@UnleashedDesign Жыл бұрын

Wird kommen :) mache ja die letzten jahre eh nicht viel anderes :D

@nosferatuohnezahn6630 Жыл бұрын

Super video!

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@heggochan580 Жыл бұрын

ich kann irgendwie kein child erstellen...kann mir jemand helfen? Es geht nicht wenn ich geschweifte klammern in den cards klammern mache nur außerhalb davon...

@UnleashedDesign Жыл бұрын

nutzt du reines CSS oder SASS/SCSS in dem Video nutze ich wie in jedem meiner Videos SASS :) mit der SCSS Syntax das kann man nicht einfach in einer CSS Datei schreiben.

@saschaweber9728 Жыл бұрын

Mega Idee! Danke für das coole Tutorial.

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@Against.Lies.01 Жыл бұрын

Wirklich klasse Design

@UnleashedDesign Жыл бұрын

Danke freut mich wenn es dir gefällt :)

@mightyjupp1599 Жыл бұрын

Sehr Cool, so etwas wollte ich auf meiner Personal website einbauen.

@UnleashedDesign Жыл бұрын

Genau für sowas ist ja der Content gemacht :)

@karinavenefica4034 Жыл бұрын

wow thx

@UnleashedDesign Жыл бұрын

Danke freut mich wenn dir das Video gefällt :)

@joga_bonito_aro Жыл бұрын

Ich weiß ja nicht wie ihr das seht, aber wenn ich etwas kopiere dann Verweise ich auf die Quelle: kzfaq.info/get/bejne/ntp3mdF3luCyZJs.html

@UnleashedDesign Жыл бұрын

Ich kannte nur die Seite Linear die auf diversen "Best Websites"-Seiten Preise abgeräumt hat genau wegen diesem Effekt. Daher war meine Quelle für das Video Linear, diese ist auch angegeben.

@udk-tutorialsbyluke8434 Жыл бұрын

Megathumbnail Junge ich liebe jedes deiner Videos danke mal wieder dafür :) Mach weiter so

@UnleashedDesign Жыл бұрын

Danke freut mich wenn es dir gefällt :)

@gabschi12 Жыл бұрын

Der Effekt ist richtig cool leider kann ich ihn auf der Arbeit bei unseren Websites nicht verwenden da wir javaScript nur dann verwenden dürfen wenn es nicht anders geht.

@schatten105 Жыл бұрын

Bin eh grad dabei meine eigene Seite neu zu bauen, da werd ich das auf jeden Fall mit nutzen.

@UnleashedDesign Жыл бұрын

Genau für sowas ist das super :)

@garcipat Жыл бұрын

Dachte ist pures CSS dem titel nach. Gucke mal ob ich das mit typescript hinkriege

@ZPIB Жыл бұрын

Hallo, denken Sie, dass man durch Dokumentationen, Tutorials Artikels...usw ein professioneller Programmierer werden kann? Danke!

@BK007Lp Жыл бұрын

Wäre nett gewesen, hättest du erwähnt, woher die Video Idee kommt... (kzfaq.info/get/bejne/ntp3mdF3luCyZJs.html)

@UnleashedDesign Жыл бұрын

Hallo die Idee habe ich wie im Intro erzählt von Linear nicht von diesem Video auch wenn es sehr gut gemacht ist :) wie viele hier auf KZfaq und anderswo gucke ich mir viele Quellen wie godly.website/ oder www.awwwards.com/ an wo ich Ideen für Videos finde. Dort hat die Website Linear die ja in dem Video und auch in meinem Video gezeigt wurde für sehr viel aufsehen gesorgt genau wegen dem im Video gezeigten Effekt. Wenn man in den Code von Linear schaut sieht man auch genau das die Idee von uns beiden von Linear geklaut wurde ;)

@BK007Lp Жыл бұрын

@@UnleashedDesign Das Design bei Linear existiert jetzt fast ein Jahr und komischerweise genau dann, wenn das Video von Hyperpexeled viral geht, veröffentlichst du das identische Video auf deutsch. Komisch, oder? An sich ist das ja weder Diebstahl noch sonst etwas. Viele sprechen kein Englisch und ich finde es gut, wenn Content ins Deutsche übersetzt wird und "neuverfilmt". Aber Credits gehören dann auch dazu.

@ClipThatnoww Жыл бұрын

Genial

@udk-tutorialsbyluke8434 Жыл бұрын

Mir fällt hier noch ein es wäre eine schöne option mit boxshadow und calc(--varX/Y) einen Schatten von den einzelenen Cards zu werfen, der z.B. 1.2* die variablen des spotlighs von den Cards entfernt ist

@tonivanderweert7014 Жыл бұрын

Sag nur CHAPEAU.

@UnleashedDesign Жыл бұрын

Danke :)

@Das-Radio Жыл бұрын

Meine Frage ist angekommen?

@UnleashedDesign Жыл бұрын

Hallo welche Frage? habe ich glaube ich nicht bekommen.

@letsplaychronicles9483 Жыл бұрын

warum klingen die off-bild Audioteile eigentlich so Basslastig? Hörst du dir nicht hinterher an, was du da aufnimmst und mischst? Das passt doch hinten und vorne nicht zusammen. Kontinuität - auch im Ton - stände dem ganzen besser.

@letsplaychronicles9483 Жыл бұрын

achja, schon mal davon gehört, das Menschen atmen? Es ist extrem unnatürlich jeden Atmer wegzuschneiden. Damit erzeugst du ein negatives Gefühl beim Rezipienten und das ist sicher das wenigste, was du willst.

@meikelprinzler2615 Жыл бұрын

Ich habe das Video angeklickt, da du geschrieben hattest "Dieser CSS Card Effekt" ... und ich dachte ok mal wieder was geiles nur in css aber naja war wohl nichts... danke für nichts!

@UnleashedDesign Жыл бұрын

Das tut mir leid, aber Interaktivität im Sinne von User Interaktionen bekommt man nur mit etwas JavaScript hin, du kannst die x/y Position auch mit einer CSS Keyframe Animation ändern dann hättest du eine Animation jedoch ohne de Interaktion des Nutzers. Damit in Zukunft das Problem nicht nochmal aufkommt sofern ich "nur" CSS nutze ist auf den Titelbildern auch nur das CSS Logo zu sehen :)