Skip to content

Commit fde7f73

Browse files
captainbrossetcaptainbrosset
committed
nature layouts demo
1 parent c8c47a4 commit fde7f73

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+557
-706
lines changed

‎css-masonry/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ To try the demos, first enable Masonry:
2525

2626
<img alt="Screenshot of the demo page." src="./nyc/screenshot.png" width="300">
2727

28-
* [Plants](https://microsoftedge.github.io/Demos/css-masonry/plants.html)
28+
* [Nature photos with multiple layouts](https://microsoftedge.github.io/Demos/css-masonry/nature.html)
2929

30-
<img alt="Screenshot of the demo page." src="./plants/screenshot.png" width="300">
30+
<img alt="Screenshot of the demo page." src="./nature/screenshot.png" width="300">
3131

3232
* [News site: The Daily Oddity](https://microsoftedge.github.io/Demos/css-masonry/the-daily-oddity.html)
3333

‎css-masonry/blog.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,9 @@
3737
padding-inline-start: 1rem;
3838
}
3939

40-
nav a {
41-
display: inline-block;
42-
}
43-
4440
nav img {
4541
width: 108px;
42+
vertical-align: middle;
4643
}
4744

4845
main {

‎css-masonry/cars.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Cars</title>
8+
<style>
9+
:root {
10+
--traffic-density: 20px;
11+
}
12+
13+
html,
14+
body {
15+
height: 100%;
16+
margin: 0;
17+
overflow: hidden;
18+
}
19+
20+
body {
21+
background: url(cars/grass.jpg);
22+
font-family: system-ui;
23+
}
24+
25+
label {
26+
position: absolute;
27+
top: 10px;
28+
left: 10px;
29+
display: flex;
30+
align-items: baseline;
31+
background: #fff5;
32+
padding: 5px;
33+
gap: 5px;
34+
}
35+
36+
label input {
37+
margin: 0;
38+
}
39+
40+
.road {
41+
display: masonry;
42+
item-tolerance: 0;
43+
grid-template-columns: repeat(5, 50px);
44+
gap: var(--traffic-density) 20px;
45+
width: 341px;
46+
height: 100%;
47+
overflow-y: hidden;
48+
overflow-x: hidden;
49+
margin: 0 auto;
50+
background-color: #ddd;
51+
background-image: linear-gradient(to right, #ddd 0 67px, transparent 0), linear-gradient(to bottom, #ffffff 0 50px, transparent 50px 100px);
52+
background-size: 70px 100%, 3px 100px;
53+
background-position: -5px 0, 70px 0;
54+
background-attachment: local, fixed;
55+
padding-block: 20px;
56+
box-sizing: border-box;
57+
box-shadow: 0 0 0 3px white, 0 0 0 40px #ddd, 0 0 0 45px #666;
58+
counter-set: car 0;
59+
padding-inline: 3px;
60+
}
61+
62+
.car {
63+
counter-increment: car;
64+
position: relative;
65+
}
66+
67+
:has(#show-outline:checked) .road .car {
68+
outline: 2px dashed #a7a7a7;
69+
outline-offset: 1px;
70+
}
71+
72+
:has(#show-outline:checked) .road .car::before {
73+
content: counter(car);
74+
position: absolute;
75+
background: white;
76+
padding: 0 5px;
77+
z-index: 1;
78+
}
79+
80+
/* .car:nth-child(2n) {
81+
margin-block-start: 100px;
82+
}
83+
84+
.car:nth-child(5n) {
85+
margin-block-end: 50px;
86+
} */
87+
88+
.car img {
89+
width: 100%;
90+
mix-blend-mode: multiply;
91+
}
92+
</style>
93+
</head>
94+
95+
<body>
96+
<label>Show outline <input type="checkbox" id="show-outline"></label>
97+
<main class="road">
98+
<div class="car"><img src="cars/car1.png"></div>
99+
<div class="car"><img src="cars/car5.png"></div>
100+
<div class="car"><img src="cars/car2.png"></div>
101+
<div class="car"><img src="cars/car5.png"></div>
102+
<div class="car"><img src="cars/car3.png"></div>
103+
<div class="car"><img src="cars/car2.png"></div>
104+
<div class="car"><img src="cars/car3.png"></div>
105+
<div class="car"><img src="cars/car4.png"></div>
106+
<div class="car"><img src="cars/car2.png"></div>
107+
<div class="car"><img src="cars/car5.png"></div>
108+
<div class="car"><img src="cars/car3.png"></div>
109+
<div class="car"><img src="cars/car5.png"></div>
110+
<div class="car"><img src="cars/car1.png"></div>
111+
<div class="car"><img src="cars/car4.png"></div>
112+
<div class="car"><img src="cars/car3.png"></div>
113+
<div class="car"><img src="cars/car2.png"></div>
114+
<div class="car"><img src="cars/car2.png"></div>
115+
<div class="car"><img src="cars/car2.png"></div>
116+
<div class="car"><img src="cars/car3.png"></div>
117+
<div class="car"><img src="cars/car4.png"></div>
118+
<div class="car"><img src="cars/car5.png"></div>
119+
<div class="car"><img src="cars/car3.png"></div>
120+
<div class="car"><img src="cars/car1.png"></div>
121+
<div class="car"><img src="cars/car2.png"></div>
122+
<div class="car"><img src="cars/car2.png"></div>
123+
<div class="car"><img src="cars/car3.png"></div>
124+
<div class="car"><img src="cars/car1.png"></div>
125+
<div class="car"><img src="cars/car2.png"></div>
126+
<div class="car"><img src="cars/car3.png"></div>
127+
<div class="car"><img src="cars/car4.png"></div>
128+
<div class="car"><img src="cars/car5.png"></div>
129+
<div class="car"><img src="cars/car3.png"></div>
130+
<div class="car"><img src="cars/car3.png"></div>
131+
<div class="car"><img src="cars/car2.png"></div>
132+
<div class="car"><img src="cars/car2.png"></div>
133+
<div class="car"><img src="cars/car3.png"></div>
134+
<div class="car"><img src="cars/car4.png"></div>
135+
<div class="car"><img src="cars/car1.png"></div>
136+
<div class="car"><img src="cars/car5.png"></div>
137+
<div class="car"><img src="cars/car2.png"></div>
138+
<div class="car"><img src="cars/car5.png"></div>
139+
<div class="car"><img src="cars/car3.png"></div>
140+
<div class="car"><img src="cars/car2.png"></div>
141+
<div class="car"><img src="cars/car3.png"></div>
142+
<div class="car"><img src="cars/car4.png"></div>
143+
<div class="car"><img src="cars/car2.png"></div>
144+
<div class="car"><img src="cars/car5.png"></div>
145+
<div class="car"><img src="cars/car3.png"></div>
146+
<div class="car"><img src="cars/car5.png"></div>
147+
<div class="car"><img src="cars/car1.png"></div>
148+
<div class="car"><img src="cars/car4.png"></div>
149+
<div class="car"><img src="cars/car3.png"></div>
150+
<div class="car"><img src="cars/car2.png"></div>
151+
<div class="car"><img src="cars/car2.png"></div>
152+
<div class="car"><img src="cars/car2.png"></div>
153+
<div class="car"><img src="cars/car3.png"></div>
154+
<div class="car"><img src="cars/car4.png"></div>
155+
<div class="car"><img src="cars/car5.png"></div>
156+
<div class="car"><img src="cars/car3.png"></div>
157+
<div class="car"><img src="cars/car1.png"></div>
158+
<div class="car"><img src="cars/car2.png"></div>
159+
<div class="car"><img src="cars/car2.png"></div>
160+
</main>
161+
</body>
162+
163+
</html>

‎css-masonry/cars/car1.png

51.1 KB
Loading

‎css-masonry/cars/car2.png

61.8 KB
Loading

‎css-masonry/cars/car3.png

53.2 KB
Loading

‎css-masonry/cars/car4.png

51.5 KB
Loading

‎css-masonry/cars/car5.png

62.1 KB
Loading

‎css-masonry/cars/grass.jpg

40.1 KB
Loading

0 commit comments

Comments
 (0)