JASE V 4.0
Loading...
JASE V 4.0

Jcss

CSS by javascript

Jcss is a JASE tool that makes it easier to design and create html elements.

Background gradient color

HOVER or TOUCH me

animated with multiple elements

HOVER or TOUCH me
HOVER or TOUCH me
HOVER or TOUCH me

with transparence

The magic behind this is a function called "gradiation" (yourelement.gradiation(OBJECT,BOOLEAN);)

gradiation expects an OBJECT as first argument (param). The second param is optional and defines if the background effect should be added to your element (default false), or if the generated css should be returned as a string (true).

So this


 
J('#rendergrad').gradiation({col: [['#00FF00',100,0],['#00FFFF',70,70],['#FFFFFF',0,100]],dir: 3});

results in this

My id is rendergrad

and this


 
J('#rendergradout').HTML(J('#rendergradout').gradiation({col: [['#00FF00',100,0],['#00FFFF',70,70],['#FFFFFF',0,100]],dir: 3},true));

results in this

The OBJECT expects 4 keys

  • "dir:" (Direction [NUMBER 1-5]) See direction demo below
  • "sir:" Optional only if dir is 5 for "Radius or Circle"(Radial position [NUMBER 1-5]) See direction demo below
  • "col:" [ARRAY] (Array of colorarray). Read more next under "COLORARRAY"
  • "text:" BOOLEAN] Default is false. Add this key with true (text:true) to use gradiation for text only and leave background as it is
The second argument [BOOLEAN true or false] is optional. If true or 1 the css for the gradiation will be returned but not added to your element.

COLORARRAY

A colorarray must have 3 elements
  • "element[0]" Color in HEX format. (e.g '#FF0000' for red)
  • "element[1]" Opacity [NUMBER 0 - 100]
  • "element[2]" Colorstop [NUMBER 0 - 100]
You can add as much of colorarrays into the object key "col" as long you nest them like this col:[COLORARRAYS]
col:['#FF0000',50,50],['#00FF00',100,50] Won't work
col:[['#FF0000',50,50],['#00FF00',100,50]] works

Direction demo

Please use the selectboxes below to change "dir" (Direction) and "sir" (Radial position). Selectbox for sir will only appear if dir is 5

Gradiantcolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

!NOTICE!

You can not use gradiaton for backround and text for the same element. If you need both, you have to add a new element for your text (PLUS color gradiation) into your element where you use the background gradiation.

Example

THIS IS MY TEXT

CODE


 
<div class="justbg" style="padding:50px;
">
<div class="textgradient">THIS IS MY TEXT</div>
</div>
<script type="text/javascript">
J('.justbg').gradiation({col: [['#00FF00',100,0],['#00FFFF',70,70],['#FFFFFF',0,100]],dir: 3});
J('.textgradient').gradiation({col: [['#FF0000',100,0],['#0000FF',70,70],['#CCCCCC',0,100]],dir: 3,text:true});
</script>
PLUS headlines (h1, h2, h3 etc.) could be prestyled by css framework like bootstrap. So gradiation take no effect on them. In this case you have to use gradiation for each of them

Without using gradiation for the h1 especially

I am a H2 Headline

THIS IS MY TEXT

With using gradiation for the h1

I am a H2 Headline

THIS IS MY TEXT

 
<div class="justbg" style="padding:50px;
">
<div class="textgradient"><h2 class="textgradient">I am a H2 Headline</h2>THIS IS MY TEXT</div>
</div>
<script type="text/javascript">
J('.justbg').gradiation({col: [['#00FF00',100,0],['#00FFFF',70,70],['#FFFFFF',0,100]],dir: 3});
J('.textgradient').gradiation({col: [['#FF0000',100,0],['#0000FF',70,70],['#CCCCCC',0,100]],dir: 3,text:true});
</script>
Don't you think about the fake class "textgradient". Thats only an easy way to call J('.textgradient') and use the appending function for all of them. You also could use an id and it will be "J('#myid').gradiation({col: [['#FF0000',100,0],['#0000FF',70,70],['#CCCCCC',0,100]],dir: 3,text:true});" or "document.getElementById('mytext').gradiation({col: [['#FF0000',100,0],['#0000FF',70,70],['#CCCCCC',0,100]],dir: 3,text:true});"

Browsersupport for gradiation

Almost all modern browsers support gradiation. But here's a list of my testings (2017)

Regular non mobile browsers

  • Microsoft Edge (40.15063.0.0 + all emulated Versions) YES
  • Microsoft IE (openend by Edge) All emulated Versions NO
  • Safari (Mac and Windows) YES
  • Chrome YES
  • Firefox YES
  • Opera YES

Mobile browsers

  • Microsoft Windows Phone IE (Just background) YES
  • Microsoft Windows Phone IE (text color) NO
  • Old android with default browser) (Just background) YES
  • Old android with chrome browser) (Just background) YES
  • Old android with default browser) (text color) NO
  • Old android with chrome browser) (text color) YES
  • Apple IPhone (Just background) YES
  • Apple IPhone (text color) YES

Animated gradiation

gradiationByPrz should be your choice

Demo of gradiationByPrz

HEADLINE (HOVER OR CLICK TEXT TO STARTOVER ANIMATION)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

CODE


 
<div class="gradanibg center">
<h1 class="myanigradtext">HEADLINE</h1>
<div class="myanigradtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<script type="text/javascript">
var gradcounter=0;
var anigrad1={col: [['#00FF00',100,0],['#0000FF',0,100]],dir: 5, sir:1};
var anigrad2={col: [['#0000FF',100,0],['#00FF00',0,100]],dir: 5, sir:1};
var an1=anigrad1;
 var an2=anigrad2;
function repeatGradAni(){
	if(gradcounter % 2 ===0){an1=anigrad1;
		 an2=anigrad2;
		}else{an2=anigrad1;
		 an1=anigrad2;
		}
	J('body').jmation({finish:function(){repeatGradAni();
			},animation:function(perc){
			    //SET BACKGROUND GRADIANT
			    J('.gradanibg').gradiationByPrz(an1,an2,perc);
			    //SET TEXT GRADIANT
			    J('.myanigradtext').gradiationByPrz(an2,an1,perc,true);
			}});
	gradcounter++;
	}
repeatGradAni();
</script>

How to

In this case i used jmation. But you may use onEnterFrame or any other interval that counts from 0 to 100 (as percentage) as well.
Plus i switched the two gradiation OBJECT's by each run for a smoother animation.

gradiationByPrz

Expects 4 params (arguments)
  • "Argument 1" gradiation OBJECT for color 1 (read under COLORARRAY and check the demo code)
  • "Argument 2" gradiation OBJECT for color 2 (read under COLORARRAY and check the demo code)
  • "Argument 3" percentage [NUMBER 0-100] 0 is color 1, 100 is color 2
  • "Argument 4" Optional [boolean] Default 0 or false. Set 1 or true if you need your gradiation for text

gradiationByPrz

is only an addon to gradiation. Don't try to use it for anything else than gradiation.

addRadius (hover or touch the two balls to start animation

Add's css style "border-radius:" to an element.
Hover or touch me
Useful in many ways
Useful in many ways
The animations are done by jmation addRadius just add's the border-radius. addRadius expects only one argument. (Radius [NUMBER]) To get a perfect ball, radius should be the same as elements width and height (both, width and height, should be the same for a ball) 

 
myelement.addRadius(200);
Add a radius of 200 to myelement.

Why addRadius instead simple css style?

If youre using only a few different radius styles simple css would be okay as well. But what about responsive design? If your elements dimensions change, your radius style class still keep it's values. By using addRadius you may react on resizing and just call addRadius again with the new calculated values. PLUS, addRadius is a lot quicker to design than create and using tons of css styles.

addShadow

Add shadows to your elements with this simple function.

Shadow arround me

Inset shadow arround me

Shadow on bottom

Inset shadow on top

Shadow on left bottom

Inset shadow on right top

HOVER or TOUCH me

TOUCH and HOLD HERE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

addShadow add a shadow to an element or text

CALL: element.addShadow(OBJECT);

OBJECT KEYS

  • "v:" [NUMBER] Google for css shadow about attribute v (vertical)
  • "h:" [NUMBER] Google for css shadow about attribute h (horizontal)
  • "blur:" [NUMBER] Google for css shadow about attribute blur (horizontal)
  • "text:" OPTIONAL [BOOLEAN] Default=false. Set this to true to add text shadow
  • "blurry:" OPTIONAL when text is true [BOOLEAN] Default=false. Text comes blurry
The anmations are no part of addShadow. I did this by jmation and addShadow

Please google for css shadow and text shadow to learn about Browsercompatibility

data-stayOntop

Set an element to a fixed position if windowscroll is heigher than original top.

Example and code

I will stay on top (70px)
Scroll to my position and see

 
<div  data-stayOntop="70" style="background-color:#FFFFFF;
 z-index:995959;
">I will stay on top (70px)<br />Scroll to my position and see</div>

addStyle

addStyle is a useful function to add or edit css classes during programming. 

 
addStyle('.mynewstyle{background-color:#FF0000;
	}');
than e.g. 

 
document.getElementById('mydiv').className='mynewstyle';

getStyle

getStyle is a useful function to get the current style attribute of an element. 

 
getStyle(myelement,'color');
returns the color of myelement (if setted)

newElement

newElement creates a new Element

create elements


 
var myelement=newElement();
creates a regular div into document.body 

 
var myelement=newElement();
var myelementinmyelement=newElement(myelement);
creates a regular div into document.body (myelement) and another on (myelementinmyelement) in myelement.
So perentNode of myelement is document.body and parentNode of myelementinmyelement is myelement. Both has the tagName div. No styles setted yet.
All different tagNames are possible. Just add the prefix as second parameter. 

 
var myelement=newElement(false,'a');
Creates an link element into document.body 

 
var myelementinmyelement=newElement(myelement,'a');
Creates an link element into myelement

Parameters

First is the elementObject [OBJECT OR BOOLEAN] where to create. Default is false and so document.body
Second is the prefix (tagName) [STRING OR BOOLEAN]. Default is false and so div.
Third is the id (if you want to add one) [STRING OR BOOLEAN]. Default is false and so no id tag will be setted.
Fourth is the position (after or before) [BOOLEAN]. Default is false and so after. On true it's before.

create element and add an id


 
var myelement=newElement(false,'li','myli');
will create this into document.body 

 
<li id="myli"></li>

create element and insert before


 
var myelement=newElement(false,'h3','headline',true);
will create this into document.body as very first element 

 
<h3 id="headline"></h3>
//than the already exiting stuff follows 

removeElement

removes Elements 

 
<h3 id="unneeded">I am an unneeded headline</h3>
<script>
removeElement(document.getElementById('unneeded'));
</script>

Apologize my english

That's not my native language. But the domain is american-webdesign.com. Im not american at all. But i almost have only clients from USA. So this domain usually contains demonstration of progress for client's projects. Now that i have a better solution for that, this domain came superfluous. But there is no domain with "Jase" available and i don't want to buy one for a free project. So this domain came back again for Jase.
But there's a contact form. Please use it for any questions. I will answer within 24 hours.

Questions or Job offers

Click to open contactform

Like or share this page