CodeVoyager

CSS Visual Effects

Edit Page

from etaktiker

CSS Visual Effects

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

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

WooW!

Layered Paper / Stack of cards

Drop Shadows

Smooth Shadow Generator

CSS Box Shadows Effects Stunning CSS box-shadow CSS Responsive Box Shadow Different CSS3 Box Shadows Effects | CSSDeck Page Curl Box Shadow | CSSDeck Change on hover: Material Design Box Shadows

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


/* 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 21. Dec 2016 | modified 29. Dec 2023
filename: Design & Content - CSS Visual Effects
Article Content