Wes Bos @wesbos
? Did you know CSS has a `turn` unit? It’s often easier to turn something `rotate(0.75turn)` instead of doing the math to `rotate(270deg)`
{ CSS snippets }
adam kuhn @cobra_winfrey
for this week's #CodePenChallenge I whipped together a tool to better visualize CSS border-radius properties; some pretty interesting shapes can be achieved with this simple property https://t.co/RkzIQNPVWg https://t.co/t885l5KMAP
Plum-best @Mcbest9
#webdev Learn something new everyday ?? No more messy RegEx to extract URL query/search parameters (interesting) #javascript #CSS https://t.co/5k4C5OGIJ1
Ryosuke @whoisryosuke
? Need to put your sidebar under your content on mobile? Use #CSS #Flexbox and #MediaQueries to reorder the elements on smaller viewports: https://t.co/SKdeseL2JB #HTML #CodeSnippets https://t.co/0vXjAfBEyW
CSS-Tricks @Real_CSS_Tricks
Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference https://t.co/wAo3hAFSlX https://t.co/3Oc5d68Lem
Keith Cirkel @Keithamus
There you have it folks. If you want your site to work with macos Mojave's Dark Mode, there's a css media query for it: prefers-dark-interface. https://t.co/ZwSM8V2qZM hat-tip @jonrohan https://t.co/EvtgkV4JsK
Wes Bos ? @wesbos
? All CSS background properties can take multiple values - helpful for layering colours, gradients and textures https://t.co/kfiTpekvag
Smashing Magazine @smashingmag
Cropping away negative impacts of line height. https://t.co/fufJSztGlH https://t.co/84wLlvbzaw
math2001 @_math2001
#tip the 'turn' unit in #css https://t.co/Q4kWUM99cr
Wes Bos ? @wesbos
Two things I’ve been doing lately: 1. using aria-attributes in my CSS to dictate different UI states. (aria-busy for loading, aria-expanded for open/closed navs) 2. Disabling an entire <form> during loading states by wrapping in a fieldset. Using CSS to add loading animation https://t.co/rW1uRNK8eG
Large Heydon Collider @heydonworks
Using `clip-path` for an arrow shape. So much better than a background image. #CSS https://t.co/5sDum3WFUB
Jason Miller ?⚛ @_developit
#hottip: Make your layout fast & static by default. Turn on content-based sizing on a per-element basis. https://t.co/HD6Re24Ijq
mathieu rothenberg ?? @mattrothenberg
.@tailwindcss makes it super easy to defer color palette generation to a library like Chroma JS – the sky is the limit ? https://t.co/iXrvOYCypR
Achraf Kassioui @achrafkassioui
CSS tip: the <main> element isn't recognized as a default block level element in Internet Explorer. Set it to display: block in CSS so IE can display it correctly.
Achraf Kassioui @achrafkassioui
CSS gem learned today: box-decoration-break. It tells how some visual effects are applied when an element is fragmented, for example after a line break. https://t.co/nuuv7r89aj See https://t.co/DdkINE5p1W
Maxim Vanhove @MrMaximVanhove
A CSS trick I use a lot is the border shorthand without the color. This will result in a border with the same color as the text color. https://t.co/aBUfTgvFIE
Wes Bos ? @wesbos
? CSS Variables are perfect for overwriting parts of a definition that can’t be broken up like text-shadows, transforms or gradients https://t.co/6vKDLNgg1T
Matt Smith @AllThingsSmitty
I snuck this little #CSS gem into a project stylesheet to help the team remember #accessibility. ? #WebDev https://t.co/48kMmTaPoW
Wes Bos ? @wesbos
Another neat thing you can use CSS Grid for is managing full bleed and contained layouts. Very similar to max-width; margin: 0 auto; https://t.co/gcuEtBHTEi
Wes Bos ? @wesbos
? You can set and use variables inside a CSS declaration. Handy for when you need the same value more than once! https://t.co/tjLV3h7Z8I
