-
Notifications
You must be signed in to change notification settings - Fork 2
/
CSS.css
executable file
·780 lines (653 loc) · 38.9 KB
/
CSS.css
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
/* CASCADING STYLE SHEET - Element Styling - by Beumsk */
/* To create a comment. Shown in code only. Indent 2 spaces */
.ADD-IN-HTML {
<link rel="stylesheet" type="text/css" href="CSS.css">
}
.PRIORITY {
/* By default, the later in the cascade, the more important the rule is */
<Browser default /* usually padding, fonts and sizes */
<User default /* usually sizes and fonts */
<@layer rule style /* @layer layerName { color: blue; } override any other layer */
<External and internal style sheets /* each selector gives 001, 010 or 100; the bigger the more important */
<elements and pseudo-elements /* p, p::first-line, p::before; 001 */
<class, attributes and pseudo-classes /* .class, a[title], a:hover; 010 */
<id /* #id; 100 */
<Inline style (inside an HTML element) /* should be avoided; for maintenance reasons */
<!important /* body { color: red !important; } Avoid! */
}
.BEM {
/* naming convention based on Block, Element and Modifiers */
.block-name {} /* .card */
.block-name__element-name {} /* .card__header */
.block-name--modifier-name {} /* .card--red */
.block-name__element-name--modifier-name {} /* .card__header--red */
}
.DECLARATION-ORDER {
>Positionning /* position, right, bottom... */
>Box-model /* display, float, width, height, padding, margin, border, overflow, clip, clear... */
>Text /* font, text-align, list-style, cursor... */
>Color /* color, background */
>Other /* opacity, visibility, transform, animation, transition... */
}
.VENDOR-PREFIX {
-o-prefix: opera;
-moz-prefix: mozilla;
-webkit-prefix: chrome, safari, android;
-ms-prefix: ie;
}
/* SELECTORS
========================================================================== */
.SELECT-HTML
* {} /* Selects all elements */
*, *:before, *:after {} /* better to reach really everything; for example, it is used broadly for box-sizing */
html {} /* Selects <html> element */
body {} /* Selects <body> element */
p {} /* Selects all <p> elements*/
div, p {} /* Selects all <div> elements and all <p> elements */
div p {} /* Selects all <p> elements inside <div> elements */
div > p {} /* Selects all <p> elements where the parent is a <div> element */
div + p {} /* Selects first <p> element that is placed immediately after <div> elements */
div ~ p {} /* Selects all <p> element that are placed after a <div> element */
.main {} /* Selects all elements with class="main" */
#main {} /* Selects the element with id="main" */
p.main {} /* Selects p elements with class="main" */
p * {} /* Selects everything in p */
/* Pseudo elements; style a certain part of an element */
p::first-line {} /* Selects first line of <p> */
p::first-letter {} /* Selects first letter of <p> */
p::before {content: "Read this -";} /* Insert some content before the content of <p>; it can be empty */
p::before {content: attr(href);} /* Display the href value of p tag; can also be other attribute value */
p::after {content: " -Read more… ";} /* Insert some content after the content of <p>; it can be empty */
p::selection {} /* Selects the portion of <p> that is selected by a user */
li::marker {} /* Selects a list item; you can specify its color, font-size, content */
::placeholder {} /* Selects placeholder value */
::cue {} /* Selects <track> (video element for subtitles) */
/* Pseudo classes; style an element according to its state */
a:link {} /* Selects all unvisited links */
a:visited {} /* Selects all visited links */
a:hover {} /* Selects links on mouse over */
a:active {} /* Selects the active link; when you click on it */
a:focus {} /* Selects focused link; mainly for input */
a:target {} /* Selects the target link (eg: #about); very useful to make things pop up when reached */
p:first-child {} /* selects first element in p */
p:first-child {} /* Selects first p among a group of p elements (if another element is the first-child, it returns nothing) */
p:nth-child(2) {} /* Selects 2d p; or other */
p:nth-child(n) {} /* Selects nth p */
p:nth-child(even) {} /* Selects even'th child (or 2n); can be odd (or 2n+1) */
p:only-child {} /* Selects the only p element */
p:last-child {} /* Selects the last p only */
p:nth-last-child(2) {} /* Selects 2d last child; or other */
p:first-of-type {} /* Selects first p element */
p:nth-of-type(odd) {} /* Selects odd p elements */
p:nth-of-type(2n+3) {} /* Selects every 2nd plate starting from the 3rd */
p:only-of-type {} /* Selects p if its the only p in there */
p:last-of-type {} /* Selects last p element */
p:empty {} /* Selects empty p elements */
p:not(.main) {} /* Selects p without .main class */
p:not(:empty) {} /* Selects non empty p elements */
p:is(.main, .second) {} /* Selects p.main or p.second; specificity is the highest of the list (here 10) !!IE */
p :is(.main, .second) {} /* Selects p .main or p .second; specificity is the highest of the list (here 10) !!IE */
p:where(.main, .second) {} /* Selects p.main or p.second; specificity is 0 !!IE */
p :where(.main, .second) {} /* Selects p .main or p .second; specificity is 0 !!IE */
p:has(span) {} /* Selects p if it has span children !!notyet */
:required {} /* Selects required form elements */
:valid {} /* Selects valid form elements */
:invalid {} /* Selects invalid form elements */
:user-valid {} /* Selects valid form elements on blur !!notyet */
:user-invalid {} /* Selects invalid form elements on blur !!notyet */
:focus {} /* Selects focused form element */
:enabled {} /* Selects enabled element */
:disabled {} /* Selects disabled element */
:checked {} /* Selects checked radio and checbox elements */
a[target="_blank"] {} /* Selects all elements with that attribute and value */
[title~="flower"] {} /* Selects elements with an attribute value containing a specified word */
[class|="top"] {} /* Selects elements with the specified attribute starting with the specified value */
[class^="top"] {} /* Selects elements whose attribute value begins with a specified value */
[class$="test"] {} /* Selects elements whose attribute value ends with a specified value */
[class*="te"] {} /* Selects elements whose attribute value contains a specified value */
input[type="button"] {} /* Selects elements with type="button" */
p {color: red !important;} /* become most important */
}
/* FUNCTIONS
========================================================================== */
:root {
--main-color: red;
--semi-transparent: rgba(256, 256, 256, .6);
--anything: 10px;
}
.CSS-VARIABLES {
color: red; border: solid 2px currentcolor; /* will have border red because currentcolor refers to element's color */
color: var(--main-color); /* uses variable and colors to red */
background: var(--semi-transparent); /* uses variable to color background */
padding: var(--anything, 10px); /* uses variable for padding and a fallback value used if the variables is undefined */
--local-variable: 300px; /* can only be used in this element block */
width: var(--local-variable);
color: initial; /* reset value */
}
.CSS-MATH {
width: calc(100% - 80px); /* calculates */
width: min(10px, 10vw); /* takes the smallest value !!IE */
width: max(10vw, 100px); /* takes the largest value !!IE */
width: clamp(10px, 10vw, 100px); /* takes a value with a min and max !!IE */
}
/* @RULES
========================================================================== */
.LAYER
/* !important rules in first declared layer will be most powerful rule of all */
@layer layerName, layerNameBis; /* priorities follows cascade; last to come is most important */
@layer layerName {
color: red; /* ignored */
border: solid 1px red !important; /* takes priority (!important rules priority is inverted) */
}
@layer layerNameBis {
color: blue; /* takes priority because layer is called later */
border: solid 1px blue !important; /* ignored */
}
@import url('example.css') layer(layerName); /* import external css to layer; !important rules will come after in priority because it's defined after the other layers */
}
.MEDIA-QUERIES
@media only screen and (min-width: 768px) and (min-height: 1080px) {} /* screen width +768 and height +1080 */
@media only screen and (min-width: 360px) and (orientation: portrait) {} /* screen +360 and portrait */
@media only screen and (min-width: 360px), (orientation: portrait) {} /* screen +360 or portrait */
@media only screen and (min-width: 360px) and (orientation: portrait), (min-resolution: 300dpi) {} /* screen +360 and portrait or resolution +300dpi */
@media only screen and (min-resolution: 150dpi) {} /* screen resolution +150dpi */
@media only screen and (orientation: landscape) {} /* screen landscape */
@media only screen and (orientation: portrait) {} /* screen portrait */
@media only print {} /* styles applied to print only */
@media not print {} /* styles applied to anything but print */
@media (prefers-color-scheme: dark) {} /* user preference for dark theming */
@media (prefers-color-scheme: light) {} /* user preference for light theming */
@media (prefers-reduced-motion) {} /* user preference for reduced animation */
@media (prefers-reduced-motion: no-preference) {} /* user preference for normal animation */
@media screen and (min-width:0\0) {} /* target IE9 & IE10 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} /* target IE10 & IE11 */
}
.CONTAINER
container: containerName / inline-size; /* this is needed on the container to work; name can be used in @container */
@container containerName (width > 360px) {
.container-child { /* style */ }
} /* container will follow the rules when width > 360px; name is optional */
@container (width > 360px) and (height > 180px) {} /* style if width > 360px and height > 180px */
@container (width > 360px) or (height > 180px) {} /* style if width > 360px or height > 180px */
@container (width > 360px) not (height > 180px) {} /* style if width > 360px and height <= 180px */
@container (min-width: 360px) {} /* alternative syntax */
}
.SUPPORTS {
@supports (display: grid) {} /* browser understands grid display */
@supports (display: grid) and (display: flex) {} /* browser understands grid and flex display */
@supports (display: grid) or (display: flex) {} /* browser understands grid or flex display */
@supports not (display: grid) {} /* browser does not understand grid display */
@supports not ((display: grid) or (display: flex)) {} /* browser does not understand grid or flex display */
}
/* COLORS
========================================================================== */
.COLOR {
color: red; /* named color: red text */
color: #ff0000; /* rgb hexadecimal: #rrggbb; red text */
color: #ff000080; /* alpha 50% */
color: rgb(255, 0, 0); /* rgb: rgb(red, green, blue); red text */
color: rgba(255, 0, 0, 0.5); /* alpha 50% */
color: rgb(255 0 0 / 50%); /* alpha 50% */
color: hsl(0deg 100% 50%); /* hsl: hsl(hue saturation lightness); red text */
color: hsl(0deg 100% 50% / 50%); /* alpha 50% */
color: hwb(0deg 0% 0%); /* hwb: hwb(hue whiteness blackness); red text */
color: hwb(0deg 0% 0% / 50%); /* alpha 50% */
color: transparent; /* will make anything transparent */
border-color: currentcolor; /* inherit color */
accent-color: red; /* affects only checkbox, radio, range, progress !!IE */
color: color-mix(in srgb, pink 30%, red 70%); /* method, color1 %, color2 %; mix 2 colors */
}
.BACKGROUND {
background-color: lightblue; /* use color as bg */
background-image: url(""); /* use img as bg */
background-repeat: no-repeat repeat-y repeat-x repeat space round; /* by default, bg img will repeat */
background-size: cover contain; /* fit to horizontal; fit to vertical; possible to define height and width */
background-size: 100% 100vh; /* fit while size, can also be pixels */
background-position: center top; /* will adjust background position; right, bottom, left also */
background-position: bottom 10px right 10px; /* you can be more precise with this */
background-attachment: fixed scroll local; /* Fix the background image, local is default */
background: url("") no-repeat center/contain; /* shorthand property */
background: url("") top, url("") bottom; /* 2 different background images; first will be on top */
background-clip: padding-box content-box border-box; /* border box is default; padding clip to padding; content clip to content */
-webkit-background-clip: text; /* to show background through text */
-webkit-text-fill-color: transparent; /* needed with clip-text for non webkit navigators; 'unset' to disable */
backdrop-filter: grayscale(100%) sepia(100%) saturate(100%) brightness(100%) invert(100%) contrast(100%) blur(5px) hue-rotate(90deg) initial; /* set a filter on element below !!IE */;
-webkit-backdrop-filter: grayscale(100%); /* for safari */
/* blend mode !!! */
}
.GRADIENT {
background: blue; /* best practice to set a backup background color for unsupporting browsers */
background-image: linear-gradient(blue, green); /* gradient from blue(top) to green(bottom) */
background-image: linear-gradient(to right, blue, green); /* to change direction; bottom right possible; 180deg also */
background-image: linear-gradient(to top left, blue, green, yellow); /* more colors possible */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); /* you can use it with transparency of course */
background-image: linear-gradient(to right, blue 0%, green 30%); /* % or pixels to change space of each color */
background-image: radial-gradient(circle at center, white, green); /* radial gradient; other positions available; ellipse too */
background-image: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px); /* repeats pattern; not working before IE11 */
background-image: conic-gradient(#bbb 0deg 90deg, #ddd 90deg 180deg, #bbb 180deg 270deg, #ddd 270deg 360deg); /* !!IE */
}
.OPACITY {
opacity: .5; /* from 1 to 0, very useful with :hover; effect on other elements too ! */
background: rgba(76, 175, 80, .5); /* works also with rgba; better way because it changes only this element */
}
/* TYPOGRAPHY
========================================================================== */
.FONT {
font-family: "Times New Roman", Times, serif; /* font-family with backup fonts */
font-family: serif sans-serif monospace cursive fantasy; /* main native font types; times, arial, console-like, comic, papyrus */
font-family: "Fontname"; /* non-native font */
font-style: normal italic oblique;
font-size: 14px 14em 14rem 14vh 14vw 14%; /* Use one. 1em = 16px; 1rem is based on root font-size while 1em is based on parent(context) font-size */
font-weight: bold normal; /* Weight work also with %, ... */
font-variant: small-caps; /* Small capitalized letters */
font: italic bold 20px/1.2 Arial, Helvetica, sans-serif; /* shorthand property; style, weight, size, line-height, family; size and family are mandatory */
}
@font-face {
font-family: Fontname; /* define the name of new font to be used as font-family */
src: url('fontname.eot'); /* IE9 Compat Modes */
src: url('fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fontname.woff2') format('woff2'), /* Super Modern Browsers */
url('fontname.woff') format('woff'), /* Pretty Modern Browsers */
url('fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url('fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: 400; /* useful when multiple font sources are names the same; define the font-weight to use other font source */
font-style: normal; /* useful when multiple font sources are names the same; define the font-style to use other font source */
font-display: optional; /* adapts layout before font loads */
}
.TEXT {
color: red; /* contrast should be 4.5 or superior to be readable easily; B/W is 21 */
text-align: center left right justify start end; /* justify(=text of exact same width); start & end are preferred for text */
text-decoration: none; /* very useful for links */
text-decoration-line: overline underline line-through;
text-decoration-style: solid dotted dashed double wavy;
text-decoration-color: red;
text-decoration: underline dashed red;
text-decoration-thickness: 0.5rem; /* !!IE */
text-underline-offset: 2px; /* !!IE */
text-transform: uppercase lowercase capitalize none;
text-indent: 50px; /* alineas */
text-wrap: balance pretty; /* multiline split balance !!notyet */
letter-spacing: 3px; /* space between letters */
word-spacing: 3px; /* space between words */
overflow-wrap: break-word normal; /* break word to make it fit in box */
word-break: break-all keep-all break-word normal; /* similar to overflow-wrap; break all breaks everything */
white-space: nowrap pre-wrap pre-line pre normal; /* sets how white space inside an element is handled */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* hide too long text (truncate) and replace last word with '...' */
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; /* hide (truncate) and replace lines exceeding the clamp with '...' !!IE */
hyphens: auto none; /* break words with hyphen if needed */
line-height: .8; /* space between lines; common practice is to set around 150% */
direction: rtl; /* change text direction to right-to-left */
writing-mode: horizontal-tb vertical-rl vertical-lr; /* used to write vertical text */
vertical-align: middle text-top text-bottom top bottom; /* align image to text */
text-shadow: 2px 2px 1px #FF0000; /* shadow; offset-x offset-y blur-radius color */
text-shadow: 1px 1px #fff, 2px 2px #333; /* multiple text shadows */
-webkit-text-fill-color: transparent; /* color of the text */
-webkit-text-stroke: red; /* color of the text stroke */
}
/* BOX
========================================================================== */
.UNITS {
u: 200px; /* fixed, absolute */
u: 100%; /* depends on parents */
u: 20em; /* depends on parent font size for typo, and font size of the element itself for the rest */
u: 20ch; /* ch is equal to with of '0' char */
u: 20rem; /* depends on font size of the root element */
u: 20lh; /* depends on line height of the element !!notyet !!IE*/
u: 10vh; /* 10% of viewport height */
u: 10vw; /* 10% of viewport width */
u: 10vmin; /* 10% of smaller viewport dimension (vh or vw) !!IE */
u: 10vmax; /* 10% of bigger viewport dimension (vh or vw) !!IE */
u: min-content; /* the intrinsic minimum height or width */
u: max-content; /* the intrinsic preferred height or width */
u: fit-content; /* takes the available space, but never more than max-content */
}
.HEIGHT {
height: 200px; /* height of element */
min-height: 200px; /* minimum height of element */
max-height: 200px; /* maximum height of element */
}
.WIDTH {
width: 200px; /* width of element */
max-width: 200px; /* minimum width of element */
min-width: 200px; /* maximum width of element */
}
.BOX-MODEL {
box-sizing: border-box; /* keep border and padding inside the height and width of elements; use with '*' is better */
box-sizing: content-box; /* border and padding are not kept inside height and width of elements; default value */
}
.BORDERS {
border-style: solid dotted dashed double groove ridge inset outset none hidden; /* use one */
border-style: dotted dashed solid double; /* each side different border type */
border-width: 5px; /* or medium */
border-color: red;
border: solid 5px red; /* shorthand property */
border-top: solid 5px red; /* only one side */
border-right: solid 5px red;
border-bottom: solid 5px red;
border-left: solid 5px red;
border-block: solid 5px red; /* shorthand property for top and bottom; depends on writing mode, directionality, and text orientation; !!IE */
border-inline: solid 5px red; /* shorthand property for left and right; depends on writing mode, directionality, and text orientation; !!IE */
border-width: 10px 5px 20px 15px; /* make some irregular borders */
border-image: url(""); /* image in border */
border-image: linear-gradient(blue, green); /* gradient borders */
border-radius: 5px; /* round borders */
border-radius: 20px 5px 10px 15px; /* make some irregular radius */
border-radius: 20px / 10px; /* top-left & bottom-right / top-right & bottom-left */
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* top-left top-right bottom-right bottom-left / left-top right-top right-bottom left-bottom */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.MARGIN {
/* Space around elements */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-block: 10px; /* shorthand property for top and bottom; depends on writing mode, directionality, and text orientation; !!IE */
margin-inline: 10px; /* shorthand property for left and right; depends on writing mode, directionality, and text orientation; !!IE */
margin: 10px 5px; /* shorthand property; vertical horizontal */
margin: 10px 5px 10px 5px; /* shorthand property; top right bottom left */
margin: auto; /* center element; need to specify width */
margin: inherit; /* gets the value from parent element */
margin-trim: block block-start block-end inline inline-start inline-end; /* allow container to trim children margins !!notyet */
/* margin collapse causes 2 succint margins to collapse keeping only the biggest margin of the 2 */
/* h1 {margin-bottom: 50px;} and h2 {margin-top: 20px;} will result in 50px margin */
}
.PADDING {
/* Space around content */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-block: 10px; /* shorthand property for top and bottom; depends on writing mode, directionality, and text orientation; !!IE */
padding-inline: 10px; /* shorthand property for left and right; depends on writing mode, directionality, and text orientation; !!IE */
padding: 10px 5px; /* shorthand property; vertical horizontal */
padding: 10px 5px 10px 5px; /* shorthand property; top right bottom left */
}
.OUTLINE {
/* very similar to borders, it stands just outside it; it is used in forms for the focus color */
outline-style: solid dotted dashed double groove ridge inset outset; /* use one */
outline: 5px dotted red; /* shorthand property */
outline-offset: 5px; /* push the outline */
}
.SHADOW {
box-shadow: 6px 6px 3px 3px black inset; /* horizontal, vertical, blur, spread, color, in/out the box */
text-shadow: 6px 6px 6px black; /* horizontal, vertical, blur, color */
box-shadow: 6px 6px 3px 3px black, 12px 12px 3px 3px black; /* multiple shadow effects possible with comas */
filter: drop-shadow(2px 4px 8px black); /* make shadow appear based on the image; works well with png */
}
.CLIP-PATH {
/* Clip an element to a certain shape !!IE & Edge & Safari */
clip-path: url(svg.svg);
clip-path: circle(50%);
clip-path: polygon(0 100%, 0 50%, 100% 100%);
}
/* LAYOUT
========================================================================== */
.DISPLAY {
display: inline; /* by default for <a> <span> <img> displays elements in line; cannot set width on inline elements, they expend to fit all the inner content */
display: block; /* by default for most of tags displays elements by full width block; can set width */
display: none; /* hide item and affect layout; no space will be taken by this element */
display: inline-block; /* displays elements in line as blocks; allows to set width and vertical-align */
visibility: hidden; /* hide item but takes the place it should have when shown; visible by default */
}
.POSITION {
position: static; /* by default, they are not affected by top-right-bottom-left properties */
position: relative; /* follow properties */
position: fixed; /* is fixed on viewport -> does not move when scrolling */
position: absolute; /* is positioned relative to the nearest positioned ancestor; top-left corner if no box around it */
position: sticky; /* switches from relative to fixed depending on the scroll; 'top' needs to be defined; parent can't be other than overflow:visible !!IE */
z-index: -1; /* defines stack order -> bigger is in front!; cannot be 'static' */
isolation: isolate; /* creates a new stacking context */
overflow: hidden scroll; /* hide content when parent < child or create scroll bar to access the rest */
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
overflow-x: clip; overflow-y: scroll; /* allows for a certain axis to be hidden while the other scrolls !not possible with 'hidden' */
overflow: auto; /* choose best option */
}
.FLOAT {
float: right left none inline-start inline-end; /* item floats to a side */
clear: right left both; /* stop floating for next items, both clears right and left */
overflow: auto; /* needed if an element is taller than the element containing it */
}
.ALIGN {
margin: auto; /* center element but need to specify width */
text-align: center; /* center text or image inside element */
padding-top: 30px; /* if div padding defined, will by default be centered horizontally */
line-height: 100px; /* if div and line height are the same, it will be centered vertically */
top: 50%; left: 50%; transform: translate(-50%, -50%); /* will center horizontally */
}
.FLEX {
display: flex;/* in a container, change the disposition to flex and allow following properties */
flex-direction: column row column-reverse row-reverse; /* vertical, horizontal or in opposite order */
flex-wrap: wrap wrap-reverse; /* by default items will stay on same line; wrap helps going down */
justify-content: flex-start flex-end center space-between space-around space-evenly; /* how items will display on a lign; works also with column direction; manage primary axis */
align-items: stretch flex-end flex-start center baseline; /* manage secondary axis; how items will display in a column or lign */
align-content: flex-start flex-end center space-between space-around space-evenly stretch; /* manage secondary axis if there is multiple lines */
flex-flow: row wrap; /* shorthand property to direction and wrap */
gap: 20px; /* gep between flex items !!IE */
}
.FLEX-ITEMS {
margin: auto; /* center all elements; need to be on items and not on container */
align-self: stretch center start end; /* align a single item differently; influence on secondary axis */
flex: 1; /* equal height and width columns */
flex-grow: 2; /* the higher, the bigger compared other flex items; base is 1 */
flex-shrink: 2; /* the higher, the smaller compared other flex items; base is 1 */
flex-basis: 100px; /* size basis for flex items before any shrink or grow */
flex: 2 2 100px; /* shorthand property for grow, shrink and basis; default is 0 1 auto; specify for IE10 */
order: 2; /* change order of html code; need to order every item; 0 by default */
}
.MULTI-COLUMNS {
/* not so useful; probably better to use grids */
columns: 4 100px;
column-count: 4; /* 4 columns */
column-width: 200px; /* width of columns */
column-gap: 50px; /* gap bewteen columns */
column-rule: 2px solid black; /* border between columns */
column-span: all; /* for columns children: span over multiple (all) columns */
break-inside: avoid; /* for columns children: avoid breaking in x columns */
}
.GRIDS {
/* not fully available in IE; use autoprefixer and follow https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer */
display: grid;
grid-template-columns: 1fr 1fr; /* 2 fraction of remaining space */
grid-template-columns: repeat(5, 20%); /* 5 columns of 20% */
grid-template-columns: auto min-content max-content; /* first will be spaced auto and two last cols are based on content */
grid-template-columns: 100px minmax(50px, 200px) fit-content(10rem); /* first col is 100px wide, second has min 50px and max 200px and third fits content with a max of 10rem */
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* put the content with flexibility; try auto-fit as well */
grid-template-columns: subgrid; /* define subgrid with same grid as parent */
grid-template-rows: 50vh 50vh; /* 50% of vertical height each */
grid-template-rows: subgrid; /* define subgrid with same grid as parent */
grid-template-rows: masonry; /* masonry style layout !!notyet */
grid-template: 50vh 50vh / 60vw 40vw; /* shorter template method; rows / columns */
grid-template-areas: "header header" "nav main" "footer footer"; /* define grid-areas with names */
grid-column-gap: 10px; /* gap between columns */
grid-row-gap: 20px; /* gap between rows */
grid-gap: 20px 10px; /* shorthand property to define row and column gap */
gap: 20px 10px; /* newer property not very well supported !!! */
grid-auto-flow: dense column row; /* controls how the auto-placement algorithm works; useful to make clean layouts without empty space */
grid-auto-rows: 5px; /* implicit rows: rows that are not ruled by the template; needs grid-auto-flow: row */
grid-auto-columns: 5px; /* implicit columns: columns that are not ruled by the template; needs grid-auto-flow: column */
grid: 50px 50px / auto-flow 50px; /* shorter property for template and flow */
justify-content: start center end space-around space-between space-evenly; /* horizontal alignement; space- will space between grid cells */
align-content: start center end space-around space-between space-evenly; /* vertical alignement; space- will space between grid cells */
justify-items: start center end stretch; /* horizontal align inside grid cells */
align-items: start center end stretch; /* vertical align inside grid cells */
}
.GRIDS-ITEMS {
grid-column-start: 1; /* starts at vertical line 1 */
grid-column-end: 3; /* ends at 3 vertical line */
grid-column: 1 / 3; /* shorter method */
grid-column: span 2; /* span 2 columns */
grid-row-start: 1; /* starts at horizontal line 1 */
grid-row-end: 3; /* ends at 3 horizontal line */
grid-row: 1 / -1; /* starts at horizontal line 1 and ends at last horizontal line */
grid-area: 1 / 2 / 4 / 6; /* row-start / column-start / row-end / column-end */
grid-area: header; /* use names from grid-template-areas */
justify-self: start center end stretch; /* self horizontal alignement */
align-self: start center end stretch; /* self vertical alignement */
order: 1; /* default is 0; 1 means this item will be the last; -1 will be first */
}
/* ANIMATION
========================================================================== */
.TRANSFORM-2D {
transform: translate(50px, 100px); /* moves 50px to right and 100px down */
transform: rotate(45deg); /* rotate 45 degrees clockwise; counter-clockwise if negative */
transform: scale(.5, .5); /* decrease and/or increase size via width and height */
transform: skew(20deg, 20deg); /* skew horizontally and/or vertically */
transform: scale(.7) rotate(30deg); /* shorthand property */
transform-origin: 0px 100px; /* default is 50% 50%; specifies x and y origin for transformations */
transform: rotate(10deg); /* for unsupporting browser */
}
.TRANSFORM-3D {
transform: rotateX(150deg); /* rotate around X-axis */
transform: rotateY(150deg); /* rotate around Y-axis */
transform: rotateZ(150deg); /* rotate around Z-axis */
transform: rotate3d(x, y, z); /* shorthand property */
transform: translate3d(x, y, z); /* translation */
transform: scale3d(x, y, z); /* scale */
transform: rotate(180deg) translateX(100px); /* multiple transformation; if written in two different transforms it cancels the first one (as other css properties) */
backface-visibility: hidden; /* useful when you want to use 2 different blocks to result a 2 faces card */
transform: rotateZ(150deg); /* for unsupporting browser */
}
.TRANSITION {
/* multiple transformations all at once */
transition-property: background-color, width, height; /* change those properties; they must be defined elsewhere */
transition-duration: 1s; /* the time it takes to make the transition */
transition-delay: .5s; /* the time before transition starts */
transition-timing-function: ease linear ease-in ease-out ease-in-out; /* different type of transition */
transition: color 2s ease 1s; /* shorthand property; property duration timing-function delay */
transition: color 2s ease, width 1s linear; /* shorthand property with 2 */
transition: all 1.5s ease; /* handle all transition at once */
}
@keyframes keyframe_name { /* needed for animation */
0% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
100% {
transform: translateX(150px) rotate(30deg);
}
}
@-webkit-keyframes keyframe_name { /* needed for animation on chrome safari and opera */
0% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
100% {
transform: translateX(150px) rotate(30deg);
}
}
@keyframes shortcut {
0%, 5%, 15%, 100% { /* 0% and 100% are not even needed here */
transform: translateY(0);
}
50% { /* CSS knows to reorder */
transform: translateY(80px);
}
10% {
transform: translateY(10px);
}
}
.ANIMATION {
/* multiple animations step by step; need @keyframes */
animation-name: keyframe_name; /* link to the @keyframes */
animation-duration: 2s; /* time for the animation */
animation-timing-function: ease linear ease-in ease-out ease-in-out step-start step-end steps(1); /* different type of animation; cubic-bezier() function possible for custom animation */
animation-delay: 1s; /* delay before animation; can be negative value */
animation-direction: normal reverse alternate alternate-reverse; /* specify different direction; 0-100, 100-0, 0-100-0, 100-0-100 */
animation-iteration-count: 3 infinite; /* number of time the animation will be played */
animation-fill-mode: none forwards backwards both; /* how the animation apply style to its target */
animation-play-state: running paused; /* run or pause the animation */
animation: keyframe_name 2s; /* use animation created before in @keyframes */
animation: keyframe_name 2s linear alternate infinite steps(1); /* alternate to make it play a loop; infinite for never-ending animation; steps for steps in seconds */
animation: keyframe_name 2s, another_keyframe_name 2s; /* multiple animations, could also be same animation multiple times */
}
/* ELEMENTS
========================================================================== */
.LIST {
list-style-type: circle square disc upper-roman lower-alpha none; /* kind of listing for ul */
list-style-type: upper-roman lower-alpha; /* kind of listing for ol */
list-style-image: url('sqpurple.gif'); /* img listing for ul */
list-style-position: inside; /* inside or outside the content flow (outside by default) */
list-style: square inside url("sqpurple.gif"); /* shorthand property */
}
.TABLE {
table-layout: fixed auto; /* auto by default fits table to content; fixed doesn't check width */
border: solid 1px; /* set to table, th and td it make it look like a table (thanks to borders) */
border-spacing: 2px; /* sets distance between borders of adjacent cells */
border-collapse: collapse separate; /* sets cells to share borders or not */
vertical-align: bottom top middle baseline sub super text-top text-bottom; /* align vertically */
caption-side: top bottom; /* display title on top or underneath */
empty-cells: hide show; /* can hide empty cells */
}
.BUTTON {
-webkit-appearance: button; /* especially useful for iOS browsers to render buttons correctly */
}
.INPUT {
caret-color: red; /* color of input caret */
}
.IMAGE {
max-width: 100%; height: auto; /* easy resize images */
object-fit: fill cover contain none scale-down; /* sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container !!IE */
object-position: center right top left bottom; /* specifies the alignment of the selected replaced element's contents within the element's box !!IE */
aspect-ratio: 16 / 9; /* sets a preferred aspect ratio for the box !!NOT READY */
filter: grayscale(100%) sepia(100%) saturate(100%) brightness(100%) invert(100%) contrast(100%) blur(5px) hue-rotate(90deg) initial; /* set a filter !!IE */
display: block; /* removes weird space below image */
}
.SCROLLBAR {
overflow: auto; /* to force the scroll when content > container */
scrollbar-color: #666 transparent; /* thumb color and track color !only FF */
-ms-oveflow-style: none; /* hide on IE, Edge */
scrollbar-width: none; /* hide on firefox */
}
.SCROLLBAR::-webkit-scrollbar {
height: 8px; /* height of thumb; if vertical, need to change it to width */
display: none; /* hide on chrome, safari, opera */
}
.SCROLLBAR::-webkit-scrollbar-track {
background: transparent; /* track color */
}
.SCROLLBAR::-webkit-scrollbar-thumb {
border-radius: 8px; /* thumb border-radius */
background: #666; /* thumb color */
}
/* INTERACTION
========================================================================== */
.sr-only {
/* add this class to element only meant for screen readers */
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
.POINTER-EVENTS {
pointer-events: none;
}
.CURSOR {
cursor: progress wait crosshair help move grab pointer zoom-in zoom-out text not-allowed; /* different types of cursors */
cursor: n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize; /* direction of resize */
cursor: url(https://picsum.photos/20/20), auto; /* image cursor */
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto; /* Emoji cursor */
}
.USER-SELECT {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.SCROLL {
scroll-behavior: smooth auto; /* smoothen the scroll from links !!IE Edge Safari */
scroll-margin-top: 60px; /* defines the top margin of the scroll snap area that is used for snapping this box to the snapport !!IE */
scroll-snap-type: x y both mandatory proximity; /* defines scroll snap */
scroll-snap-align: center start end; /* defines snap alignement to scroll snap */
overscroll-behavior: auto contain none; /* manage the overscroll !!IE */
}