Create search bar with fullscreen using html ,css and javascript

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء محرك البحث الابداعي باستخدام HTML CSS و من دون JavaScript. لقد قمت سابقًا بمشاركة العديد من المدونات حول وضع محرك البحث ولكن احيانا مع الشريط في راس الصفحة حان الوقت لاجل استخدامه بشكل منفرد وتعلم كيفية وضعه بحركة متلاشية لتعطي لمسه جميلة ، بخاصية ال transform

وضع محرك البحث دائما ياتي في واجهة مستخدم داخل صفحة ويب تحتوي على مقالات كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل البحث بسهوله عن اي مقالة

اليوم في هذه المدونة ، سأشارك معك هذا البرنامج ( transition hover effect search box). محرك البحث يستجيب بشكل كامل لأي جهاز. على الأجهزة المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Creative parallax scroll effect html & css only).

فيديو تعليمي لانشاء محرك البحث

كما رأيت في الفيديو ، فإن محرك البحث هذا تكون بطريقة جميلة. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك

إذا كنت تحب هذا البرنامج ( transition hover effect search box ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :

3D hover effect with shadows

login form desgi web

Glowing Hover effect using html and css3

Profile Card Design | HTML And CSS

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( transition hover effect search box ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>. كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من غيرbootstrap ثم أنشأت <input > بداخله ثم بعد ذلك انشأت ".svg ". وينتمي للايقونات التابعة لل bootstrap وذلك بالذهاب الى موقع بوتستراب واخذ السي دي ان وبعدها اخذ الايقونة للسيرش

..

داخل سمة searchللعلامة وضع كتابة تسمية البحث، لقد كتبت typing وهذا يعني أنه عند كتابة اسم البحث يمكن ان يظهر بالموقع ، فلن يعيد توجيهك إلى أي صفحة. اذا كنت ترغب في عمل محرك البحث هذا داينميك قم بدراسة الphp و,mysql

في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. وبالمثل ، بعد ذلك ، قمت بتصميم مربع البحث. ثم قمت بعد ذلك بالتوجه الى بقية العلامات لاجل التنسيق الصحيح

الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transfrom. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك عرض معين. ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size

لإنشاء هذا البرنامج (شريط البحث). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.

Html and css file here

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title> Search Box </title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="close-btn">
<span class="fas fa-times"></span>
</div>
<div class="wrapper">
<div class="search-btn">
<span class="fas fa-search"></span>
</div>
<div class="search-data">
<input type="text" required>
<div class="line">
</div>
<label>Type to search..</label>
<span class="fas fa-search"></span>
</div>
</div>
<script>
$(".search-btn").click(function(){
$(".wrapper").addClass("active");
$(this).css("display", "none");
$(".search-data").fadeIn(500);
$(".close-btn").fadeIn(500);
$(".search-data .line").addClass("active");
setTimeout(function(){
$("input").focus();
$(".search-data label").fadeIn(500);
$(".search-data span").fadeIn(500);
}, 800);
});
$(".close-btn").click(function(){
$(".wrapper").removeClass("active");
$(".search-btn").fadeIn(800);
$(".search-data").fadeOut(500);
$(".close-btn").fadeOut(500);
$(".search-data .line").removeClass("active");
$("input").val("");
$(".search-data label").fadeOut(500);
$(".search-data span").fadeOut(500);
});
</script>
</body>
</html>












#ffd43b
body{
height: 2000px;
font-family: sans-serif;
}
#diagonal{
width: 60%;
height: 70px;
float: right;
background-image: url(4.jpg);
border-left:200px solid white;
border-top: 700px solid transparent;
background-attachment: fixed;
}
#box{
float: left;
height: 700px;
}
#outer{
width: 100%;
height: 100%;
display: table;
}
#inner{
display:  table-cell;
vertical-align: middle;
}
#about .content-title h3{
text-align: left;
}
#about .underline{
margin:0 0 30px 0px;
}
#about-desc p{
margin-bottom: 30px;
font-size: 17px;
}
.btn{
border-radius: 30px !important;
padding: 15px 30px;
}
.btn-info{
background-color: #ffd43b !important;
border : 0;
}
#iore .title{
text-align: center;
background-color: #ffd43b !important;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
font-family: 'Poppins', sans-serif;
background: url(sm.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.wrapper{
position: fixed;
height: 0px;
width: 0px;
border-radius: 100%;
background: linear-gradient(-135deg, #ffe066,#4158d0);
transition: all 0.4s linear;
}
.wrapper.active{
height: 4000px;
width: 4000px;
}
.search-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
text-align: center;
cursor: pointer;
border-radius: 50%;
background: linear-gradient(-135deg, #ffe066,#4158d0);
}
.search-btn span{
color:#fff;
font-size: 22px;
line-height: 60px;
}
.search-data{
position: absolute;
height: 50px;
width: 400px;
display: flex;
text-align: center;
}
.search-data input{
height: 100%;
width: 100%;
background: none;
border:none;
outline: none;
font-size: 22px;
font-weight: 500;
color: #fff;
}
.search-data .line{
position: absolute;
height: 3px;
width: 100%;
background: #fff;
bottom: 0;
transform: scaleX(0);
transition: transform 0.4s 0.3s linear;
}
.search-data .line.active{
transform: scaleX(1);
}
.search-data label{
position: absolute;
top: 50%;
left: 0;
font-size: 20px;
transform: translateY(-50%);
pointer-events: none;
color: rgba(255, 255, 255, 0.7);
}
.search-data input:valid ~ label{
opacity: 0;
}
.search-data span{
color: #fff;
position: absolute;
width: 50px;
font-size: 25px;
right: 0;
left: 0;
line-height: 45px;
cursor: pointer;
}
.close-btn{
position: absolute;
z-index: 99;
right: 25px;
top: 25px;
font-size: 25px;
color: #fff;
cursor: pointer;
}
.search-data .search-data span,
.search-data label , .close-btn {
display: none;
}

سومر لتصميم التطبيقات ومواقع الويب

القائمة الرئيسية

الصفحات

Create search bar with fullscreen using html ,css and javascript

Create search bar with fullscreen using html ,css and javascript

فيديو تعليمي لانشاء محرك البحث

Html and css file here

أخر المواضيع من قسم : Ui Desgin

تعليقات

إرسال تعليق

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body{
	position: relative;
	font-family: 'Poppins', sans-serif;
	background: url(sm.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	}
	.wrapper{
	position: fixed;
	height: 0px;
	width: 0px;
	border-radius: 100%;
	background: linear-gradient(-135deg, #ffe066,#4158d0);
	transition: all 0.4s linear;
	}
	.wrapper.active{
	height: 4000px;
	width: 4000px;
	}

	.search-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 60px;
	width: 60px;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
	background: linear-gradient(-135deg, #ffe066,#4158d0);

	}
	.search-btn span{
	color:#fff;
	font-size: 22px;
	line-height: 60px;
	}
	.search-data{
	position: absolute;
	height: 50px;
	width: 400px;
	display: flex;
	text-align: center;
	}

	.search-data input{
	height: 100%;
	width: 100%;
	background: none;
	border:none;
	outline: none;
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	}
	.search-data .line{
	position: absolute;
	height: 3px;
	width: 100%;
	background: #fff;
	bottom: 0;
	transform: scaleX(0);
	transition: transform 0.4s 0.3s linear;
	}
	.search-data .line.active{
	transform: scaleX(1);
	}
	.search-data label{
	position: absolute;
	top: 50%;
	left: 0;
	font-size: 20px;
	transform: translateY(-50%);
	pointer-events: none;
	color: rgba(255, 255, 255, 0.7);
	}
	.search-data input:valid ~ label{
	opacity: 0;
	}
	.search-data span{
	color: #fff;
	position: absolute;
	width: 50px;
	font-size: 25px;
	right: 0;
	left: 0;
	line-height: 45px;
	cursor: pointer;
	}
	.close-btn{
	position: absolute;
	z-index: 99;
	right: 25px;
	top: 25px;
	font-size: 25px;
	color: #fff;
	cursor: pointer;
	}

	.search-data .search-data span,
	.search-data label , .close-btn {
	display: none;
	}