CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 07 Dec 2016 13:04:36 +0000 en-US hourly 1 https://wordpress.org/?v=4.6.1 45537868 Prerender on hover? https://css-tricks.com/prerender-on-hover/ https://css-tricks.com/prerender-on-hover/#respond Wed, 07 Dec 2016 13:03:36 +0000 https://css-tricks.com/?p=248647 InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body>…

Prerender on hover? is a post from CSS-Tricks

]]> InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body> and <title> and changes the URL.

I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy.

It got me thinking though... isn't there a newfangled prerendering thing? There is:

<link rel="prerender" href="(url)">

It's not that newfangled, actually. Steve Souders wrote about it in 2013:

This is like opening the URL in a hidden tab – all the resources are downloaded, the DOM is created, the page is laid out, the CSS is applied, the JavaScript is executed, etc. If the user navigates to the specified href, then the hidden page is swapped into view making it appear to load instantly.

Can I Use shows decent support:

This browser support data is from Caniuse, which also reports this feature is in W3C Working Draft status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
13No1115No

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
NoNoNo54No

Doesn't that mean we could do something like this?

var links = document.querySelectorAll('a');

[].forEach.call(links, function(link) {
    
  link.addEventListener("mouseenter", function() {
    
    var newPreLoadLink = document.createElement("link");
    newPreLoadLink.rel = "prerender";
    newPreLoadLink.href = link.href;
    
    document.head.appendChild(newPreLoadLink);
    
  })
  
});

The question is if dynamically-inserted link elements like that actually trigger the prerendering. I did a fairly primitive test in Chrome, and it didn't seem to work. Oh well.

If you wanted to be even more predictive than hover, you could try Premonish, "A library for predicting what element a user will interact with next."

If you're interested in this kind of thing, prerendering isn't the only kid on the block. Robin wrote about it all last year.

Prerender on hover? is a post from CSS-Tricks

]]> https://css-tricks.com/prerender-on-hover/feed/ 0 248647 EOL Firebug https://getfirebug.com/ https://css-tricks.com/eol-firebug/#respond Wed, 07 Dec 2016 13:01:32 +0000 https://css-tricks.com/?p=248745 The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.

Looks like the end of an over 2 year process.

Firebug was probably the single most important tooling advancement in front-end developments short life. A glimpse of the future, indeed.

Direct Link to Article — Permalink…

EOL Firebug is a post from CSS-Tricks

]]>

The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.

Looks like the end of an over 2 year process.

Firebug was probably the single most important tooling advancement in front-end developments short life. A glimpse of the future, indeed.

Direct Link to Article — Permalink

EOL Firebug is a post from CSS-Tricks

]]> https://css-tricks.com/eol-firebug/feed/ 0 248745 CSS-Tricks Chronicle XXIX https://css-tricks.com/css-tricks-chronicle-xxix/ https://css-tricks.com/css-tricks-chronicle-xxix/#respond Tue, 06 Dec 2016 20:14:15 +0000 https://css-tricks.com/?p=248205 A round up of goings-on related to me, this site, and related projects, as we are wont to do once in a while. I've had the good fortune of being a guest on a number of podcasts lately, so I'll link up those. I'll share some upcoming conferences I'll be at and news from CodePen and ShopTalk Show.

I got to be a guest on the OfficeHours.FM Podcast with Carrie Dils in All the Things, Episode 122. Carrie's podcast …

CSS-Tricks Chronicle XXIX is a post from CSS-Tricks

]]> A round up of goings-on related to me, this site, and related projects, as we are wont to do once in a while. I've had the good fortune of being a guest on a number of podcasts lately, so I'll link up those. I'll share some upcoming conferences I'll be at and news from CodePen and ShopTalk Show.

I got to be a guest on the OfficeHours.FM Podcast with Carrie Dils in All the Things, Episode 122. Carrie's podcast is about the WordPress ecosystem, so we chat about CSS-Tricks a good bit, which is a WordPress site. We talk about business, staying on top of things, the origin of CodePen, and more.

I gave my presentation 10 Things You Can (and Should) Do With SVG as a webinar for Shopify, and they wrote it up and published the whole talk.

I'll be speaking at some conferences coming up. Only a few of them have landing pages up so far, so here's those:

At AEA Seattle, not only will I be giving a talk, I'll also be giving a full day workshop. Use coupon code AEACOYI for any of those.

There will be more to announce soon, including some in Canada and Europe.

I got to be on the User Defenders podcast with Jason Ogle in episode 028: Be Persistent with Chris Coyier.

This podcast offers the first-and-only discount I've ever shared for Practical SVG: SUPERSVG.

I got to be on the HackingUI podcast with David Tintner & Sagi Shrieber in Episode #24: How to grow a blog and remain true to your audience. I enjoyed these fellas entrepreneurial spirit, as they've both gone full time on HackingUI now.

I got to be on the How I Built It podcast with Joe Casabona on Episode #6: Chris Coyier & CodePen.

There is plenty happening at CodePen. We just passed 10,000,000 Pens created. We just wrapped up a mini-series on CodePen Radio where we talk to 10 other businesses that have similarity CodePen in one way or another.

We're still in the throes of working on big new features and infrastructure. So there haven't been a whole lot of feature releases, but there will be in the coming months, followed by more active smaller releases in 2017.

One brand new thing is The CodePen Spark, our new newsletter. It's full of hand-picked selections of the best stuff around CodePen and the web at large each week.

Episode 245 of ShopTalk Show just went out, which is our last of 2016. It's also the 14th RAPIDFIRE episode in a row, as Dave and I were enjoying the simplicity and original ShopTalk spirit of that. We'll be back in January with new shows.

CSS-Tricks Chronicle XXIX is a post from CSS-Tricks

]]> https://css-tricks.com/css-tricks-chronicle-xxix/feed/ 0 248205 CSS Grid! http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/ https://css-tricks.com/css-grid/#respond Tue, 06 Dec 2016 19:26:18 +0000 https://css-tricks.com/?p=248714 Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea

Direct Link to Article — Permalink…

CSS Grid! is a post from CSS-Tricks

]]> Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea

Direct Link to Article — Permalink

CSS Grid! is a post from CSS-Tricks

]]> https://css-tricks.com/css-grid/feed/ 0 248714 margin-bottom or margin-top https://css-tricks.com/margin-bottom-margin-top/ https://css-tricks.com/margin-bottom-margin-top/#comments Tue, 06 Dec 2016 12:45:54 +0000 https://css-tricks.com/?p=248633 I posted a context-less poll on Twitter, just for fun.

ok lets do this

— Chris Coyier (@chriscoyier) December 1, 2016

The implied context, as most CSS nerds could probably suspect, is:

To space elements out vertically from each other, do you generally go for margin-bottom on the top element, or margin-bottom on the top element?

61% of ~2,000 votes said margin-bottom. I figured it would win, but I didn't suspect so narrowly. The web feels like a push-downy kind …

margin-bottom or margin-top is a post from CSS-Tricks

]]> I posted a context-less poll on Twitter, just for fun.

The implied context, as most CSS nerds could probably suspect, is:

To space elements out vertically from each other, do you generally go for margin-bottom on the top element, or margin-bottom on the top element?

61% of ~2,000 votes said margin-bottom. I figured it would win, but I didn't suspect so narrowly. The web feels like a push-downy kind of medium and I'd say it feels more logical/natural to apply spacing to the first element rather than second.

One way or another, it's common to have to remove the spacing from one side or the other. Kinda like:

.module > *:last-child {
  margin-bottom: 0;
}

/* or */

.module > *:first-child {
  margin-top: 0;
}

But don't read too much into that. There are a million ways to handle structure, spacing, selectors, and all that. I just mean to say: it's a horse apiece. One isn't any better than the other. They don't need to be mutually exclusive either, but remember how they collapse.

Greg Whitworth pointed out that margin-top actually has a narrow edge in "a Bing-powered can of 1,070,510 pages".

Data from here

But as Estelle Weyl pointed out, that's mostly coming from people resetting those values, not actively using them for spacing. It would be interesting to see that same data with non-zero values.

margin-bottom or margin-top is a post from CSS-Tricks

]]> https://css-tricks.com/margin-bottom-margin-top/feed/ 17 248633 Service Worker, what are you? http://kosamari.com/notes/Service-Worker-what-are-you https://css-tricks.com/service-worker-what-are-you/#respond Mon, 05 Dec 2016 21:59:26 +0000 https://css-tricks.com/?p=248684 Mariko Kosaka:

I finally figured out, it's an alien you can invite to live on user's browser.

Direct Link to Article — Permalink…

Service Worker, what are you? is a post from CSS-Tricks

]]> Mariko Kosaka:

I finally figured out, it's an alien you can invite to live on user's browser.

Direct Link to Article — Permalink

Service Worker, what are you? is a post from CSS-Tricks

]]> https://css-tricks.com/service-worker-what-are-you/feed/ 0 248684 The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media https://css-tricks.com/simple-social-sharing-links/ https://css-tricks.com/simple-social-sharing-links/#comments Mon, 05 Dec 2016 12:40:27 +0000 https://css-tricks.com/?p=248120 This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on social media. But what about creating the links to let users share these web pages? Facebook, Twitter, and LinkedIn offer numerous ways to do this, some involving button generators and others that require external JavaScript. To avoid all of that, though, you can create your own links to share web pages. And the best …

The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media is a post from CSS-Tricks

]]> This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on social media. But what about creating the links to let users share these web pages? Facebook, Twitter, and LinkedIn offer numerous ways to do this, some involving button generators and others that require external JavaScript. To avoid all of that, though, you can create your own links to share web pages. And the best part is that it’s simple to do yourself. Here’s how.

Basic Concept: Just a Link

When sharing web pages using links, you’re essentially submitting a GET request (i.e. clicking a link) to a URL provided by each social media service. Then, by appending a series of name/value pairs (query parameters like ?title=Title) to the end of this URL, you can specity the URL of the web page you want to share and, sometimes, additional information.

Now, certain symbols in GET requests known as “reserved characters”, need to be encoded properly so as not to interfere with normal browser functions. These characters are subject to “percent-encoding” – that is, they are represented in query parameters with a “%” followed by a two-digit hex code. These are the reserved characters and their percent-encoded equivalents.

! # $ & ' ( ) * +
%21 %23 %24 %26 %27 %28 %29 %2A %2B
, / : ; = ? @ [ ]
%2C %2F %3A %3B %3D %3F %40 %5B %5D

Note: A space can be represented by “%20” or “+”.

Of course, there’s no need to memorize these hex codes. There are many resources that provide conversions (Bing has one built into the search engine) and, as you will soon see, JavaScript can also handle the heavy lifting in this regard. Let’s look at a few of the more popular social media services and learn how we can share web pages through them.

Facebook

Per their Developer’s Guide, Facebook specifies the following URL to submit GET requests when sharing a web page:

https://www.facebook.com/dialog/share

While there are four query parameters available, only two are required: the URL of the web page that you want to share and an App ID, which developers can obtain by registering at Facebook. If you don’t have an App ID, the registration process is not onerous, but there’s no need to bother when an even simpler solution exists.

Facebook’s original method of sharing web pages, without the required App ID, is no longer mentioned in any of their documentation, but it’s still supported. In fact, with countless web sites using this method, I can’t imagine it would be deprecated anytime soon. This URL is:

https://www.facebook.com/sharer.php

The only parameter available is “u”, which is used to specify the URL of the web page you want to share. Here’s an example that shares the home page of CSS-Tricks on Facebook – go ahead, cut-and-paste into a browser to see the result.

https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F

As previously explained, the URL shared is necessarily percent-encoded. Also, note how “?” designates the start of the first query parameter. Subsequent query parameters are separated by “&” as will be seen shortly.

Twitter

Twitter refers to sharing a web page via URL as a Tweet Web Intent – the URL to use is:

https://twitter.com/intent/tweet

Unlike Facebook, where only the web page being shared can be specified, Twitter allows you to tack on some text and any number of hashtags. Users will have the opportunity to edit all of this before tweeting, but it gives them a head start in case they can’t be bothered. For example, let’s say you wanted to tweet the following information:

parameter value
url https://css-tricks.com/
text Tips, Tricks, and Techniques on using Cascading Style Sheets.
hashtags css html

The URL for that, with the query parameters percent-encoded and line breaks added for clarity, is:

https://twitter.com/intent/tweet
?url=https%3A%2F%2Fcss-tricks.com%2F
&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&hashtags=css,html

And that gives you:

You’ll notice that Twitter pre-selects the text, which allows for easy editing by the user. And, remember, the tweet needs to be under 140 characters, so best not supply any copy that’s too long. In the interest of simplicity, I omitted discussing three lesser-used parameters, which can be found described in detail at Twitter’s Developers Documentation. These additional parameters allow you to specify the username associated with the tweet, suggested related usernames, and an ID of a related tweet.

LinkedIn

The URL to use when sharing on LinkedIn is:

https://www.linkedin.com/shareArticle

In total, there are five parameters available as detailed by this chart taken from LinkedIn’s Developers documentation:

Parameter Description Max Length Required
url The url-encoded URL of the page that you wish to share. 1024 Yes
mini A required argument whose value must always be: true 4 Yes
title The url-encoded title value that you wish you use. 200 No
summary The url-encoded description that you wish you use. 256 No
source The url-encoded source of the content (e.g. your website or application name) 200 No

In addition to the URL of the web page that you want to share, another query parameter called “mini” is required. But, as you can see, its value never changes, so we can hardcode that into the URL. To demonstrate, let’s share the following on LinkedIn:

parameter value
url https://css-tricks.com/
title CSS-Tricks
summary Tips, Tricks, and Techniques on using Cascading Style Sheets.
source CSS-Tricks

This gives the following URL – again, line breaks added for clarity:

https://www.linkedin.com/shareArticle
?mini=true
&url=https%3A%2F%2Fwww.css-tricks.com%2F
&title=CSS-Tricks
&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&source=CSS-Tricks

While not mentioned explicitly in their documentation, if the “title” parameter is omitted, LinkedIn will grab this content from the Open Graph tag <meta property="og:title"> from the shared page. Similarly, if the “summary” parameter is omitted, the Open Graph tag <meta property="og:description"> is used. As for the “source” parameter, nothing in the documentation specifies how this value is used or displayed when sharing a web page – it looks as if it can be safely ignored.

Knowing all of this, if the web page being shared has the proper complement of Open Graph tags, simply specifying the URL will suffice as the “title” and “summary” parameters will be suitably populated.

Putting It All Together

Now that we know the syntax to use when sharing web pages on social media, how exactly can we implement this code? Perhaps the most common way is simply listing a group of sharing links styled appropriately with CSS:

<ul>
  <li><a href="https://www.facebook.com/sharer.php?..." target="blank"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li>
  <li><a href="https://twitter.com/intent/tweet?..." target="blank"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li>
  <li><a href="https://www.linkedin.com/shareArticle?..." target="blank"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li>
</ul>

The adding of target="_blank" in the anchor tag allows the sharing dialog to appear in a new window or tab, which works well on all devices, from desktop to mobile.

But hard-coding these links, with the percent-encoding of the query parameters, can be tedious and error prone. For any web page dynamically served by a CMS, this would be the perfect opportunity to have this data crunching performed on the server side and inserted where needed in the HTML.

Another option is to use the Social Media Sharing: HTML Links Generator that I created on CodePen. This allows you to enter any or all of the necessary parameters we’ve just reviewed, and it will output the appropriate HTML for you to insert into your own code.

See the Pen Social Media Sharing: HTML Links Generator by Adam Coti (@adamcoti) on CodePen.

As a freelance web developer working almost exclusively on the front-end, I’ve opted to use JavaScript/jQuery functionality that, without customization, works as a turnkey solution for my projects. This way, I can be assured that all sharing links will be properly handled, whether I’m working on a static web site, customizing WordPress themes, or handing off templates to be integrated into a CMS.

This is the HTML I use, with classes designating the particular sharing service. In the JavaScript, the function setShareLinks(), which attaches click events to the share buttons, is called when the Document Object Model (DOM) is ready:

<ul>
  <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li>
  <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li>
  <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li>
</ul>
function socialWindow(url) {
    var left = (screen.width - 570) / 2;
    var top = (screen.height - 570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
    window.open(url,"NewWindow",params);
}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));
    
    jQuery(".social-share.facebook").on("click", function() {
        url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
        socialWindow(url);
    });

    jQuery(".social-share.twitter").on("click", function() {
        url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
        socialWindow(url);
    });

    jQuery(".social-share.linkedin").on("click", function() {
        url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
        socialWindow(url);
    })
}

The URL of the current web page is easily acquired by reading a property of the document object. And, for Twitter, the Open Graph tag <meta property="og:description"> conveniently provides appropriate content for a default tweet.

Now, at the request of some of my clients, I launch the newly formed URL in a specially sized secondary (pop-up) window by utilizing window.open(). On most desktop browsers, this window is positioned horizontally and vertically centered on the screen. Interestingly enough, if a user is logged in to their social media account, Facebook and LinkedIn will resize this secondary window to the necessary dimensions. Twitter doesn’t, so I use a default width and height that provides it with enough real estate. As far as responsiveness, tablets and mobile devices interpret the secondary window as a new tab. A demo of this functionality can be found on CodePen.

See the Pen Social Media Sharing: Automated Link Creator by Adam Coti (@adamcoti) on CodePen.

But using a pop-up window, while once common, is now frowned upon for accessibility reasons. A simple solution is to set the variable params to an empty string in the above JavaScript. Doing so launches the URL in a new window or tab depending on the user’s browser setting.

Conclusion

As the gruesome saying goes, there are many ways to skin a cat. The above technique is simply my preferred method. You may have a better, more optimized way. Perhaps using data attributes in the HTML (to specify hashtags, for example) that can be read by JavaScript and appended as a query parameter where needed. Hopefully this can at least serve as inpiration for your own implementation.

The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media is a post from CSS-Tricks

]]> https://css-tricks.com/simple-social-sharing-links/feed/ 12 248120 An SVG That Isn’t All… SVG http://mediatemple.net/blog/tips/an-svg-that-isnt-all-svg/ https://css-tricks.com/svg-isnt-svg/#respond Mon, 05 Dec 2016 12:39:15 +0000 https://css-tricks.com/?p=248643 SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG …

An SVG That Isn’t All… SVG is a post from CSS-Tricks

]]> SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG 2, it'll be even more multimedia with the inclusion of audio, video, canvas, and more.

If you'd like to make SVG more of a part of you day-do-day workflow, and I suggest you do, pick up a copy of Practical SVG.

Direct Link to Article — Permalink

An SVG That Isn’t All… SVG is a post from CSS-Tricks

]]> https://css-tricks.com/svg-isnt-svg/feed/ 0 248643 State of the Word 2016 https://poststatus.com/matt-mullenweg-state-word-2016/ https://css-tricks.com/state-word-2016/#respond Sun, 04 Dec 2016 17:06:43 +0000 https://css-tricks.com/?p=248638 Some highlights-of-highlights, based on Brian Krogsgard's post:

  • BuddyPress and bbPress will get new support and engagement over the next year.
  • WordPress 4.6 was available in 50 languages the day it was released.
  • the REST API [endpoints] get included in WordPress 4.7.
  • WordPress.com is now fully on PHP7. WordPress.org will now recommend PHP7 by default.
  • There is some concern about design. "If WordPress doesn’t make changes to the interface and otherwise, [Matt Mullenweg would] expect WordPress marketshare to begin to decline

…

State of the Word 2016 is a post from CSS-Tricks

]]> Some highlights-of-highlights, based on Brian Krogsgard's post:

  • BuddyPress and bbPress will get new support and engagement over the next year.
  • WordPress 4.6 was available in 50 languages the day it was released.
  • the REST API [endpoints] get included in WordPress 4.7.
  • WordPress.com is now fully on PHP7. WordPress.org will now recommend PHP7 by default.
  • There is some concern about design. "If WordPress doesn’t make changes to the interface and otherwise, [Matt Mullenweg would] expect WordPress marketshare to begin to decline by 2018." and "In the coming releases, he, 'wants to see design leading the way.'"

Direct Link to Article — Permalink

State of the Word 2016 is a post from CSS-Tricks

]]> https://css-tricks.com/state-word-2016/feed/ 0 248638 Web Animation Essentials: CSS Animations and Transitions http://rachelnabors.com/css-animations-course/ https://css-tricks.com/web-animation-essentials-css-animations-transitions/#respond Sun, 04 Dec 2016 15:28:31 +0000 https://css-tricks.com/?p=248631 A brand new course by Rachel Nabors. There is a lot here: learning the code and learning the tools to help work with the code and make sure you're doing a good job. A couple favorite aspects of the course:

  • Captioned videos you can understand without audio.
  • Convenient CodePen exercises–no code to set up.

;)

Direct Link to Article — Permalink…

Web Animation Essentials: CSS Animations and Transitions is a post from CSS-Tricks

]]> A brand new course by Rachel Nabors. There is a lot here: learning the code and learning the tools to help work with the code and make sure you're doing a good job. A couple favorite aspects of the course:

  • Captioned videos you can understand without audio.
  • Convenient CodePen exercises–no code to set up.

;)

Direct Link to Article — Permalink

Web Animation Essentials: CSS Animations and Transitions is a post from CSS-Tricks

]]> https://css-tricks.com/web-animation-essentials-css-animations-transitions/feed/ 0 248631