[SNIPPET] Shadow Borders

[Stoker]

Shadow Borders

The Shadow Borders snippet show how to get a customizable border around your forum

This is what I use ATM for prosilver:

Code: Select all

.wrap {
	box-shadow: 0 0 8px 1px #b3b3b3;
}

And for se_square:

Code: Select all

.wrap {
	box-shadow: 0 0 25px 5px #fff;
}

Here you can practice an creating the border: Shadow Generator

Need a stylesheet for adding extra styling? No need to edit phpBB core!
You can use the Add CSS EXT

Special code for iorG19 only

Code: Select all

.wrap {
margin-top:25px;
margin-bottom:25px;
box-shadow: 0 0 0 4px #9400D3,
            0 0 0 8px #4B0082,
            0 0 0 12px #0000FF,
			0 0 0 16px #00FF00,
            0 0 0 20px #FFFF00,
			0 0 0 24px #FF7F00,
            0 0 0 28px #FF0000;
}

[SpIdErPiGgY]

Some nice buttons for styles with blue colors

Code: Select all

/* Buttons */

.button {
  color: #18619B;                 /* Dark gray text */
  background-color: #d9e9fb;     /* Even lighter soft blue */
  font-size: 14px;               /* Smaller font */
  font-weight: 600;
  font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
  text-align: center;
  cursor: pointer;
  padding: 2px 2x;             /* Smaller padding */
  border: 1.2px solid #9cc4f1;  /* Light blue border */
  border-radius: 3px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  user-select: none;
}

.button:hover {
  color: #18619B;                 /* Dark gray text */
  background-color: #c3ddf9;     /* Slightly darker on hover */
  border-color: #7ba9e8;
}

.button:active {
  color: #18619B;                 /* Dark gray text */
  background-color: #a7c7f5;     /* Darker blue on active */
  border-color: #5685d0;
}

a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: #fff !important;
	max-height: 20px;
	font-size: 14px;
	display: inline-flex;        /* flexbox inline */
	justify-content: center;     /* horizontal center */
	align-items: center;         /* vertical center */
	height: 32px;
	line-height: normal;
	background-color: #2279ee;
	border: 1px solid #005e8a;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
	background-image: none;
	text-align: center; /* fallback for non-flex */
}

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	background-color: #0099e6;
	border-color: #005e8a;
	color: #fff;
	background-image: none;
}

a.button1:active, input.button1:active,
a.button2:active, input.button2:active,
input.button3:active {
	background-color: #006699;
	border-color: #005e8a;
	color: #fff;
}

[SpIdErPiGgY]

And inputbox rainbow colours

Code: Select all

/* Input box with animated conic gradient border */
.inputbox {
	background-color: #f8f9fa;
	--angle: 0deg;
	border: 1px solid;
	border-image: conic-gradient(from var(--angle), #ff0000, #067506, #f0f00a, #b67a0b, #d45c91, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) 1;
	animation: rotate 3s linear infinite;
}

/* Animate the --angle custom property for border rotation */
@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

/* Define custom property for angle */
@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}