- 8
- 34 752
Astrit
Sweden
Приєднався 15 вер 2015
My name is Astrit, I am a self-taught designer and coder with over a decade of experience, specialising in front-end development, cross-platform human interface design, and design systems.
I do enjoy designing interfaces and convert them to code, thus have been crazy enough to build 700+ icons in Pure CSS which became CSS.GG, a popular open-source icons library with 49k+ stars on Figma, 9k+ stars on GitHub, and 20k+ weekly NPM installs and winner of Figma Award in 2022, also creator of GLYF.APP
I do regularly play around with the most recent CSS features like color-mix, container queries, layers and create content mainly around CSS which you will see on this channel.
I do enjoy designing interfaces and convert them to code, thus have been crazy enough to build 700+ icons in Pure CSS which became CSS.GG, a popular open-source icons library with 49k+ stars on Figma, 9k+ stars on GitHub, and 20k+ weekly NPM installs and winner of Figma Award in 2022, also creator of GLYF.APP
I do regularly play around with the most recent CSS features like color-mix, container queries, layers and create content mainly around CSS which you will see on this channel.
Framework by Figma — Code Connect, Typography and Gradient Variables
#figma just announced Code Connect a very welcomed feature where you can setup your component with the Figma API
A walkthrough and very basic example on how to setup Code Connect with initial commands, how this will fit on Green Design System an more...
Super excited with the Code Connect announcement!
Having common language between developers and designers especially when doing a Design System is very important.
In my workplace we mitigate issues by fetching for example images directly from the Figma API and have them as inline SVG. in turn is more performing, no network request, and always up to date, since we fetch on build process and combined with Contentlayer has proved to be a very good process.
So having specifications in order is very important and now it has never been easier, where we write the stories there is where yo u can document and have the Figma Connect features to show those examples directly in Figma dev mode when inspecting components, basically having proper install paths and more.
For those who do design systems and Figma this will be game changing.
However I was a bit disappointed to see that only on the Organization plan Code Connect is available.
--
#designsystems
A walkthrough and very basic example on how to setup Code Connect with initial commands, how this will fit on Green Design System an more...
Super excited with the Code Connect announcement!
Having common language between developers and designers especially when doing a Design System is very important.
In my workplace we mitigate issues by fetching for example images directly from the Figma API and have them as inline SVG. in turn is more performing, no network request, and always up to date, since we fetch on build process and combined with Contentlayer has proved to be a very good process.
So having specifications in order is very important and now it has never been easier, where we write the stories there is where yo u can document and have the Figma Connect features to show those examples directly in Figma dev mode when inspecting components, basically having proper install paths and more.
For those who do design systems and Figma this will be game changing.
However I was a bit disappointed to see that only on the Organization plan Code Connect is available.
--
#designsystems
Переглядів: 4 331
Відео
Config 2023 - auto layout wrap, developer mode, prototyping, dark mode, tokens
Переглядів 2,8 тис.Рік тому
Config 2023 is bringing some long awaited features: Dev Mode Variables Advanced prototyping Auto layout wrap Font picker File browser redesign Dark Mode & Light Mode tokens basically !!! Figma config 2023 - is definitely the most significant update, being able to wrap components now will make it easier to create designs for different screens and even better export those variables easily. Functi...
Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode
Переглядів 13 тис.3 роки тому
Today I am sharing with you this advanced CSS & HTML tutorial where we are going to go through some of the best techniques to achieve the effect that you see on this landing page like mix-blend-mode, clip-path, position: sticky, css grid and what not. This is a 2hr long tutorial where I explain how I build that demo landing page start to finnish and along the way you can find some very interest...
CSS Animation: translate3d, backdrop-filter and custom tags
Переглядів 6 тис.3 роки тому
Hello everyone, On this tutorial we are going to learn on how to create a smooth animation using CSS transform translate3d prop, why to use cubic-bezier transition timing function and its benefits. How and why to use custom tags. And if you watch the video by the end I also did a bonus tip using backdrop-filter to have some frost/blur style on background. Topics: 1. Why and how to use the trans...
CSS blackhole using backdrop-filter blur
Переглядів 1,6 тис.3 роки тому
Demo: cdpn.io/KKMjZEz Follow: astritmalsija - I have created this CSS Only deep space/blackhole simulation with audio. How this is done is by using multiple tags with different properties and animations and just stacked with CSS Grid place-items center and then one of the layers act like backdrop with backdrop-filter blur. Be aware that this is 100% CSS and it renders quit heavy. Te...
Pure CSS & SVG text cursor
Переглядів 3,2 тис.4 роки тому
A short tutorial on how to create a custom cursor with text using CSS & SVG only. ⚙ codepen.io/astrit/pen/QWbZgpR © css.gg © astrit.co #csstutorial #htmltutorial #svgtutorial #css #cssgg #csscursor #cursor #customcursor #svg
I thought I know css before I watched this video 😅
@@okon1624 you know more than you think, for the fact that you have been looking to learn that is all you need, keep grinding ✌️
@@astrit really grateful for the video, is a big inspiration to me, to know how powerful css ‘is’.
@astrit if you check right now , the behavior is changed for css-mix css-stripe
This is one of the best example and usage of HTLM and CSS I have ever seen in my career with just HTML and CSS we can create anything which need extra libs to create such things. Well done...!!!!🤯
Yay! I've been waiting for someone to make a video on this. Thank you!
Glad you found it 🥳
What if I'm using bootstrap 5. I can change sass variables. Do I still need codeconnect for basic components like buttons?
Depends on your use case and I would say the volume pf people accessing your design system, if not many people would go to dev mode and look for that type of information I don’t think is feasible to do this. But if you want a streamlined process and you want to prepare ahead then yes definitely worth it.
They should've released it for Flutter in the beta. So sad :/
It will probably come soon, since is open source I guess people will contribute to it!
Very good new feature, figmas getting better every year, sadly it only works with the organization plan, nice vid ❤
Glad to know you like em ❤️
@@astritlol i meant to say "it only works with" hahaha 😂
The Code Connect repo: github.com/figma/code-connect
Great...
😎 'PromoSM'
Thank you for this.
🫡✌
Amazing video bro. Thanks for sharing
Glad to know you found it useful ✌
Thank you!
🫡🤩✌️
🤩🔥🔥🔥
Now you can wrap those auto layouts 😂🤩
Great job, your content will help me a lot in further projects!
Glad I could help!
Please make a tutorial for CSS Animation more
Thank you very much for the kind words, trying to create more content in the future
Just amazing, thanks for this video and for your work, i hope you will make a training
Thank you very much for the kind word, hopefully on the future will find some time to do that.
Just found your channel, amazing content man, so much covered in one video. I'm subscribed and hope your channel blows up soon because you deserve it for sure.
Thank you very much, I am super super glad you think like that. 🙏
I like it... 😇😇😇 thank you
Glad that you liked it 🙏
Great tutorial, thanks for video
Thank you for watching 🙏
excellent work man. There's some cool elements on this layout. Keep up the good content sharing!
Thank you, very much appreciated 🙏✌️
Want advance css project
Great video. Want More like that
puna mar Astrit
Gifted guy!
Thank you very much 🙏
Incredibly comprehensive and a gift. Thank you for sharing. I come back to this time and again
I am very glad you do, much appreciated the kind words 🙏
border-radius can take 4 parameters, so you can simply do border-radius: 50% 0 50% 50%; and you don't have to put a square in the background. Pershendetje
Astrit, any advice for how to modify this for mobile? I noticed the &hover effect shows flickering on Safari OS.
I will try to do something have noted it down but not sure since Safari sometimes is just horrible
Thanks@@astrit - any tips on how to re-produce for mobile, as behavior is quite different on mobile! no worries if not, cheers !
Great work, thanks a lot. Keep it up!
Thank you very much
Amazing, I was searching for this only.
Just searched for name found this channel lol 😄
Can you make video about that --base thing, it seems cool, I would also like to see all the things you are doing to impreve responsvnes of webiste, btw this is all amzing, keep up the good work!
Thank you very much for the kind words and I will try to do something like that in the future since CSS variables are not as much used as they should be. 🙏
Astro, Here is for first one, I challenge you : <hr><p><span><b><i><div><span><b><i><style>*{position:absolute;}body{background:#191919;margin:0;padding:0}p{width:114px;left:89px;top:61px; height:114px;border-radius:0 50% 50%;background:#E08027}div{width:114px;left:197px;top:77px;z-index:10;box-shadow:0 0 0 10px #191919;height:114px;border-radius:50% 0 50% 50%;background: #E08027}p span{width:90px;left:12px;top:12px;z-index:2;height:90px;border-radius:50%; background:#191919}div span{width:90px;left:-17px;top:-39px;z-index:2;height:90px;border-radius:50%;background: #191919;}div b{width:12px;left:30px;top:36px;z-index:3;height:11px; border-radius:50%;border:9px solid #E08027}p b{width:12px;left:30px;top:36px;z-index:3;height:11px;border-radius:50%;border:9px solid #E08027;}i{width:40px;left:-10px;top:6px; z-index:3;height:30px;background:#191919;}hr{width:50px;height:50px;border:0;background:#E08027;transform:rotate(45deg);left:175px;top:154px;z-index:0}
I actually went back after the stream and did it again: tppr.me/FgbnG Your solution looks nice also, if you replace span and div with some other smaller tags perhaps you could get less characters 👌 Thanks for stopping by 🙏
@@astrit One more think to improve , var(---) > #234323, I tried to make it with same time as your stream, I finished ~5 min later than you.
@@FlakerimIsmani O wow that is nice, thanks for that 🤙
You should use synthwave '84 theme, with neons :)
haha nice idea actually, just bookmarked one
Great work bro Worth consuming hours on this
That is awesome hopefully you could learn something new 🙏
First live video like a Pro congrats dajko i haven't been able to be there in live support because of my timing schedule but i just watched from the beggining to the end..Keep going 😎💪
That is very kind and thank you for the support much appreciated 🙏
Bravo 👏🏻
Faleminderit shume ✌️
This tutorial is amazing shocked you aint got more subscribers.......keep the tutorials coming
Thank you very much this is all I need 🙏
You're a genius man !!! you're my idol from now on .. Thanks for sharing this 💛
O wow I am flattered, thank you very much for these kind words. Hopefully you have learn a thing or two, stay awesome my friend ✌️
Bravo Astrit!
Shumë faleminderit Ridvan 🙏
Good job man ;)
Thank you very much 🙏
It's really remarkable work... I wish I can do the same.
I am very glad you liked it, Keep on watching and you will learn how to do it for sure just slowly
Does the demo work for you guys using Safari?
Yeah there are some problems on safari try removing the pro-loader or open dev tools and resize to see where the problem is as I haven’t been able to fix it yet
I do think it would be better to split this video up into smaller parts tho, bc it's literally 2 hrs long
It has been asked multiple times actually and I am really thinking to do it but since there are timestamps below it makes it easier to follow. But thank you 🙏
Wow, this looks really nice.. A lot better than what I can do lol
have a sub
I am glad you liked it, check the video and you learn it too haha or check the source is all open. Thanks
Thanks for your hard work! Subscribed!
That is awesome dude, thank you very much I really appreciate sine a lot of work went into this video from development to production 🙏
@@astrit I know. I can relate :-)
Woww ^_^ GREAT JOB! Thanks for sharing with us :D :D
I am glad you liked it 🙏
This is so amazing. Never saw this before. You should have more subscribers.
I am very glad you liked it and even more for the opinion you got so thank you very much 🙏