Content
![Cards skin 36 skin cards](https://e-addons.com/wp-content/uploads/2021/07/skin_cards.png)
Cards skin consists of items distributed on a space of X / Y coordinates absolute.
The system is based on css3 transform.
Random
Circular
Circular Orientation
Grid
Row
Sinusoide
Cards Options
Item Width [responsive]:
- The width of the blocks, which affects the distribution of the items in it.
Viewport [responsive]:
- The height of the viewport (if empty, it will be like the height of the screen)
- The size (scale) of the composition
- The vertical position of the composition (Y), which may be better in some cases.
![Cards skin 43 skin cards 1](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_1.png)
![Cards skin 44 skin cards distributions](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distributions.png)
Distributions
There are some parameters to show the distribution for each method:
- Scale of Card
- Circle Radius for Circle and Sinusoide
- Columns and Row Spaces for Grid, Rows and Sinusoide
PLEASE NOTE
The elements are distributed absolutely in the viewport.
Random
![Cards skin 45 skin cards distribution random](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-random.png)
Grid
![Cards skin 46 skin cards distribution grid](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-grid.png)
Circular
![Cards skin 47 skin cards distribution circular](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-circular.png)
Circular Orientation
![Cards skin 48 skin cards distribution circularorientation](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-circularorientation.png)
Row
![Cards skin 49 skin cards distribution row](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-row.png)
Sinusoide
![Cards skin 50 skin cards distribution sinusoide](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_distribution-sinusoide.png)
Custom Coordinates
The magic of cards skin is in custom coordinates.
Through a transformation interface you can position each element as you want, distributing them in the viewport and navigate the elements!
![Cards skin 52 skin cards custom coordinates](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_custom-coordinates.png)
Don’t forget to save the coordinates after moving!
focused
While centering the element it is possible to define the values of the navigation tools (navigation arrows and the back-x), but above all the size of the element for mobile-first matters.
Scale
For mobile versions, you can size the focused element to control its alignment in the viewport.
Navigation elements such as the next / prev arrows can be offset for the x and y axes.
![Cards skin 53 skin cards focused](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_focused.png)
![Cards skin 54 skin cards focused arrows](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_focused-arrows-768x869.png)
Arrows & Circle Style
Popup for total control of the graphic style:
- Color/hover
- Background
- Border
- Radius
- Shadow
Close button Style
Also for closing control:
- Color/hover
- Background
- Border
- Radius
- Shadow
![Cards skin 55 skin cards focused close](https://e-addons.com/wp-content/uploads/2021/05/skin_cards_focused-close.png)
DEMO
Cards
Circular Orientation Distribution
Basic example