Π ΡΡΠΎ, ΡΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ? π΅βπ« #css #ui
ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ cheat sheet Π΄Π»Ρ CSS
ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ cheat sheet Π΄Π»Ρ CSS
π2
CSS-TRICKS - Ρ
ΠΎΡΠΎΡΠΈΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ²Π½ΡΠΉ Π±Π»ΠΎΠ³ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΠΎΡΠΎΠΉ ΠΎΡΠ΅Π½Ρ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ Π½Π° #css
CSS-Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΈ Π±Π°ΠΊΠ³ΡΠ°ΡΠ½Π΄ΠΎΠ²
π https://stripesgenerator.com
π https://cssgradient.io
π http://www.patternify.com
π https://accordionslider.com
ΠΠ²Π° Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° css-layout'ΠΎΠ²
π https://grid.layoutit.com
π https://cssgrid-generator.netlify.app
https://keyframes.app/ - Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ΅ΠΉΡΡΠ΅ΠΉΠΌΠΎΠ² Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π»ΡΠ±ΠΈΠ» ΡΡΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡ Π² CSS Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠΎΠ²)
#css
ΠΠ²Π° Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° css-layout'ΠΎΠ²
https://keyframes.app/ - Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ΅ΠΉΡΡΠ΅ΠΉΠΌΠΎΠ² Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π»ΡΠ±ΠΈΠ» ΡΡΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡ Π² CSS Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠΎΠ²)
#css
Please open Telegram to view this post
VIEW IN TELEGRAM
β€1
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Π§ΠΈΡΡΠΎ CSS π
.col:has([row=p-1]:checked) +#css #front
...
.col:has([row=p-1]:checked) ~ .result {
--win: 1; --winner: var(--p);
}
This media is not supported in your browser
VIEW IN TELEGRAM
CodePen (Π²Π°ΡΠΈΠ°Π½Ρ 1)
CodePen (Π²Π°ΡΠΈΠ°Π½Ρ 2)
CodePen (Π²Π°ΡΠΈΠ°Π½Ρ 3)
CodePen (Π²Π°ΡΠΈΠ°Π½Ρ 2)
CodePen (Π²Π°ΡΠΈΠ°Π½Ρ 3)
.node {
animation-delay: calc(
sin((var(--index) / var(--total)) * 45deg)
* var(--speed) * -1s
);
}
#css #front