CSS-Tricks @css Twitter profile

Last Seen Profiles

@Ashew

@its70sFairy

@niningdiet

@z9giur

@ossostwt

@AidenPalmer

@Satrich1

@mymary_official

@kankaeww_

@cj_horvath04

@rickitator

@cameron_arcand

@Varkitogarcia1

@DrBenjii

@iaskumaranurag

@UAPOldMutualUg

@leaksnation_

@_WalidTaha

@PhilMphela

@fleekynu_

@keyowithk

@LuijoRey

@Michell11522069

@vevitolas

@MariandreC

@brattdaboss

@CariocaPadawan

@chickfilaAP

@darljerry

@jugginmysleep

@cheesecreepe

@tvtmwtw

@dailybolotas

@univlem

@TarcianeMouraJM

@SecretariaUn

CSS-Tricks

@css

5 years

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.

52

1K

6K

CSS-Tricks

@css

5 years

Well that's impressive and dang useful. Cool URL too. (Remove Image Background 100% automatically – in 5 seconds – without a single click)

88

2K

6K

CSS-Tricks

@css

5 years

Is this JavaScript watching the size and inserting burgers? NOPE! It's CSS's `background-repeat: round;` repeating as it has the space to. Cool demo, @TheWizardJS

23

922

4K

CSS-Tricks

@css

6 years

The ultimate guide to proper use of animation in UX :: (The animations in this article are quite the masterclass in explaining concepts!)

11

920

3K

CSS-Tricks

@css

5 years

* { 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

18

532

2K

CSS-Tricks

@css

4 years

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...

18

530

2K

CSS-Tricks

@css

6 years

startsWith() endsWith() includes() slice() toUpperCase() toLowerCase() charAt() split() replace() repeat()

10 JavaScript string methods you should know

This post is originally published to my blog. In this post I will summarize 10 javascript string...

dev.to

18

606

2K

CSS-Tricks

@css

5 years

(A big list of tools that have free tiers.)

Free for Developers

Developers and Open Source authors now have a massive amount of services offering free tiers, but it can be hard to find them all to make informed decisions.

free-for.dev

6

605

2K

CSS-Tricks

@css

7 years

Repeating backgrounds can be fairly smart. Check this out. 🎓

19

788

2K

CSS-Tricks

@css

6 years

Interesting take on a date dropdown.

27

370

2K

CSS-Tricks

@css

5 years

Animate CSS Grid: > This small script makes it easy to make sure your CSS grid transitions gracefully from one state to another. (Using FLIP!)

10

441

2K

CSS-Tricks

@css

5 years

A radial gradient, background-attachment: local, and scrolling is one of the all-time great CSS tricks. 💚

10

283

2K

CSS-Tricks

@css

5 years

`shape-outside` is animatable.

30

308

2K

CSS-Tricks

@css

5 years

Useful new site:

10

515

2K

CSS-Tricks

@css

5 years

You can be semantic with your label/checkboxes, and still get real weird with the design/iteration.

17

326

1K

CSS-Tricks

@css

6 years

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

23 Minutes of Work for Better Font Loading—zachleat.com

A post by Zach Leatherman (zachleat)

www.zachleat.com

6

329

1K

CSS-Tricks

@css

5 years

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!

9

291

1K

CSS-Tricks

@css

2 years

html { font-size: 62.5% } 🧡😎

85

114

1K

CSS-Tricks

@css

6 years

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; }

13

296

1K

CSS-Tricks

@css

4 years

Snake in DevTools?!

26

365

1K

CSS-Tricks

@css

6 years

<dialog open> Native dialog box! </dialog>

13

557

1K

CSS-Tricks

@css

5 years

Interesting! `autocomplete="new-password"` (via @mmatuzo )

6

325

1K

CSS-Tricks

@css

5 years

200 Free Animated Icons

3

314

1K

CSS-Tricks

@css

6 years

Yes, this checks out.

6

469

1K

CSS-Tricks

@css

5 years

📍me, needing to style thing | | | _ _ _ _ _ _ _ _ _ _ _ _ _ _ | 📍BEM | _ _ _ _ _ _ _ _ _ _ _ _ _ _| | | | 📍.header-large h1:not(:first-child) time span

30

228

1K

CSS-Tricks

@css

4 years

Ah the great satisfaction of <table>s with $X.XX money in them and: ``` table { font-variant-numeric: tabular-nums; } ```

12

274

1K

CSS-Tricks

@css

6 years

"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."

8

358

1K

CSS-Tricks

@css

6 years

"MIT licensed illustrations for every project you can imagine and create"

9

357

1K

CSS-Tricks

@css

6 years

Some straight CSS trickery by @rpsthecoder ! Turn emojis into solid-color-icons. ``` .icon { color: transparent; text-shadow: 0 0 #ec2930 ; } ```

8

277

1K

CSS-Tricks

@css

7 years

Oo. This little centering trick is even less code than the flexbox one.

18

381

1K

CSS-Tricks

@css

6 years

Design Patterns ::

7

361

1K

CSS-Tricks

@css

6 years

Stunning hover effects with CSS variables ::

7

317

1K

CSS-Tricks

@css

6 years

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.

32

314

1K

CSS-Tricks

@css

5 years

Want your scrollbar on the left?

Lynn (so is she gone or not??)

@chordbug

5 years

☠️ CURSED CSS TIP: ☠️ whatever this bullshit is

107

1K

5K

26

296

1K

CSS-Tricks

@css

5 years

😂😂😂

72

453

1K

CSS-Tricks

@css

5 years

Reducing the opacity of a box-shadow as the size of it increases...

3

227

1K

CSS-Tricks

@css

7 years

They say accessibility isn't a checklist, but these office posters offer some excellent Do's & Don'ts!

7

621

1K

CSS-Tricks

@css

5 years

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.

9

256

1K

CSS-Tricks

@css

5 years

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.

4

261

1K

CSS-Tricks

@css

6 years

Need to check what accessibility standard two contrasting colors have? Or if they pass at all?

11

376

1K

CSS-Tricks

@css

6 years

The Layouts of Tomorrow ::

12

293

1K

CSS-Tricks

@css

5 years

> 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.

19

351

1K

CSS-Tricks

@css

8 years

Wanna see a decent little slider in a handful of lines of code?

16

335

1K

CSS-Tricks

@css

6 years

"MIT licensed illustrations for every project you can imagine and create"

5

313

1K

CSS-Tricks

@css

6 years

Build a Download Button Full of Micro Interactions ::

13

270

1K

CSS-Tricks

@css

6 years

Coolhue ::

3

274

1K

CSS-Tricks

@css

6 years

“As a UX or UI, designer, how do I know when and where to implement motion to support usability?”

2

345

1K

CSS-Tricks

@css

6 years

You can animate `content`. Probably not *mega* useful but hey it can be fun in non-important situations.

20

248

1K

CSS-Tricks

@css

6 years

"Scrollama is a modern and lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events."

4

247

1K

CSS-Tricks

@css

5 years

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

Top 5 Frontend Development Topics To Learn in 2019

Ah, January. A time of optimism, a time for starting afresh. For making new goals and resolutions. And in the web development world, for looking at the landscape and deciding what we need to learn...

zendev.com

11

321

988

CSS-Tricks

@css

5 years

A little horizontal scrolling section is so easy these days! A little momentum scrolling might not hurt: Scroll snapping is nice too: Stretch goal: active nav and jump links ;)

Practical CSS Scroll Snapping | CSS-Tricks

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions

css-tricks.com

Cassie Evans

@cassiecodes

5 years

✨ 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! 🥰

16

92

570

3

202

986

CSS-Tricks

@css

6 years

Pretty clever idea to turn an <input type="checkbox"> into a toggle without any additional elements (box-shadow!) (⚫️ ) ( ⚪️)

Checkbox switch, input element only + CSS, crossbrowser

Checkbox switch using no extra markup, CSS only...

codepen.io

13

287

965

CSS-Tricks

@css

5 years

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.

8

309

947

CSS-Tricks

@css

5 years

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.

Persist Live Style Changes in the Browser with Chrome DevTools Local Overrides

Chrome DevTools makes it incredibly easy to try out new styles in the browser before we decide to commit anything to our project. It doesn't keep those ...

egghead.io

16

288

931

CSS-Tricks

@css

5 years

What meta tags do you need for ideal social media previews? There are tester tools: This is a nice one for editing/building them:

HEY META - Website Meta Tag Check

Check and improve how search engines and social media websites see and display your website.

www.heymeta.com

3

245

922

CSS-Tricks

@css

5 years

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!)

3

222

922

CSS-Tricks

@css

6 years

Huge collection of very tiny JavaScript libraries that do specific things.

6

284

903

CSS-Tricks

@css

6 years

Mr. @wesbos dropped his brand spanking new, and entirely free, 25-video course on CSS grid:

5

287

899

CSS-Tricks

@css

5 years

Open-Source Full-Stack solution for fast PWA development. bento-starter: (Looks like an awfully opinionated stack, but popular stuff, like Vue, Firebase, Jest...)

4

228

904

CSS-Tricks

@css

5 years

Why Toggle Tokens Are a Better Alternative to Checkboxes

31

197

899

CSS-Tricks

@css

6 years

You know how position: relative; creates a new context for absolute positioning within? So does a CSS transform.

13

273

898

CSS-Tricks

@css

5 years

A 2019 update to the Front-End Developer Handbook:

Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.

frontendmasters.com

8

293

896

CSS-Tricks

@css

7 years

`display: grid` + `clip-path: polygon()`

9

260

886

CSS-Tricks

@css

6 years

A little trick to get consistent viewport height units on mobile devices using CSS custom properties.

8

267

884

CSS-Tricks

@css

6 years

LOTS of courses out there for learning CSS Grid: → → → → →

Learn CSS Grid - A Guide to Learning CSS Grid

A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.

learncssgrid.com

7

278

868

CSS-Tricks

@css

6 years

/** * 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

The CSS attribute selector has a case-insensitive mode

The CSS attribute can select values that usually wouldn't match in case-insensitive mode.

www.stefanjudis.com

16

273

870

CSS-Tricks

@css

6 years

"Generate font combinations with deep learning"

3

253

853

CSS-Tricks

@css

5 years

> Killed by Google is a Free and Open Source list of dead Google products, services, and devices. 149!

21

366

852

CSS-Tricks

@css

5 years

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).

9

222

860

CSS-Tricks

@css

5 years

Make some waves!

9

180

837

CSS-Tricks

@css

6 years

Fascinating. JavaScript Visualizer.

4

211

848

CSS-Tricks

@css

6 years

Feather: "Simply beautiful open source icons"

1

154

843

CSS-Tricks

@css

5 years

Sites that run automated tests against your site for... Mobile friendliness: Performance/a11y: Image optimization: SEO: Security: SSL:

Sucuri Security

sitecheck.sucuri.net

6

257

847

CSS-Tricks

@css

6 years

Animated `mask-image` is a thing.

3

199

845

CSS-Tricks

@css

5 years

Multi-Line Inline Gradient

11

159

845

CSS-Tricks

@css

2 years

😎 Make a #CSS developer happy in 3 words:

525

45

815

CSS-Tricks

@css

5 years

Gradient Magic (A lot of "hard stop" gradients. Very cool.)

5

201

841

CSS-Tricks

@css

5 years

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" 'he ain't wrong.

8

154

828

CSS-Tricks

@css

6 years

"A curated collection of useful CSS snippets you can understand in 30 seconds or less."

6

263

832

CSS-Tricks

@css

7 years

Morphing SVG shapes... the interpolation can be awkward. Flubber uses "best guess methods" to make them smoother.

0

241

831

CSS-Tricks

@css

6 years

Cool little site with some CSS concepts that do something useful/nice and are quick'n'easy to understand.

1

277

823

CSS-Tricks

@css

5 years

Hey if you're going to make a burger menu you might as well DO IT UP.

31

161

823

CSS-Tricks

@css

5 years

.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

Creating a full bleed CSS utility - Andy Bell

archive.hankchizljaw.com

12

171

820

CSS-Tricks

@css

5 years

> 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.

7

178

809

CSS-Tricks

@css

6 years

Helpful for understanding the different between `rem` and `em`

3

308

810

CSS-Tricks

@css

5 years

How to Design Destructive Actions to Prevent Data Loss

3

200

812

CSS-Tricks

@css

6 years

Very cool advantages to using --custom-properties instead of $preprocessorVariables is that you can change them at media queries.

8

227

806

CSS-Tricks

@css

5 years

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?

8

190

807

CSS-Tricks

@css

5 years

Firefox new logo: Edge new logo: @davatron5000 : `filter: hue-rotate(180deg); transform: rotate(90deg)`

10

197

799

CSS-Tricks

@css

5 years

Building a design system in Web Components does feel pretty smart. <brand-slider> <brand-tabs> <brand-figure> If nothing else, for the longevity of building "on the platform", as they say.

4

217

798

CSS-Tricks

@css

6 years

A CSS Grid tutorial that goes beyond the basics and does some really interesting stuff! By @anarafaelaferro min-max, auto-fill, object-fit, auto-flow...

6

212

799

CSS-Tricks

@css

6 years

Contextual styling with custom properties by @simurai :: Give a section something like `data-theme="dark"` then... [data-theme="dark"] { --adjust-all-the-variables... }

7

220

795

CSS-Tricks

@css

7 years

Did you know about these possible values for `background-position`?

15

298

782

CSS-Tricks

@css

7 years

REALLY well done CSS reference:

2

328

781

CSS-Tricks

@css

5 years

A Designer's Guide to Animating Icons with CSS

1

226

775

CSS-Tricks

@css

5 years

Introducing Sass Modules

4

266

764

CSS-Tricks

@css

5 years

Two front-end developers are sitting at a bar. They have nothing to talk about. Welcome to "The Great Divide."

28

276

755

CSS-Tricks

@css

5 years

CSS Grid for Designers 👏🏽 Well done @johnapao , this is a very powerful overview that should open a lot of eyes to grid!

4

174

756

CSS-Tricks

@css

6 years

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. (I can't speak to the differences, but surely there are some.)

12

211

761