Professional Documents
Culture Documents
Udq8fb 1595283785
Udq8fb 1595283785
Uploaded by
oedhamo83Original Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
Udq8fb 1595283785
Udq8fb 1595283785
Uploaded by
oedhamo83Copyright:
Available Formats
TESLA CSS LEARN
TESLA KURD CODER
kurdmax670@gmail.ocm
TESLA CODER
+-----------------------------------------------+
| Book Name: |
| LEARN CSS | |
| |
| Devloper: |
| Tesla coder |
| About Book: |
| Learn css from zero to hero |
| Contact Us: |
| Kurdmax670@gmail.com |
+-----------------------------------------------+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
--[ LEARN CSS FROM ZERO TO HERO ]--
--------------------------------------
CSS[(Cascading Style Sheets)]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+----------------------+
| LEARN_CSS |
+----------------------+
*************************************
ﺍﻟﺸﺎﻣﻞ ﻭﺍﻟﻜﺎﻣﻞ ﻓﻲ ﺗﻌﻠﻢ
CSS
Tesla kurd
****************************************
PROGRAM:
1- notpad++
2- chrome
****************************************
======>[1]- css file انشاء ملف وحفظه
----------------------------------------
(1)- open notpad++
(2)- save file [style.css]
****************************************
======>[2]- css && html استدعاء الملف
----------------------------------------
insert style page into html page
code:
<link rel="stylesheet" type="text/css" href="style.css">
we will write under
<title></title>
E.X:
<html >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
****************************************
======>[3]- css in html page كتابة االكواد داخل صفحة الهتميل
----------------------------------------
we can write css code in same page with html
code: <style></style>
we will write under:
<title></title>
E.X:
<html >
<head>
<title></title>
<style>
</style>
</head>
<body>
</body>
</html>
****************************************
======>[4]- css in html elements كتابةاالكواد في عناصر الهتميل
----------------------------------------
we can write css in html elements
code: style="color:red; background-color: black;"
E.X:
<html >
<head>
<title></title>
</head>
<body>
<p style="color:red; background-color: black;"></p>
</body>
</html>
****************************************
======>[5]-id & class اي دي و كالس
----------------------------------------
<p id="p" ></p>
<p class="p"></p>
in css we will write :
# with id
. with class
E.X:
#p{}
.p{}
****************************************
======>[6]-comment in css التعليقات
----------------------------------------
code: /* */
E.X:
body
{
color: red;
/* background-color: black; */
}
****************************************
======>[7]- select all html element in css تحديد جميع عناصر الهتميل
----------------------------------------
code:
*
{
color: red;
background-color: black;
}
****************************************
======>[8]- css selectors اختيار عنصر للتعديل عليه
----------------------------------------
<html >
<head>
<title></title>
</head>
<body>
<div id="para">
<p>lets</p>
<p>learn</p>
<p>css</p>
</div>
</body>
</html>
.............
css:
#para
{
color:red;
}
****************************************
======>[9]- css colors االلوان
----------------------------------------
code: rgb(0,0,0);
(1)-r => red.
(2)-g => green.
(3)-b => blue.
E.X:
<html >
<head>
<title></title>
</head>
<body>
<div id="para">
<p>lets</p>
<p>learn</p>
<p>css</p>
</div>
</body>
</html>
.............
css:
#para p{
color:red;
color:#ccc;
color:rgb(255,0,0);
}
note : use input type color to know color
****************************************
======>[10]- background-color الوان الخلفية
----------------------------------------
html:
<p class="pp"> hello </p>
css:
.pp{
background-color: gray;
}
body{
background-color: black;
}
****************************************
======>[11]- background-image خلفية صورة
----------------------------------------
body{
/* from pc */
background-image: url(namephoto.png/jpg);
/* url */
background-image: url(url address);
}
****************************************
======>[12]- background-repeat تكرار الصورة في الخلفية
----------------------------------------
body{
background-image: url(namephoto.png/jpg);
background-repeat: no-repeat;
/* repeat-y */
background-repeat: repeat-y;
/* repeat-x */
background-repeat: repeat-x;
}
****************************************
======>[13]- background-size حجم الخلفية
----------------------------------------
body{
background-image: url(namephoto.png/jpg);
background-size: 50% 400px; /* width height */
}
****************************************
======>[14]- width & height التحكم بالخط
----------------------------------------
html:
<p id="pp"> hello </p>
css:
#pp{
background-color: red;
width: 40%;
height: 130px;
}
****************************************
======>[15]- font-size & color قياس الخط واللون
----------------------------------------
html:
<p id="pp"> hello </p>
css:
#pp{
font-size: 22px;
color: blue;
}
****************************************
======>[16]- font-style & font-variant شكل الخط
----------------------------------------
html:
<p id="pp"> hello </p>
css:
#pp{
font-size: 22px;
color: blue;
font-style: italic; /* type font
font-variant: small-caps; /* first letter capital
}
****************************************
======>[17]- font-family & font-weight نوع الخط
----------------------------------------
ssearch on google : google font
choose one and write on your page
html:
<p id="pp"> hello </p>
css:
#pp{
font-size: 22px;
color: blue;
font-family: Arial; /* san-serif */
font-weight: bold;
}
****************************************
======>[18]- text decoration & color ديكور النص واللون
----------------------------------------
html:
<a id="pp" href="http://www.google.com" > google </a>
css:
#pp{
text-decoration: none red;
/*
none
overline
underline
throwline
*/
}
****************************************
======>[19]- text-direction اتجاهات النص
----------------------------------------
html:
<p id="pp"> hello </p>
css:
#pp{
font-size: 22px;
color: blue;
direction: rtl/ltr;
}
****************************************
======>[20]- opacity text & image شفافية الخط والصور
----------------------------------------
(1)- text
html:
<p id="pp"> hello </p>
css:
#pp{
font-size: 22px;
color: blue;
direction: rtl/ltr;
opacity: 0.3;
}
(2)- image
html:
<img id="imo" src="1.png" alt="photo"/>
css:
#imo{
opacity: 0.5;
}
****************************************
======>[21]- hover button & text & image حدث هوفر للخط والصور
----------------------------------------
(1)-button:
html:
<button id="btn">home</button>
css:
#btn:hover{
color: red;
background-color: black;
}
(2)-text
html:
<p id="pp">lets learn css</p>
css:
#pp:hover{
color: red;
background-color: black;
}
(3)-image:
html:
<img id="imo" src="1.png" alt="rose"/>
css:
#imo{
opacity: 0.5;
}
#imo:hover{
opacity:1;
}
****************************************
======>[22]- display & visibility اخفاء العناصر
----------------------------------------
html:
<img id="imo" src="1.png" alt="rose">
css:
#imo{
visibility: hidden;
display: none;
}
****************************************
======>[23]- display : inline-block & block
----------------------------------------
html:
<header>
<main>
<a href="">home</a>
<a href="">about us</a>
<a href="">login</a>
<a href="">sign up</a>
</main>
</header>
css:
main a{
display: block;/* * يجعلهم تحت البعض اي اضافة سطر بين العناصر/
display: inline-block;/* * يعرض العناصر في سطر واحد/
}
****************************************
======>[24]- background: linear gradient
----------------------------------------
website:
https://uigradients.com/#ClearSky
use: اضافة خلفيات متعددة االلوان لموقعك
choose color and copy code pase in your page
****************************************
======>[25]- Letter Spacing اضافة مسافة بين االحرف
----------------------------------------
html:
<p id="pp"></p>
css:
#pp{
letter-spacing:2px;
}
****************************************
======>[26]- word spacing المسافة بين الكلمات
----------------------------------------
html:
<p id="pp"></p>
css:
#pp{
word-spacing:2px;
}
****************************************
======>[27]- padding توسيع الحدود الداخلية
----------------------------------------
html:
<button id="btn"> login </button>
css:
#btn{
padding:5px; /**التوسع من كامل الجهات/
/*
padding-top:;
padding-left:;
padding-right:;
padding-bottom:;
*/
}
****************************************
======>[28]- margin توسيع الحدود الخارجية
----------------------------------------
html:
<button id="btn"> login </button>
<button id="btn"> login </button>
<button id="btn"> login </button>
<button id="btn"> login </button>
<button id="btn"> login </button>
css:
#btn{
margin:5px; /**التوسع من كامل الجهات/
/*
margin-top:;
margin-left:;
margin-right:;
margin-bottom:;
*/
}
****************************************
======>[29]- border الحدود
----------------------------------------
html:
<button id="btn"> login </button>
css:
#btn{
border: 1px solid red; /* الحجم الشكل اللون:*الحدود/
/*
-[ style border ]-
solid
dashed
dotted
double
groove
ridge
-[ dir border ]-
border-left:
border-right:
border-top:
border-bottom:
*/
}
****************************************
======>[30]- border & border radius
----------------------------------------
html:
<button> LEARN CSS </button>
css:
button{
border: 1px solid black;
border-radius: 12px;
/*
-[border]-
border-left: 1px solid red;
border-top: 1px solid green;
border-right: 1px solid black;
border-bottom: 1px solid blue;
-[border-radius]-
border-radius: 12px 12px 12px 12px;
*/
}
****************************************
======>[31]- text-align & line-height
----------------------------------------
html:
<p id="pp">lets learn css</p>
css:
#pp{
text-align: left;
line-hight:100px;
/*
-[text-align]-
left;
right;
center;
*/
}
****************************************
======>[32]- overflow االخفاء
----------------------------------------
html:
<p id="pp"> lets learn css easy with tesla coder</p>
css:
#pp{
width: 50px;
height: 30px;
background-color: gray;
overflow: hiddin;/**يتم اخفاء العناصر خارج المساحة/
overflow: auto;/* * يدخل النص كامل ضمن المساحة/
overflow:scroll;/**التحريك بدوالب الماوس/
}
****************************************
======>[33]- text shadow اضافة الظل للخطوط
----------------------------------------
html:
<h1> lets learn css </h1>
css:
h1{
color: orange;
text-shadow: 1px 1px black;
}
****************************************
======>[34]- box shadow اظافة ظل للبوكس
----------------------------------------
html:
<img src="1.jpg" alt="photo">
css:
h1{
border: 1px solid black;
shadow-box: 1px 1px 5px gray;
}
****************************************
======>[35]- create card انشاء بطاقة
----------------------------------------
html:
<article>
<img src="1.png" alt="photo"/>
<h4> LEARN CSS </h4>
</article>
css:
article{
width: 30%;
hieght: 300px;
border: 1px solid black;
box-shadow: 1px 1px 5px black;
}
article img{
width: 100%;
hieght: 200px;
}
show in browser:
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | image | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| | LETS LEARN CSS | |
| +--------------------------+ |
| |
| |
| |
+--------------------------------+
****************************************
======>[36]- transform translate تحديد االماكن
----------------------------------------
html:
<header></header>
css:
header{
width: 300px;
height: 300px;
transform: translate(50%, 50%);
}
****************************************
======>[37]- transfrom : scale & rotate & skew
----------------------------------------
scale: التكبير
rotate: التدوير
skew:ثالثي االبعاد
E.X:
html:
<img src="1.png" alt="photo"/>
css:
img{
width: 300px;
height: 300px;
transform: scale(0,5);
/*
transform: rotate(10deg);
transform: skew(20deg);
*/
}
****************************************
======>[38]- resize
----------------------------------------
html:
<header>
<h5> learn css </h5>
</header>
css:
header{
widht: 200px;
height: 200px;
background-color: gray;
resize: horizontal; /**التحكم بالحجم عرض/
reszie:vertical; /**التحكم بالحجم ارتفاع/
resize: both; /**التحكم بالعنصر للجهتين/
}
****************************************
======>[39]- focus selector اضافة احداث
----------------------------------------
used with: يستعمل مع:
1-input text
2-input password
3-input email
4-textaria
E.X:
html:
<input type="text"/>
css:
input:focus{
width: 300px;
background-color: black;
color: red;
}
****************************************
======>[40]- transition الحركة والزمن
----------------------------------------
html:
<input type="text"/>
css:
input{
width: 75px; 300 الى75 سيتم تنفيذ اجراء العرض من
transition-property:width;/**التطبيق على عرض االنبوت/
transition-duration:2s; /**المدة ثانيتين/
}
input:focus{
width: 300px;
background-color: black;
color: red;
}
****************************************
======>[41]- transition with hover
----------------------------------------
html:
<h3> Lets learn css </h3>
css:
h3{
width:50px;
transition-property:width;/** تستطيع التحكم باي عنصر/
transition:2s;
}
h3:hover{
width:200px;
height:100px;
line-height:100px;
text-align: center;
background-color: gray;
color: black;
}
****************************************
======>[42]- display flex الترتيب في سطرواحد
----------------------------------------
html:
<main>
<article id="a1"></article>
<article id="a2"></article>
<article id="a3"></article>
</main>
css:
main{
width: 1000px;
height: 200px
margin: auto;
background-color: black;
display: flex;
}
main article{
width:250px;
height:200px;
}
#a1{
background-color: gray;
}
#a2{
background-color: silver;
}
#a3{
background-color: red;
}
****************************************
======>[43]- justify content التحكم بالعناصر
----------------------------------------
html:
<main>
<article id="a1"></article>
<article id="a2"></article>
<article id="a3"></article>
</main>
css:
main{
width: 1000px;
height: 200px
margin: auto;
background-color: black;
display: flex;
justify content:flex-start;/**اتجاه العناصر/
/*
justify content: flex-start; اليسار
justify content: flex-end; اليمين
justify content: center; المنتصف
justify content: space-between; ترك فراغ بين العناصر
justify content: space-around; ترك فراغ بين العناصر مع اليسار واليمين
justify content: space-evenly; ترك فراغ بين العناصر بالتساوي
*/
}
main article{
width:250px;
height:200px;
}
#a1{
background-color: gray;
}
#a2{
background-color: silver;
}
#a3{
background-color: red;
}
****************************************
======>[44]- position static fixed التحكم بالعناصر حسب المستخدم
----------------------------------------
position: static; الوضع العادي
position: fixed; التثبيت
E.X: position: fixed;
html:
<header>
<button>HOME</button>
<button>login</button>
<button>signup</button>
<button>contact us</button>
<button>about us</button>
</header>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
<h1>learn css</h1>
css:
header{
position: fixed;
****************************************
======>[45]- position ralative
----------------------------------------
position:ralative يأخذ مكان فراغ
html:
<h1> lets learn css </h1>
<h2> html and css </h2>
css:
h1{
position: ralative;
top:100px;
left:30px;
}
****************************************
======>[46]- position absolute
----------------------------------------
position:absolute ال يأخذ الفراغ
html:
<h1> lets learn css </h1>
<h2> html and css </h2>
css:
h1{
position: absolute;
top:100px;
left:30px;
}
****************************************
======>[47]- float
----------------------------------------
html:
<header>
<h4> lets learn css </h4>
<h4> lets learn css <h4>
</header>
css:
header{
width: 100%;
}
header h4{
float: left;
width: 50%;
background-color: red;
}
****************************************
======>[48]- float & clear تقسيم الصفحة بفلوت ومسح تأثير فلوت
----------------------------------------
html:
<header></header>
<aside></aside>
<main></main>
<footer></footer>
css:
header{
width:100%;
height:100px;
background-color: gray;
}
aside{
width:30%;
height:550px;
background-color: green;
float:left;
}
main{
width:70%%;
height:550px;
background-color: red;
float:right;
}
footer{
width:100%;
height:100px;
background-color: black;
clear:both;
}
****************************************
======>[49]- list type
----------------------------------------
html:
<ul>
<li> HTML </li>
</ul>
<ol>
<li> CSS </li>
</ol>
css:
ul{
list-style-type:decimal;
/*
deciaml ارقام
square مربعات
circal دائرة فارغة
disc دائرة سوداء
japanese-informal دائرة سوداء
lower-alpha احرف انكلش صغيرة
upper-alpha احرف انكلش كبيرة
none ال شيء
kannada احرف كندية
*/
}
ol{
list-style-type:decimal;
/*
deciaml ارقام
square مربعات
circal دائرة فارغة
disc دائرة سوداء
japanese-informal دائرة سوداء
lower-alpha احرف انكلش صغيرة
upper-alpha احرف انكلش كبيرة
none ال شيء
kannada احرف كندية
*/
}
style:
ol{
color: black;
background: red;
padding: 20px;
}
ul{
color:black;
background: blue;
padding: 20px;
}
ol li{
background-color: gray;
margin: 5px;
padding:6px;
}
ol li{
background-color: silver;
margin: 5px;
padding:6px;
}
****************************************
======>[50]- list style & type تجميل الليستات
----------------------------------------
html:
<ul>
<li> HTML </li>
<li> HTML5 </li>
<li> css </li>
<li> css3 </li>
</ul>
<ol>
<li> html </li>
<li> css </li>
<li> html & css </li>
</ol>
css:
ol{
color: black;
background: red;
padding: 20px;
list-style-type:decimal;
}
ul{
color:black;
background: blue;
padding: 20px;
list-style-type:decimal;
}
ol li{
background-color: gray;
margin: 5px;
padding:6px;
}
ol li{
background-color: silver;
margin: 5px;
padding:6px;
}
****************************************
======>[51]- image : opject fit اضافات للصور
----------------------------------------
html:
<img src="1.png" alt="photo"/>
<img src="1.png" alt="photo"/>
css:
img{
width:200px;
height:200px;
object-fit:fill; ممتلئ
/*
object-fit:contain; تصغير الصورة حسب المساحة
object-fit:scale-down; يقوم بتكبير الصورة وقصها
object-fit:cover; تقطيع
object-fit:none; التأثير
*/
}
****************************************
======>[52]- image filter part1 فلترات وتاثيرات
----------------------------------------
html:
<img src="1.png" alt="photo"/>
css:
img{
filter: blur(4px)
filter: brightness(0.30);
filter: contrast(180%);
filter: grayscale(100%);
filter: hue-rotate(180deg);
}
****************************************
======>[53]- image filter part2 فلترات وتأثيرات
----------------------------------------
html:
<img src="1.png" alt="photo"/>
css:
img{
filter: invert(100%);
filter: opacity(50%);
filter: saturate(7);
filter: sepia(100%);
filter: drop-shadow(8px 8px 10px green);
}
****************************************
======>[54]- image hover تأثير على الصور
----------------------------------------
html:
<img src="1.png" alt="photo"/>
css:
img{
width:200px;
height:200px;
transition:2s;
filter: grayscale(100%);
}
img:hover{
filter:grayscale(0%);
}
****************************************
======>[55]- button hover تاثير على الزر
----------------------------------------
html:
<button> LEARN CSS </button>
css:
button{
width:120px;
padding:8px;
color: white;
background-color: black
transiation:3s;
}
button:hover{
color:black;
background-color: red;
}
****************************************
======>[56]- attribute تحديد العناصر
----------------------------------------
html:
<button title="click here">LEARN</button>
css:
[title="click here"]{
width:200px;
}
****************************************
======>[57]- animation:
name اعطاء اسم لالنيميشن
+duration+ اعطاء الزمن للسرعة
@keyframes{ الى- من: خاصية
from{}
to{}
}
----------------------------------------
animation-name: name;
animation-duration: 3s;
@keyframes{from{}to{}}
E.X:
html:
<h3> HELLO <h3>
css:
h3{
animation-name:hhh;
animation-duration:3s;
}
@keyframes hhh{
from {color: red;}
to {color: yellow;}
}
****************************************
======>[58]- animation:
name اعطاء اسم لالنيميشن
+duration+ اعطاء الزمن للسرعة
@keyframes{ الى- من: خاصية
from{}
to{}
}
+delay خاصية اعطاء مهلة من الزمن للبدء
----------------------------------------
animation-name: name;
animation-duration: 3s;
animation-delay: 3s;
@keyframes{from{}to{}}
E.X:
html:
<h3> HELLO <h3>
css:
h3{
animation-name:hhh;
animation-duration:3s;
}
@keyframes hhh{
from {color: red;}
to {color: yellow;}
}
****************************************
======>[59]- animation:
name اعطاء اسم لالنيميشن
+duration+ اعطاء الزمن للسرعة
@keyframes{ الى- من: خاصية
from{}
to{}
}
+delay خاصية اعطاء مهلة من الزمن للبدء
+iteration-count خاصية تكرار الحدث
----------------------------------------
animation-name: name;
animation-duration: 3s;
animation-delay: 3s;
animation-iteration-count: 10;
@keyframes{from{}to{}}
E.X:
html:
<h3> HELLO <h3>
css:
h3{
animation-name:hhh;
animation-duration:3s;
animation-iteration-count: 10;
}
@keyframes hhh{
from {color: red;}
to {color: yellow;}
}
****************************************
======>[60]- E.X animation :
button hover مثال عملي على زر
----------------------------------------
html:
<button>LEARN CSS</button>
css:
button{
background-color: rgba(0,255,0,0.3);
}
button:hover{
animation-name: btn;
animation-duration: 2s;
}
@keyframes btn{
from {background-color: rgba(0,255,0,0.3);}
to {background-color: rgba(0,255,0,0.9);}
}
****************************************
======>[61]- E.X transition :
image hover مثال عملي على الصور
----------------------------------------
html:
<img src="facebook.png"/>
css:
img{
filter:grayscale(100%);
}
img:hover{
transition: 2s;
filter:grayscale(0%);
}
****************************************
======>[62]- E.X: image hover
transform:skew(deg); تأثير ثري دي عالصور
transform:rotate(deg); توير الصور
----------------------------------------
html:
<img src="1.png"/>
css:
img:hover{
transition: 1s;
transform: skew(10deg);
}
img:hover{
transition: 1s;
transform: rotate(360deg);
}
****************************************
======>[63]- cip path تقطيع العناصر
----------------------------------------
https://bennettfeely.com/clippy/
html:
<header></header>
css:
header{
cippath: xxxxxxxxxx;
width:100%;
height: 60px;
}
****************************************
======>[64]- background tow color
----------------------------------------
css:
body{
background-image:linear-gradient(to right, red, blue);
}
****************************************
======>[65]- cursor شكل الماوس
----------------------------------------
html:
<button id="btn1"> login </button>
<button id="btn2"> login </button>
<button id="btn3"> login </button>
<button id="btn4"> login </button>
css:
#btn1{
cursor: pointer;
}
#btn2{
cursor: grab;
}
#btn3{
cursor: context-menu;
}
#btn4{
cursor: default;
}
****************************************
======>[66]- background mover خلفيات متحركة
----------------------------------------
html:
<header> </header>
css:
header{
width: 100%;
height: 100px;
animation-name: mover;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes mover{
0%{background-color: purple;}
25%{background-color: red;}
50%{background-color: green;}
100%{background-color: black;}
}
****************************************
======>[67]- navbar resosive قائمة منسدلة
----------------------------------------
html:
<nav>
<ul>
<li> <a href="#">HTML</a> </li>
<li> <a href="#">CSS</a> </li>
<li> <a href="#">HTML5</a> </li>
<li> <a href="#">CSS3</a> </li>
</ul>
</nav>
css:
*{
margin: 0;
padding: 0;
}
nav{
background-color: gray;
height:60px;
}
nav a{
color: white;
font-weight: bold;
text-decoration: none;
}
nav li{
display: inline-block;
line-height: 60px;
width:70px;
text-align: center;
}
nav li:hover{
background-color: black;
}
***********************************
=====>[68]- aside انشاء قائمة جانبية
-----------------------------------
html:
<aside>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
<a href="">home</a>
</aside>
css:
*{
margin: 0;
padding: 0;
}
aside{
width:100px;
height:313px;
background-color: white;
border: 1px solid silver;
box-shadow: 1px 1px 10px silver;
text-align: center;
}
aside a{
color: red;
text-decoration: none;
display: block;
padding:10px;
}
aside a:hover{
background-color: silver;
}
**********************************
======>[69]- social icon ايقونات تواصل اجتماعي
----------------------------------
html:
<footer>
<a href="#"><img src="facebook.png"></a>
<a href="#"><img src="youtube.png"></a>
<a href="#"><img src="yahoo.png"></a>
<a href="#"><img src="gmail.png"></a>
</footer>
css:
*{
margin: 0;
padding: 0;
}
footer{
width:100%;
height:100px;
background-color: black;
text-align: center;
}
footer a img{
margin-top: 25px;
width:40px;
}
**********************************
======>[70]-media query التجاوب مع جميع الشاشات
----------------------------------
<!--IE Compatibility Meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Mobile Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1">
*************************************
======>[71]- after & befor قبل وبعد
-------------------------------------
html:
<h3 id="hhh"> LETS LEARN CSS WITH TESLA </h3>
css:
#hhh::after{
content: "its very easy";
color: red;
}
#hhh::before{
content: "its very easy";
color: blue;
}
*************************************
======>[72]- max width & max height
-------------------------------------
html:
<header>
<p> Leats learn css with tesla </p>
</header>
css:
header{
background-color: red;
width:700px;
max-width:600px;
height:30px;
max-height: 20px;
}
*************************************
======>[73]- min width & min height
-------------------------------------
html:
<header>
<p> Leats learn css with tesla </p>
</header>
css:
header{
background-color: red;
width:500px;
min-width:600px;
height:10px;
min-height: 20px;
}
*************************************
======>[74]- -web bg clip جعل صورة لون للنص
& color transparent
-------------------------------------
html:
<h1 id="hhh"> TESLA CODER </h1>
css:
#hhh{
color: transparent; /* * يجعل اللون شفاف/
background: url(yahoo.png);/* * تحديد صورة خلفية/
-webkit-background-clip: text;/* * جعل الصورة فقط نص/
}
*************************************
======>[75]- -web text stroke وضع خط حول النص
-------------------------------------
html:
<h1 id="hhh"> TESLA CODER </h1>
css:
#hhh{
-webkit-text-stroke: 1px red;
}
*************************************
======>[76]- pages تقسيم الصفحة باحترافية
-------------------------------------
html:
<header></header>
<main><div></div></main>
<footer></footer>
css:
*{
margin: 0;
padding: 0;
}
header{
width:100%;
height: 60px;
background-color: black;
}
main{
width:100%;
height: 389px;
background-color: silver;
}
main div{
width:20%;
height: 389px;
background-color: white;
}
footer{
width:100%;
height: 60px;
background-color: red;
}
*************************************
======>[77]- cards تصميم كارد احترافي
-------------------------------------
html:
<div id="card1"><center><img src="htmls.png"/><button>CARDS</button></center></div>
css:
*{
margin: 0;
padding: 0;
}
#card1{
width:200;
height:300;
border: 1px solid white;
margin-right:33;
position: absolute;
top:20;
left:20;
box-shadow: 1px 1px 12px black;
}
#card1 img{
width:195;
height:240;
margin-top:4;
}
#card1 button{
width:195;
padding:8;
margin-top:4;
}
*************************************
======>[78]- buttons تصميم ازرار احترافية
-------------------------------------
html:
<header id="hd">
<button> HOME </button>
<button> HOME </button>
<button> HOME </button>
<button> HOME </button>
</header>
css:
*{
margin: 0;
padding: 0;
}
#hd{
width: 100%;
height: 52px;
top:0px;
background-color: #3E3E3E;
text-align: center;
box-shadow: -1px 5px 12px rgb(0,0,0,0.5) ;
}
#hd button{
width: 140px;
margin-top:4px;
padding:8px;
border: none;
border-radius: 8px;
color: white;
background-color: rgba(0,255,0,0.5);
}
#hd button:hover{
animation-name: btn;
animation-duration: 1s;
}
@keyframes btn{
from{background-color: rgba(0,255,0,0.5);}
to{background-color: rgba(0,255,0,0.9); color: black;}
}
*************************************
======>[79]- marquee تصميم شريط اخباري احترافي
-------------------------------------
html:
<marquee scrolldelay="50" scrollamount="1">
welcome to learn HTML , CSS
</marquee>
css:
*{
margin: 4;
padding: 0;
}
marquee{
border: 1px solid silver;
border-radius: 6px;
padding:5;
box-shadow: 1px 1px 5px gray;
}
**************************************
======>[80]- copy@right اضافة جميع الحقوق محفوظة
--------------------------------------
html:
<footer>
<p> copy@right 2020 tesla </p>
<span style="color:red;">EMAIL</span>:<span> xxx@mail.com </span>
</footer>
css:
*{
margin:0;
padding:0;
}
footer{
width:100%;
height:70px;
background-color: gray;
text-align: center;
}
footer p{
color: white;
line-height: 40px;
}
*************************************
======>[81]- dropdown قائمة منسدلة احترافية
-------------------------------------
html:
<ul>
<li><a href="#"> GOOGLE </a>
<ul>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Facebook </a></li>
</ul>
</li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Youtube </a></li>
<li><a href="#"> Github </a></li>
<li><a href="#"> Home </a></li>
<li><a href="#"> Test </a></li>
</ul>
css:
body{
background-color: gray;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
width: 110px;
height: 40px;
background-color: white;
font-size: 18px;
display: inline-block;
text-align: center;
line-height: 40px;
opacity: 0.8;
float: left;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color: red;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
***************************************
=======>[82]- marquee with photo شريط متحرك بصورة مع خبر
---------------------------------------
html:
<marquee id="sd" scrollmount="100" style="color: red; background-color: gray;
padding:10;">
<img src="yahoo.png" width="20px" height="20px" alt="rose"><span> lets learn css
</span>
<img src="yahoo.png" width="20px" height="20px" alt="rose"><span> lets learn css
</span>
<img src="yahoo.png" width="20px" height="20px" alt="rose"><span> lets learn css
</span>
<img src="yahoo.png" width="20px" height="20px" alt="rose"><span> lets learn css
</span>
<img src="yahoo.png" width="20px" height="20px" alt="rose">
<span> lets learn css </span>
</marquee>
***************************************
web site for:
1-animation.css
2-hover.css
---------------------------------------
HACKER COURSE
---------------------------
TERMUX
SQL Injection
FACEBOOK
Bypass
تم االنتهاء من كورسCSS بفضل الله
الكاتب والمطور
تيسال كورد كودر
للتواصل: kurdmax670@gmail.com
+-----------------------------------------------+
+-----------------------------------------------+
| Book Name: |
| LEARN CSS |
| Devloper: |
| Tesla coder |
| About Book: |
| Learn css from zero to hero |
| Contact Us: |
| Kurdmax670@gmail.com |
+-----------------------------------------------+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
--[ LEARN CSS FROM ZERO TO HERO ]--
--------------------------------------
CSS[(Cascading Style Sheets)]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+----------------------+
| LEARN_CSS |
+----------------------+
*************************************
LEARN CSS with TESLA KURD
kurdmax670@gmail.com
You might also like
- كتب الشيخ عطيةDocument4 pagesكتب الشيخ عطيةAchi idou50% (2)
- تكييفDocument18 pagesتكييفكرم عمرو100% (1)
- 4c2958b0 موسوعة الكنوز والدفائن والاثار والاشارات مخطوطاتDocument7 pages4c2958b0 موسوعة الكنوز والدفائن والاثار والاشارات مخطوطاتhassen7000100% (1)
- تطبيقات هندسة الطرقDocument288 pagesتطبيقات هندسة الطرقBOUZIANE MessaoudNo ratings yet
- قال شاهدDocument149 pagesقال شاهدbarsoum1 barsoumNo ratings yet
- حل تصميم نظريDocument9 pagesحل تصميم نظريomipmi444No ratings yet
- HTML and CSSDocument29 pagesHTML and CSSMary EnitekNo ratings yet
- #2Document2 pages#2aw.aw.free321No ratings yet
- CSS CSS3Document68 pagesCSS CSS3Nadou SheNo ratings yet
- #1Document1 page#1aw.aw.free321No ratings yet
- CSS ResumeDocument219 pagesCSS ResumeNajib AzmiNo ratings yet
- HTML FormDocument5 pagesHTML Formhw17488No ratings yet
- الدرس 10Document22 pagesالدرس 10Mohamed MostafaNo ratings yet
- Supported BrowsersDocument2 pagesSupported Browsershistota0No ratings yet
- الجلسة الخامسة عملي ويب 1Document8 pagesالجلسة الخامسة عملي ويب 1moonsunsky1997No ratings yet
- Levon TemplateDocument97 pagesLevon TemplatecopyprintNo ratings yet
- الدرس 12Document24 pagesالدرس 12Mohamed MostafaNo ratings yet
- تقليل وقت استجابة الموقعbbbDocument1 pageتقليل وقت استجابة الموقعbbbnadia jumaaNo ratings yet
- كتاب الماكسDocument510 pagesكتاب الماكسapi-3740328100% (2)
- كتاب الماكسDocument480 pagesكتاب الماكسhasanNo ratings yet
- DB2 PracticalDocument16 pagesDB2 PracticalEngy MostafaNo ratings yet
- الدرس 11Document24 pagesالدرس 11Mohamed MostafaNo ratings yet
- Guide Stage PfaDocument1 pageGuide Stage PfaAya GharbyNo ratings yet
- BBRHTML سكربت قبول في ادسنسDocument15 pagesBBRHTML سكربت قبول في ادسنسnadia jumaaNo ratings yet
- كروت يوزر مانجر العربيةDocument2 pagesكروت يوزر مانجر العربيةSalah AL-HakimiNo ratings yet
- SQL Server 2000 تعلم الSQL سيرفر 2000 مع التنصيبDocument41 pagesSQL Server 2000 تعلم الSQL سيرفر 2000 مع التنصيبأكبر مكتبة كتب عربيةNo ratings yet
- Drawing Using Turbo Cpp برمجة الرسم بلغة سي باستخدام ++Turbo CDocument37 pagesDrawing Using Turbo Cpp برمجة الرسم بلغة سي باستخدام ++Turbo Cأكبر مكتبة كتب عربية67% (3)
- كل ما يخص الاسكتش ابDocument5 pagesكل ما يخص الاسكتش ابم.علاء الشجاعNo ratings yet
- C++ Part02Document12 pagesC++ Part02NiceNo ratings yet
- Summery MYSQL (التعامل مع البيانات داخل الجداول)Document24 pagesSummery MYSQL (التعامل مع البيانات داخل الجداول)Mehdi ErNo ratings yet
- كتاب سلاح التلميذ رياضيات للصف الثالث الابتدائي ا…Document1 pageكتاب سلاح التلميذ رياضيات للصف الثالث الابتدائي ا…mora fargNo ratings yet
- 5 ملاحظات الكمرات البانلد بيمزDocument3 pages5 ملاحظات الكمرات البانلد بيمزmohamedNo ratings yet
- الدرس 13Document18 pagesالدرس 13Mohamed MostafaNo ratings yet
- Acadymic EmailDocument2 pagesAcadymic EmailsasaNo ratings yet
- أكواد تقنية رقمية 2-2Document7 pagesأكواد تقنية رقمية 2-2manahil7126No ratings yet
- قالب مرتب jetthemeDocument58 pagesقالب مرتب jetthemenadia jumaaNo ratings yet
- 5-ملاحظات الكمرات البانلد بيمزDocument3 pages5-ملاحظات الكمرات البانلد بيمزeng.ahmedshehibaNo ratings yet
- المعلوماتية والتعليم 2Document8 pagesالمعلوماتية والتعليم 2Ines LarabaNo ratings yet
- Email With Excel (Go With Us) .XLSMDocument17 pagesEmail With Excel (Go With Us) .XLSMelsheref 2021No ratings yet
- ما لا يعرفه المحترفون عن ADODocument41 pagesما لا يعرفه المحترفون عن ADOأكبر مكتبة كتب عربيةNo ratings yet
- Open SourceDocument5 pagesOpen SourceMahmoud ElsawyNo ratings yet
- twrp-3 7 0 - 12-v7 7 - A12-Ingres-Skkk ImgDocument1 pagetwrp-3 7 0 - 12-v7 7 - A12-Ingres-Skkk Imgعقاب العولقيNo ratings yet
- الفرض الرابع فرنسية الخامس الجزء الاول ابتدائيDocument2 pagesالفرض الرابع فرنسية الخامس الجزء الاول ابتدائيoussama1999hallNo ratings yet
- All Candles PatternDocument4 pagesAll Candles Patternmerabetsoufiane01No ratings yet
- تعلم برمجة جز12Document11 pagesتعلم برمجة جز12alaa_ab2002No ratings yet
- 6- تقويم المستلزمات الدراسية 2010Document2 pages6- تقويم المستلزمات الدراسية 2010Sousou BendaoudNo ratings yet
- تصميم قالب WordpressDocument12 pagesتصميم قالب WordpressbakryNo ratings yet
- Aspx Grid ViewDocument2 pagesAspx Grid ViewDragana PetrushevskaNo ratings yet
- مشروع سكني اداري تجاري ... -Document2 pagesمشروع سكني اداري تجاري ... -abdelrazakhussein86No ratings yet
- 603014469 كتب الشيخ عطيةDocument4 pages603014469 كتب الشيخ عطيةJOE -No ratings yet
- Grilla de DisponibilidadDocument2 pagesGrilla de DisponibilidadRomanNo ratings yet
- الدرس 14Document22 pagesالدرس 14Mohamed MostafaNo ratings yet
- HTML5 V1Document39 pagesHTML5 V1Nadou SheNo ratings yet
- NembrDocument15 pagesNembrhlyh75031No ratings yet
- هام قبل تنصيب البرنامجDocument2 pagesهام قبل تنصيب البرنامجhaider.rasepNo ratings yet
- CSS Part 1Document10 pagesCSS Part 1anas hanyNo ratings yet
- إجابة الباب الثاني من كتاب أساليب البرمجة بلغة سي++ بشير القايدDocument6 pagesإجابة الباب الثاني من كتاب أساليب البرمجة بلغة سي++ بشير القايدmmm wNo ratings yet
