🤯بازی دوز این بار فقط با Html Css بدون هیچ خط کد Javascript.
حالا برید ببینید چجوری نحوه تشخیص برنده رو بدون Javascript نوشته 🙂.
#CSS #HTML
https://twitter.com/jh3yy/status/1290728468880199680
🔥لینک کدپن
@frontendtwitter
حالا برید ببینید چجوری نحوه تشخیص برنده رو بدون Javascript نوشته 🙂.
#CSS #HTML
https://twitter.com/jh3yy/status/1290728468880199680
🔥لینک کدپن
@frontendtwitter
Twitter
Jhey 🐻🛠️✨
Fancy a game of Tic-Tac-Toe? 😁🕹️ How about this CSS powered version? 😎 HTML, SVG, && some CSS for this 👍 No JavaScript required! ✋😮 💻codepen.io/jh3y/pen/BVaGKP via @CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
این نمونه همراه با GSAP نوشته شده و خونه ای هم که ساخته شده با HTML CSS هست .
🔥 لینک کدپن
پ.ن : روی گوشی هم حتما تست کنید
#LiveLikeAli #Animation #CSS
https://twitter.com/HosseinH3n/status/1291796876644290560?s=20
@frontendtwitter
🔥 لینک کدپن
پ.ن : روی گوشی هم حتما تست کنید
#LiveLikeAli #Animation #CSS
https://twitter.com/HosseinH3n/status/1291796876644290560?s=20
@frontendtwitter
⚡️ برای جلوگیری از نوشتن کد های تکراری در CSS میتونید از is: استفاده کنید
#css #style
https://twitter.com/addyosmani/status/1279344330046443524?s=20
@frontendtwitter
#css #style
https://twitter.com/addyosmani/status/1279344330046443524?s=20
@frontendtwitter
Twitter
Addy Osmani
The CSS :is() pseudo-class will be useful for writing repetitive selectors in a more compact form: bit.ly/is-wh ~ @simevidas covers it coming to browsers.
⚡️ اگر میخواهید بدونید یک media query در مرورگری ساپورت میشه یا نه میتونید از این ترفند استفاده کنید
#css #style
https://twitter.com/mathias/status/1278208408857051136?s=20
@frontendtwitter
#css #style
https://twitter.com/mathias/status/1278208408857051136?s=20
@frontendtwitter
Twitter
Mathias Bynens
To programmatically detect whether the current browser supports a CSS declaration, `CSS.supports(property, value)` works well. But how can you check if the browser supports a given media query, regardless of whether the query currently matches? Elegant solution…
⚡️ با background-repeat: round مشکل بریده شدن بکگراند رو ندارید
#css #style
https://twitter.com/addyosmani/status/1275322697933881344?s=20
@frontendtwitter
#css #style
https://twitter.com/addyosmani/status/1275322697933881344?s=20
@frontendtwitter
Twitter
Addy Osmani
TIL CSS "background-repeat: round" https://t.co/sS9H9HmqQ6 ~ repeats background images without clipping ✂️ https://t.co/R4rzDJ36R9
⚡️ اگر میخواهید بدونید چه زمانی باید از Grid یا FlexBox استفاده کنید پیشنهاد میکنم مقاله زیر رو مطالعه کنید
🔥 لینک مقاله
#css #grid #flexbox
https://twitter.com/addyosmani/status/1272423597550657537?s=20
@frontendtwitter
🔥 لینک مقاله
#css #grid #flexbox
https://twitter.com/addyosmani/status/1272423597550657537?s=20
@frontendtwitter
⚡️ نکته مهمی که باید بهش توجه بشه اینه که اگر میخواهید اِلمانی رو مخفی کنید، اگر از display: none در CSS استفاده کنید، در واقع فقط اون رو پنهان کردید ولی جلوی رندر شدن اون رو نگرفتید
#css #style
https://twitter.com/dougsillars/status/1261888005364756480?s=20
@frontendtwitter
#css #style
https://twitter.com/dougsillars/status/1261888005364756480?s=20
@frontendtwitter
Twitter
Doug Sillars 🇬🇧
Your periodic reminder that using "display:none" in your CSS does not also mean "download:none"
⚡️ اگر در پروژه تون از tailwind استفاده میکنید یه ابزاری ساخته شده که میتونید devtools بهتری داشته باشید نسبت به devtools های دیگه، یکی از نکاتش اینه که اگر تغییری با این ابزار انجام دادید مستقیما همون تغییرات توی سورس کد شما اعمال میشه.
#css #tool #tailwind
https://twitter.com/i/status/1325850560059199488
@frontendtwitter
#css #tool #tailwind
https://twitter.com/i/status/1325850560059199488
@frontendtwitter
Twitter
Guillermo Rauch
Figma for Tailwind, but built on the actual browser rendering engine: https://t.co/Ms1VCgqOXK – fascinating! https://t.co/ojl4tsSaDp
⚡️ یه وب سایت خیلی باحال که کلی CSS پترن جمع کرده و در اختیار شما گذاشته، همچنین میتوانید خودتان پترن های جدید و جالبی که دارید، به این وب سایت اضافه کنید.
#css #tool #tailwind
https://twitter.com/i/status/1324750993784033283
@frontendtwitter
#css #tool #tailwind
https://twitter.com/i/status/1324750993784033283
@frontendtwitter
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ یک کار فوق العاده زیبا از @abxlfazl عزیز. 😍کاری که فقط با CSS نوشته شده و توی سبک خودش میشه گفت جزو بهتریناست .
پ.ن: اگر فکر میکنید تسلط بالایی روی CSS دارین، میتونین با انجام این سبک کارا خودتونو محک بزنین.
🔥 لینک کدپن
#CSS #Codepen
https://twitter.com/abxlfazl1/status/1325864305816985600
@frontendtwitter
پ.ن: اگر فکر میکنید تسلط بالایی روی CSS دارین، میتونین با انجام این سبک کارا خودتونو محک بزنین.
🔥 لینک کدپن
#CSS #Codepen
https://twitter.com/abxlfazl1/status/1325864305816985600
@frontendtwitter
⚡️ یه چیز جالب وجود داره و اینه که میتونید از ایموجی ها هم به عنوان سلکتور CSS استفاده کنید
#css #style
https://twitter.com/addyosmani/status/1246724258866139136?s=20
@frontendtwitter
#css #style
https://twitter.com/addyosmani/status/1246724258866139136?s=20
@frontendtwitter
Twitter
Addy Osmani
You can use emoji as CSS selectors! (h/t @notwaldorf)
⚡️ ویدیوی زیبا و مختصر درباره پرسپکتیو ها در css
#css #style
https://twitter.com/i/status/1326916915479142401
@frontendtwitter
#css #style
https://twitter.com/i/status/1326916915479142401
@frontendtwitter
Twitter
CodyHouse
💡 How to create a 3D space in CSS. #codyhousenugget https://t.co/jW3ViQ8Kza
⚡️ به راحتی با چند کلیک، میتوانید از پیشنهاد های کروم برای رنگ و کنتراست به این شیوه بهره مند بشوید.
#chrome #style #css
https://twitter.com/i/status/1332232692377784321
@frontendtwitter
#chrome #style #css
https://twitter.com/i/status/1332232692377784321
@frontendtwitter
X (formerly Twitter)
Addy Osmani (@addyosmani) on X
In a few clicks, @ChromeDevTools can now suggest & apply more accessible colors for low color contrast text. Love using this.
⚡️ اورفلویی که حتی اسکرول خود جاواسکریپت را غیرفعال میکند.
#css #tip
https://twitter.com/argyleink/status/1333832300132401152
@frontendtwitter
#css #tip
https://twitter.com/argyleink/status/1333832300132401152
@frontendtwitter
X (formerly Twitter)
Adam Argyle (@argyleink) on X
Coming soon to a Chromium near you:
`overflow: clip` 🎉
hide overflow && prevent programmatic scroll
Spec https://t.co/YvBN5xLvZ6
`overflow: clip` 🎉
hide overflow && prevent programmatic scroll
Spec https://t.co/YvBN5xLvZ6
⚡️ خیلی ها تکست دکوریشن را غیر فعال میکنند و یا استفاده نمی کنند، در حالی که میتوانیم از این اپشن های خیلی خفن آن استفاده کنیم!
#css #tip
https://twitter.com/i/status/1335947169971511296
@frontendtwitter
#css #tip
https://twitter.com/i/status/1335947169971511296
@frontendtwitter
Twitter
StackBlitz
#CSS tip: `text-decoration` doesn't have to mean a solid line: You can make it dotted, dashed, double, or even wavy! And even change its color & thickness too! (Useful e.g. for making your texts pop visually without making them look like links) https://t.co/43VHkba94r
⚡️ با استفاده از شبهکلاس
مثلا تاکید کردن رو فیلدی که کاربر پر میکنه، مرحلهای که در اون قرار داره یا هر استفادهی دیگهای که منجر به تجربهی بهتر کاربر بشه!
#css #tip
https://twitter.com/stackblitz/status/1347205679170412552
@frontendtwitter
focus-within
: میشه برای زمانی که خود اِلِمان یا نوادگانش در وضعیت focus قرار گرفته، استایل جداگانهای تعریف کرد.مثلا تاکید کردن رو فیلدی که کاربر پر میکنه، مرحلهای که در اون قرار داره یا هر استفادهی دیگهای که منجر به تجربهی بهتر کاربر بشه!
#css #tip
https://twitter.com/stackblitz/status/1347205679170412552
@frontendtwitter
Twitter
StackBlitz
#CSS tip (10): Use `:focus-within` to put more visual emphasis on the part of a form that has a currently focused element. 💻 Play with the code: https://t.co/Y2bBGSdfbJ https://t.co/gmUDeiSAQy
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ تایملپس فوقالعاده و باحال کشیدن تصویر ایلان ماسک با HTML+CSS 😮
🔥 لینک کدپن
#html #css #codepen
https://twitter.com/asyrafhussin4/status/1351740905821069312
@frontendtwitter
🔥 لینک کدپن
#html #css #codepen
https://twitter.com/asyrafhussin4/status/1351740905821069312
@frontendtwitter
⚡️ در نسخه جدید کروم ساپورت سلکتور
#css #tip #feature
https://twitter.com/stefanjudis/status/1354547331232894978
@frontendtwitter
not
: اضافه شده و میتونید با اون المنت های که فرزند برخی المنت های دیگر نیستند را تشخیص دهید و استایل اعمال کنید.#css #tip #feature
https://twitter.com/stefanjudis/status/1354547331232894978
@frontendtwitter
Twitter
Stefan Judis
I just updated Chrome and it now supports complex selectors in CSS `:not()` pseudo-classes. 😲 That means stuff like this is now possible. 👇 #devsheets Works in Chrome 88, Safari and Firefox. 🎉 ✍️ Article and live example: https://t.co/BoOCZPVMXX
⚡️ با اینلاین svg ها میتونید نشانگر موس رو داخل css کاستوم کنید و استایل های جالبی دهید!
#css #tip
https://twitter.com/i/status/1354300680807329793
@frontendtwitter
#css #tip
https://twitter.com/i/status/1354300680807329793
@frontendtwitter
Twitter
Minko Gechev
You can set your cursor to an emoji using an inline SVG in CSS #uselessfuntips #unicorncss