CSS scripts are very cool for styling and animating html DOM ojbect. you can apply the same style to multiple elements, to create awesome web pages. however applying these styles to multiple objects has no way to apply object specific values without creating another CSS class.
-----------------------------------------------------------
.style1{
width : 100%;
}
/*creating another class for another object to change one property*/
.style2{
width : 50%;
}
-----------------------------------------------------------
LESS and SASS (css pre-processors) tried to solve the problem by creating varibles, inheritance and other pre-processor code optimizations, but the final result is a statically typed css script added to the web page.
creating element specific value inside css is simply impossible as it is one way only (selected elements are affected by properties inside the class). but you cannot generate value specefic for each element.
If we want to create element specific values. we ways like:
before going to code. it is to be noted that jquery can produce css values for selected elements.but it is hard and need to be managed and that what is done by Dynamic-CSS.
Applying css properties to elements with jquery
-----------------------------------------------------------
$('#container').children().filter('div').css(
{
transform : 'translate(0%,0%) scale(.5,.5)',
transition : 'all .5s .1s linear'
});
-----------------------------------------------------------
This is a simple query whitch apply some static values to all selected elements.
now to make this property dynamic we will replace the following
1- .css ----> .dcss /*dynamic css function*/
transition : 'all .1s <delay>s linear'
replace ".1" value with <delay> dynamic value to be replaced by the plugin .
2- .dcss accepts 2 params so we will add another param which define the value of the <delay>
{ delay : .1 }
Final Code :
-----------------------------------------------------------
-----------------------------------------------------------
now the plugin will read the value of delay and apply it to all occurrence of <delay> in provided css properties .so value delay is just like a variable used inside dcss function.
-----------------------------------------------------------
.style1{
width : 100%;
}
/*creating another class for another object to change one property*/
.style2{
width : 50%;
}
-----------------------------------------------------------
LESS and SASS (css pre-processors) tried to solve the problem by creating varibles, inheritance and other pre-processor code optimizations, but the final result is a statically typed css script added to the web page.
Problem
creating element specific value inside css is simply impossible as it is one way only (selected elements are affected by properties inside the class). but you cannot generate value specefic for each element.
Ways to Solve
If we want to create element specific values. we ways like:
- create multiple css classes.
- apply inline styles to element's style attribute.
- use java script to change style properties.
- use jquery to apply styles to target elements.
But.... .
- creating multiple css classes is quite with small number of variants, but with more than 10,20 .... elements , you will sink in classes that have the same function :( :( .
- inline styles are quite for only one object that differ from other object. and also you have lost the power of selectors.
- javascript itself will be hard to deal with selectors and writing prefixes for every browser.
- jquery in my opinion is the most benificial tool for this job.It has built is selector system and also it is javascript library so you are in computational media to deal with elements so elements can affect css style values ,style can affect element layout and also it has a .css property that is cross browser so also removes the headache of prefixes.
Dynamic-CSS plugin
before going to code. it is to be noted that jquery can produce css values for selected elements.but it is hard and need to be managed and that what is done by Dynamic-CSS.
Download and Install
- create new project or new file in you ide
- add index.html
- download jquery
- include script in index.html
- download the plugin
- include in index.html
- add new empty <script>
- add some html elements and css styles.
The index.html file may be a thing like index.html in download packages.
Begin with dynamic-CSS
Applying css properties to elements with jquery
-----------------------------------------------------------
$('#container').children().filter('div').css(
{
transform : 'translate(0%,0%) scale(.5,.5)',
transition : 'all .5s .1s linear'
});
-----------------------------------------------------------
This is a simple query whitch apply some static values to all selected elements.
now to make this property dynamic we will replace the following
1- .css ----> .dcss /*dynamic css function*/
transition : 'all .1s <delay>s linear'
replace ".1" value with <delay> dynamic value to be replaced by the plugin .
2- .dcss accepts 2 params so we will add another param which define the value of the <delay>
{ delay : .1 }
Final Code :
-----------------------------------------------------------
$('#container').children().filter('div').dcss(
{
transform : 'translate(0%,0%) scale(.5,.5)',
transition : 'all .5s <delay>s linear'
},
{
delay : .1
});
-----------------------------------------------------------
now the plugin will read the value of delay and apply it to all occurrence of <delay> in provided css properties .so value delay is just like a variable used inside dcss function.
No comments:
Post a Comment