Create a CSS only lightbox using :target
A look at how we can create a fun lightbox effect without the use of JavaScript! Instead of relying on JS, this uses a fun use of CSS :target pseudo class.
There are some issues with this, specially if you have a lot of items, which I address near the end of the video, but this is just one use case, there are a lot of really fun things you could do with :target, and hopefully this is enough to get you thinking about them!
CodePen: https://codepen.io/kevinpowell/pen/LgMLao
---
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Create a CSS only lightbox using :target канала Kevin Powell
There are some issues with this, specially if you have a lot of items, which I address near the end of the video, but this is just one use case, there are a lot of really fun things you could do with :target, and hopefully this is enough to get you thinking about them!
CodePen: https://codepen.io/kevinpowell/pen/LgMLao
---
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Create a CSS only lightbox using :target канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
How to Create a Website - Complete workflow | Part 11: Making it responsive con'tEnd of the year upate and what's coming to my channel to start the new yearHow to Create a Website - Complete workflow | Part 04: Setting up the hero and headerDesigning a portfolio website with Adobe XD - The desktop layoutDynamic numbering with CSS countersBuild a website with Bootstrap 4 - Part 7: Upcoming Shows and Footer - plus an announcement!Creating a Mars Weather App - HTML & CSS part 3Very small CSS tweaks for better formsUnder-used CSS features 1: overscroll-behavior: containMastering :has() to Expand Your CSS SkillsFix your wonky headings with text-wrap: balance5 useful resources for front-end devs - part 25 useful resources for front-end devsFlex: 1 probably doesn't work the way you think it doesWhy I only use vanilla HTML, CSS, and JS on YouTubeFix ugly text wrapping with this simple CSS trickCSS’s :target pseudo-class is surprisingly powerfulBuild a responsive website with HTML & CSS | Part eight: Numbered listCSS border effects without using bordersDynamically number elements with a few lines of CSSnth-child() just got an upgrade