USA.css – The American CSS stylesheet. Units set in inches, 1776 bytes
source link: https://bennettfeely.com/usacss/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
.usa-stars {Show CSS}
.usa-stars {
background: linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.7in 0.43in,
linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.3in 0.43in,
linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.3in 0.43in,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.7in 0.43in,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.7in 0.23in,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.3in 0.23in,
linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.2in 0.93in,
linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.8in 0.93in,
linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.8in 0.93in,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.2in 0.93in,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.2in 0.73in,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.8in 0.73in,
#3c3b6e;
background-size: 1in 1in;
}
.usa-stripes-horizontal {Show CSS}
.usa-stripes-horizontal {
background: repeating-linear-gradient(
#b22234,
#b22234 0.2in,
0.2in,
#fff 0.4in
);
}
.usa-stripes-vertical {Show CSS}
.usa-stripes-vertical {
background: repeating-linear-gradient(
90deg,
#b22234,
#b22234 0.2in,
0.2in,
#fff 0.4in
);
}
.usa-diamond {Show CSS}
.usa-diamond {
background: linear-gradient(
45deg,
#b22234 25%,
0,
transparent 75%,
0,
#3c3b6e
),
linear-gradient(
-45deg,
#b22234 25%,
0,
transparent 75%,
0,
#3c3b6e
), #fff;
background-position: 50% 50%;
background-size: 0.5in 0.5in;
}
.usa-radial {Show CSS}
.usa-radial {
background: radial-gradient(
circle at 50% 0,
#fff,
#fff 0.2in,
0,
#3c3b6e 0.4in,
0,
#fff 0.6in,
0,
#b22234 0.8in,
0,
#fff 1.2in
),
#fff;
background-size: 1.4in 100%;
background-position: 50% 0;
background-repeat: repeat-x;
}
.usa-plaid {Show CSS}
.usa-plaid {
background: repeating-linear-gradient(
45deg,
#b22234,
#b22234 0.2in,
0,
#fff 0.25in,
0,
transparent 0.5in,
0,
#fff 0.55in
),
repeating-linear-gradient(
-45deg,
#3c3b6e,
#3c3b6e 0.25in,
0,
transparent 0.4in
),
#fff;
}
.usa-conic { Show CSS}
.usa-conic {
background: repeating-conic-gradient(
#b22234,
#b22234 10deg,
0,
#fff 20deg,
0,
#3c3b6e 30deg,
0,
#fff 40deg
);
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK