Tag: css

There’s not much talk about frameworks here. There’s no shaming about old techniques, or jokes about JavaScript. There’s just a couple hundred people all around me laughing and smiling and watching talks about making things on the web and it all feels so fresh and new to me. Unlike many other conferences I’ve visited, these talks are somehow inclusive and rather feel, well, there’s no other word for it: inspiring. I’m sitting in a little room buried underneath the Veterans Memorial Coliseum in Portland and I’m here for my third XOXO. And I can’t stop smiling. Although the festival is not entirely focused on coding and front-end development, there are a lot of developers here that make art on the web for fun. From Jenn Schiffer’s pixel art to Monica Dinculescu’s emoji projects and Nicole He...

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it's just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice! Let's re-create that, bit-by-bit. A radial gradient is perfect for the glowing green background: body { background-color: black; background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 120% ); height: 100vh; } I'm so used to using <pre><code> to display space-formatted text (like code), but you could say terminal text isn't always code, so I like the use of <pre><output> here. Might as well use a nice monospace font: body { ... color: white; font: 1.3rem Inconsolata, monospace; } The text ...

One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site's theme, and allow for social login on the comment form. There is even more than that, but let's dig into these three as we use them. Auto-Sharing Posts I like the idea that everything we published goes out to social media. Many people only follow the site that way, so they should see what we're writing. We're specifically into Twitter and Facebook. With Jetpack installed connected to WordPress.com, I can now flip on the setting: Then authenticate the services you want to connect: Now as we publish new articles, there are Pub...

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way! Here’s a typical (um) sticky situation: See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen. Sticky elements (position: sticky;) are very similar to fixed elements ( position: fixed;) in that they both maintain their position on the screen, even as the user scrolls up or down the page. The difference? A sticky element remains confined to the parent container it is in. Compare sticky example above with this one that uses the same concept using a fixed element instead: See the Pen position:sticky (CSS) by CSS-Tricks (@css-tricks) on CodePen. Say we want to create an effect where elements either slide in o...

It was Safari who first started hiding the complete URL. Here's what CSS-Tricks looks like even when you're on an article page by default in Safari: The full URL path is hidden.You can only fix it (YES, FIX IT) by checking "Show full website address" in settings. Preferences > AdvancedWe've already damaged the sanctity of URLs in a way with URL shorteners. Thankfully, those are used less and less with social networks, like Twitter, not counting the URL toward the total tweet character count anymore. Now, Lily Hay Newman reports Chrome sees problems as well: "People have a really hard time understanding URLs," says Adrienne Porter Felt, Chrome's engineering manager. "They’re hard to read, it’s hard to know which part of them is supposed to be trusted, and in general I don’t think URLs a...