├── README.md └── examples ├── backgroundsAndBorders ├── 1currentColor │ ├── index.html │ └── style.css ├── 2currentColor │ ├── index.html │ └── style.css ├── bgposition │ ├── bear.svg │ ├── index.html │ └── style.css ├── bgposition02 │ ├── index.html │ ├── style.css │ └── svg │ │ ├── bear.svg │ │ ├── boar.svg │ │ └── wolf.svg ├── diagonalStripes │ ├── index.html │ └── style.css ├── horizontalStripes │ ├── index.html │ └── style.css ├── someBorders │ ├── index.html │ └── style.css ├── translucentBorder │ ├── bg.jpg │ ├── index.html │ └── style.css ├── verticalAndHorizontalStripes │ ├── index.html │ └── style.css └── verticalStripes │ ├── index.html │ └── style.css ├── figures ├── bevelCorners │ ├── index.html │ └── style.css ├── diamond │ ├── images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.png │ ├── index.html │ └── styles.css ├── dimondImageWithRotate │ ├── 1.jpg │ ├── index.html │ └── style.css ├── parallelograms │ ├── index.html │ └── style.css ├── piechart │ ├── index.html │ └── style.css └── trapezoid │ ├── index.html │ └── style.css └── visual effects ├── background-blend-mode ├── index.html ├── style.css └── us-tiger.jpg ├── comparing images ├── after.jpg ├── before.jpg ├── index.html └── styles.css ├── comparingImagesWithJS ├── after.jpg ├── app.js ├── before.jpg ├── index.html └── style.css ├── filters ├── index.html ├── style.css └── us-tiger.jpg └── panorama ├── gamburg.jpg ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Недокументированные приемы CSS 2 | 3 | ###### Материалы из презентации, которые вы можете пощупать, а также ссылки, которые использовались для подготовки доклада. 4 | 5 | [Сссылка на презентацию](https://drive.google.com/open?id=0Bz4hP4wEfOnKMDI2X2JqMDQ2LTA) 6 | 7 | [Сссылка на книгу "Secrets CSS"](http://shop.oreilly.com/product/0636920031123.do) 8 | 9 | [Сссылка на обои, реализованных с помощью градиентов](http://lea.verou.me/css3patterns/) 10 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/1currentColor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | currentColor: border and outline 6 | 7 | 8 | 9 |
10 | Hello Border 11 |
12 |
13 | Hello Outline 14 |
15 | 16 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/1currentColor/style.css: -------------------------------------------------------------------------------- 1 | /* styling */ 2 | body { 3 | font-family: sans-serif; 4 | font-size: 20px ; 5 | padding: 100px; 6 | font-weight: bold; 7 | } 8 | 9 | div { 10 | display: inline-block; 11 | padding: 20px 40px; 12 | margin-right: 20px; 13 | } 14 | 15 | /* styling */ 16 | 17 | .border { 18 | color: #58a; 19 | border: 5px solid; 20 | } 21 | 22 | .outline { 23 | color: #58a; 24 | outline: 5px solid; 25 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/2currentColor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | currentColor: box-shadow and text shadow 6 | 7 | 8 | 9 |
Hello world
10 |
Hello world
11 |
Hello world
12 |
Hello world
13 |
Hello world
14 | 15 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/2currentColor/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 100px 3 | } 4 | /* styling */ 5 | div { 6 | display: inline-block; 7 | margin: 60px; 8 | padding: 15px; 9 | /* styling */ 10 | 11 | color: yellowgreen; 12 | background-color: #333; 13 | box-shadow: 0 0 10px 5px; 14 | text-shadow: 0 0 5px; 15 | } 16 | 17 | .red { 18 | color: red; 19 | } 20 | 21 | .blue { 22 | color: blue; 23 | } 24 | 25 | .yellow { 26 | color: yellow; 27 | } 28 | 29 | .lightpink { 30 | color: lightpink 31 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition/bear.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bg-position 6 | 7 | 8 | 9 |
Bear
10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: url("bear.svg") no-repeat; 3 | background-position: right 10px top 0px; 4 | padding: 10px; 5 | background-color: #58a; 6 | background-size: 2.5em 2.5em; 7 | 8 | /* Styling */ 9 | font-size: 30px; 10 | font-family: sans-serif; 11 | max-width: 10em; 12 | min-height: 6em; 13 | color: white; 14 | margin: 100px; 15 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | some images on background 6 | 7 | 8 | 9 |
Animals
10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition02/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: url(./svg/bear.svg) no-repeat bottom 5px right 15px, 3 | url(./svg/boar.svg) no-repeat bottom 5px left 15px, 4 | url(./svg/wolf.svg) no-repeat top 5px right 15px; 5 | background-size: 2em 2em; 6 | background-color: #58a; 7 | /* Styling */ 8 | font-size: 30px; 9 | font-family: sans-serif; 10 | max-width: 10em; 11 | min-height: 6em; 12 | color: white; 13 | margin: 100px; 14 | padding: 20px 15 | 16 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition02/svg/bear.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition02/svg/boar.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/bgposition02/svg/wolf.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/diagonalStripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Diagonal Stripes 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/diagonalStripes/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: repeating-linear-gradient(45deg, 3 | #fb3 0, #fb3 15px, 4 | #58a 0, #58a 30px); 5 | background-size: 42px 42px; 6 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/horizontalStripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Horizontal stripes 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/horizontalStripes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(#fb3 50%, #58a 0); 3 | -webkit-background-size: 100% 30px; 4 | background-size: 100% 30px; 5 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/someBorders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | some borders 6 | 7 | 8 | 9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/someBorders/style.css: -------------------------------------------------------------------------------- 1 | /* styling */ 2 | div{ 3 | width: 400px; 4 | height: 250px; 5 | margin: auto; 6 | margin-top: 50px; 7 | } 8 | /* styling */ 9 | 10 | .border-and-outline{ 11 | background: yellowgreen; 12 | border: 40px solid #655; 13 | outline: deeppink solid 15px; 14 | } 15 | 16 | .box-shadow{ 17 | margin-top: 100px; 18 | /* styling */ 19 | 20 | background: yellowgreen; 21 | box-shadow: 0 0 0 40px #655, 22 | 0 0 0 55px deeppink, 23 | 0 2px 5px 55px rgba(0,0,0,.6); 24 | } 25 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/translucentBorder/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/backgroundsAndBorders/translucentBorder/bg.jpg -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/translucentBorder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | translucentBorder 6 | 7 | 8 | 9 |
10 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio recusandae a quisquam quidem ipsa
11 |
12 | 13 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/translucentBorder/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | font-family: sans-serif; 4 | line-height: 1.5; 5 | } 6 | /* styling */ 7 | 8 | .background { 9 | margin: auto; 10 | margin-top: 100px; 11 | height: 300px; 12 | width: 800px; 13 | background-size: cover; 14 | background-position: center center; 15 | background-image: url('./bg.jpg'); 16 | padding-top: 100px; 17 | } 18 | 19 | .block{ 20 | padding: 40px; 21 | width: 400px; 22 | margin: auto; 23 | /* styling */ 24 | 25 | background-color: white; 26 | border: 20px solid hsla(0,0%,100%,.5); 27 | background-clip: padding-box 28 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/verticalAndHorizontalStripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vertical and horizontal stripes 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/verticalAndHorizontalStripes/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: linear-gradient(rgba(255, 0, 0, .5) 15px, transparent 0), 3 | linear-gradient(to right,rgba(255, 0, 0, 0.5) 15px, transparent 0); 4 | background-size: 30px 30px; 5 | } -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/verticalStripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vertical stripes 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/backgroundsAndBorders/verticalStripes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(to right ,#fb3 50%, #58a 0); 3 | -webkit-background-size: 30px 100%; 4 | background-size: 30px 100%; 5 | } -------------------------------------------------------------------------------- /examples/figures/bevelCorners/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bevel Corners 6 | 7 | 8 | 9 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, eveniet.
10 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, eveniet.
11 | 12 | -------------------------------------------------------------------------------- /examples/figures/bevelCorners/style.css: -------------------------------------------------------------------------------- 1 | .bevel1 { 2 | background: #58a; 3 | background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 4 | linear-gradient(-135deg, transparent 15px, #58a 0) top right, 5 | linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 6 | linear-gradient(45deg, transparent 15px, #58a 0) bottom left; 7 | background-size: 50% 50%; 8 | background-repeat: no-repeat; 9 | 10 | padding: 1em 1em; 11 | max-width: 12em; 12 | color: white; 13 | font: 150%/1.6 Baskerville, Palatino, serif; 14 | margin: 50px; 15 | } 16 | 17 | .bevel2 { 18 | background: #58a; 19 | background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 20 | radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 21 | radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 22 | radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; 23 | background-size: 50% 50%; 24 | background-repeat: no-repeat; 25 | 26 | padding: 1em 1em; 27 | max-width: 12em; 28 | color: white; 29 | font: 150%/1.6 Baskerville, Palatino, serif; 30 | margin: 50px; 31 | } -------------------------------------------------------------------------------- /examples/figures/diamond/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/figures/diamond/images/1.jpg -------------------------------------------------------------------------------- /examples/figures/diamond/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/figures/diamond/images/2.jpg -------------------------------------------------------------------------------- /examples/figures/diamond/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/figures/diamond/images/3.png -------------------------------------------------------------------------------- /examples/figures/diamond/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | diamond 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/figures/diamond/styles.css: -------------------------------------------------------------------------------- 1 | img { 2 | display: block; 3 | max-width: 250px; 4 | clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 5 | transition: all 1s; 6 | margin: auto; 7 | margin-top: 20px; 8 | } 9 | 10 | img:hover { 11 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 12 | } -------------------------------------------------------------------------------- /examples/figures/dimondImageWithRotate/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/figures/dimondImageWithRotate/1.jpg -------------------------------------------------------------------------------- /examples/figures/dimondImageWithRotate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dimond image 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /examples/figures/dimondImageWithRotate/style.css: -------------------------------------------------------------------------------- 1 | .diamond { 2 | width: 250px; 3 | height: 250px; 4 | transform: rotate(45deg); 5 | overflow: hidden; 6 | margin: 100px; 7 | } 8 | .diamond img { 9 | max-width: 100%; 10 | transform: rotate(-45deg) scale(1.42); 11 | z-index: -1; 12 | position: relative; 13 | } -------------------------------------------------------------------------------- /examples/figures/parallelograms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | parallelograms 6 | 7 | 8 | 9 |
Click
10 | 11 | -------------------------------------------------------------------------------- /examples/figures/parallelograms/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | position: relative; 3 | background: transparent; 4 | display: inline-block; 5 | font-family: sans-serif; 6 | font-size: 50px; 7 | color: #FFF; 8 | text-align: center; 9 | vertical-align: middle; 10 | padding: 10px 90px; 11 | margin: 50px; 12 | } 13 | 14 | .button::before { 15 | content: ''; 16 | position: absolute; 17 | top: 0; right: 0; bottom: 0; left: 0; 18 | z-index: -1; 19 | background: #58a; 20 | transform: skew(-45deg); 21 | } -------------------------------------------------------------------------------- /examples/figures/piechart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pie Charts 6 | 7 | 8 | 9 |
10 | 11 |
12 |
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /examples/figures/piechart/style.css: -------------------------------------------------------------------------------- 1 | .pie { 2 | width: 200px; height: 200px; 3 | border-radius: 50%; 4 | background: yellowgreen; 5 | background-image: linear-gradient(to right, transparent 50%, #655 0); 6 | position: relative; 7 | 8 | margin: 20px; 9 | } 10 | 11 | .pie::before { 12 | content: ''; 13 | display: block; 14 | margin-left: 50%; 15 | height: 100%; 16 | border-radius: 0 100% 100% 0 / 50%; 17 | background-color: inherit; 18 | transform-origin: left; 19 | animation: spin 10s linear infinite, bg 20s step-end infinite; 20 | } 21 | 22 | @keyframes spin { 23 | to { transform: rotate(.5turn); } 24 | } 25 | 26 | @keyframes bg { 27 | 50% { background: #655; } 28 | } 29 | 30 | .timeline::after { 31 | position: absolute; 32 | content: ''; 33 | width: 90%; 34 | height: 90%; 35 | border-radius: 50%; 36 | background-color: #fff; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | z-index: 3; 41 | } 42 | -------------------------------------------------------------------------------- /examples/figures/trapezoid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Trapezoid 6 | 7 | 8 | 9 |
Transform
10 | 11 | -------------------------------------------------------------------------------- /examples/figures/trapezoid/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | display: inline-block; 3 | position: relative; 4 | color: white; 5 | font-family: sans-serif; 6 | font-size: 40px; 7 | padding: 10px 40px; 8 | margin: 100px; 9 | } 10 | 11 | div::before{ 12 | background-color: #58a; 13 | content: ''; 14 | position: absolute; 15 | top: 0; 16 | bottom: 0; 17 | left: 0; 18 | right: 0; 19 | z-index: -1; 20 | transform: perspective(.4em) rotateX(5deg) 21 | } -------------------------------------------------------------------------------- /examples/visual effects/background-blend-mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background blend mode 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /examples/visual effects/background-blend-mode/style.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-around; 5 | flex-wrap: wrap; 6 | } 7 | 8 | .tinted-image { 9 | width: 600px; 10 | height: 400px; 11 | background-size: cover; 12 | 13 | background-image: url('us-tiger.jpg'); 14 | transition: .5s all; 15 | } 16 | 17 | .tinted-image:hover { 18 | background-color: transparent; 19 | } 20 | 21 | .color-1 { 22 | background-color: hsl(355, 100%, 50%); 23 | background-blend-mode: difference; 24 | } 25 | 26 | .color-2 { 27 | background-color: hsl(355, 100%, 50%); 28 | background-blend-mode: luminosity; 29 | } 30 | 31 | .color-3 { 32 | background-color: yellow; 33 | background-blend-mode: difference; 34 | } 35 | 36 | .color-4 { 37 | background-color: yellow; 38 | background-blend-mode: luminosity; 39 | } 40 | 41 | .color-5 { 42 | background-color: blue; 43 | background-blend-mode: difference; 44 | } 45 | 46 | .color-6 { 47 | background-color: blue; 48 | background-blend-mode: luminosity; 49 | } 50 | -------------------------------------------------------------------------------- /examples/visual effects/background-blend-mode/us-tiger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/background-blend-mode/us-tiger.jpg -------------------------------------------------------------------------------- /examples/visual effects/comparing images/after.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/comparing images/after.jpg -------------------------------------------------------------------------------- /examples/visual effects/comparing images/before.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/comparing images/before.jpg -------------------------------------------------------------------------------- /examples/visual effects/comparing images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |
11 | Before 12 |
13 | After 14 |
15 | 16 | -------------------------------------------------------------------------------- /examples/visual effects/comparing images/styles.css: -------------------------------------------------------------------------------- 1 | .image-slider { 2 | position:relative; 3 | display: inline-block; 4 | 5 | max-height: 600px; 6 | } 7 | 8 | .image-slider > div { 9 | position: absolute; 10 | top: 0; bottom: 0; left: 0; 11 | width: 10%; 12 | max-width: 100%; 13 | overflow: hidden; 14 | resize: horizontal; 15 | } 16 | 17 | .image-slider > div::before { 18 | content: ''; 19 | position: absolute; 20 | right: 0; bottom: 0; 21 | width: 20px; height: 20px; 22 | padding: 5px; 23 | background: linear-gradient(-45deg, white 50%, transparent 0); 24 | 25 | background-clip: content-box; 26 | cursor: ew-resize; 27 | -webkit-filter: drop-shadow(0 0 2px black); 28 | filter: drop-shadow(0 0 2px black); 29 | } -------------------------------------------------------------------------------- /examples/visual effects/comparingImagesWithJS/after.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/comparingImagesWithJS/after.jpg -------------------------------------------------------------------------------- /examples/visual effects/comparingImagesWithJS/app.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll('.image-slider').forEach( slider => { 2 | const div = slider.querySelector('div'); 3 | const img = slider.querySelector('img'); 4 | 5 | const range = slider.querySelector('input'); 6 | range.type = 'range'; 7 | 8 | range.oninput = e => { 9 | div.style.width = e.target.value + '%'; 10 | } 11 | }); -------------------------------------------------------------------------------- /examples/visual effects/comparingImagesWithJS/before.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/comparingImagesWithJS/before.jpg -------------------------------------------------------------------------------- /examples/visual effects/comparingImagesWithJS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |
11 | Before 12 |
13 | After 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/visual effects/comparingImagesWithJS/style.css: -------------------------------------------------------------------------------- 1 | img{ 2 | max-height: 400px 3 | } 4 | 5 | .image-slider { 6 | position:relative; 7 | display: inline-block; 8 | 9 | height: 400px; 10 | } 11 | .image-slider > div { 12 | position: absolute; 13 | top: 0; bottom: 0; left: 0; 14 | width: 50%; 15 | max-width: 100%; 16 | overflow: hidden; 17 | resize: horizontal; 18 | } 19 | 20 | .image-slider input { 21 | position: absolute; 22 | left: 0; 23 | bottom: 10px; 24 | width: 100%; 25 | margin: 0; 26 | bottom: 30px; 27 | 28 | 29 | -webkit-appearance: none; 30 | background-color: #bdc3c7; 31 | height: 5px; 32 | border-radius: 5px; 33 | outline: 0; 34 | } 35 | 36 | input[type="range"]::-webkit-slider-thumb { 37 | -webkit-appearance: none; 38 | background-color: #e74c3c; 39 | width: 30px; 40 | height: 30px; 41 | border-radius: 50%; 42 | border: 2px solid white; 43 | cursor: pointer; 44 | transition: .3s ease-in-out; 45 | } 46 | 47 | input[type="range"]::-webkit-slider-thumb:hover { 48 | background-color: white; 49 | border: 2px solid #e74c3c; 50 | } 51 | input[type="range"]::-webkit-slider-thumb:active { 52 | transform: scale(1.6); 53 | } -------------------------------------------------------------------------------- /examples/visual effects/filters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | background blend mode 6 | 7 | 8 | 9 |
10 | 11 | -------------------------------------------------------------------------------- /examples/visual effects/filters/style.css: -------------------------------------------------------------------------------- 1 | .tinted-image { 2 | width: 600px; 3 | height: 400px; 4 | background-size: cover; 5 | 6 | background-image: url('us-tiger.jpg'); 7 | filter: sepia() saturate(4) hue-rotate(25deg); 8 | transition: .5s all; 9 | } 10 | .tinted-image:hover { 11 | filter: none; 12 | } -------------------------------------------------------------------------------- /examples/visual effects/filters/us-tiger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/filters/us-tiger.jpg -------------------------------------------------------------------------------- /examples/visual effects/panorama/gamburg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitryGrigorov/undocumented-tricks-css/e6c05124683d89f75ced5c5160179eb0e853bc6f/examples/visual effects/panorama/gamburg.jpg -------------------------------------------------------------------------------- /examples/visual effects/panorama/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | panorama 6 | 7 | 8 | 9 |
10 | 11 | -------------------------------------------------------------------------------- /examples/visual effects/panorama/style.css: -------------------------------------------------------------------------------- 1 | .panorama{ 2 | width: 300px; 3 | height: 300px; 4 | background: url('gamburg.jpg'); 5 | background-size: auto 100%; 6 | animation: panorama 5s linear infinite alternate; 7 | animation-play-state: paused; 8 | border-radius: 50%; 9 | 10 | margin-left: 200px; 11 | } 12 | 13 | .panorama:hover, .panorama:focus{ 14 | animation-play-state: running; 15 | } 16 | 17 | @keyframes panorama{ 18 | to{ 19 | background-position: 100% 0; 20 | } 21 | } --------------------------------------------------------------------------------