Beyond the pure CSS3, super like shadow effect recommended-shine. js, css3-shine.js

Beyond the pure CSS3, super like shadow effect recommended-shine. js, css3-shine.js

I have been busy with micro-course competitions some time ago. I have a few blog updates. Sorry, I have to take a while today.

1. Introduction

Previously, we used two articles, "recommended for pure CSS3 text effects" and "Best Practices for CSS3 stereo text", to introduce the use of CSS3 text-shaodwo for shadow and stereoscopic text effects, however, the pure css3 implementation method also has limitations. For example, when a large number of applications are used, the page loading speed will be slowed down, and the effect is not controllable. Today, we recommend a js plug-in to make up for these shortcomings, grand launch of shine. js.

You can take a look at this article Better than Pure CSS3 to learn how to use it, or go to the official website for details.

2. Use step a. Introduce the plug-in

<script src="path/to/shine.min.js"></script>

B. instantiate shine. js

// The default parameter is instantiated. my-shine-object is the element var shine = new Shine (document. getElementById ('My-shine-object') that needs to be shaded '));

We can also set parameters first and then instantiate the object.

var shine_config = new shinejs.Config({numSteps: 10,offset = 0.25,blur: 100,opacity: 0.5,shadowRGB: new shinejs.Color(255, 0, 0)});var shine = new Shine(document.getElementById("my-shine-object"), shine_config);

C. Shadow-related operations. We can set the shadow mouse to move the response.

window.addEventListener('mousemove', function(event) {  shine.light.position.x = event.clientX;  shine.light.position.y = event.clientY;  shine.draw();}, false);

3. For API details, refer to the official github homepage. A. Constructor

Shine(domElement, optConfig, optClassPrefix, optShadowProperty)

Parameter	Type	Description
DomElement	!HTMLElement	Elements of application shadow
OptConfig	?shinejs.Config=	The configuration object for storing the shadow parameter (Optional config instance) can be omitted. If omitted, the default parameter is passed.
OptClassPrefix	?string=	Add a prefix to all shadow objects. The default value is shine -.
OptShadowProperty	?string=	Optional property name that the shadow will be applied to. Overrides the automatic detection for use of eithertextShadowOrboxShadow. The value will be appliedelement.style[shadowProperty] = '...'And automatically prefixed for legacy browsers (e.g.MozBoxShadow).

B. Common Methods

Shine.prototype.draw()Shine.prototype.destroy()Shine.prototype.updateContent(optText)Shine.prototype.enableAutoUpdates()Shine.prototype.disableAutoUpdates()

C. Common attributes

Property	Type	Description
DomElement	HTMLElement	The DOM element to apply the shine effect.
Config	shinejs.Config	Stores all config parameters.
Light	shinejs.Light	Stores the light position and intensity.

Enjoy it.

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------

CSS3 shadow effect

Add the inset
-Webkit-box-shadow: 0px-2px 5px #000 inset;
-Moz-box-shadow: 0px-2px 5px #000 inset;
Box-shadow: 0px-2px 5px #000 inset;

Css3 box-shadow effect, as long as the left and right do not have up and down

It is impossible to either side, unless you write two divs.
The three values of box-shadow are the X axis offset, Y axis offset, and shadow radius.
You can write the Y axes of two divs to 0, write the X axis to a positive value, and write the negative value to the negative value.