e-addons

Share

ic Creative bwe-Creative

Cards skin

This skin is a creative experiment. You won’t find anything else around! We wanted a truly unique solution for navigating arrays of items.

Like some playing cards dealt on the table. Click one and it pops up in the center related visually with the rest of the cards.

Show your posts, terms, users in a truly unique way, great for a creative portfolio.

Content

skin cards

Cards skin consists of items distributed on a space of X / Y coordinates absolute.
The system is based on css3 transform.

random

Random

circular

Circular

circular orientation

Circular Orientation

grid

Grid

row

Row

sinusoide

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.
skin cards 1
skin cards distributions

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
skin cards distribution random
Grid
skin cards distribution grid
Circular
skin cards distribution circular
Circular Orientation
skin cards distribution circularorientation
Row
skin cards distribution row
Sinusoide
skin cards distribution sinusoide
custom

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!

skin cards custom coordinates

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.

skin cards focused
skin cards focused arrows

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
skin cards focused close

see all skins

Gallery Grid Rombs
eaddons skin grid query views
e-addons skin carousel query views
e-addons Skin Dual-Slider query views
e-addons Skin Timeline query views
e-addons Skin Justified Grid media query
e-addons skin table
QueryViews cards
scroll Horizzontal
QueryViews accordion
acf MapLocator
skin simple list