Create a CSS only lightbox!
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! канала 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! канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
3 modern CSS techniques for responsive designSimple Image Lightbox TutorialLazy loading is too easy nowCreate a CSS only Mega Dropdown MenuFlexbox design patterns you can use in your projectssrcset and sizes attributes - [ images on the web | part one ]Give your site a fantastic color scheme fastHow To Create Image Gallery In HTML, CSS and Javascript | Lightbox GalleryMargin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizingFun ways to animate CSS gradientsHow To Create Animated CSS Cards5 ways to vertically center with CSSCSS Card with hover animation and mobile fallbackImprove your CSS by Keepin' it DRYStep up your CSS game using these selectors and combinatorsHow To Create Image Gallery Using HTML, CSS and Javascript | Lightbox GalleryIntroduction to the Intersection Observer JavaScript APII never thought of using CSS filters like thisA beginners guide to SVG | Part One: The Why, What, and How