1.
jhey ๐จ๐ปโจ
@jh3yy
CSS Tip!
Wanna make that ring text effect?
You can do it with trig functions
.ring {
--a: calc(360 / varโฆ twitter.com/i/web/status/1โฆ
Wanna make that ring text effect?
You can do it with trig functions
.ring {
--a: calc(360 / varโฆ twitter.com/i/web/status/1โฆ
2.
jhey ๐จ๐ปโจ
@jh3yy
CSS Tip!
You can animate individual transform properties
They're used in this 3D cube loader
keyframes groโฆ twitter.com/i/web/status/1โฆ
You can animate individual transform properties
They're used in this 3D cube loader
keyframes groโฆ twitter.com/i/web/status/1โฆ
3.
4.
5.
6.
7.
jhey ๐จ๐ปโจ
@jh3yy
You can also create glitchy text reveals with CSS
Quite a neat effect for revealing text ๐ช
โฆ twitter.com/i/web/status/1โฆ
Quite a neat effect for revealing text ๐ช
โฆ twitter.com/i/web/status/1โฆ
jhey ๐จ๐ปโจ
@jh3yy
Speedy CSS Tip!
Create this neat card hover effect with a custom property switch
Learn how to combine customโฆ twitter.com/i/web/status/1โฆ
Create this neat card hover effect with a custom property switch
Learn how to combine customโฆ twitter.com/i/web/status/1โฆ
jhey ๐จ๐ปโจ
@jh3yy
Lil CSS Tip
Create that classic duotone effect with CSS
.card {
background:
linear-gradient(var(--redโฆ twitter.com/i/web/status/1โฆ
Create that classic duotone effect with CSS
.card {
background:
linear-gradient(var(--redโฆ twitter.com/i/web/status/1โฆ
CSS Tip!
You could use :has() combined with sibling combinators and other things to build a working 3D CSS Conneโฆ twitter.com/i/web/status/1โฆ
You could use :has() combined with sibling combinators and other things to build a working 3D CSS Conneโฆ twitter.com/i/web/status/1โฆ
Jhey ๐จ๐ปโจ
@jh3yy
3D CSS Responsive Stunt Plane! ๏ธ
It does loops and rolls!
Responds to mouse movement
โฆ twitter.com/i/web/status/1โฆ
It does loops and rolls!
Responds to mouse movement
โฆ twitter.com/i/web/status/1โฆ
8.
9.
10.
11.
Jhey ๐จ๐ปโจ
@jh3yy
Future CSS/JavaScript tip!
Have you heard of the "Shared Element Transitions" API?
This card shuffling demo rโฆ twitter.com/i/web/status/1โฆ
Have you heard of the "Shared Element Transitions" API?
This card shuffling demo rโฆ twitter.com/i/web/status/1โฆ
3D CSS House from "Up"
Balloons use pseudo 3D by counter-rotating against the house's rotation
Custom propeโฆ twitter.com/i/web/status/1โฆ
Balloons use pseudo 3D by counter-rotating against the house's rotation
Custom propeโฆ twitter.com/i/web/status/1โฆ
Jhey ๐จ๐ปโจ
@jh3yy
@KhaledOghli @hankchizljaw More than welcome dude!
Jhey ๐จ๐ปโจ
@jh3yy
@MarisaBrantley @denvercoder I'll leave this here
Github.com/jh3y/vincent-vโฆ
Github.com/jh3y/vincent-vโฆ
...but wait! There's more!
1.
fakhright
@fakhright
astaghfirullah peng.krim guaaaaaaaa..............a *salto sambil solat*
