Neuer BOOSTER für euere Responsive oder Fluid Layouts mit CSS Clamp() Function! [TUTORIAL]

Подписаться 38 тыс.

Просмотров 39 тыс.

50% 1

Heue schauen wir uns mal die CSS3 Clamp() Funktion an und warum diese euer Leben deutlich einfach machen kann wenn ihr Responsive Layouts bauen müsst.
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
Unterstütze den Channel:
🧡 Adobe Creative Cloud: prf.hn/l/QxRnVXD (Affiliate Link)
🧡 Meine UI Design Tool: bit.ly/UseAdobeXd (Affiliate Link)
🧡 Musik die ich Nutze: bit.ly/MeineHintergrundMusik (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFreelanceKonto (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskUnleashed (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 RU-vid Mitgliedschaft: bit.ly/RU-vidSupporter (Affiliate Link)
Kapitel:
00:00 Einleitung
00:34 Theorie
01:46 Can i use
03:58 Erklärung
05:43 Beispiel 1: Font-Size
09:10 Beispiel 2: Animation
11:43 Beispiel 3: HTML Elemente
13:47 Ende
Links aus dem Video:
► W3C (Clamp()): www.w3.org/TR/css-values-4/#c...
► W3C (Alles): www.w3.org/TR/css-values-4/
► Mozilla: developer.mozilla.org/en-US/d...)
► Can I Use: caniuse.com/?search=clamp
► VSC Theme: bit.ly/VisualStudioCodeTheme
► IDE Tutorial: • Basic Frontend/Web Ent...
#Tutorial #css #webdesign
Meine Social Media Seiten:
► Homepage: bit.ly/1y4rvIA
► RU-vid: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Instagram: bit.ly/1UjBLuD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Copyright by Johannes Schiel / Unleashed Design

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 91

@peterkecks5521 2 года назад

Geiler Typ! Danke, dass du dein Wissen mit uns teilst!

@UnleashedDesign 2 года назад

Danke ;) freut mich wenn es dir gefällt :)

@rabbit_van 2 года назад

Wie immer sehr gut erklärt, ich könnt's nicht besser. Einfach wirklich eine gute Erleichterung im CSS. 👍

@UnleashedDesign 2 года назад

Danke, freut mich wenn es dir gefallen hat :)

@lananegro6251 2 года назад

Schon sehr cool - die Funktion 👍🏻 macht Spaß bei dir zu lernen, vielen Dank 😊

@UnleashedDesign 2 года назад

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

@christophermatt5925 2 года назад

Mega gut erklärt - vielen Dank :-)

@MrJura911 2 года назад

Das ist mal wieder ein Super Video. Danke dafür. Das hab ich gerade gebraucht.

@UnleashedDesign 2 года назад

Danke freut mich wenn es dir gefällt :)

@toxeeque 2 года назад

Top Channel für mich. Danke für deine Vids!!

@UnleashedDesign 2 года назад

Danke freut mich wenn dir die Videos gefallen :)

@bennybensen3442 2 года назад

Genial erläutert, danke!!!

@UnleashedDesign 2 года назад

Danke freut mich wenn dir das Video geholfen hat :)

@MosDev__ 2 года назад

sehr geiles feature !! vielen dank für die beispiele und erklärung !

@UnleashedDesign 2 года назад

Gerne freut mich wenn es helfen konnte :)

@FlorianBinder 2 года назад

Sehr gut erklärt! 👍

@UnleashedDesign 2 года назад

Danke :)

@StixxLetsPlay 2 года назад

Nice, komme Grade beim Studium zum responsive Design. Da kommt das wie gerufen.

@michaelblechinger2240 2 года назад

Super Feature!!

@Pho_Phoenix 2 года назад

Genial!

@UnleashedDesign 2 года назад

Absolut :)

@arty_trading 2 года назад

Toll erklärt

@UnleashedDesign 2 года назад

Danke freut mich wenn es dir gefällt :)

@jodotodesignweb-music-vide6739 2 года назад

sehr coole Funktion 👍🏻

@UnleashedDesign 2 года назад

Absolut :)

@stefanfrei6199 2 года назад

Danke :)

@johannschneider6796 2 года назад

Hierdie is die beste video ooit

@ignisAnimus 2 года назад

Kenne niemand der wirklich mit Fluid Designs arbeitet, weil es in Tools wie Figma und co schwer abzubilden ist. Trotzdem klingt das Feature sehr cool und ich werde es ausprobieren. Danke fürs Video.

@niner8275 2 года назад

Vielen Designern sind die Möglichkeiten von CSS gar nicht bekannt und so wird teilweise noch oft an starren Pixelwerten und somit insgesamt eher unflexiblen Layouts festgehalten. Das ist jedes Mal schade, wenn man überlegt, was eigentlich möglich wäre.

@ignisAnimus 2 года назад

@@niner8275 Stimmt ja. Aber gute Designer sind kooperativ und lassen die Dynamisierung ihrer Designs zu. Ich arbeite gerade mit so einer.

@niner8275 2 года назад

@@ignisAnimus Da hast du echt Glück! Die Designer mit denen ich arbeite kennen da leider wenig anderes und ich rede mir immer den Mund fusselig, warum rein Pixel basierte Designs jede Menge Schwierigkeiten mit sich bringen.

@ignisAnimus 2 года назад

@@niner8275 Um ehrlich zu sein ich habe keine Probleme mit Pixel-basiert. Zumindest bei Schriftgrößen und Abständen.

@jugibur2117 2 года назад

Danke für dein Video! Ich hatte zuvor immer wieder "Justierungsprobleme", da man ja alle 3 Werte im Blick haben muss. Nutze jetzt erstmal immer nur den Wert mit vw ohne clamp() und die Basis festzulegen. PS: Wer z.B. noch das alte iPad Air unterstützen möchte, das nur bis iOS 12 kommt, kann min / max als Ersatz für clamp() nutzen.

@UnleashedDesign 2 года назад

Guter Tipp :)

@CrazyCodingChannel 2 года назад

Like this video, good job man

@UnleashedDesign 2 года назад

Thx :) even when its in german?

@CrazyCodingChannel 2 года назад

@@UnleashedDesign I taught him at school, everything is fine

@frankiberlin 2 года назад

👍 Danke 🙂

@UnleashedDesign 2 года назад

Dieses mal nich tzu schnell ? :D

@frankiberlin 2 года назад

@@UnleashedDesign Besser, Du hast Dich ja auch sehr bemüht :D - zum Ende wirst Du wieder etwas schneller - aber besser, viel besser, ich danke Dir. :) LG (ツ)

@MrPietsch 2 года назад

Hi Johannes. Wie immer ein informatives und gut gemachtes Video. Welches Build-Tool verwendest du für die Umwandlung von SASS zu CSS? Ist das rechte Fenster ein Teil von VSC, oder hast du nur den Browser daneben geschoben?

@UnleashedDesign 2 года назад

Das ist einfach nur Chrome was ich klein gezogen habe ;) ich nutze Gulp, gibt aber viele viele Tools dafür. In der Beschreibung findest du ein Repo mit allem was du brauchst für das Setup.

@nordmannskraulbart 2 года назад

Geile Scheiße! ❤️

@tobiasschreiber3841 2 года назад

Servus Johannes, danke erstmal für das Video. Wie immer erste Sahne von Dir: locker, zügig und auf den Punkt gebracht. Was ich dich schon länger mal fragen wollte, welche IDE verwendest du?

@UnleashedDesign 2 года назад

Danke freut mich wenn es helfen kann, ich nutze VSC

@beckyb9215 2 года назад

Cooles Theme hast du? Welches verwendest du? Ganz tolles Video, neuer Sub :)

@UnleashedDesign 2 года назад

Das ist meines, ist in der Beschreibung verlinkt.

@gregermax 2 года назад

Coole Sache! Bei der Sidebar sehe ich den Vorteil zwar nicht ganz, weil es neben "width" ja auch noch "max-width" und "min-width" gibt, aber ansonsten nette Funktion!

@TutmeistensnixDe 2 года назад

Gutes Video, danke dafür. Aber eine Frage hätte ich noch. Was ist wenn der Browser clamp() nicht unterstützt, welchen Wert nimmt er dann, den mittleren?

@saimamomand7418 2 года назад

netter trend jacking titel ;D aber sonst gutes video, werde clamp bestimmt mal iwann verwenden ^^

@TarajiYaDawla 2 года назад

Vielen Dank für das sehr informative Video👍 kurze Frage zum Titel. Soll es fluit heißen und nicht eher fluid? Übrigens ist meine Frage ernst gemeint.

@UnleashedDesign 2 года назад

Absolut, danke für den Hinweis habe ich ausgetauscht :)

@maskoram1506 2 года назад

Sehr gutes Video! Die Einteilungen in die Kapitel im Video sind auch immer sehr sehr praktisch. Der Mozilla Link funktioniert jedoch nicht. Da fehlt die Klammer zu. Beste Grüße

@UnleashedDesign 2 года назад

Danke für den Hinweis habe ich korrigiert :)

@sabiplaypuzzles7332 2 года назад

DU hast eine sehr wichtige Sache beim lesen der Prozentzahn bei "Can i use" vergessen. Man muss sich immer fragen was passiert, wenn das jeweilige Feature nicht unterstützt wird. Wenn es nur eine leicht kosmetische Veränderung hat, dann sind 90% völlig ausreichend, zumal man bedenken muss, dass die Inkompatibilität nach der Zeit abnimmt. Wenn ein Feature zB das ganze Layout zerhaut oder (noch schlimmer) bestimmte Menupunkte oder Informationen nicht zugänglich macht, dann sind 90% wahrscheinlich zu wenig.

@UnleashedDesign 2 года назад

Generell ja, allerdings wenn man ein Layout mit clamp aufbaut incl. Schriften wird es vermutlich passieren das diese nicht Lesbar ist was in vielen Fällen mehr als nur ein Kosmetischer Bug ist weil die Bedingung im Worst Cast, die Benutzung beeinträchtigt wird.

@sabiplaypuzzles7332 2 года назад

@@UnleashedDesign Habe auch nicht von der Clamp()-Funktion gesprochen, sondern allgemein. Speziell für clamp() kommt es allerdings auch auf den einzelnen Anwendungsfall an. Da hast du allerdings recht, clamp() wird bei nicht-unterstützung in den meisten Fällen zu untragbaren Ergebnissen führen.

@bambindien3327 2 года назад

Hi, hast Du noch einen zusätzlichen Tipp, wie ich den mittleren Wert (in vw) kalkuliere oder wähle? Ansonsten, sehr gutes Video, vielen Dank für alles!

@simonklein2335 2 года назад

Den mittleren Wert kannst du so betrachten, als würdest du "font-size: 24px" schreiben. So gesehen der Standardwert. An sich ist es egal, ob es px, ch, vw oder % sind. Allerdings hat sich halt vw bewehrt gemacht und es macht am meisten Sinn, weil vw sich relativ zur Bildschirmgröße verhält. vw = view width. 1vw = 1% der display größe des aktuellen Gerätes. Auf einem 1080p Bildschirm wäre 1vw = 10,8px. Aber die Rechnung ist an sich total egal. Probier es einfach aus und schau wie es aussieht.

@klauspommerening4977 2 года назад

Für das Coden an sich wunderbar weil man wieder viel Code und auch viel zeit sparen kann. ich hab das jetzt schon mal gesehen und denke das ich es mal probiere weil bin gerade daran eine Neue Seite zu machen und es nervt doch wenn jemand mit dem Handy auf die Seite geht und auf einmal ist alles komplett überlappt. Gerade bei Drucker Apps sehe ich das sehr Häufig das die Seiten nicht so dargestellt werden wie man sie braucht oder zu sehen sein soll. Diese Funktion würde uns das Mediascreenen auch vergessen lassen weil ich denke absolut wäre es an der zeit das man weniger Coden muss und dadurch auch viel Zeit und aufwand ersparen kann.

@UnleashedDesign 2 года назад

Also glaube nicht das sich Media Querys damit "verhindern" lassen weil ja nicht jede Responsive Regel nur auf Größen basiert sondern auch auf Farben usw. aber es wird sehr sehr viel Code sparen :)

@klauspommerening4977 2 года назад

@@UnleashedDesign Also ganz wegfallen lassen kann man das nicht, sollte auch am besten nicht wegfallen. Aber zu mindest mal für Schrift und die Container "DIV" wäre es eine gute Verwendung wenn dann mal alle Browser mit spielen.

@Linuxdirk 2 года назад

Endlich nie mehr Media Querys! 🤗

@UnleashedDesign 2 года назад

Naja die wirst du leider nicht ganz los werden damit :D

@dankefurnichts 2 года назад

was ist eine sass datei?

@mlanczyk 2 года назад

Hi, welchen Code Editor benutzt du?

@UnleashedDesign 2 года назад

Hallo Visual Studio Code mit einem Custom Theme

@mlanczyk 2 года назад

@@UnleashedDesign Vielen Dank für die Rückmeldung. Durch die weiteren Videos hab ich's auch verstanden. Du machst eine super Arbeit, weiter so und danke auch dafür!

@kaiqueamorim2716 2 года назад

Not really 'New" but great video tho!

@hdmikel 2 года назад

Wäre es auch möglich Bilder mit Clamp responsiv darzustellen?

@UnleashedDesign 2 года назад

Theoretisch praktisch kannst du das auch via % machen :)

@hdmikel 2 года назад

Ja danke, haste auch wieder recht. Hatte mir nur gedacht wenn man durch clamp responsive Schrift darstellen kann, müsste das ja auch mit Bildern möglich sein. Ich probiere es demnächst einfach mal.