The official account for CSS-Tricks.com, a web design community powered by @DigitalOcean.
- Tweets 12,108
- Following 1,777
- Followers 502,328
- Likes 1,840
In a great twist of web compat fate, this exact set of properties now actually works to do multiple-line truncation in a fairly well supported way.
css-tricks.com/almanac/prope…
49
1,369
5,509
Well that's impressive and dang useful. remove.bg/ Cool URL too.
(Remove Image Background 100% automatically – in 5 seconds – without a single click)
81
1,629
5,429
Is this JavaScript watching the size and inserting burgers?
codepen.io/thewizardjs/pen/W…
NOPE! It's CSS's `background-repeat: round;` repeating as it has the space to.
Cool demo, @TheWizardJS
20
844
3,692
The ultimate guide to proper use of animation in UX :: uxdesign.cc/the-ultimate-gui…
(The animations in this article are quite the masterclass in explaining concepts!)
11
836
2,593
* { outline: 1px solid red; } is a nice debugging trick to quickly understanding page structure.
But it's no
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
+ more
dev.to/gajus/my-favorite-css…
16
485
2,036
For all the end-of-year lists coming... before you give up and do:
<p>10. </p>
<p>9. </p>
Remember you can do:
<ol reversed>
<li>Highest number in list</li>
<li>Second highest</li>
<li>etc...
17
465
2,006
startsWith()
endsWith()
includes()
slice()
toUpperCase()
toLowerCase()
charAt()
split()
replace()
repeat()
buff.ly/2L5Ye02
17
556
1,829
free-for.dev/
(A big list of tools that have free tiers.)
5
538
1,772
Interesting take on a date dropdown. uxdesign.cc/rethinking-the-d…
24
336
1,641
Repeating backgrounds can be fairly smart. Check this out. 🎓
css-tricks.com/almanac/prope…
18
706
1,597
Animate CSS Grid: github.com/aholachek/animate…
> This small script makes it easy to make sure your CSS grid transitions gracefully from one state to another.
(Using FLIP!)
10
407
1,511
A radial gradient, background-attachment: local, and scrolling is one of the all-time great CSS tricks. 💚
smashingmagazine.com/2019/01…
9
259
1,435
`shape-outside` is animatable.
codepen.io/undeadinstitute/p…
27
272
1,393
You can be semantic with your label/checkboxes, and still get real weird with the design/iteration. codepen.io/liamj/pen/NegxNB
16
305
1,368
23 Minutes of Work for Better Font Loading.
1) nuke your old @font-face blocks
2) generate new font files with glyphhanger
3) update new @font-face blocks with new font files
4) use font-display
5) use preload
6) use serviceworker
zachleat.com/web/23-minutes/
5
292
1,247
If you've ever needed to code a chat-room like UI, you've probably needed to pin the scroll position of an area to the _bottom_, even as you append new content.
Used to be JavaScript territory mostly, now it's doable with `overflow-anchor` in CSS! blog.eqrion.net/pin-to-botto…
9
260
1,221
Jumping through hoops to get some fancy JavaScript-based smooth scrolling in place?
Reminder you can get Chrome/Firefox entirely natively in CSS with a one-liner:
html {
scroll-behavior: smooth;
}
9
272
1,165
📍me, needing to style thing
|
|
| _ _ _ _ _ _ _ _ _ _ _ _ _ _
|
📍BEM |
_ _ _ _ _ _ _ _ _ _ _ _ _ _|
|
|
|
📍.header-large h1:not(:first-child) time span
25
201
1,095
"Use the palette chooser to create a series of colors that are visually equidistant. This is useful for many data visualizations, like pie charts, grouped bar charts, and maps."
learnui.design/tools/data-co…
7
322
1,122
Ah the great satisfaction of <table>s with $X.XX money in them and:
```
table {
font-variant-numeric: tabular-nums;
}
```
robinrendle.com/notes/the-sm…
11
239
1,124
"MIT licensed illustrations for every project you can imagine and create"
buff.ly/2IUSlS8
7
325
1,122
Some straight CSS trickery by @rpsthecoder!
Turn emojis into solid-color-icons.
```
.icon {
color: transparent;
text-shadow: 0 0 #ec2930;
}
```
6
251
1,090
Oo. This little centering trick is even less code than the flexbox one.
codepen.io/chriscoyier/pen/N…
13
344
1,067
Stunning hover effects with CSS variables :: blog.prototypr.io/stunning-h…
7
303
1,097
Classic trick... need to quickly visually see the rectangles that make up all the elements on a page? Toss:
```
* { outline: 1px solid red; }
```
Into the styles for a look.
25
284
1,095
Reducing the opacity of a box-shadow as the size of it increases...
codepen.io/scottyzen/full/Kb…
3
211
1,064
We don't really get :hover states on mobile. No wonder Material Designs "ripple" has become so big. Then at least you get some tap-success feedback.
uxmovement.com/mobile/the-ho…
8
238
1,041
They say accessibility isn't a checklist, but these office posters offer some excellent Do's & Don'ts!
accessibility.blog.gov.uk/20…
7
538
994
Responsive tables...
When you need to compare data up and down columns, it's probably best to largely leave the table structure alone and allow scrolling.
If each row can be broken apart and still be useful, collapsing them to avoid scrolling is nice.
uglyduck.ca/responsive-table…
9
238
1,038
Need to check what accessibility standard two contrasting colors have? Or if they pass at all?
buff.ly/2BYFufn
9
338
999
> This is demo of a CSS powered 3D environment. Geometry is created with HTML elements and CSS transforms. Textures and lightmaps are composed by layering multiple background-images and colour is applied using CSS blend-modes.
keithclark.co.uk/labs/css-fp…
19
321
993
"MIT licensed illustrations for every project you can imagine and create"
undraw.co/illustrations
5
281
980
Build a Download Button Full of Micro Interactions :: scotch.io/tutorials/build-a-…
12
248
975
“As a UX or UI, designer, how do I know when and where to implement motion to support usability?”
medium.com/ux-in-motion/crea…
2
322
961
You can animate `content`. Probably not *mega* useful but hey it can be fun in non-important situations.
codepen.io/chriscoyier/pen/G…
css-tricks.com/animating-the…
18
222
940
"Scrollama is a modern and lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events."
pudding.cool/process/introdu…
4
220
913
Mr. @kbal11 thinks these are the front-end topics to learn about in 2019:
1. TypeScript
2. React
3. Vue
4. CSS Grid
5. GraphQL
zendev.com/2019/01/15/fronte…
11
299
937
A little horizontal scrolling section is so easy these days!
nitter.app/cassiecodes/status/109…
A little momentum scrolling might not hurt:
css-tricks.com/snippets/css/…
Scroll snapping is nice too:
css-tricks.com/practical-css…
Stretch goal: active nav and jump links ;)
✨ Need to make a horizontal scrolling section? Are you unsure how many items will be in it or what their widths are going to be? No worries! Flexbox to the rescue! 🥰
3
184
906
Pretty clever idea to turn an <input type="checkbox"> into a toggle without any additional elements (box-shadow!)
(⚫️ )
( ⚪️)
codepen.io/rakeizer/pen/QQRB…
12
256
874
We know the only elements in the <head> are meta, link, title, style, script, noscript, and base, but there are LOTS of things those elements can do.
htmlhead.dev/
8
279
863
This is a 💯 DevTools trick. In Sources > Overrides you "select overrides folder" and then "enable local overrides". Then you can make changes to CSS in DevTools and they persist. Great when you need to play with styles but also need to refresh the page.
egghead.io/lessons/chrome-pe…
15
257
854
What meta tags do you need for ideal social media previews? css-tricks.com/essential-met…
There are tester tools:
heymeta.com/
richpreview.com/
This is a nice one for editing/building them:
metatags.io/
2
220
856
Think you need JavaScript to "pin" the scroll position of an area to the bottom? (Like a chat app would do.) It's actually doable with CSS and the `scroll-anchor` property and placing a non-zero-height element to anchor to. (via Ryan Hunt's blog!)
css-tricks.com/almanac/prope…
2
203
837
Mr. @wesbos dropped his brand spanking new, and entirely free, 25-video course on CSS grid:
cssgrid.io/
4
256
823
Open-Source Full-Stack solution for fast PWA development.
bento-starter: bento-starter.netlify.com/
(Looks like an awfully opinionated stack, but popular stuff, like Vue, Firebase, Jest...)
4
213
856
You know how position: relative; creates a new context for absolute positioning within?
So does a CSS transform.
11
255
817
A 2019 update to the Front-End Developer Handbook: frontendmasters.com/books/fr…
8
271
822
A little trick to get consistent viewport height units on mobile devices using CSS custom properties. css-tricks.com/the-trick-to-…
7
243
817
LOTS of courses out there for learning CSS Grid:
→ scrimba.com/g/gR8PTE
→ thecssworkshop.com/
→ learncssgrid.com/
→ codecademy.com/courses/learn…
→ mastercssgrid.com/
7
257
798
/**
* matches:
* <div class="foo">...</div>
* <div class="Foo">...</div>
* <div class="fOo">...</div>
* ...
*/
[class=foo i] {
color: red;
}
The CSS attribute selector has a case-insensitive mode stefanjudis.com/today-i-lear…
14
235
794
> Killed by Google is a Free and Open Source list of dead Google products, services, and devices.
killedbygoogle.com/
149!
17
335
786
Very clear explanation (in a single GIF) of a situation you should definitely use monospace numbers (or `font-variant-numeric: tabular-nums;` if your font supports it). blog.usejournal.com/proporti…
8
198
793
Fascinating. JavaScript Visualizer.
tylermcginnis.com/javascript…
4
189
785
Animated `mask-image` is a thing. codepen.io/tonybanik/pen/aRp…
2
174
770
Sites that run automated tests against your site for...
Mobile friendliness: search.google.com/test/mobil…
Performance/a11y: web.dev/measure
Image optimization: webspeedtest.cloudinary.com/
SEO: app.neilpatel.com/en/seo_ana…
Security: sitecheck.sucuri.net/
SSL: sslshopper.com/ssl-checker.h…
6
232
777
Cool little site with some CSS concepts that do something useful/nice and are quick'n'easy to understand.
atomiks.github.io/30-seconds…
1
256
747
Morphing SVG shapes... the interpolation can be awkward.
Flubber uses "best guess methods" to make them smoother.
github.com/veltman/flubber
217
750
A single centered column that doesn't get too wide.
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
"58 bytes of css to look great nearly everywhere" jrl.ninja/etc/1/
'he ain't wrong.
8
136
763
"A curated collection of useful CSS snippets you can understand in 30 seconds or less."
atomiks.github.io/30-seconds…
6
245
767
Hey if you're going to make a burger menu you might as well DO IT UP.
codepen.io/YusukeNakaya/pen/…
29
146
762
> Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows to change font weight dynamically and to create custom animations, effects or shapes in the Canvas element of HTML5.
leon-kim.com/examples/#all
6
162
746
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
andy-bell.design/wrote/creat…
11
147
733
Helpful for understanding the different between `rem` and `em`
codepen.io/seyedi/pen/oxWOVX
2
288
752
lol
> Ever use one of those fancy color palette generators? The ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches?
refactoringui.com/previews/b…
7
169
737
Very cool advantages to using --custom-properties instead of $preprocessorVariables is that you can change them at media queries.
7
197
722
Building a design system in Web Components does feel pretty smart.
<brand-slider>
<brand-tabs>
<brand-figure>
blog.ionicframework.com/buil…
If nothing else, for the longevity of building "on the platform", as they say.
4
197
730
Firefox new logo: theverge.com/2019/6/11/18661…
Edge new logo: theverge.com/2019/11/2/20944…
@davatron5000: `filter: hue-rotate(180deg); transform: rotate(90deg)` codepen.io/davatron5000/pen/…
10
171
730
Contextual styling with custom properties by @simurai :: simurai.com/blog/2018/04/01/…
Give a section something like `data-theme="dark"` then...
[data-theme="dark"] {
--adjust-all-the-variables...
}
7
201
724
A CSS Grid tutorial that goes beyond the basics and does some really interesting stuff! By @anarafaelaferro
medium.com/deemaze-software/…
min-max, auto-fill, object-fit, auto-flow...
6
193
721
Did you know about these possible values for `background-position`?
css-tricks.com/almanac/prope…
12
273
709
A Designer's Guide to Animating Icons with CSS newmediacampaigns.com/blog/g…
1
209
719
Two front-end developers are sitting at a bar. They have nothing to talk about. Welcome to "The Great Divide." css-tricks.com/the-great-div…
25
248
691
CSS Grid for Designers open.nytimes.com/css-grid-fo…
👏🏽 Well done @johnapao, this is a very powerful overview that should open a lot of eyes to grid!
4
154
692
I've heard Moment.js called "a necessary evil" in some apps (it's large).
Here's a 2KB alternative with the same API for dealing with dates/times.
github.com/xx45/dayjs
(I can't speak to the differences, but surely there are some.)
10
192
688