Preview Mode Links will not work in preview mode

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

  1. All Episodes
  2. 081: Trigonometric Functions

081: Trigonometric Functions

Jun 20, 2024

In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt.

Links
Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r 

Great guide and overview from Daniel Wilson → https://goo.gle/4enKgBe 

layout pow() → https://goo.gle/3RlvAsI 

Using Absolute Value, Sign, Rounding and Modulo in CSS Today → https://goo.gle/4aY3OJz 

Time based animation → https://goo.gle/3x6Dm2K  

CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → https://goo.gle/4bZyrj2 

Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → https://goo.gle/45uqikj 

CSS physics for transitions and keyframes with these math functions → https://goo.gle/3VltDgX

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

').html('If you are using an iPad, you may install the app below:')); } $('#download_app_div').append(plistAnchor); } else { $('#download_app_div').empty().html('An error has occurred:' + json.message); } } else { $('#download_app_div').empty().html('An error has occurred'); } }, error:function(xhr, textStatus, errorThrown){ $('#download_app_div').empty().html('An error has occurred: ' + textStatus); } }); } else { $('#download_app_div').empty().html('Sorry, app download is only available for iOS devices.'); } } $("#btn-send-contact").click(function(event){ event.preventDefault(); var error = ""; //validate var valid = true; $('#podcast-page-contact-form').find(':input:not(button)').each(function(){ var name = $(this).attr("name"); var value = $(this).val(); if (typeof name != 'undefined' && value == ""){ valid = false; return false; } }); if(valid){ //submit form var datastring = $("#podcast-page-contact-form").serialize(); $.ajax({ type: "POST", url: "https://web-support.libsyn.com/contact/submit", data: datastring, dataType: "json", success: function(data) { if(data == false){ error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } else { $('#podcast-page-contact-form').find(":input").val("").hide(); $('#podcast-page-contact-form').fadeOut(); $("#podcast-page-contact-form-success").show(); } }, error: function() { error = "Error Your message could not be sent at this time. Please try again later."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); } }); } else { error = "Error Please fill out all fields and submit again."; $("#podcast-page-contact-form-error").html(error).fadeIn().delay(5000).fadeOut(); return false; } }); //check if episode began playing on home page var playerData = localStorage.getItem(window.location.href); try { var playerData = JSON.parse(playerData); if(typeof(playerData.elapsed) != "undefined" && playerData.elapsed != "00:00:00"){ var iframeId = "embed_31789062"; var iframeSrc = $("#"+iframeId).attr("src"); newSrc = iframeSrc + "time-start/" + playerData.elapsed; $("#"+iframeId).attr('src', newSrc); localStorage.removeItem(window.location.href); } } catch (e) { //Not what we were looking for localStorage.removeItem(window.location.href); }