Effects

Effects

related: Unpublished\eTaktiker\UX - Resources & Inspiration.md

Incredible tool to design CSS effects, visually: EnjoyCSS: Online CSS3 Code Generator

Layered Paper / Stack of cards


How to Create CSS3 Paper Curls Without Images CSS Stacked Paper Effect CSS3 paper effects written with Sass and packaged with Bower CSS3 stitched containers written with Sass and packaged with Bower Pure CSS3 3D flips written with Sass and packaged with Bower CSS Box Shadows Effects Schminktipps und Tricks bei kaputtem Make-up


Learn CSS Layout #143: Using and Caching Third-Party JSON with WordPress | CSS-Tricks Stunning CSS box-shadow Saleduck - Company CHF 30 Ackermann Gutschein für die Schweiz ASOS Gutschein (20%) & Rabattcode Januar 2016 html - css only textured and ‘stitched’ ribbon - Stack Overflow C&A Gutschein :: Aktuell 10% Rabatt, Januar 2016 A1 Gutscheincode & Gutschein » Jan 2016 Walmart Promo Codes & Sales 2016 + 3% Cash Back (was 2%) | ShopAtHome.com html - css only textured and ‘stitched’ ribbon - Stack Overflow Hover.css - A collection of CSS3 powered hover effects


Shadows on list of shops:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/* Shadow effect */

ul.shop-list > li {
  position: relative;
  z-index: 1;
  border: 1px solid #dedede;
  background: #ffffff;
}

ul.shop-list > li > div {
  background: #ffffff;
  padding: 8px 8px 8px 8px;
}

ul.shop-list > li:before,
ul.shop-list > li:after
{
  position: absolute;
  z-index: -1;
  bottom: 10px;
  left: 10px;

  width: 70%;
  height: 55%;

  content: "";
  transform: skew(-15deg)rotate(-6deg);

  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

ul.shop-list > li:after
{
  right: 10px;
  left: auto;

  transform: skew(15deg)rotate(6deg);
}

/* different shadow on hover */

ul.shop-list > li:hover:before,
ul.shop-list > li:hover:after
{
  bottom: 4px;
  right: 5px;
  left: 5px;

  width: auto;
  height: 20px;

  transform: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 50% 50% / 0 0 7px 7px;
}

date 01. Jan 0001 | modified 28. May 2021
filename: Design & Content - Visual Effects