Category Archives: Design

Various onFocus animations using Fluent Forms

Posted in CSS, Design, Development, PHP, WordPress on by .

*Note – I’ve noticed the dark theme on this website can make the onFocus effects harder to see. If that is the case, try viewing this blog post with the “light” theme.

Fluent Forms onFocus Examples

To be used with Text or TextArea type inputs in Fluent Form. Every example needsto add the class “animated_form_element” under the Advanced Options for each of the text/textarea’  “Element Class” field such as below:

For each set of animations, hit the reveal button to show the code that has to be added to your Fluent Form’s Custom CSS/JS sections. That section can be found under “Settings & Integrations tab -> Custom CSS/JS”

Underline

Drop In Underline Example:

dropin_underline
Show Examples Code

Required CSS:


Required Javascript:

Left To Right

Background overlay on mobile for Oxygen builder

Posted in CSS, Design, Development, Oxygen, PHP, WordPress on by .

In Oxygen, you can apply a background image as well as an image overlay within the options. However, these settings can not be changed per break point. Why would you want it to change based on break point? If the foreground text is hard to read due to not enough contrast when in the mobile view(or any really) then you would want to increase the rgba transparency value. Here is what I do in oxygen to do this since the overlay can’t be changed per breakpoint.

First, I give the hero section a base class of .hero , in that class I only specify settings that will apply to all other hero sections layouts that are the same minus the variable background image be used. Then, I add an additional class that is only used and is specific to that page to dictate the background image and to handle the image overlay in  media queries in css.

i.e.

So here we have 2 different types of hero layouts. #hero and #hero2 – neither of these contain the background or overlay settings. The classes like .v2-page is only used for that page and contains the background image specific for that page. The overlay for mobile is also handled.

Misc cool CSS tricks

Posted in CSS on by .

To create text that has a gradient of colors i.e. hover text for links (see below as an example)

Gradient text hover effect

This can be create with the below code:

 

CSS3 Notes

Posted in CSS on by .

CSS3 Animation

animation: flip 1s linear 2s 1 normal ;

Properties

name – Name of the animation used when creating the keyframes
duration – How long the animation lasts
timing-function – Determines the actual speed of the animation (i.e. linear / ease / ease-in / ease-out )
delay – how long before the animation is actually performed.
iteration-count – how many times the animation will happen.
direction – Wether the animation performs keyframes 0 to 100 or 100 to 0.
fill-mode – defines what style will be applied before or after the animation is done.

Transform

translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document.  Positive values will push an element down and to the right of its default position while negative values will pull an element up and to the left of its default position.