Barre de recherche CSS

5529 webleb

Publiez votre code Precisa de um site?

Recommandé

26 December 2024

Formulaire d'inscription de connexion rotatif 3D HTML CSS

index.html

styles.css

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body, button, input {
	font: 1em Hind, sans-serif;
	line-height: 1.5em;
}

body, .bar {
	display: flex;
}
body {
	background: #f1f1f1;
	height: 100vh;
}
.bar input,
.search-btn, 
.search-btn:before, 
.search-btn:after {
	transition: all 0.25s ease-out;
}
.bar input,
.search-btn {
	width: 3em;
	height: 3em;
}
.bar input:invalid:not(:focus),
.search-btn {
	cursor: pointer;
}
.bar,
.bar input:focus,
.bar input:valid  {
	width: 100%;
}
.bar input:focus,
.bar input:not(:focus) + .search-btn:focus {
	outline: transparent;
}
.bar {
	margin: auto;
	padding: 1.5em;
	justify-content: center;
	max-width: 30em;

}
.bar input {
	background: transparent;
	border-radius: 1.5em;
	box-shadow: 0 0 0 0.4em #171717 inset;
	padding: 0.75em;
	transform: translate(0.5em,0.5em) scale(0.5);
	transform-origin: 100% 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.bar input::-webkit-search-decoration {
	-webkit-appearance: none;
}
.bar input:focus,
.bar input:valid {
	background: #fff;
	border-radius: 0.375em 0 0 0.375em;
	box-shadow: 0 0 0 0.1em #d9d9d9 inset;
	transform: scale(1);
}
.search-btn {
	background: #171717;
	border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
	padding: 0.75em;
	position: relative;
	transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
	transform-origin: 0 50%;
}
.search-btn:before, 
.search-btn:after {
	content: "";
	display: block;
	opacity: 0;
	position: absolute;
}
.search-btn:before {
	border-radius: 50%;
	box-shadow: 0 0 0 0.2em #f1f1f1 inset;
	top: 0.75em;
	left: 0.75em;
	width: 1.2em;
	height: 1.2em;
}
.search-btn:after {
	background: #f1f1f1;
	border-radius: 0 0.25em 0.25em 0;
	top: 51%;
	left: 51%;
	width: 0.75em;
	height: 0.25em;
	transform: translate(0.2em,0) rotate(45deg);
	transform-origin: 0 50%;
}
.search-btn span {
	display: inline-block;
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.bar input:focus + .search-btn,
.bar input:valid + .search-btn {
	background: #7e7e7e;
	border-radius: 0 0.375em 0.375em 0;
	transform: scale(1);
}
.bar input:focus + .search-btn:before, 
.bar input:focus + .search-btn:after,
.bar input:valid + .search-btn:before, 
.bar input:valid + .search-btn:after {
	opacity: 1;
}
.bar input:focus + .search-btn:hover,
.bar input:valid + .search-btn:hover,
.bar input:valid:not(:focus) + .search-btn:focus {
	background: #7e7e7e;
}
.bar input:focus + .search-btn:active,
.bar input:valid + .search-btn:active {
	transform: translateY(1px);
}

@media screen and (prefers-color-scheme: dark) {
	body, input {
		color: #f1f1f1;
	}
	body {
		background: #171717;
	}
	.bar input {
		box-shadow: 0 0 0 0.4em #f1f1f1 inset;
	}
	.bar input:focus,
	.bar input:valid {
		background: #3d3d3d;
		box-shadow: 0 0 0 0.1em #3d3d3d inset;
	}
	.search-btn {
		background: #f1f1f1;
	}
}

Barre de recherche CSS

Recommandé

Un code par efficientcloud646

Basculer mode sombre CSS

Formulaire d'inscription de connexion rotatif 3D HTML CSS

index.html

styles.css

main.js

Recommandé

Un code par efficientcloud646

Basculer mode sombre CSS

Formulaire d'inscription de connexion rotatif 3D HTML CSS

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js