{"id":250541,"date":"2017-01-27T07:12:02","date_gmt":"2017-01-27T14:12:02","guid":{"rendered":"http:\/\/css-tricks.com\/?p=250541"},"modified":"2017-01-27T07:12:02","modified_gmt":"2017-01-27T14:12:02","slug":"real-css-tweets-vol","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/real-css-tweets-vol\/","title":{"rendered":"Real CSS Tweets (Vol. I)"},"content":{"rendered":"

We be tweetin’ all the time about web design and development stuff. In fact, @Real_CSS_Tricks<\/a>, the official Twitter account for this site, is largely just an outgoing airhorn for the stuff we publish here and interesting things elsewhere. The human beings that operate this site<\/a> have their own accounts. <\/p>\n

It’s pretty interesting to see which tweets take off! Here’s a list of the most popular tweets in the last year or so.<\/p>\n

<\/p>\n

\n

Wanna see a decent little slider in a handful of lines of code? pic.twitter.com\/zOsN4mhRFw<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) October 23, 2016<\/a><\/p><\/blockquote>\n

That one turned into a blog post<\/a> and demo<\/a>.<\/p>\n

\n
\n

Loads of icons you can make with a single element (and pseudos)https:\/\/t.co\/s3VyHj2P11<\/a> pic.twitter.com\/mlIkyjc86w<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) October 16, 2016<\/a><\/p><\/blockquote>\n

I’d say SVG is normally the best fit for this kind of thing, but this is a damn impressive experiment. I like the websites interface in how you can hover over the parts of CSS and it shows you what part of the icon it is.<\/p>\n

\n

Some more helpful mini tools:<\/p>\n

\n

CSS Peeper: https:\/\/t.co\/RRbKhut7Ea<\/a><\/p>\n

Chrome extension that displays styling information about the current site. pic.twitter.com\/bs3NtmgI3I<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) December 23, 2016<\/a><\/p><\/blockquote>\n

\n

Always helpful to have a quickie site to snag nice colors.https:\/\/t.co\/h2Ei8syLEU<\/a> pic.twitter.com\/X0GGXyn5dE<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) April 4, 2016<\/a><\/p><\/blockquote>\n

\n

Reminder that Clippy is an *awesomely helpful* little app for clip-pathhttps:\/\/t.co\/SZILcdftSZ<\/a> pic.twitter.com\/qcKvcaTO8a<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) April 6, 2016<\/a><\/p><\/blockquote>\n

\n

Demos!<\/p>\n

\n

ooOOo fancy. "Aquarelle is a watercolor js effect."https:\/\/t.co\/0ycH8fcyRV<\/a> pic.twitter.com\/NKqj0LKZf0<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) January 16, 2017<\/a><\/p><\/blockquote>\n

\n

What a cool way to show nav with what is current visible: https:\/\/t.co\/u7yHR2QtlP<\/a> pic.twitter.com\/m53rzHD8El<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) January 13, 2017<\/a><\/p><\/blockquote>\n

\n

The Twitter heart explosion animation by @anatudor<\/a> with:<\/p>\n

1 Element
0 Images
0 JavaScripthttps:\/\/t.co\/9rcDYZwjrY<\/a> pic.twitter.com\/tA7zaMg3xl<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) June 29, 2016<\/a><\/p><\/blockquote>\n

\n

Little bits of code:<\/p>\n

\n

Always so satisfying centering stuff with flexbox. pic.twitter.com\/uH8u9EQhaw<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) January 11, 2016<\/a><\/p><\/blockquote>\n

\n

Native (!) smooth scrolling: <\/p>\n

window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});<\/p>\n

Polyfill: https:\/\/t.co\/I6fHdLzDTT<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) November 2, 2016<\/a><\/p><\/blockquote>\n

\n

This was confusing me, but I think we have it sorted now.https:\/\/t.co\/uRuiJTA68y<\/a>https:\/\/t.co\/cvYQA1riU4<\/a> pic.twitter.com\/lQhba7QEpe<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) January 22, 2016<\/a><\/p><\/blockquote>\n

\n

Stuff right here on CSS-Tricks:<\/p>\n

\n

Input Masking :: https:\/\/t.co\/ee1bRnPPnl<\/a> pic.twitter.com\/xVZUIc8XTr<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) November 30, 2016<\/a><\/p><\/blockquote>\n

\n

Sticky Footer
\u2776 \u2777 \u2778 \u2779 \u277a
Ways!https:\/\/t.co\/4shCFk12UY<\/a> pic.twitter.com\/VjFmQnK65H<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) May 25, 2016<\/a><\/p><\/blockquote>\n

\n

So. Much. Info. on CSS Grid Layout.https:\/\/t.co\/lTmSHGztho<\/a> pic.twitter.com\/D0lBxQSQxG<\/a><\/p>\n

— CSS-Tricks (@Real_CSS_Tricks) March 29, 2016<\/a><\/p><\/blockquote>\n

\u2764\ufe0f<\/p>\n