diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5172429f Binary files /dev/null and b/.DS_Store differ diff --git a/_img/blog/2024/.DS_Store b/_img/blog/2024/.DS_Store new file mode 100644 index 00000000..814d6e3d Binary files /dev/null and b/_img/blog/2024/.DS_Store differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-closeup-first-inverted-border-radius.png b/_img/blog/2024/12/inverted-border-radius/card-closeup-first-inverted-border-radius.png new file mode 100644 index 00000000..2455eba3 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-closeup-first-inverted-border-radius.png differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element-and-shadow.png b/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element-and-shadow.png new file mode 100644 index 00000000..9859c81d Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element-and-shadow.png differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element.png b/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element.png new file mode 100644 index 00000000..64f9457d Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element.png differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-final.png b/_img/blog/2024/12/inverted-border-radius/card-final.png new file mode 100644 index 00000000..29abb9c0 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-final.png differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-highlighted-first-border-radius.jpg b/_img/blog/2024/12/inverted-border-radius/card-highlighted-first-border-radius.jpg new file mode 100644 index 00000000..c22608e0 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-highlighted-first-border-radius.jpg differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-highlighted-inverted-borders.jpg b/_img/blog/2024/12/inverted-border-radius/card-highlighted-inverted-borders.jpg new file mode 100644 index 00000000..d4470259 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-highlighted-inverted-borders.jpg differ diff --git a/_img/blog/2024/12/inverted-border-radius/card-without-inverted-border-radius.png b/_img/blog/2024/12/inverted-border-radius/card-without-inverted-border-radius.png new file mode 100644 index 00000000..951c94f0 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/card-without-inverted-border-radius.png differ diff --git a/_img/blog/2024/12/inverted-border-radius/normal-vs-inverted.jpg b/_img/blog/2024/12/inverted-border-radius/normal-vs-inverted.jpg new file mode 100644 index 00000000..4d4ca192 Binary files /dev/null and b/_img/blog/2024/12/inverted-border-radius/normal-vs-inverted.jpg differ diff --git a/src/_assets/member-avatars/imani-dap.jpeg b/src/_assets/member-avatars/imani-dap.jpeg new file mode 100644 index 00000000..b3dc9e24 Binary files /dev/null and b/src/_assets/member-avatars/imani-dap.jpeg differ diff --git a/src/en/members/imani-dap.md b/src/en/members/imani-dap.md new file mode 100644 index 00000000..7b5e4c23 --- /dev/null +++ b/src/en/members/imani-dap.md @@ -0,0 +1,28 @@ +--- +draft: false + # Your name +title: Imani Dap + # Make the key a unique slug (for example, your first and last name). This links the Dutch version to the English version of this page. +key: imani-dap +date: 2024-12-22 + # If you add an image, link it to the correct location here: +graphic: + src: /assets/images/member-avatars/imani-dap.jpeg + alt: A person with an afro and glasses smiling at the camera +# Your job title +jobtitle: Software Developer +# Eventueel: jouw huidige werk- of opdrachtgever +employer: Bitfactory +# Are you a freelancer? Fill this in or remove it +freelancer: + desc: At this moment in time I work on project with a specific set of partners under the name 'Dreamy Electron'. + availability: false +# Are you open to employment? Fill this in or remove it +# Adjust these specialties or add your own! +specialties: + - vue + - laravel + - shopify +--- + +I have been building professional websites, web applications and creative software since 2017. The fronteers Slack has taught me a lot during my studies and which is why I am happy member even though I am not strictly a front-ender. For the past year I have been able to enjoy freelancing full-time. From Jan 16th 2025 I will continue to do it part-time for a set of permanent partners in addition to a job as a software developer at Bitfactory. \ No newline at end of file diff --git a/src/nl/blog/2024/12/card-met-inverted-border-radius.md b/src/nl/blog/2024/12/card-met-inverted-border-radius.md new file mode 100644 index 00000000..ce6e337a --- /dev/null +++ b/src/nl/blog/2024/12/card-met-inverted-border-radius.md @@ -0,0 +1,221 @@ +--- +title: Een card met een ‘inverted border radius’ +date: 2024-12-31 +author: Imani Dap +summary: De inverted border radius is een leuk effect wat je toe kan voegen aan diverse web componenten. In deze blogpost lopen we stap voor stap door een mogelijke implementatie gebaseerd op HTML & CSS. +categories: + - Adventskalender +key: advent-2024-maniflames +--- +Afgelopen maand heb ik mogen werken aan een website met een minimalistisch maar experimenteel ontwerp. De grafisch ontwerpers, die meer gefocust waren op print dan op digitaal kwamen met idee voor een card met een kleine edge case die ik zelf nog niet eerder was tegen gekomen. De kaart ziet er ongeveer zo uit: + +![Een website card bestaande uit een groot rechthoekig vlak met ronde hoeken en een overlapende titel verspreid over drie regels. Elke regel van de titel lijkt uit de kaart gesneden met 'bolle' en 'holle' ronde hoeken.](/_img/blog/2024/12/inverted-border-radius/card-final.png) + +Het is een klein detail maar er zijn een aantal randen die niet zomaar gestyled kunnen worden zoals in het design. Wat ook niet helpt is dat de tekst in een card dynamisch is, hierdoor is het niet mogelijk om een SVG achter de tekst te plaatsten. + +![Een website card bestaande uit een groot rechthoekig vlak met ronde hoeken en een overlapende titel verspreid over drie regels. Elke regel van de titel lijkt uit de kaart gesneden met 'bolle' en 'holle' ronde hoeken. Alle holle hoeken zijn omcirkeld.](/_img/blog/2024/12/inverted-border-radius/card-highlighted-inverted-borders.jpg) + +Juist omdat de rest van de website zo minimaal was in het design, heb ik ervoor gekozen om op zijn minst te proberen dit visuele probleem op te lossen. + +## De ‘inverted border radius’ +Het viel me al snel op dat ik eigenlijk het omgekeerde van de css-property `border-radius` wou hebben en na wat googlen werd het duidelijk dat de meesten deze vorm een ‘inverted border radius’ noemen. + +De benaming is niet zo gek. Als je inzoomt op een hoekje met een border radius en een hoekje met een inverted border radius zie je dat de boogjes van die hoeken precies de een tegengestelde kant op. + +![Er worden twee vierkanten met verschillende afwerkingen van de rechter bovenhoek getoond. Het vierkant aan de linker kant is afgewerkt met een border-radius en heeft daardoor een bolle hoek. Het vierkant aan de rechter kant is afgewerkt met een inverted border-radius en heeft daardoor een holle hoek.](/_img/blog/2024/12/inverted-border-radius/normal-vs-inverted.jpg) + +Je kunt helaas geen negatieve waarde instellen voor de `border-radius` property. Gelukkig is er toch nog een truc om het design tot leven te laten komen. + +## Het bouwen van de basis +De basis van de card bestaat uit drie belangrijke onderdelen. Allereerst een pagina met een solide achtergrond kleur. Vervolgens een simpel vlak met een andere achtergrond kleur. En tot slot een overlappende titel waarvan elk woord op een unieke regel staat. Elke regel van de titel krijgt een achtergrondkleur die overeenkomt met de achtergrondkleur van de pagina. + +Er zijn meerdere manieren waarop je dit zou kunnen implementeren maar ik heb code gebruikt die er ongeveer zo uit ziet: + +`index.html` +```html +
+
+

+
Enjoy
+
the
+
holidays
+

+
+``` + +`main.css` +```css +@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap'); + +:root { + --color-background: #B7B8F8; + --color-primary: #1A247B; + --color-highlight: #EF8170; + --color-text: #FFFFFF; +} + +body { + min-height: 100vh; + display: grid; + justify-content: center; + align-content: center; + background: var(--color-background); + font-family: "Syncopate", serif; + font-weight: 700; + font-style: normal; + font-size: 1.8em; + text-transform: uppercase; +} + +.c-card { + position: relative; +} + +.c-card .c-card__media { + width: 356px; + height: 396px; + background: var(--color-primary); + border-radius: 8px; +} + +.c-card .c-card__title { + position: absolute; + bottom: 0px; + margin: 0; + color: var(--color-text); +} + +.c-card .c-card__title > div { + position: relative; + width: fit-content; + padding-top: 0.2em; + padding-right: 0.2em; + background: var(--color-background); + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; +} +``` +![Een website card bestaande uit een groot rechthoekig vlak met ronde hoeken en een overlapende titel verspreid over drie regels. Elke regel van de titel lijkt uit de kaart gesneden met 'bolle' hoeken.](/_img/blog/2024/12/inverted-border-radius/card-without-inverted-border-radius.png) + +Het resultaat is het gewenste resultaat maar dan zonder de ‘uitdagende hoekjes’. + +## Het toevoegen van de eerste inverted border radius + +Nu de basis van de card staat kunnen we de inverted border radius aan een aantal hoekjes toevoegen. Het is het makkelijkst om er eerst het uiterst linkse hoekje toe te voegen en daarna uit te breiden. + +![Een website card bestaande uit een groot rechthoekig vlak met ronde hoeken en een overlapende titel verspreid over drie regels. Elke regel van de titel lijkt uit de kaart gesneden met 'bolle' en 'holle' ronde hoeken. De eerste holle hoek is omcirkeld.](/_img/blog/2024/12/inverted-border-radius/card-highlighted-first-border-radius.jpg) + +Het hoekje kan gemaakt worden in vier stappen. + +### 1. Geen border radius + +Zorg ervoor dat het hoekje waarmee je gaat werken geen border radius heeft. In dit geval gaat het om de linker bovenhoek van de eerste regel die in de titel zit. Omdat de linker bovenhoek geen border radius heeft hoeven we nog niets te doen. + +### 2. Maak een pseudo element + +Om de vorm van een inverted border te maken op de gewenste plek hebben we een pseudo element nodig. Dit pseudo element maakt niet de uiteindelijke vorm maar de vorm waarmee we die vorm kunnen uitsnijden. Het is nu even handig om hem nog te kunnen zien, daarom geven we het een leuk kleurtje. + +`index.html` +```html +

+
Enjoy
+
the
+
holidays
+

+``` + +`main.css` +```css +.c-card .c-card__title .--inverted-border-radius.--top-left::before { + top: 0; + transform: translateY(-100%); + border-bottom-left-radius: 8px; + background: var(--color-highlight); +} +``` + +![Een close up van de card waarbij een rood psuedo element met een ronde hoek zichbaar is op plek waar de eerste holle hoek uit eindelijk geplaatst moet worden. Er is een gat tussen de rand van de card en het pseudo element.](/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element.png) + +### 3. Geef het psuedo element een shadow + +De daadwerkelijke vorm van de inverted border kunnen we naar voren brengen door een shadow toe te voegen aan het pseudo element. De shadow heeft dus dezelfde kleur nodig Het pseudo element zelf is dus een soort masker omdat een shadow altijd onder een element wordt geplaatst. + +`main.css` +```css +.c-card .c-card__title .--inverted-border-radius.--top-left::before { + top: 0; + transform: translateY(-100%); + border-bottom-left-radius: 8px; + background: var(--color-highlight); + /* only the property below is new */ + box-shadow: -3px 2px 0 0 var(--color-background); +} +``` + +![Een close up van de card waarbij een rood psuedo element met een ronde hoek zichbaar is op plek waar de eerste holle hoek uit eindelijk geplaatst moet worden. Het gat tussen de rand van de card en het psuedo element is nu opgevuld met de kleur van de shadow.](/_img/blog/2024/12/inverted-border-radius/card-closeup-pseudo-element-and-shadow.png) + +### 4. Verberg het pseudo element + +Nu je de juiste vorm hebt gemaakt kun je het psuedo element ‘verbergen’. De makkelijkste manier om dit te doen is door de achtergrond kleur te veranderen in `transparent`. + +`main.css` +```css +.c-card .c-card__title .--inverted-border-radius.--top-left::before { + top: 0; + transform: translateY(-100%); + border-bottom-left-radius: 8px; + /* only the value property below has been changed */ + background: transparent; + box-shadow: -3px 2px 0 0 var(--color-background); +} +``` + +![Een close up van de card waarbij een holle hoek zichtbaar is.](/_img/blog/2024/12/inverted-border-radius/card-closeup-first-inverted-border-radius.png) + +## De laatste hoekjes plaatsen + +In dit ontwerp zijn er drie unieke hoeken die voorkomen. De linker bovenhoek die we net hebben gemaakt, de rechterbovenhoek te zien in de tweede regel en de rechter onderhoek te zien in de tweede en onderste regel. De code voor deze hoeken is voor een groot gedeelte hetzelfde. Alleen de niet afgeronde hoek en de richting van de schaduw zijn anders. + +`index.html` +```html +
+
+

+
Enjoy
+
the
+
holidays
+

+
+``` + +`main.css` +```css +.c-card .c-card__title .--inverted-border-radius.--top-right { + border-top-right-radius: 0; +} + +.c-card .c-card__title .--inverted-border-radius.--top-right::before { + top: 0; + right: 0; + transform: translate(100%); + background: transparent; + border-top-left-radius: 8px; + box-shadow: -3px -2px 0 0 var(--color-background); +} + +.c-card .c-card__title .--inverted-border-radius.--bottom-right { + border-bottom-right-radius: 0; +} + +.c-card .c-card__title .--inverted-border-radius.--bottom-right::after { + bottom: 0; + right: 0; + transform: translate(100%); + background: transparent; + border-bottom-left-radius: 8px; + box-shadow: -3px 2px 0 0 var(--color-background); +} +``` + +Geniet van het resultaat! +{% codepen "MYgpmye" "Inverted border radius" %} \ No newline at end of file diff --git a/src/nl/leden/imani-dap.md b/src/nl/leden/imani-dap.md new file mode 100644 index 00000000..4ae3b621 --- /dev/null +++ b/src/nl/leden/imani-dap.md @@ -0,0 +1,28 @@ +--- +draft: false + # Your name +title: Imani Dap + # Make the key a unique slug (for example, your first and last name). This links the Dutch version to the English version of this page. +key: imani-dap +date: 2024-12-22 + # If you add an image, link it to the correct location here: +graphic: + src: /assets/images/member-avatars/imani-dap.jpeg + alt: Een persoon met een afro en een bril lachend naar de camera +# Your job title +jobtitle: Software Developer +# Eventueel: jouw huidige werk- of opdrachtgever +employer: Bitfactory +# Are you a freelancer? Fill this in or remove it +freelancer: + desc: Op dit moment pak ik voornamelijk klussen op voor een vaste set aan partners onder de naam 'Dreamy Elecrton'. + availability: false +# Are you open to employment? Fill this in or remove it +# Adjust these specialties or add your own! +specialties: + - vue + - laravel + - shopify +--- + +Sinds 2017 bouw ik professionele websites, webapplicaties en creatieve software. De fronteers Slack heeft me een hoop geleerd tijdens mijn opleiding en ik ben daarom ook graag lid ondanks dat ik niet per se strikt een front-ender ben. Het afgelopen jaar hebt ik voltijd kunnen genieten van het freelancen. Vanaf 16 jan 2025 blijf ik het part-time doen voor een set vaste partners naast een baan als software developer bij Bitfactory. \ No newline at end of file