Media is too big
VIEW IN TELEGRAM
create a load css animation
Web Development Code
create a load css animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 600px;
}
.load{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #42445A;
}
.load span{
position: absolute;
padding: 100px;
background: #646572;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border:15px solid #000;
}
.load span:before{
content: "";
position: absolute;
padding: 100px;
border-width: 15px;
border-color: transparent;
border-left-color: green ;
border-style: solid;
top: -15px;
right: -15px;
border-radius: 50%;
animation: animate 2.1s infinite linear
}
.load span p {
position: absolute;
display: inline-block;
background: ;
padding:100px;
border:15px solid transparent;
top:-15px;
right:-15px;
border-radius:50%;
animation:animate 2.1s infinite linear;
}
p:after{
content: "";
position: absolute;
padding: 20px ;
background: green;
border-radius: 50%;
top: -10px;
left: 13px;
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="load">
<span><p></p></span>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 600px;
}
.load{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #42445A;
}
.load span{
position: absolute;
padding: 100px;
background: #646572;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border:15px solid #000;
}
.load span:before{
content: "";
position: absolute;
padding: 100px;
border-width: 15px;
border-color: transparent;
border-left-color: green ;
border-style: solid;
top: -15px;
right: -15px;
border-radius: 50%;
animation: animate 2.1s infinite linear
}
.load span p {
position: absolute;
display: inline-block;
background: ;
padding:100px;
border:15px solid transparent;
top:-15px;
right:-15px;
border-radius:50%;
animation:animate 2.1s infinite linear;
}
p:after{
content: "";
position: absolute;
padding: 20px ;
background: green;
border-radius: 50%;
top: -10px;
left: 13px;
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="load">
<span><p></p></span>
</div>
</body>
</html>
هل انت جاهز للتمرين القادم ؟؟؟ 💣🛠🧰
في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية.
على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة ، لكنه يريد عرض المنتجات حسب طلب زوار الصفحة.
#JavaScript
@codedevelopment
في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية.
على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة ، لكنه يريد عرض المنتجات حسب طلب زوار الصفحة.
#JavaScript
@codedevelopment
Web Development Code
هل انت جاهز للتمرين القادم ؟؟؟ 💣🛠🧰 في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية. على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة…
الاجابه :
var items = products.filter((item)=>{
return item.name == "honda" && item.price <= 18000
})
var items = products.filter((item)=>{
return item.name == "honda" && item.price <= 18000
})
#~ منقول....
نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss
Selector #=> id, .=> class {
color : لون النص ;
direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl;
letter-spacing : البعد بين الحروف بالبكسل;
line-height :% البعد بين الاسطر عن طريق البكسل او;
text- align : موقع النص داخل الصفحة ;
text-decoration : تزيين النص كالتسطير;
text-indent : بياض امام الفقرة;
text-transform :حساسية الحروف;
vertical-align : الابتعاد عن النص الاعتيادي بالبكسل;
white-space : لعمل سطر جديد كل ما ضغطت انتر
;حسب الخصائص والتعامل مع النص كما هو مكتوب
word-spacing : المسافة بين الكلمات بالبكسل;
border : اطار بالبكسل;
outline : التحكم في حدود الاطار الخارجي ;
padding : المسافة بين شيئين بشكل داخلي ;
margin : عكس بادينغ اي الهوامش الخارجية او البعد ;
font-family :نوع الخط ;
font-size : حجم الخط بالبكسل;
font-stylالخاصية ;لخط عادي او مائل... ;
font-variant:تحويل الحروف من صغيرة الى كبيرة
;والعكس
font-weight: عرض النص ;
width : العرض;
height :الارتفاع ;
min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها;
min/max-height: نفس الشي;
float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية
position :الوضعيات وسيتم شرح الخصائص اسفله;
z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر
background :الخلفية;
clear : تستخدم للفصل عن فلوت;
cursor : شكل مؤشر الماوس;
}
</style>
الخصائص :
text-align : justify, center, right, left.
text-decoration: none, underline, overline, line-through blinke
text-transform : capitalize, uppercase, none, lowercase.
vertical-align : baseline, sub, super, top, text-top, middle, bottom.
white-space : normal, pre, nowrap.
font-family : Tahoma, Arial, sans-serif
font-style: normal, italic...
font-size: small, x-small, large, x-large, xx-small/large
...Or by px
font-variant: normal, small-caps
font-weight: bold, bolder, normal
border: dashed, solid, dotted,.....
float : right, left,...
background-color : لون الخلفية
background-image : url(اختياار صورة كخلفية)
background-repeat: اعادة الصورة
background-attachment : scroll
list-style-type : decimal ترقيم القائمة بالرقام
list-style-image : url("اظهار الصورة لترقيم")
clear : left, right, both, none
visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها
Selector :hover {عند المرور عليه بالمؤشر}
Selector :visited {عند الضغط عليه ولكنه يختفي}
Selctor :active {
عند الضغط عليه يتغير اللون الى اللون المحدد
}
Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه}
Selector :link { لتوضيح ان هذا العنصر هو رابط}
Selector :first-child { الابن الاول للعنصر}
Selector
Selector :before{
content : اضافة محتوى قبل محتوى العنصر;
}
Selector :after{
content : اضافة محتوى بعد محتوى العنصر;
}
نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss
Selector #=> id, .=> class {
color : لون النص ;
direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl;
letter-spacing : البعد بين الحروف بالبكسل;
line-height :% البعد بين الاسطر عن طريق البكسل او;
text- align : موقع النص داخل الصفحة ;
text-decoration : تزيين النص كالتسطير;
text-indent : بياض امام الفقرة;
text-transform :حساسية الحروف;
vertical-align : الابتعاد عن النص الاعتيادي بالبكسل;
white-space : لعمل سطر جديد كل ما ضغطت انتر
;حسب الخصائص والتعامل مع النص كما هو مكتوب
word-spacing : المسافة بين الكلمات بالبكسل;
border : اطار بالبكسل;
outline : التحكم في حدود الاطار الخارجي ;
padding : المسافة بين شيئين بشكل داخلي ;
margin : عكس بادينغ اي الهوامش الخارجية او البعد ;
font-family :نوع الخط ;
font-size : حجم الخط بالبكسل;
font-stylالخاصية ;لخط عادي او مائل... ;
font-variant:تحويل الحروف من صغيرة الى كبيرة
;والعكس
font-weight: عرض النص ;
width : العرض;
height :الارتفاع ;
min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها;
min/max-height: نفس الشي;
float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية
position :الوضعيات وسيتم شرح الخصائص اسفله;
z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر
background :الخلفية;
clear : تستخدم للفصل عن فلوت;
cursor : شكل مؤشر الماوس;
}
</style>
الخصائص :
text-align : justify, center, right, left.
text-decoration: none, underline, overline, line-through blinke
text-transform : capitalize, uppercase, none, lowercase.
vertical-align : baseline, sub, super, top, text-top, middle, bottom.
white-space : normal, pre, nowrap.
font-family : Tahoma, Arial, sans-serif
font-style: normal, italic...
font-size: small, x-small, large, x-large, xx-small/large
...Or by px
font-variant: normal, small-caps
font-weight: bold, bolder, normal
border: dashed, solid, dotted,.....
float : right, left,...
background-color : لون الخلفية
background-image : url(اختياار صورة كخلفية)
background-repeat: اعادة الصورة
background-attachment : scroll
list-style-type : decimal ترقيم القائمة بالرقام
list-style-image : url("اظهار الصورة لترقيم")
clear : left, right, both, none
visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها
Selector :hover {عند المرور عليه بالمؤشر}
Selector :visited {عند الضغط عليه ولكنه يختفي}
Selctor :active {
عند الضغط عليه يتغير اللون الى اللون المحدد
}
Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه}
Selector :link { لتوضيح ان هذا العنصر هو رابط}
Selector :first-child { الابن الاول للعنصر}
Selector
Selector :before{
content : اضافة محتوى قبل محتوى العنصر;
}
Selector :after{
content : اضافة محتوى بعد محتوى العنصر;
}
Username :<input type = "text يعني قيمة الحقل نصي" name = "هو قيمة هذا 👈👈👈الحقل 👆👆 وهي مخصصة للنصوص العادية />
Userpass : <input type = "password هنا تظهر الحروف على شكل نقاط " />
Submit : <input type = "submit" value = "Login" المعنى واضح من خلال المثال/>
<input type = "Reset" value = "clean" لمسح كل ماهو موجود داخل الحقول/>
<input required= "required يعني هذا الحقل مطلوب يعني لن يتم الارسال الا عندما يكتب شيء داخل هذا الحقل/>
<input placeholder="هذه خاصية لكتابة النايم بلون رمادي عندما تضغط عليه ك "اكتب تعليقا... "
الفرق بين get و post
Post تستخدم لارسال البيانات بشكل مخفي اي لايعطينا اي شي في الرابط من فوق
Get تظهر ما تم ارساله في الحقول السابقة
يجب استخدام post في الرسائل وكلمات السر وغيرها للحماية
اما get فتستخدم عادة في محركات البحث
-----------
<input type = "hidden تستخدم لانشاء حقل مخفي "
<textarea rows =" هنا تكتب الارقام لتوسيع المساحة النصية " cols = "نفس rows ولكن هذه للاعمدة">
تستخدم للنصوص الطويلة كالتعليقات
</textarea>
<select name = "اسم القائمة" >
<optgroup label = "اسم من يترأس هذه المجموعات ">
</optgroup>
<option selected ="selected" اختيار واحد من القائمة disabled = "disabled"
>الخيارات داخل القائمة</option>
قائمة منسدلة تندرج تحتها قيم</select>
<button>نفس فكرة سابميت والفرق هو ان الفاليو تكتب هنا </button>
<input type = "radio تستخدم لانشاء دائرة اختيار"/>
<input type = "checkbox" نفس فكرة راديو ولكن مربعات اي اكثر من خيار واحد/>
ويمكن استخدام selcted & disabled فيهما
HTML Entities
اكتبها في جووجل فلا يمكن شرحها هنا
وهي تستخدم لكتابة الاشياء التي لا يمكن كتابتها بلوحة المفاتيح
<fieldset>اضافة جميلة تتمثل في وضع الكتابة داخل اطار
<legend>عنوان الاطار</legend>
</fieldset>
</form>
<form action = "djaber.html" method = "post" enctype = "multipart/form-data"
<input type = "file" name = "my file "/> لاظهار زر اختيار ملف
--------****------
تستخدم iframe لاظهار موقع اخر داخل موقعك
<iframe src ="عنوان الموقع المراد تصفحه" width ="النسبة المئوية التي يحتلها حجم الموقع الخارجي داخل موقعك "hight ="ارتفاع الموقع" frameborder="اطار الموقع" scrolling = "no - yes - auto">
هنا تكتب اشياء تظهر للمتصفحات التي لا تدعم الفريمات مثلا
<h2>يجب ترقية المتصفح لرؤية هذا المحتوى</h2>
</iframe>
----------------------
الروابط التشعبية
لاستخدام رابط تشعيبي نستخدم <a></a>
<a href ="رابط الموقع" target ="_خصائص اتجاه الصفحة" title = "عنوان الموقع لما تمر عليه بالماوس">
للتوجه الى الاعلى 👈👈👈👈👈👈👈👈👇👇👇👇👇
<a href = "#">^TOP^</a>
للتوجه الى مكان xxx 👈👈👈👈👈👇👇👇👇👇👇👇
<a href ="#xxx">^xxx^</a>
خصائص اتجاه الصفحة target
Target = "_self "----> فتح في نفس النافذة
Target ="_top"------> // // // //
Target ="_blank" ------> فتح في نافذة جديدة
target ="_parent "-----> // // // //
-------------------
روابط البريد :
<a href=" mailto:addelec?subject= كتابة رسالة ولترك %20&مسافة نكتبbody=مكان الرسالة" >click her فتح برامج المحادثة</a>
-------------------
الصور
<img src="اسم الصورة" alt="وصف الصورة الجملة التي تظهر اذا كانت الصورة غير موجودة" border = "اطار الصورة بالارقام"/>
___________________
تشغيل الملفات الصوتية
<audio controls="controls لاظهار شريط التحكم" ></audio>
</body>
</html>
Userpass : <input type = "password هنا تظهر الحروف على شكل نقاط " />
Submit : <input type = "submit" value = "Login" المعنى واضح من خلال المثال/>
<input type = "Reset" value = "clean" لمسح كل ماهو موجود داخل الحقول/>
<input required= "required يعني هذا الحقل مطلوب يعني لن يتم الارسال الا عندما يكتب شيء داخل هذا الحقل/>
<input placeholder="هذه خاصية لكتابة النايم بلون رمادي عندما تضغط عليه ك "اكتب تعليقا... "
الفرق بين get و post
Post تستخدم لارسال البيانات بشكل مخفي اي لايعطينا اي شي في الرابط من فوق
Get تظهر ما تم ارساله في الحقول السابقة
يجب استخدام post في الرسائل وكلمات السر وغيرها للحماية
اما get فتستخدم عادة في محركات البحث
-----------
<input type = "hidden تستخدم لانشاء حقل مخفي "
<textarea rows =" هنا تكتب الارقام لتوسيع المساحة النصية " cols = "نفس rows ولكن هذه للاعمدة">
تستخدم للنصوص الطويلة كالتعليقات
</textarea>
<select name = "اسم القائمة" >
<optgroup label = "اسم من يترأس هذه المجموعات ">
</optgroup>
<option selected ="selected" اختيار واحد من القائمة disabled = "disabled"
>الخيارات داخل القائمة</option>
قائمة منسدلة تندرج تحتها قيم</select>
<button>نفس فكرة سابميت والفرق هو ان الفاليو تكتب هنا </button>
<input type = "radio تستخدم لانشاء دائرة اختيار"/>
<input type = "checkbox" نفس فكرة راديو ولكن مربعات اي اكثر من خيار واحد/>
ويمكن استخدام selcted & disabled فيهما
HTML Entities
اكتبها في جووجل فلا يمكن شرحها هنا
وهي تستخدم لكتابة الاشياء التي لا يمكن كتابتها بلوحة المفاتيح
<fieldset>اضافة جميلة تتمثل في وضع الكتابة داخل اطار
<legend>عنوان الاطار</legend>
</fieldset>
</form>
<form action = "djaber.html" method = "post" enctype = "multipart/form-data"
<input type = "file" name = "my file "/> لاظهار زر اختيار ملف
--------****------
تستخدم iframe لاظهار موقع اخر داخل موقعك
<iframe src ="عنوان الموقع المراد تصفحه" width ="النسبة المئوية التي يحتلها حجم الموقع الخارجي داخل موقعك "hight ="ارتفاع الموقع" frameborder="اطار الموقع" scrolling = "no - yes - auto">
هنا تكتب اشياء تظهر للمتصفحات التي لا تدعم الفريمات مثلا
<h2>يجب ترقية المتصفح لرؤية هذا المحتوى</h2>
</iframe>
----------------------
الروابط التشعبية
لاستخدام رابط تشعيبي نستخدم <a></a>
<a href ="رابط الموقع" target ="_خصائص اتجاه الصفحة" title = "عنوان الموقع لما تمر عليه بالماوس">
للتوجه الى الاعلى 👈👈👈👈👈👈👈👈👇👇👇👇👇
<a href = "#">^TOP^</a>
للتوجه الى مكان xxx 👈👈👈👈👈👇👇👇👇👇👇👇
<a href ="#xxx">^xxx^</a>
خصائص اتجاه الصفحة target
Target = "_self "----> فتح في نفس النافذة
Target ="_top"------> // // // //
Target ="_blank" ------> فتح في نافذة جديدة
target ="_parent "-----> // // // //
-------------------
روابط البريد :
<a href=" mailto:addelec?subject= كتابة رسالة ولترك %20&مسافة نكتبbody=مكان الرسالة" >click her فتح برامج المحادثة</a>
-------------------
الصور
<img src="اسم الصورة" alt="وصف الصورة الجملة التي تظهر اذا كانت الصورة غير موجودة" border = "اطار الصورة بالارقام"/>
___________________
تشغيل الملفات الصوتية
<audio controls="controls لاظهار شريط التحكم" ></audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #000
}
.span1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
box-shadow: 0 5px 0 #fff;
animation: animate 2s linear infinite;
}
.span2{
position: relative;
bottom: -50%;
left: 0;
transform: translate(-50%,-50%);
padding:100px;
background:transparent;
border-radius:50%;
}
.span2:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
top: calc(50% - 10px);
left: -4px;
border-radius: 50%;
animation: animate 2s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
p{
color: red;
position: absolute;
top: calc(50% + 90px);
left: calc(50% + 100px);
transform: translate(-50%,-50%);
text-transform: uppercase;
font-size: 27px;
letter-spacing: 5px;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 2px 4px;
box-shadow: 0 0 5px rgba(255,255,225,0.5)
}
@keyframes text {
0%,100%{
opacity: 1;
}
50%{
opacity: .1;
}
}
.pp span {
animation: text 2s linear infinite;
}
.pp span:nth-child(1){
animation-delay: .1s
}
.pp span:nth-child(2){
animation-delay: .3s
}
.pp span:nth-child(3){
animation-delay: .5s
}
.pp span:nth-child(4){
animation-delay: .7s
}
.pp span:nth-child(5){
animation-delay: .9s
}
.pp span:nth-child(6){
animation-delay: 1.1s
}
.pp span:nth-child(7){
animation-delay: 1.3s
}
</style>
</head>
<body>
<span class="span1"><span class="span2"></span></span><p class="pp"></p>
</body>
<script type="text/javascript" charset="utf-8">
var i = 0
var p = document.querySelector(".pp")
var text = "loading"
var sp = text.split("")
sp.reverse();
while(i< sp.length){
var span = document.createElement("span")
span.innerHTML += sp[i]
p.prepend(span)
i++
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #000
}
.span1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
box-shadow: 0 5px 0 #fff;
animation: animate 2s linear infinite;
}
.span2{
position: relative;
bottom: -50%;
left: 0;
transform: translate(-50%,-50%);
padding:100px;
background:transparent;
border-radius:50%;
}
.span2:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
top: calc(50% - 10px);
left: -4px;
border-radius: 50%;
animation: animate 2s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
p{
color: red;
position: absolute;
top: calc(50% + 90px);
left: calc(50% + 100px);
transform: translate(-50%,-50%);
text-transform: uppercase;
font-size: 27px;
letter-spacing: 5px;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 2px 4px;
box-shadow: 0 0 5px rgba(255,255,225,0.5)
}
@keyframes text {
0%,100%{
opacity: 1;
}
50%{
opacity: .1;
}
}
.pp span {
animation: text 2s linear infinite;
}
.pp span:nth-child(1){
animation-delay: .1s
}
.pp span:nth-child(2){
animation-delay: .3s
}
.pp span:nth-child(3){
animation-delay: .5s
}
.pp span:nth-child(4){
animation-delay: .7s
}
.pp span:nth-child(5){
animation-delay: .9s
}
.pp span:nth-child(6){
animation-delay: 1.1s
}
.pp span:nth-child(7){
animation-delay: 1.3s
}
</style>
</head>
<body>
<span class="span1"><span class="span2"></span></span><p class="pp"></p>
</body>
<script type="text/javascript" charset="utf-8">
var i = 0
var p = document.querySelector(".pp")
var text = "loading"
var sp = text.split("")
sp.reverse();
while(i< sp.length){
var span = document.createElement("span")
span.innerHTML += sp[i]
p.prepend(span)
i++
}
</script>
</html>