Asseyez chaque écran dans une vitre arrondie sous un ruban d'angle

Featurekamo-login
Expédié
5 septembre 2026 à 18:05 UTC
Auteur
Kamo
Commite
4a6ad5b

Chaque itinéraire rend maintenant à l'intérieur de .kamo-pane: un encart de carte 15px à partir du navigateur bord avec un rayon de 14px, une ombre douce, et débordement: caché, donc une page est propre le contenu est coupé au rectangle arrondi. La vitre porte également un translate-(0), qui en fait le bloc contenant la position: fixe descendants - sans elle la pilule sous-jacente à la pilule sous-jacente et la tête de fond de Capcha la prise de vue et échappent entièrement au clip, ce qui est exactement le cas Il a été demandé de couper. Le ruban "Bienvenu" est de trois couches autour de cette vitre, commandée à l'intérieur .kamo-coque: la queue plus foncée derrière elle, la vitre, puis la bande rouge devant. La bande est tournée de 45 degrés dans le sens des aiguilles d'une montre autour de la diagonale du coin supérieur droit et clipsé par une boîte ancrée 8px à l'extérieur de cet coin, de sorte qu'il surplombe le haut et les bords droits d'environ 8px, couper le rassasiement avec l'espace. La coupe flush n'est pas un raccourci, c'est la seule façon d'atteindre 8px. Une bande avec les extrémités carrées perpendiculaires à elle-même ne peuvent pas surplomber une arête inférieure à sa épaisseur propre sur la racine deux 24px à une bande de 34px lisible, bien plus qu'une L'écart de 15px a de la place pour. Découpe des extrémités parallèles aux bords qu'elles traversent découple le surplomb de l'épaisseur de la bande, et donne les deux bords identiques 8px. La queue commence la largeur d'une bande à partir du coin de sorte que leurs extrémités proches finissent en dessous, courir le long de chaque bord à travers l'espace, puis sont avalés par la vitre. Seulement - le ruban-over de l'épaisseur de chaque queue efface toujours la vitre, donc l'encoche en queue d'elligenteille est coupée à l'intérieur de cette bande; quoi que ce soit de plus profond ne se manifeste jamais. Chaque dimension est une propriété personnalisée sur :racine, et l'ensemble des échelles d'assemblage vers le bas sous 640px. Chaque route s'est dimensionnée jusqu'à la fenêtre, et a ainsi débordé la nouvelle vitre par 30px. Chaque racine remplit maintenant la vitre à la place - 100% à la place de --app-dvh, 100dvh, 100vh et min-h-screen et le rembourrage de zone de sécurité se déplace jusqu'à la scène, qui est l'endroit où l'encart est maintenant appliqué. L'étape revient à 100 dvh pour les routes qui ne mesurent pas visualViewport en --app-dvh eux-mêmes. Vérifié dans un navigateur à 1440x900 et 390x844: le volet mesure 15px de chaque bord, la boîte de clips se trouve 8px à l'extérieur du coin, les deux queues atterrissent où le la géométrie prédit, et la pilule alimentée par est contenue 16px à l'intérieur de la vitre plutôt que la fenêtre d'affichage.

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation