CSS Before and After pseudo elements explained - part three: as design elements
Exploring how to use ::before and ::after to create some fun design elements without any extra markup.
The before and after pseudo elements are great, since they let us add in content without any extra markup. This makes them perfect for adding in design flourishes, since we can do it without creating empty divs.
In this video, I first I look at using them to make a fun thing that can be used on headlines, and the second one a very fun hover effect that was inspired from this codrops article: https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
Here is the CodePen: https://codepen.io/kevinpowell/pen/ZrMzre/
---
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
Видео CSS Before and After pseudo elements explained - part three: as design elements канала Kevin Powell
The before and after pseudo elements are great, since they let us add in content without any extra markup. This makes them perfect for adding in design flourishes, since we can do it without creating empty divs.
In this video, I first I look at using them to make a fun thing that can be used on headlines, and the second one a very fun hover effect that was inspired from this codrops article: https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
Here is the CodePen: https://codepen.io/kevinpowell/pen/ZrMzre/
---
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
Видео CSS Before and After pseudo elements explained - part three: as design elements канала Kevin Powell
Kevin Powell tutorial html css before pseudo element after pseudo element before and after pseudo element before and after pseudo elements ::before ::after ::before and ::after how pseudo elements work how ::before and ::after work how before and after css work before and after css before and after ::before ::after css
Комментарии отсутствуют
Информация о видео
28 февраля 2018 г. 22:00:03
00:22:07
Другие видео канала