A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements

Last update: Dec 18, 2022

Related tags

Overview

#Flat Shadow by Pete R. A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements Created by Pete R., Founder of BucketListly

License: Attribution-ShareAlike 4.0 International

Demo

View demo

Usage

To use this on your website, simply include the latest jQuery library found here together with jquery.flatshadow.js into your document's <head>, follow by the html markup and a function call as follows:

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>
...

$(".flat-icon").flatshadow({
  color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
  angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
  fade: true, // Gradient shadow effect
  boxShadow: "#d7cfb9" // Color of the Container's shadow
});

Further Customization

With jquery.flatshadow.js, you can apply each individual elements with different effect by simply add a data-color and data-angle to your mark up as follows:

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

and remove the color and angle global options as seen here:

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

Now, each individual element will have its own effect without you calling the function multiple times.

Other Resources

Tutorial

Long shadow jQuery plugin

Long Shadow jQuery Plugin Easy text-shadow with long shadow jquery plugin UNPKG script src="https://unpkg.com/jquery-longshadow"/script Use $(sele

Jul 20, 2022

Cast your video element to the big screen with ease!

is="castable-video" Cast your video element to the big screen with ease! The lightweight CastableVideoElement class extends the native HTMLVideoElemen

Jan 1, 2023

Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Oct 28, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

A movie critic site allowing users to browse different selection of movie titles, tv shows, pod cast and more

A movie critic site allowing users to browse different selection of movie titles, tv shows, pod cast and more! A user can click on Whats a Potatoe Meter? to access the comments page a leave a rating on their favorite title from the list we have on the dropdown.

Mar 22, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Nov 21, 2022

An in-depth implementation of Clean Architecture using NestJS and type-script

Clean Architecture With NestJS Description It's been a while since my last article on how to implement clean architecture on Node.js applications, git

Dec 28, 2022

Map over an object in a preorder or postoder depth-first manner

obj-walker Walk objects like this guy. Map over an object in a preorder or postoder depth-first manner. Also, provides functions for serializing and d

Jun 2, 2022

An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Dec 13, 2022

Provides event handling and an HTMLElement mixin for Declarative Shadow DOM in Hotwire Turbo.

Turbo Shadow Provides event handling and an HTMLElement mixin for Declarative Shadow DOM support in Hotwire Turbo. Requires Turbo 7.2 or higher. Quick

Sep 28, 2022

Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Nov 14, 2022

A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Aug 16, 2022

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo 👉 https://jsfiddle.net/torrobin

Jul 31, 2022

Comments

Shorter clearer code (35% smaller file), and support for passing random in data-color and data-angle
Great plugin, I've learned a lot from the tricks you've used here. Still, I couldn't help myself from refactoring the switch case statement. The result is smaller, slightly faster, while still (I believe) not sacrificing code readability.

Changes:

Refactored the switch on angle statement to remove all the repeating code that is the same for all angles, leaving only the difference between the angles inside the switch. This change lowered the filesize from 8.1 kb to 5.3 kb. The only code change here (beside moving lines and deleting the repeating ones), is the addition of the iLimit variable which holds either the width or the height.

Refactored if blocks that define angle, and shadow color so they are shorter, clearer, and also support passing random as the element's color or angle data-attribute.
opened by TalAter 2