How to create hover card profile web desgin |سومر لتصميم مواقع الويب كيفية انشاء بطاقات الملف الشخصي داخل موقعك

How to create hover card profile web desgin | كيفية انشاء بطاقات الملف الشخصي داخل موقعك

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

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

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

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (كيفية انشاء بطاقات الملف الشخصي داخل موقعك)l

فيديو تعليمي

كيفية انشاء بطاقات الملف الشخصي داخل موقعك

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

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

قد يعجبك هذا:

قائمة تسجيل الدخول

نموذج تسجيل دخول متوهج

إنشاء التمرير لأعلى باستخدام

إنشاء قائمة استجابة الشريط الجانبي

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (hover effect). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة
. كما تعلم ، يتم استخدام علامة
بشكل كبير لإنشاء التقسيم الاول. ثم أنشأت
باسم الفئة ".content". بعد ذلك ، أنشأت
آخر باسم الفئة "-profile" ووضعت علامة
بداخله. داخل كل
علامة قمت بإنشاء
ثلاثة علامات

..

داخل سمة href للعلامة ، لقد كتبت فيديو من فيديواتي وهذا يعني أنه عند النقر فوق عناصر التنقل ، فلن يعيد توجيهك إلى أي صفحة. إذا كنت ترغب في إعادة توجيه المستخدم الخاص بك إلى صفحة معينة ، فيمكنك وضع عنوان URL للصفحة داخل href. أخيرًا ، أنشأت <h3> ووضعت علامة <p> و . داخل
كتبت ذلك لتسهيل الانتقال الى المزيد من المقال

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

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

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

HTML FILE:

>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>title>

<link rel='stylesheet' type='text/css' media='screen' href='css/style.css'>

<script src="https://kit.fontawesome.com/a076d05399.js">script>

<link rel='stylesheet' type='text/css' media='screen' href='css/font-awesome.min.css'>

head>

<body>

<h1>CARD <span> PROFILEspan>h1>

<div class="main-container">

<div class="card">

<div class="image">

<img src="image/img1.jpg">

div>

<h4>Web Desingerh4>

<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>

<div class="swipe">

<ul>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>

ul>

div>

div>

<div class="card">

<div class="image">

<img src="image/img2.jpg">

div>

<h4>Web Developerh4>

<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>

<div class="swipe">

<ul>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>

ul>

div>

div>

<div class="card">

<div class="image">

<img src="image/img4.jpg">

div>

<h4>UI UX Designerh4>

<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>

<div class="swipe">

<ul>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>

<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>

ul>

div>

div>

div>

<script src="https://kit.fontawesome.com/yourcode.js">script>

body>

html>

CSS FILE

*{

margin: 0px;

padding: 0px;

font-family: roboto;

}

body{

width: 100%;

height: 100vh;

background: #fff;

display: flex;

align-items: center;

flex-direction: column;

}

h1{

font-size: 55px;

font-weight: 600;

margin: 135px 0px 60px 0px;

}

h1 span{

color: #04b9ef;

}

.main-container{

display: flex;

}

.card{

width: 280px;

height: 310px;

background: #fff;

box-shadow: 0px 0px 20px #0000000f;

padding: 30px;

box-sizing: border-box;

text-align: center;

position: relative;

margin: 0px 40px;

}

.image img{

width: 110px;

height: 110px;

border-radius: 50%;

margin: 0px auto;

}

h4{

font-size: 18px;

font-weight: 600;

margin: 20px 0px 10px 0px;

color: #484747;

}

p{

font-size: 15px;

font-weight: 400;

color: #6b6b6b;

}

.swipe{

width: 15px;

height: 310px;

position: absolute;

background: #04b9ef;

top: 0;

left: 0;

display: flex;

justify-content: center;

align-items: center;

transition: all 0.6s ease-in-out;

}

.card:hover .swipe{

width: 280px;

}

.swipe ul{

list-style: none;

display: none;

}

.card:hover .swipe ul{

display: block;

}

.swipe ul li a{

text-decoration: none;

}

.swipe ul li a i{

color: #fff;

font-size: 32px;

border-radius: 10px;

padding: 8px;

}

.swipe ul li a i:hover{

box-shadow: 0px 0px 20px #00000020;

}

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

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

الصفحات

How to create hover card profile web desgin |سومر لتصميم مواقع الويب كيفية انشاء بطاقات الملف الشخصي داخل موقعك

How to create hover card profile web desgin | كيفية انشاء بطاقات الملف الشخصي داخل موقعك

فيديو تعليمي

كيفية انشاء بطاقات الملف الشخصي داخل موقعك

CSS FILE

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

تعليقات

إرسال تعليق

>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>title>


	<link rel='stylesheet' type='text/css' media='screen' href='css/style.css'>

	<script src="https://kit.fontawesome.com/a076d05399.js">script>

	<link rel='stylesheet' type='text/css' media='screen' href='css/font-awesome.min.css'>
	head>
	<body>


	<h1>CARD <span> PROFILEspan>h1>


	<div class="main-container">


	<div class="card">


	<div class="image">
	<img src="image/img1.jpg">
	div>

	<h4>Web Desingerh4>
	<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>


	<div class="swipe">
	<ul>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>
	ul>
	div>
	div>


	<div class="card">


	<div class="image">
	<img src="image/img2.jpg">
	div>

	<h4>Web Developerh4>
	<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>


	<div class="swipe">
	<ul>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>
	ul>
	div>
	div>


	<div class="card">


	<div class="image">
	<img src="image/img4.jpg">
	div>

	<h4>UI UX Designerh4>
	<p>Lorum lipsum you learn that the fungi on a bread piece grow from spores.p>


	<div class="swipe">
	<ul>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-facebook-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-instagram-square">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-github">i>a>li>
	<li><a href="https://www.youtube.com/watch?v=jNaq9wIyuWE"><i class="fab fa-twitter">i>a>li>
	ul>
	div>
	div>
	div>
	<script src="https://kit.fontawesome.com/yourcode.js">script>
	body>
	html>

*{
	margin: 0px;
	padding: 0px;
	font-family: roboto;
	}

	body{
	width: 100%;
	height: 100vh;
	background: #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
	}

	h1{
	font-size: 55px;
	font-weight: 600;
	margin: 135px 0px 60px 0px;
	}

	h1 span{
	color: #04b9ef;
	}

	.main-container{
	display: flex;
	}

	.card{
	width: 280px;
	height: 310px;
	background: #fff;
	box-shadow: 0px 0px 20px #0000000f;
	padding: 30px;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	margin: 0px 40px;
	}


	.image img{
	width: 110px;
	height: 110px;
	border-radius: 50%;
	margin: 0px auto;

	}


	h4{
	font-size: 18px;
	font-weight: 600;
	margin: 20px 0px 10px 0px;
	color: #484747;
	}

	p{
	font-size: 15px;
	font-weight: 400;
	color: #6b6b6b;
	}

	.swipe{
	width: 15px;
	height: 310px;
	position: absolute;
	background: #04b9ef;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.6s ease-in-out;
	}

	.card:hover .swipe{
	width: 280px;
	}

	.swipe ul{
	list-style: none;
	display: none;
	}

	.card:hover .swipe ul{
	display: block;
	}

	.swipe ul li a{
	text-decoration: none;
	}

	.swipe ul li a i{
	color: #fff;
	font-size: 32px;
	border-radius: 10px;
	padding: 8px;
	}

	.swipe ul li a i:hover{
	box-shadow: 0px 0px 20px #00000020;
	}