Search

Nalezeno "CSS": 3281

Making Tables Responsive With Minimal CSS

17.10.2019
Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this: See the Pen Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt) ...

The `hidden` Attribute is Visibly Weak

16.10.2019
There is an HTML attribute that does exactly what you think it should do: <div>I'm visible</div> <div hidden>I'm hidden</div> It even has great browser support. Is it useful? Uhm. Maybe. Not really. Adam Laki likes the semantics of it: If we use the hidden...

Workflow Considerations for Using an Image Management Service

16.10.2019
There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly. That's a very good thing. By any metric, images are a major slice of the resources on websites, and we're notoriously bad at optimizing them...

Ten-Ton Widgets

15.10.2019
At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example showed a site that installed the widget in order add a "email us" button fixed to the bottom right of the viewport. Not even a live-chat widget...

Let’s Make a Fancy, but Uncomplicated Page Loader

15.10.2019
It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve "perceived" performance — that is, making it feel as though the site is loading faster than it actually is. There’s no shortage of ways...

WordPress Plugin Overload? Give Jetpack a Try!

15.10.2019
The WordPress ecosystem has a plentiful supply of plugins that offer everything from AMP to Zapier integration and so, so, so many other things in between. It's a significant contributor to what makes WordPress great because plugins can account for the needs of nearly any website. How many plugins...

Weaving One Element Over and Under Another Element

14.10.2019
In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and...

Stop Animations During Window Resizing

14.10.2019
Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they have to do with size of the page or position or padding or something. It doesn't really matter what it is, the fact that the transition...

Two Images and an API: Everything We Need for Recoloring Products

11.10.2019
I recently found a solution to dynamically update the color of any product image. So with just one <img> of a product, we can colorize it in different ways to show different color options. We don’t even need any fancy SVG or CSS to get it done! We’ll be using an image editor (e.g. Photoshop...

The Teletype Text Element Lives On… at Least on This Site

11.10.2019
It was this: <tt> I say "was" because it's deprecated. It may still "work" (like everybody's favorite <marquee> in some browsers), but it could stop working anytime, they say. The whole purpose of it was to display text in a monospace font, like the way Teletype machines used...

Recipes for Performance Testing Single Page Applications in WebPageTest

10.10.2019
WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at Theodo, I use it every single day. I am constantly amazed at what it offers to the web development community at large and the web performance folks...

Images Are Not Static Content

10.10.2019
We constantly hear about the importance of keeping websites lean and fast. A fast-loading website makes users more satisfied, and satisfied users spend more time and money on your website. However, website optimization is a complex task, as there is not one silver bullet to fix all of the issues...

Blocking Third-Party Hands from the Cookie Jar

9.10.2019
Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com, I'll get a cookie from css-tricks.com that handles my authentication. But css-tricks.com might also load an image from some other site. A common...

Patterns for Practical CSS Custom Properties Use

9.10.2019
I've been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so useful...

Let’s Not Forget About Container Queries

9.10.2019
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn't write as many global media queries based on page size. That's because we're actually trying to control a more scoped container, and the only...

A Snippet to See all SVGs in a Sprite

8.10.2019
I think of an SVG sprite as this: <svg display="none"> <symbol id="icon-one"> ... <symbol> <symbol id="icon-two"> ... <symbol> <symbol id="icon-three"> ... <symbol> </svg> I was long a fan of that approach for icon systems...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace