CSS Colour Tint

Use the following CSS in this order to achieve a pure CSS colour Tint: – .tint { filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg); } view rawCSS Colour Tint hosted with ❤ by GitHub To achieve your CSS colour tint you only need to change the hue-rotate value. Works on parent elements and their children.

Element height always the same as Width

This is a very useful snippet for ensuring that your element height (div, img etc) is always the same as the width. An example case could be a circular div that you want to ensure maintains a set aspect ratio so that it is not squashed or elongated. There are a few examples of how to achieve this below, but …

Auto populate Webflow form from URL parameter uppercase remove %20

This code allows you to auto-populate a Webflow form on a different page with a URL parameter. It is an extension of an original code posted on the Webflow Forum that covers form email fields, text fields as well as select dropdowns and textarea. The URL parameters may be passed as lowercase variables such as ?name=glenn (becoming ‘Glenn’) and then subsequent …

301 Domain Redirect

The 301 domain redirect is the best way to ensure that you keep SEO when moving from one domain name to another like olddomain.com to newdomain.com. The correct way to achieve this is by editing the .htaccess file of the old site on your server. The .htaccess file sits in your site’s root folder (directly under yourdomainname.com) and can be …

Slick Carousel Fade In on Load

You don’t need any Javascript/jQuery to Fade in the Slick Carousel on Load as this can be acheived with just a few lines of CSS.  /* .slick-slider */ .slick-slider-class { opacity: 0; } /* Slider initialised class */ .slick-initialized { opacity:1; transition:opacity .3s ease-in; } view rawSlick Carousel Fade In on Load hosted with ❤ by GitHub Initially you need …

CSS Target all mobile devices

If you are looking to make a universal CSS rule for all mobile devices then use the following CSS media query:- @media (pointer:coarse) { /* custom css for “touch targets” */ } @media (hover: none) { /* custom css for devices where the primary input mechanism cannot hover at all or cannot conveniently hover } @media (hover:none), (hover:on-demand) { /* …

Remove Video Loop

Embedded HTML 5 Videos often default to looping video and this is derived from the video ‘loop’ attribute. Here is how you can remove the Video loop attribute with a simple jQuery snippet: – How to use jQuery Remove Video loop attribute Simply call jQuery and add your code before the closing </body> tag and then add the class ‘.noloop‘ …

jQuery Other Input box to Select dropdown

Webflow has few limitations as high-spec Web Builder and CMS, but one right now is Conditional Form fields and this extends to other form builders or HTML forms. Conditional form fields are inputs, selects, radios etc that are conditional on a pre-selected option(s). One common use is to add an ‘Other’ input box to a Select dropdown. This jQuery snippet …