Css &
Uploaded by
Mohammad AliCss &
Uploaded by
Mohammad Aliﺑﺳﻡ ﷲ ﺍﻟﺭﺣﻣﻥ ﺍﻟﺭﺣﻳﻡ
ﺍﻟﻠﻬﻡ ﺻﻠﻲ ﻋﻠﻰ ﻣﺣﻣﺩ ﻭﻋﻠﻰ ﺁﻝ ﻣﺣﻣﺩ
ﻣﺟﻳﺩ ﻛﻣﺎ ﺻﻠﻳﺕ ﻋﻠﻰ ﺇﺑﺭﺍﻫﻳﻡ ﻭﻋﻠﻰ ﺁﻝ ﺇﺑﺭﺍﻫﻳﻡ ﺇﻧﻙ ﺣﻣﻳﺩ
ﻭﺑﺎﺭﻙ ﻋﻠﻰ ﻣﺣﻣﺩ ﻭﻋﻠﻰ ﺁﻝ ﻣﺣﻣﺩ ﻛﻣﺎ
ﺇﺑﺭﺍﻫﻳﻡ ﺍﻧﻙ ﺣﻣﻳﺩ ﻣﺟﻳﺩ ﺑﺎﺭﻛﺕ ﻋﻠﻰ ﺇﺑﺭﺍﻫﻳﻡ ﻭﻋﻠﻰ ﺁﻝ
ﻋﻥ ﺍﺑﻲ ﻫﺭﻳﺭﺓ ﻋﻥ ﺍﻟﻧﺑﻲ -ﺻﻠﻲ ﷲ ﻋﻠﻳﻪ ﻭﺳﻠﻡ ﻗﺎﻝ :
ﻣﻥ ﻛﺗﻡ ﻋﻠﻣﺎ ﻳﻌﻠﻣﻪ ﺟﺎء ﻳﻭﻡ ﺍﻟﻘﻳﺎﻣﺔ ﻣﻠﺟﻣﺎ ﺑﻠﺟﺎﻡ ﻣﻥ ﻧﺎﺭ
ﺗﻡ ﺍﻻﺳﺗﻌﺎﻧﺔ ﺑﺑﻌﺽ ﺍﻟﻣﻭﺍﻗﻊ ﺍﻟﺗﻌﻠﻳﻣﻳﺔ ﻭﺍﻟﻣﺭﺍﺟﻊ ﺍﻟﻌﻠﻣﻳﺔ ﻻﻋﺩﺍﺩ ﻫﺫﺓ ﺍﻟﻣﺎﺩﺓ ﺍﻟﻌﻣﻠﻳﺔ
ﺍﻟﺣﻣﺩ ﻟ ﺍﻟﺫﻯ ﺗﺗﻡ ﺑﻧﻌﻣﺗﻪ ﺍﻟﺻﺎﻟﺣﺎﺕ .ﻫﺫﺍ ﺍﻟﻣﺅﻟﻑ ﺻﺩﻗﺔ ﺟﺎﺭﻳﺔ
ﻋﻠﻰ ﺭﻭﺡ ﺍﺑﻰ – ﷲ ﻳﺭﺣﻣﺔ -ﻭﺻﺩﻗﺔ ﺟﺎﺭﻳﺔ ﻟﻰ .ﺳﺎﺋﻠﺔ ﺍﻟﻣﻭﻟﻰ ﺍﻥ
ﻳﺧﺩﻡ ﻛﻝ ﻁﺎﻟﺏ ﻭﺑﺎﺣﺙ ﻋﻠﻡ
ﺍﺭﺟﻭ ﻣﻣﻥ ﻳﺳﺗﻔﻳﺩ ﻣﻧﻪ ﺍﻥ ﻳﻧﺷﺭﺓ ﻋﻠﻰ ﺍﻭﺳﻊ ﻧﻁﺎﻕ .
ﺟﺯﺍﻛﻡ ﷲ ﺧﻳﺭﺍ
ﺍﺳﺎﻟﻛﻡ ﺍﻟﺩﻋﺎء
ﺷﺭﺡ ﻣﺑﺳﻁ
ﻟﻠﻐﺔ ﺍﻟــــــ CSS 3
ﺍ ﺍ
ﻳﻌﺩ ﺍﻷﺻﺩﺍﺭ ﺍﻟﺟﺩﻳﺩ ﻣﻥ ﻟﻐﺔ ﺍﻷﻧﻣﺎﻁ ﺍﻷﻧﺳﺎﻳﺑﻳﺔ CSSﻭﻫﻭ ﺍﻻﺻﺩﺍﺭ Css 3.0
ﻧﻣﻭﺫﺝ ﺭﺍﺋﻊ ﻟﺗﺣﺳﻳﻥ ﻭﺗﺗﻁﻭﻳﺭ ﺗﻧﺳﻳﻘﺎﺕ ﺍﻟﻭﻳﺏ ،ﺣﻳﺙ ﺑﺩﺍء ﺍﻻﺻﺩﺍﺭ Css 3.0
ﻳﻅﻬﺭ ﻋﻠﻲ ﺍﻷﻓﻕ ﻭﻳﺳﺗﻌﺭﺽ ﻗﻭﺗﻪ ﺍﻟﺟﻣﺎﻟﻳﺔ ﻓﻲ ﺩﻋﻡ ﺍﻟﻌﺩﻳﺩ ﻣﻥ ﺍﻟﺧﺻﺎﺋﺹ ﻭﺍﻟﻣﺯﺍﻳﺎ
ﺍﻟﺗﻲ ﺳﺗﺗﻳﺢ ﻟﻣﺟﺗﻣﻊ ﻣﺻﻣﻣﻲ ﺍﻟﻭﻳﺏ ﺍﻟﻌﺩﻳﺩ ﻣﻥ ﺍﻟﻣﺯﺍﻳﺎ ﻭﺍﻟﺧﺻﺎﺋﺹ ﺍﻟﺟﻣﺎﻟﻳﺔ
ﻷﻋﻣﺎﻟﻬﻡ ﻭﺗﻭﻓﻳﺭ ﺍﻟﻭﻗﺕ ﻭﺍﻟﺟﻬﺩ ﺑﻌﻣﻝ ﻣﺛﻝ ﻫﺫﻩ ﺍﻟﻣﺅﺛﺭﺍﺕ ﻳﺩﻭﻳﺎ ً .
ﻟﻌﻝ ﺍﻵﻥ ﺍﻟﻣﻌﻳﻕ ﺍﻷﺳﺎﺳﻲ ﻟﻬﺫﻩ ﺍﻷﺻﺩﺍﺭﺓ ﻫﻭ ﻋﺩﻡ ﺗﻭﻓﺭ ﺍﻟﺩﻋﻡ ﺍﻟﻛﺎﻣﻝ ﻟﻬﺎ ﻣﻥ ﻗﺑﻝ
ﻛﺎﻓﺔ ﺍﻟﻣﺗﺻﻔﺣﺎﺕ ﻓﻬﻧﺎﻙ ﻣﻥ ﻳﺩﻋﻣﻬﺎ ﻭﻫﻧﺎﻟﻙ ﻻ ﻭﻛﺎﻟﻌﺎﺩﺓ ﺍﻟﻣﺗﺻﻔﺢ ﺇﻧﺗﺭﻧﺕ ﺃﻛﺳﺑﻠﻭﺭ
ﻻ ﻳﺩﻋﻡ ﻭﻫﻧﺎﻙ ﺍﻟﻌﺩﻳﺩ ﻣﻥ ﺍﻟﺧﺻﺎﺋﺹ ﺍﻳﺿﺎ ﺍﻟﺗﻲ ﻻﻳﺩﻋﻣﻬﺎ ﻓﻳﺭﻓﻭﻛﺱ ﻭﻳﺩﻋﻣﻬﺎ
ﺳﻔﺎﺭﻱ ﺑﺈﺧﺗﺻﺎﺭ ﺷﺩﻳﺩ ﺃﻧﻬﺎ ﻟﻡ ﺗﺻﻝ ﻟﻣﺳﺗﻭﻱ ﺍﻟﺩﻋﻡ ﺍﻟﻛﺎﻣﻝ ﻣﻥ ﻗﺑﻝ ﺍﻟﻣﺗﺻﻔﺣﺎﺕ
ﻭﻟﻛﻧﻬﺎ ﺍﻟﻣﺳﺗﻘﺑﻝ ﻭﻳﻭﻣﺎ ً ﻣﺎ ﺳﻧﺟﺩ ﺃﻥ ﻛﺎﻓﺔ ﺍﻟﻣﺳﺗﻌﺭﺿﺎﺕ ﺍﻟﻘﻳﺎﺳﻳﺔ ﺗﺩﻋﻣﻬﺎ ﻭﺳﻳﻠﺟﺄ
ﺍﻟﻣﺻﻣﻣﻭﻥ ﻟﻌﺩﻡ ﺍﻟﻧﻅﺭ ﺇﻟﻲ ﺑﺎﻗﻲ ﺍﻟﻣﺳﺗﻌﺭﺽ ﺍﻟﺗﻲ ﻻ ﺗﺩﻋﻣﻪ ﻷﻧﻬﺎ ﺗﺣﺗﻭﻱ ﻋﻠﻲ
ﺍﻟﻛﺛﻳﺭ ﻣﻥ ﺍﻟﻣﺯﺍﻳﺎ ﺍﻟﺭﺍﺋﻌﺔ ﺍﻟﺗﻲ ﺳﺗﺿﻑ ﺟﻭ ﻛﺑﻳﺭ ﻣﻥ ﺍﻟﺭﻓﺎﻫﻳﺔ ﻋﻠﻲ ﺗﺻﺎﻣﻳﻡ ﺍﻟﻭﻳﺏ.
ﺗﺗﺿﻳﻑ Css 3.0ﻣﺟﻣﻭﻋﺔ ﻣﻥ ﺍﻟﻣﺣﺩﺩﺍﺕ ﻭﺍﻟﺧﺻﺎﺋﺹ ﺍﻟﺟﺩﻳﺩﺓ ﺍﻟﻰ CSSﺍﻟﺗﻘﻠﻳﺩﻳﺔ
ﻭﺍﺻﻁﻠﺢ ﻋﻠﻰ ﺗﺳﻣﻳﺔ ﻛﻝ ﻣﺟﻣﻭﻋﺔ ﻣﻥ ﻫﺫﺓ ﺍﻟﺧﺻﺎﺋﺹ ﺍﻭ ﺍﻟﻣﺣﺩﺩﺍﺕ ﺑﺎﺳﻡ ﺍﻟﻭﺣﺩﺓ
" ، "modulesﻭﻟﻌﻝ ﺍﻫﻡ ﺍﻟﻭﺣﺩﺍﺕ ﺍﻟﻣﺿﺎﻓﺔ ﺍﻭ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻭ ﻫﻰ :
Selectors ﻭﺣﺩﺓ ﺍﻟﻣﺣﺩﺩﺍﺕ ﺍﻟﺟﺩﻳﺩﺓ •
Backgrounds and Borders ﻭﺣﺩﺓ ﺍﻟﺣﺩﻭﺩ ﻭﺍﻟﺧﻠﻔﻳﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ •
Box Model ﻭﺣﺩﺓ ﺗﺣﺳﻳﻥ ﻧﻣﻭﺫﺝ ﺍﻟﺻﻧﺩﻭﻕ •
Text Effects ﻭﺣﺩﺓ ﻣﺅﺛﺭﺍﺕ ﺍﻟﻧﺻﻭﺹ ﺍﻟﺟﺩﻳﺩﺓ •
2DTransformations ﻭﺣﺩﺓ ﺍﻟﺗﺣﻭﻳﻼﺕ ﺍﻟﻬﻧﺩﺳﻳﺔ ﺫﺍﺕ ﺍﻟﺑﻌﺩﻳﻥ •
• ﻭﺣﺩﺓ ﺍﻟﺗﺣﻭﻳﻼﺕ ﺍﻟﻬﻧﺩﺳﻳﺔ ﺫﺍﺕ ﺍﻟﺛﻼﺛﺔ ﺍﺑﻌﺎﺩ 3D Transformations
Animations ﻭﺣﺩﺓ ﺍﻟﺣﺭﻛﺎﺕ •
Multiple Column Layout ﻭﺣﺩﺓ ﺍﻟﺻﻔﺣﺎﺕ ﻣﺗﻌﺩﺩﺓ ﺍﻻﻋﻣﺩﺓ •
User Interface ﻭﺣﺩﺓ ﻭﺍﺟﻬﺔ ﺍﻟﻣﺳﺗﺧﺩﻡ •
ﻭﺳﻭﻑ ﻳﺗﻡ ﺷﺭﺡ ﻫﺫﺓ ﺍﻟﻭﺣﺩﺍﺕ ﺍﻟﻣﺿﺎﻓﺔ ﺍﻭ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
ﺍﻭﻻ :ﺍﻟﺣﻭﺍﻑ ﺍﻟﻣﺳﺗﺩﻳﺭﺓ: Roudned Corners
ﺍﻟﺣﻭﺍﻑ ﺍﻟﻣﺳﺗﺩﻳﺭﺓ ﻣﻥ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﺍﻟﺗﻰ ﺗﻣﺕ ﺍﺿﺎﻓﺗﻬﺎ ﻟﻠﻐﺔ ﺍﻟــ CSSﻭﻫﻰ
ﺧﺎﺻﻳﺔ ﺭﺍﺋﻌﺔ ﻭﻣﻥ ﻣﺯﺍﻳﺎ ﺗﺻﺎﻣﻳﻡ ﺍﻟﻭﻳﺏ ﺍﻟﺣﺩﻳﺛﺔ ﻭﺃﻏﻠﺏ ﺍﻟﻣﻭﺍﻗﻊ ﻣﻥ ﻓﺋﺔ ﺍﻟﻭﻳﺏ
2.0ﺗﺳﺗﺧﺩﻡ ﺍﻟﺣﻭﺍﻑ ﺍﻟﻣﺳﺗﺩﻳﺭﺓ ﻷﻧﻬﺎ ﺗﺿﻔﻲ ﺟﻣﺎﻟﻳﺔ ﻋﻠﻲ ﺍﻟﺗﺻﻣﻳﻡ ﻭﺗﺷﻌﺭﻙ
ﺑﺎﻷﻧﺎﻗﺔ .
ﻭﻫﺫﻩ ﺍﻟﺧﺎﺻﻳﺔ ﺍﻟﻣﻣﻳﺯﺓ ﺃﺻﺑﺣﺕ ﻣﺩﻋﻭﻣﻪ ﻭﺑﻛﻝ ﺳﻬﻭﻟﺔ ﻣﻊ css 3.0ﻭﻣﺩﻋﻭﻣﻪ ﺑﻬﺫﻩ
ﺍﻟﻣﺗﺻﻔﺣﺎﺕ ) ﻓﻳﺭﻓﻭﻛﺱ ﻭ ﺳﻔﺎﺭﻱ ( ﻭﻟﻛﻥ ﺇﻧﺗﺭﻧﺕ ﺃﻛﺳﺑﻠﻭﺭ ﻻ ﻳﺩﻋﻣﻬﺎ ﺣﺗﻲ
ﺑﺈﺻﺩﺍﺭﺗﻪ ﺍﻟﺣﺩﻳﺛﺔIE 8.0 .
ﻭﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻟـــ . border-radiusﻭﺳﻭﻑ ﻳﺗﻡ ﻋﺭﺽ ﺍﻣﺛﻠﺔ
ﻻﺳﺗﺧﺩﺍﻡ ﻫﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ ﻛﻣﺎ ﻳﻠﻰ :
ﺍﻭﻻ ﻋﻣﻝ ﻣﺳﺗﻁﻳﻝ ﺑﺧﻠﻔﻳﺔ ﺧﺿﺭﺍء ﻭﺣﻭﺍﻑ ﻣﺳﺗﺩﻳﺭﺓ ...ﻟﻌﻣﻝ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ
ﺍﻟﺗﺎﻟﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
</body>
</html>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺗﺻﻔﺢ ﻛﻣﺎ ﻳﻠﻰ :
ﺛﺎﻧﻳﺎ :ﻋﻣﻝ ﻣﺳﺗﻁﻳﻝ ﺑﺎﻁﺎﺭ ﺫﺍﺕ ﺣﻭﺍﻑ ﻣﺳﺗﺩﻳﺭﺓ ...ﻟﻌﻣﻝ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ
ﺍﻟﺗﺎﻟﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners2">Rounded corners!</p></body>
</html>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺗﺻﻔﺢ ﻛﻣﺎ ﻳﻠﻰ :
ﺛﺎﻧﻳﺎ :ﻋﻣﻝ ﻣﺳﺗﻁﻳﻝ ﺑﺧﻠﻔﻳﺔ ﺻﻭﺭﺓ ﻭﺫﺍﺕ ﺣﻭﺍﻑ ﻣﺳﺗﺩﻳﺭﺓ ...ﻟﻌﻣﻝ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ
ﺍﻟﻛﻭﺩ ﺍﻟﺗﺎﻟﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
ﺭﺍﺑﻌﺎ :ﻋﻣﻝ ﻣﺳﺗﻁﻳﻝ ﺫﺍﺕ ﺣﻭﺍﻑ ﻣﺳﺗﺩﻳﺭﺓ ﻭﻟﻛﻥ ﺍﻟﺣﻭﺍﻑ ﻣﺳﺗﺩﻳﺭﺓ ﺑﻘﻳﻡ ﻣﺧﻧﻠﻔﺔ...
ﻓﻰ ﻫﺫﺓ ﺍﻟﺣﺎﻟﺔ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﻗﻳﻡ ﻟﻛﻝ ﺣﺎﻓﺔ ﻣﻥ ﺣﻭﺍﻑ ﺍﻟﻣﺳﺗﻁﻳﻝ ﺍﻻﺭﺑﻌﺔ ) ﺍﺫﺍ ﻛﻧﺕ
ﺗﺭﻏﺏ ﻓﻰ ﺗﻐﻳﺭ ﺍﻻﺭﺑﻌﺔ ﺟﻭﺍﻧﺏ ( .ﻭ ﻟﻌﻣﻝ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﺍﻟﺗﺎﻟﻰ :
><!DOCTYPE html
><html
><head
><style
{ #rcorners4
;border-radius: 20px 50px 30px 5px
;background: #73AD21
;padding: 20px
;width: 200px
;height: 150px
}
{ #rcorners5
;border-radius: 15px 50px 30px
;background: #73AD21
;padding: 20px
;width: 200px
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
ﻭﻳﺗﻡ ﺫﻟﻙ.. ﻳﻣﻛﻥ ﺍﻳﺿﺎ ﻋﻣﻝ ﺣﻭﺍﻑ ﺑﺷﻛﻝ ﺍﺧﺭ ﻣﺳﺗﺧﺩﻣﺎ ﻧﺳﺑﺔ ﺍﻭ ﺑﻌﻣﻠﻳﺎﺕ ﺣﺳﺎﺑﻳﺔ
: ﺑﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p>Elliptical border - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p>Elliptical border - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners9"></p>
</body>
</html>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺷﺭﺡ ﺍﻟﺧﺎﺻﻳﺔ ﺍﻻﻭﻟﻰ ﺍﻟﻰ ﺗﻣﺕ ﺍﺿﺎﻓﺗﻬﺎ ﻓﻰ ﺍﻻﺻﺩﺍﺭ 3
ﻭﻫﻰ ﺍﻟﺣﻭﺍﻑ ﺍﻟﻣﺳﺗﺩﻳﺭﺓ: Roudned Corners
ﺛﺎﻧﻳﺎ :ﺍﺿﺎﻓﺔ ﺻﻭﺭﺓ ﺍﻷﻁﺎﺭﺍﺕ: Border Image
ﺑﺎﺳﺗﺧﺩﺍﻣﻙ ﻟﻠﻐﺔﺍﻟـــ cssﺍﻟﺗﻘﻠﻳﺩﻳﺔ ﻳﻣﻛﻧﻙ ﺃﻥ ﺗﺿﻳﻑ ﻣﺟﻣﻭﻋﺔ ﻣﻥ ﺍﻷﻁﺎﺭﺍﺕ ﻷﻱ
ﻋﻧﺻﺭ ﻭﻟﻳﻛﻥ ﻣﺛﻼ ﻧﺹ ﺍﻭ ﺭﺍﺑﻁ ﺍﻭ ﺻﻭﺭﺓ ﻭﻫﺫﺍ ﺍﻷﻁﺎﺭ ﻳﻌﺎﻧﻲ ﻣﻥ ﺍﻟﺗﻘﻠﻳﺩﻳﺔ ﺣﻳﺙ
ﻳﻛﻭﻥ ﺑﺭﺍﻭﺯ ﺳﻭﺍء ﻟﻭﻥ ﻣﻌﻳﻥ ﺍﻭ ﻣﺣﺩﺩ ﺍﻟﻧﻘﺎﻁ ﺍﻭ ﺛﻼﺛﻲ ﺍﻟﺷﻛﻝ ﻭﻟﻛﻥ ﺑﺎﻟﻧﻬﺎﻳﺔ ﺃﺷﻛﺎﻝ
ﻣﺣﺩﺩﺓ ﻭﻣﻊ ﺍﻟﺟﻳﻝ ﺍﻟﺟﺩﻳﺩ ﻣﻥ cssﻳﻣﻛﻧﻙ ﺃﻥ ﺗﺿﻳﻑ ﻟﻬﺫﻩ ﺍﻷﻁﺎﺭﺍﺕ ﺻﻭﺭﺓ ﻣﻌﻳﻧﺔ
ﺗﺧﺗﺎﺭﻫﺎ ﺑﻧﻔﺳﻙ ..ﻭﻳﻣﻛﻧﻙ ﺍﻧﺷﺎء ﺍﻁﺎﺭﺍﺕ ﺣﺎﻭﻳﺔ ﻟﻌﻧﺎﺻﺭ ﺍﻟﺻﻔﺣﺔ ﺗﺣﺗﻭﻱ ﻋﻠﻲ
ﺻﻭﺭ
ﻭﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻟــ border-image
ﻭﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ ﻳﻭﺿﺢ ﻛﻳﻔﻳﺔ ﺍﺳﺗﺧﺩﻡ ﺧﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ ..
ﺑﻔﺭﺽ ﺍﻧﻰ ﺍﺭﻳﺩ ﺍﺿﺎﻓﺔ ﺑﺭﻭﺍﺯ ﺍﻭ ﺍﻁﺎﺭ ﻟﻧﺹ ﻣﺎ ..ﻫﺫﺍ ﺍﻻﻁﺎﺭ ﻳﻛﻭﻥ ﻋﻠﻰ ﺷﻛﻝ
ﺻﻭﺭﺓ ﻭﻟﻳﻛﻡ ﺍﻟﺻﻭﺭﺓ ﺍﻟﺗﺎﻟﻳﺔ
ﻟﻌﻣﻝ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﺍﻟﺗﺎﻟﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
</style>
</head>
<body>
<p id="borderimg">Here, the middle sections of the image are
repeated to create the border.</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions,
do not support the border-image property.</p>
ﻣﻠﺣﻭﻅﺔ ﻣﻬﻣﺔ ﺟﺩﺍ ...ﻻﺑﺩ ﻣﻥ ﺍﺿﺎﻓﺔ ﺍﻟﺻﻭﺭﺓ ﺍﻟﺳﺎﺑﻘﺔ ﻓﻰ ﻧﻔﺱ ﺍﻟﻔﻭﻟﺩﺭ ﺍﻟﻣﻭﺟﻭﺩ
ﺑﺔ ﻣﻠﻑ ﺍﻻﺗﺵ ﺗﻰ ﺍﻡ ﺍﻝ ) ﺍﻟﺻﻭﺭﺓ ﻫﻰ . ( border.png
ﻭﻳﻅﻬﺭ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﻣﻠﺣﻭﻅﺔ ﻣﻬﻣﺔ ﺟﺩﺍ ..ﻳﻼﺣﻅ ﺍﻥ ﺍﻟﺻﻭﺭﺓ ﻗﺩ ﺗﻡ ﺗﻛﺭﺭﻫﺎ ﺣﻭﻝ ﺍﻟﻛﻼﻡ ﻟﺗﻛﻭﻳﻥ
ﺍﻟﺑﺭﻭﺍﺯ ﺍﻭ ﺍﻻﻁﺎﺭ .ﻟﻌﻣﻝ ﺫﻟﻙ ﺍﻟﺗﻛﺭﺍﺭ ﺑﻳﺗﻡ ﺑﺎﺳﺗﺧﺩﺍﻡ ﻗﻳﻣﺔ ) ( roundﺍﻡ ﺍﺫﺍ ﺍﺭﺩﻧﺎ
ﺍﻥ ﻻ ﻳﺗﻡ ﺗﻛﺭﺍﺭ ﺍﻟﺻﻭﺭﺓ ﻭﻣﺩﻫﺎ ﺍﻯ ﻋﻣﻝ ﺍﺳﺗﺭﻳﺗﺵ ﻟﻬﺎ ﻳﺳﺗﺧﺩﻡ ﻗﻳﻣﺔ
)( stretched
ﻭﻟﻌﻣﻝ
!<ﺍﻟﺗﺎﻟﻰDOCTYPE
ﻳﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﺍﻻﻁﺎﺭ ﺍﻭ ﺍﻟﺑﺭﻭﺍﺯ ﺑﺩﻭﻥ ﺗﻛﺭﺍﺭ ﺍﻯ ﻳﺗﻡ ﻋﻣﻝ ﺍﺳﺗﺭﻳﺗﺵ ﻟﺔ ﻭﺫﻟﻙ
html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
</style>
</head>
<body>
<p id="borderimg">Here, the middle sections of the image are
stretched to create the border.</p>
<p>Here is the original image:</p><img src="border.png">
: ﻳﻣﻛﻥ ﻋﻣﻝ ﺍﻁﺎﺭﺍﺕ ﺍﻭ ﺑﺭﻭﺍﺯ ﺑﻘﻳﻡ ﻣﺧﺗﻠﻔﺔ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
</style>
</head>
<body>
ﻭﻳﻅﻬﺭ ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
.... ﺍﻭ ﻛﻣﺎ ﻳﻠﻰ
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
border-image: url(border.png) 50 round;
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
ﺛﺎﻟﺛﺎ :ﺍﻟﺧﻠﻔﻳﺎﺕ ﺍﻟﺟﺩﺩﻳﺩﺓ CSS3 Backgrounds
ﻓﻰ css3ﺗﻡ ﺍﺿﺎﻓﺔ ﺧﺎﺻﻳﺗﻳﻥ ﺟﺩﻳﺩﺗﻳﻥ ﻟﻣﺳﺎﻋﺩﺓ ﻣﻁﻭﺭ ﺍﻟﻭﻳﺏ ﻋﻠﻰ ﺍﻟﺗﺣﻛﻡ
ﺑﺎﻟﺧﻠﻔﻳﺎﺕ ﺑﺷﻛﻝ ﺍﻓﺿﻝ ،ﺍﻻﻭﻝ ﻫﻰ ﺧﺎﺻﻳﺔ background-sizeﻭﺍﻟﺛﺎﻧﻳﺔ ﻫﻰ
. background-origin
-1ﺧﺎﺻﻳﺔ background-size
ﻫﻰ ﺧﺎﺻﻳﺔ ﺗﺳﻣﺢ ﺑﺗﺣﺩﻳﺩ ﺍﺑﻌﺎﺩ ﺍﻟﺻﻭﺭﺓ ﺍﻟﺧﻠﻔﻳﺔ ﺑﺎﻟﺑﻳﻛﺳﻝ ﻣﻣﺎ ﻳﺳﻣﺢ ﺑﺎﻋﻁﺎء
ﺍﻟﺻﻭﺭﺓ ﻛﺧﻠﻔﻳﺔ ﺍﺑﻌﺎﺩﺍ ﺗﺧﺗﻠﻑ ﻋﻥ ﺍﻻﺑﻌﺎﺩ ﺍﻻﺻﻠﻳﺔ ﻟﻠﺻﻭﺭﺓ ﻭﻫﻭ ﻣﺎ ﻟﻡ ﻳﻛﻭﻥ
ﻣﻣﻛﻧﺎ ﻗﺑﻝ css3ﻭﻳﺗﻡ ﺍﺳﺗﺧﺩﺍﻡ ﻫﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ ﻛﻣﺎ ﻳﻠﻰ ..
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:15px;
#example2 {
border: 1px solid black;
background:url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding:15px;
<p>Original background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</div>
<p>Resized background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
ﻭﻳﻣﻛﻥ ﺍﻳﺿﺎ ﺍﺳﺗﺧﺩﺍﻡ ﻗﻳﻣﺗﺎﻥ ﺍﺧﺭﻯ ﻟﻠﺗﺣﻛﻡ ﻓﻰ ﻣﻘﺎﺱ ﺍﻟﺧﻠﻔﻳﺔ ،ﻫﺫﺍﻥ ﺍﻟﻘﻳﻣﺎﺗﺎﻥ ﻫﻣﺎ
contain and cover
ﺑﻳﺗﻡ ﺯﻳﺎﺩﺓ ﻣﻘﺎﺱ ﺍﻟﺻﻭﺭﺓ ﺍﻟﻣﺳﺗﺧﺩﻣﺔ ﻛﺧﻠﻔﻳﺔ ﻣﻊ ﻣﺭﻋﺎﺓ contain ﺑﺎﻟﻧﺳﺑﺔ ﻟــ
ﺍﻟﻣﺣﺎﻓﻅﺔ ﻋﻠﻰ ﺍﻟﻧﺳﺑﺔ ﺑﻳﻥ ﺍﻟﻁﻭﻝ ﻭﺍﻟﻌﺭﺽ
ﺑﻳﺗﻡ ﺯﻳﺎﺩﺓ ﻣﻘﺎﺱ ﺍﻟﺻﻭﺭﺓ ﺍﻟﻣﺳﺗﺧﺩﻣﺔ ﻛﺧﻠﻔﻳﺔ ﺑﺣﻳﺙ ﺗﻐﻁﻰ ﻛﻝcover ﺑﺎﻟﻧﺳﺑﺔ ﻟــ
ﺍﻟﻣﺳﺎﺣﺔ ﺍﻟﻣﻭﺟﻭﺩﺓ ﻓﻳﻬﺎ ﻛﺧﻠﻔﻳﺔ
contain ﻣﺛﺎﻝ ﻋﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background:url(gggttt.png);
background-size:contain;
background-repeat: no-repeat;
padding:15px;
</style>
</head>
<body>
<p>Resized background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
ﻭﻳﻅﻬﺭ ﺑﺎﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
cover ﻣﺛﺎﻝ ﻋﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background:url(gggttt.png);
background-size: cover;
background-repeat: no-repeat;
padding:15px;
</style>
</head>
<body>
<p>Resized background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ ..
-2ﺍﻟﺧﺎﺻﻳﺔ ﺍﻟﺛﺎﻧﻳﺔ background-origin
ﻭ ﺍﻟﺗﻰ ﺗﺣﺩﺩ ﻧﻣﻭﺫﺝ ﺍﻟﺻﻧﺩﻭﻕbackground-origin ﺍﻣﺎ ﺍﻟﺧﺎﺻﻳﺔ ﺍﻟﺛﺎﻧﻳﺔ ﻓﻬﻰ
ﻟﻳﺗﻡ ﺗﺗﻁﺑﻳﻕ ﺍﻟﺧﻠﻔﻳﺔ ﻋﻠﻰ ﺍﺳﺎﺳﺔ ﺑﻣﻌﻧﻰ ﺍﺧﺭ ﻣﻥ ﺧﻼﻟﺔ ﺑﻳﺗﻡ ﺗﺣﺩﻳﺩ ﻭﺿﻊ ﺍﻟﺻﻭﺭﺓ
ﻭﻟﻠﻠﺗﻭﺿﻳﺢ ﺍﻛﺛﺭ ﺷﺎﻫﺩ ﻭﺿﻊ ﻫﺫﺓ ﺍﻟﺻﻭﺭ، ﺍﻟﻣﺳﺗﺧﺩﻣﺔ ﻛﺣﻠﻔﻳﺔ ﺑﺎﻟﻧﺳﺑﺔ ﻟﻠﺻﻧﺩﻭﻕ
: ﻳﻣﻛﻥ ﺍﻥ ﺗﺎﺧﺫ ﺍﺣﺩ ﺍﻟﻘﻳﻡ ﺍﻟﺗﺎﻟﻳﺔbackground-origin ﻭﺧﺎﺻﻳﺔ
border-box, padding-box, content-box
border-box ﻣﺛﺎﻝ ﻋﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 16px solid rgba(23,23,23,0.5);
height: 300px;
width: 300px;
background: url(cat.jpg) no-repeat;
background-origin: border-box;
background-size: cover;
padding-box ﻣﺛﺎﻝ ﻋﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 16px solid rgba(23,23,23,0.5);
height: 300px;
width: 300px;
background: url(cat.jpg) no-repeat;
background-origin: padding-box;
background-size: cover;
padding: 16px;
margin: 0 auto;
ﻭﻳﻅﻬﺭ ﻛﻣﺎ ﻳﻠﻰ
content-box ﻣﺛﺎﻝ ﻋﻠﻰ
<!DOCTYPE html>
<html>
ﻣﻼﺣﻅﺔ ﻫﺎﻣﺔ ::
ﻳﺟﺏ ﻣﺭﺍﻋﺎﺓ ﺍﻥ ﻫﻧﺎﻙ ﺑﻌﺽ ﺍﻟﺧﺻﺎﺋﺹ ﺍﻟﺗﻰ ﻳﺟﺏ ﺍﺿﺎﻓﺔ ﺑﺎﺩﺋﺔ ﺣﺗﻰ ﻳﺗﻣﻛﻥ
ﺍﻟﻣﺳﺗﻌﺭﺽ ﻣﻥ ﻓﻬﻣﻬﺎ ﻛﻣﺎ ﻳﻠﻰ
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
;-webkit-border-radius: 12px
/* Firefox 1-3.6 */
;-moz-border-radius: 12px
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4,
Android 2.1+ */
;border-radius: 12px
- 3ﺍﻟﺧﻠﻔﻳﺎﺕ ﺍﻟﻣﺗﻌﺩﺩﺓ: Multiple Backgrounds
ﻭﻫﻲ ﺗﺳﻣﺢ ﻟﻙ ﺑﺈﺿﺎﻓﺔ ﺃﻛﺛﺭ ﻣﻥ ﺧﻠﻔﻳﺔ ﻟﻧﻔﺱ ﺍﻟﻌﻧﺻﺭ ،ﻟﺗﺣﻛﻡ ﺃﻓﺿﻝ ﻭﺃﺳﻬﻝ ،
ﻭﻫﺫﺓ ﺍﻟﺧﻠﻔﻳﺎﺕ ﻗﺩ ﺗﻛﻭﻥ ﺑﻣﻘﺎﺳﺎﺕ ﻣﺧﺗﻠﻔﺔ ،ﻣﻊ ﺍﻣﻛﺎﻧﻳﺔ ﺗﺣﺩﻳﺩ ﻣﻛﺎﻥ ﻭﻣﻘﺎﺱ ﻛﻝ
ﺻﻭﺭﺓ ﻣﻥ ﺻﻭﺭ ﺍﻟﺧﻠﻔﻳﺎﺕ
ﻣﺛﺎﻝ ﻋﻠﻰ ﺍﺿﺎﻓﺔ 3ﺻﻭﺭ ﻛﺧﻠﻔﻳﺔ ﺑﻘﺎﺳﺎﺕ ﻭﺍﻣﻛﺎﻥ ﻣﺧﺗﻠﻔﺔ
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(border.png) left top no-repeat, url(border.png) right bottom
no-repeat, url(dd.jpg) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﺭﺍﺑﻌﺎ :ﺍﻻ ﻟﻭﺍﻥ CSS3 Colors
ﻟﻌﻝ ﺍﻷﻟﻭﺍﻥ ﻣﺗﺎﺣﺔ ﻣﻥ ﻗﺑﻝ ﻓﻲ ﺍﻹﺟﻳﺎﻝ ﺍﻟﺳﺎﺑﻘﺔ ﻣﻥ cssﻭﻟﻛﻥ ﺍﻟﺟﺩﻳﺩ ﺃﻧﻙ ﺍﺣﻳﺎﻧﺎ ً ﺗﺭﻳﺩ
ﻣﻝء ﻣﺳﺎﺣﺔ ﻟﻭﻧﻳﺔ ﻣﺣﺩﺩﺓ ﺑﻠﻭﻥ ﻣﻌﻳﻥ ﻭﻟﻛﻥ ﺗﺭﻳﺩ ﺃﻥ ﻳﻛﻭﻥ ﻫﺫﺍ ﺍﻟﻠﻭﻥ ﺑﻳﻪ ﺩﺭﺟﺔ
ﺷﻔﺎﻓﻳﺔ ﺗﺳﻣﺢ ﻟﻠﻛﺎﺋﻥ ﺧﻠﻔﻪ ﺍﻭ ﺍﻟﺷﻛﻝ ﺍﻟﺫﻱ ﺑﺧﻠﻔﻳﺗﻪ ﺃﻥ ﻳﻅﻬﺭ ﻭﻟﻳﺱ ﻳﻅﻬﺭ ﺑﺷﻛﻝ ﻟﻭﻥ
ﻛﺎﻣﻝ ﻭﻻ ﺗﺭﻱ ﺃﻱ ﺷﺊ ﺧﻠﻔﺔ ..ﻣﺟﺭﺩ ﻣﺳﺎﺣﺔ ﻟﻭﻧﻳﺔ ﻛﺎﻣﻠﺔ ،ﺃﺻﺑﺢ ﻫﺫﺍ ﻣﺗﺎﺡ ﻓﻲ
ﺍﻷﻟﻭﺍﻥ ﻓﻲ cssﺍﻷﺻﺩﺍﺭ ﺍﻟﺟﺩﻳﺩ ﺣﻳﺙ ﻳﻣﻛﻧﻙ ﺍﺧﺗﻳﺎﺭ ﺃﻱ ﺩﺭﺟﺔ ﻟﻭﻧﻳﺔ ﻭﻛﺫﻟﻙ ﺍﺧﺗﻳﺎﺭ
ﺩﺭﺟﺔ ﺍﻟﺷﻔﺎﻓﻳﺔ ﻟﻬﺫﺍ ﺍﻟﻠﻭﻥ.
ﻭ ﻭﻛﻣﺎ ﻫﻭ ﻣﻌﺭﻭﻑ ﺍﻧﺔ ﺍﻹﺟﻳﺎﻝ ﺍﻟﺳﺎﺑﻘﺔ ﻣﻥ cssﻛﺎﻧﺕ ﺍﻟﻠﻐﺔ ﺗﻣﻛﻥ ﻣﻥ ﺗﺣﺩﻳﺩ
" ("#ff0000ﺍﻭ ﺑﺎﺳﻡ ﺍﻟﻠﻭﻥ ) hexadecimal ﺍﻻﻟﻭﺍﻥ ﺍﻣﺎ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺍﻟﻧﻅﺎﻡ ﺍﻟﻌﺷﺭﻯ
)")( "rgb(255, 0, 0 ) ( yellowﺍﻭ ﺑﺎﺳﺗﺧﺩﺍﻡ ﻧﻅﺎﻡ ﺍﻟــ rgb
Colors in CSS are most often specified by:
• "a valid color name - like "red
• ")an RGB value - like "rgb(255, 0, 0
• "a HEX value - like "#ff0000
ﺍﻣﺎ ﻓﻰ ﺍﻻﺻﺩﺍﺭ ﺍﻟﺟﺩﻳﺩ ﻣﻥ ﺍﻟﻠﻐﺔ ﻓﻘﺩ ﺗﻡ ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﻣﻊ ﺍﺿﺎﻓﺔ ﺑﻌﺽ ﺍﻟﻘﻳﻡ ﻛﻣﺎ ﻳﻠﻰ
:
)rgba(red, green, blue, alpha ﺍﻭﻻ ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﻗﻳﻡ : RGBA
ﻓﻰ ﻫﺫﺍ ﺍﻟﻧﻅﺎﻡ ﺑﻳﺗﻡ ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﻛﻣﺎ ﻛﺎﻥ ﺳﺎﺑﻘﺎ ﺑﺎﻻﺿﺎﻓﺔ ﺍﻟﻰ ، alphaﻭﺗﺗﺭﺍﻭﺡ
alphaﻣﺎ ﺑﻳﻥ ﺍﺩﻧﻰ ﻗﻳﻣﺔ ﻭﻫﻰ 0.0ﺍﻟﻰ ﺍﻋﻠﻰ ﻗﻳﻣﺔ ﻭﻫﻰ 1.0ﻛﻣﺎ ﻫﻭ ﻣﻭﺿﺢ
ﺑﺎﻟﺷﻛﻝ :
ﻭﻟﺗﻁﺑﻳﻕ ﺫﻟﻙ ﻳﺗﻡ ﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>
ﺍﻭ ﺑﻛﺗﺎﺑﺔ ﺍﻟﻛﻭﺩ ﺑﺷﻛﻝ ﺍﺧﺭ ﻛﻣﺎ ﻳﻠﻰ ﻭﺗﻅﻬﺭ ﻧﻔﺱ ﺍﻟﻧﺗﻳﺟﺔ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p div id="p1">Red</p>
<p div id="p2">Green</p>
<p div id="p3">Blue</p>
<p div id="p4">Grey</p>
<p div id ="p5">Yellow</p>
<p div id ="p6">Cerise</p>
</body>
</html>
hsl(hue, saturation, ﺛﺎﻧﻳﺎ :ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﻗﻳﻡ : HSL Colors
lightness).
ﻓﻰ ﻫﺫﺍ ﺍﻟﻧﻅﺎﻡ ﻳﺗﻡ ﺗﺣﺩﻳﺩ ﻗﻳﻣﺔ ﺍﻟﻠﻭﻥ ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﻗﻳﻣﺔ ﺍﻟﻠﻭﻥ ﻓﻰ ﺛﻼﺛﺔ ﺍﺷﻳﺎء :
Hue -ﻳﻌﻧﻰ ﻗﻳﻣﺔ ﺍﻟﻠﻭﻥ ﻓﻰ ﻋﺟﻠﺔ ﺍﻻﻟﻭﺍﻥ ﻫﻝ ﺍﻟﻠﻭﻥ ﺍﺣﻣﺭ ﻭﻻ ﺍﺻﻔﺭ ﻭﻻ
، )(0 to 360 ﺑﻧﻔﺳﺟﻰ ،ﻭﻫﻭ ﻳﺗﺭﺍﻭﺡ ﻣﺎ ﺑﻳﻥ
• 0 (or 360) is red
• 120 is green
• 240 is blue
.
-ﺍﻳﺿﺎ ﺍﻟﺗﺣﻛﻡ ﻓﻰ ﺩﺭﺟﺔ ﺍﻟﻭﺿﻭﺡ ﺍﻭ ﺩﺭﺟﺔ ﺍﻟﺗﺷﺑﻊ ﻳﻌﻧﻰ ﺍﺣﻣﺭ ﻗﻭﻯ ﺟﺩﺍ ﻭﻻ
ﺍﺣﻣﺭ ﺿﻌﻳﻑ ﺟﺩﺍ ) Saturationﺳﻭﺍء ﺑﺎﻟﺯﻳﺎﺩﺓ ﺍﻭ ﺍﻟﺗﻘﻠﻳﻝ ( ﻭﻫﻰ ﺗﻛﻭﻥ ﻧﺳﺑﺔ
ﻣﺋﻭﻳﺔ ،ﻧﺳﺑﺔ %100ﻫﻰ ﺍﻋﻠﻰ ﺩﺭﺟﺔ ﻭﺿﻭﺡ ﺍﻭ ﺗﺷﺑﻊ ﻟﻠﻭﻥ
• 100% is the full color
-ﺍﻳﺿﺎء ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﺍﻻﺿﺎءﺓ ﺍﻭ ﺗﻔﺗﻳﺢ ﺍﻟﻠﻭﻥ ﺍﻭ ﺗﻐﻣﻳﻕ ﺍﻟﻠﻭﻥ lightnessﻭﻫﻰ
ﺗﻛﻭﻥ ﻧﺳﺑﺔ ﻣﺋﻭﻳﺔ %0 ،ﺗﻌﻧﻰ ﺍﺳﻭﺩ ﺍﻭﻏﺎﻣﻕ ﻭ %100ﺗﻌﻧﻰ ﺍﺑﻳﺽ ﺍﻭ ﻓﺎﺗﺢ .
• 0% is dark (black) and 100% is white.
ﻛﻣﺎ ﺑﺎﻟﺷﻛﻝ ﺍﻟﺗﺎﻟﻰ :
: ﻭﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>
ﻭ ﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
(hue, saturation, ﺛﺎﻟﺛﺎ :ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﻗﻳﻡ : HSLA Colors
)lightness, alpha
ﻛﻣﺎ ﻫﻭ ﻣﻭﺿﺢ ﺑﺎﻟﺷﻛﻝ :
: ﻭﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﺭﺍﺑﻌﺎ :ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﺑﺎﻟﺗﺣﻛﻡ ﻓﻰ ﻗﻳﻡ ﺷﻔﺎﻓﻳﺔ ﺍﻟﻠﻭﻥ Opacity
ﺗﺣﺩﻳﺩ ﺍﻟﻠﻭﻥ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺍﻟﺗﻅﺎﻡ ﺍﻟﻠﻭﻧﻰ ) ( rgbﻭﺩﺭﺟﺔ ﺷﻔﺎﻓﻳﺔ ﺍﻟﻠﻭﻥ ﻭﻫﻰ ﺗﺗﺭﺍﻭﺡ ﻣﺎ
ﺑﻳﻥ ﺍﺩﻧﻰ ﻗﻳﻣﺔ ﻭﻫﻰ 0.0ﺍﻟﻰ ﺍﻋﻠﻰ ﻗﻳﻣﺔ ﻭﻫﻰ 1.0ﻛﻣﺎ ﻫﻭ ﻣﻭﺿﺢ ﺑﺎﻟﺷﻛﻝ :
ﻭﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>RGB colors with opacity:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺭﺍﺑﻊ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻣﻥ ﺍﻟﻭﺣﺩﺍﺕ ﺍﻟﻣﺿﺎﻓﺔ ﺍﻭ
ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
ﺧﺎﻣﺳﺎ :ﺍﻟﺗﺩﺭﻳﺟﺎﺕ ﺍﻟﻠﻭﻧﻳﺔ CSS3 Gradients
ﺧﺎﺻﻳﺔ ﺟﺩﻳﺩﺓ ﺃﺧﺭﻯ ﺗﻡ ﺍﺿﺎﻓﺗﻬﺎ ﻟﻠﻐﺔ ﻭﻫﻲ ﺇﺿﺎﻓﺔ ﺍﻟﺗﺩﺭﺟﺎﺕ ﺍﻟﻠﻭﻧﻳﺔ ،ﻭﺍﻟﺗﻲ ﻳﻣﻛﻥ
ﺇﺿﺎﻓﺗﻬﺎ ﺑﻛﻭﺩ ﺑﺳﻳﻁ ﺑﺩﻝ ﺻﻧﻊ ﺻﻭﺭﺓ ﺧﺎﺻﺔ ﻭﻭﺿﻌﻬﺎ ،ﻭﻫﻧﺎﻙ ﺍﻛﺛﺭ ﻣﻥ ﺷﻛﻝ
ﻟﻠﺗﺗﺩﺭﻳﺞ ﺍﻟﻠﻭﻧﻰ ﻛﻣﺎ ﻳﻠﻰ :
• ﺍﻟﺗﺩﺭﻳﺢ ﺍﻟﻠﻭﻧﻰ ﺑﺷﻛﻝ ﻁﻭﻟﻰ ﻣﻥ ﺍﻋﻠﻰ ﺍﻟﻰ ﺍﺳﻔﻝ ﻭﻫﻭ ﺍﻟﺗﻘﻠﻳﺩﻯ
)Linear Gradient - Top to Bottom (this is default
ﻭﻳﻛﻭﻥ ﺑﺎﻟﺷﻛﻝ ﺍﻟﻣﻭﺿﺢ ﺑﺎﻟﺻﻭﺭﺓ :
ﻭﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support
gradients.</p>
</body>
</html>
ﻭ ﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ ﻳﻠﻰ
• ﺍﻟﺗﺩﺭﻳﺢ ﺍﻟﻠﻭﻧﻰ ﺑﺷﻛﻝ ﻁﻭﻟﻰ ﻣﻥ ﺍﻟﺷﻣﺎﻝ ﺍﻟﻰ ﺍﻟﻳﻣﻳﻥ
Linear Gradient - Left to Right
ﻛﻣﺎ ﻣﻭﺿﺢ ﺑﺎﻟﺻﻭﺭﺓ
ﻭ ﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax (must be
last) */
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support
gradients.</p>
</body>
</html>
• ﺍﻟﺗﺩﺭﻳﺢ ﺍﻟﻠﻭﻧﻰ ﺑﺷﻛﻝ ﻁﻭﻟﻰ ﻣﻊ ﺗﺣﺩﻳﺩ ﺍﺗﺟﺎﻫﺔ ﺍﻻﻓﻘﻰ ﻭﺍﻟﺭﺍﺳﻰ
Linear Gradient – Diagonal
ﻭﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﻛﻣﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be
last) */
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺢ ﻟﻭﻧﻰ ﻣﻊ ﺗﺣﺩﻳﺩ ﺍﺗﺟﺎﻫﺔ ﺍﻟﺗﺩﺭﻳﺞ ﺍﻟﻠﻭﻧﻰ ﺑﺗﺣﺩﻳﺩ ﺯﺍﻭﻳﺔ ﺍﻟﺗﺗﺩﺭﻳﺞ
ﺍﻟﻠﻭﻧﻰ
• Using Angles
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
#grad2 {
height: 100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */
#grad3 {
height: 100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(180deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, yellow); /* Standard syntax (must be last) */
#grad4 {
height: 100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */
</style>
</head>
<body>
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺢ ﻣﺗﻌﺩﺩ ﺍﻻﻟﻭﺍﻥ
Using Multiple Color Stops
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For
Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For
Firefox 3.6 to 15 */
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to
6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0
*/
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15
*/
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be
last) */
</style>
</head>
<body>
<h3>3 Color Stops (evenly spaced)</h3>
<div id="grad1"></div>
<h3>7 Color Stops (evenly spaced)</h3>
<div id="grad2"></div>
• ﻣﺛﺎﻝ ﻋﻠﻰ ﻋﻣﻝ ﺗﺗﺩﺭﻳﺢ ﻣﺗﻌﺩﺩ ﺍﻻﻟﻭﺍﻥ ﻣﻥ ﺍﻟﺷﻣﺎﻝ ﺍﻟﻰ ﺍﻟﻳﻣﻳﻥ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For
Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera
11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx
3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard
syntax (must be last) */
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-
weight:bold">
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺢ ﻟﻭﻧﻰ ﻣﺳﺗﺧﺩﻣﺎ ﺍﻟﺷﻔﺎﻓﻳﺔ
Using Transparency
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0
*/
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0
*/
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15
*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must
be last) */
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in
• ﻋﻣﻝ ﺗﻛﺭﺍﺭ ﻟﻠﺗﺗﺩﺭﻳﺢ ﺍﻟﻠﻭﻧﻰ
Repeating a linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari 5.1 to
6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0
*/
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15
*/
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be
last) */
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* For Safari 5.1
to 6.0 */
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺞ ﻟﻭﻧﻰ ﺑﺷﻛﻝ ﺩﺍﺋﺭﻯ
CSS3 Radial Gradients
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺞ ﻟﻭﻧﻰ ﺑﺷﻛﻝ ﺩﺍﺋﺭﻯ ﻣﻊ ﺗﺣﺩﻳﺩ ﻣﺳﺎﺣﺔ ﻛﻝ ﻟﻭﻥ ﻣﻥ ﺍﻟﻭﺍﻥ ﺍﻟﺗﺩﺭﻳﺢ
ﺍﻟﻠﻭﻧﻰ
Radial Gradient - Differently Spaced Color Stops
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last)
*/
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
• ﻋﻣﻝ ﺗﺗﺩﺭﻳﺞ ﻟﻭﻧﻰ ﺑﺷﻛﻝ ﺩﺍﺋﺭﻯ ﻣﺣﺩﺩ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>
<p><strong>Circle:</strong></p>
<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺧﺎﻣﺱ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻣﻥ ﺍﻟﻭﺣﺩﺍﺕ ﺍﻟﻣﺿﺎﻓﺔ
CSS3 ﺍﻭ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ
ﺳﺎﺩﺳﺎ :ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ CSS3 Shadow Effects
.1ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻭﺗﺣﺩﻳﺩ ﺣﺟﻣﺔ CSS3 Text Shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
.2ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻭﺗﺣﺩﻳﺩ ﺍﻟﺣﺟﻡ ﻭ ﺍﻟﻠﻭﻥ CSS3 Text Shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
CSS3 Text ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻭﺗﺣﺩﻳﺩ ﺍﻟﺣﺟﻡ ﻭ ﺍﻟﻠﻭﻥ ﻭﺩﺭﺟﺔ ﺍﻟﺩﻗﺔ.3
Shadow blur
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
.4ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻭﺗﺣﺩﻳﺩ ﺍﻟﺣﺟﻡ ﻭ ﺍﻟﻠﻭﻥ ﻣﺳﺗﺧﺩﻣﺎ ﺍﻻﺑﻳﺽ ﻭﺍﻻﺳﻭﺩ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
.5ﻣﺛﺎﻝ ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻣﺳﺗﺧﺩﻣﺎ ﺍﻛﺛﺭ ﻣﻥ ﻅﻝ.6
Multiple Shadows
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
.7ﻣﺛﺎﻝ ﻋﻠﻰ ﺍﺿﺎﻓﺔ ﺍﻟﻅﻝ ﻟﻠﻧﺻﻭﺹ ﻣﺳﺗﺧﺩﻣﺎ ﺍﻻﺑﻳﺽ ﻭ ﺍﻻﺯﺭﻕ ﺍﻟﻔﺎﺗﺢ
ﻭﺍﻟﻐﺎﻣﻕ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>
</html>
ﻳﻤﻜﻦ ﺍﻻﺳﺘﻌﺎﻧﺔ ﺑﺎﺷﻜﺎﻝ ﺍﺧﺮﻯ ﻟﻠـ CSS Box Shadowﻋﻠﻰ ﺍﻟﺮﺍﺑﻂ ﺍﻟﺘﺎﻟﻰ
/https://css-tricks.com/snippets/css/css-box-shadow
ﺳﺎﺑﻌﺎ :ﺍﻟﻧﺻﻭﺹ CSS3 Text
ﺳﻮﻑ ﻧﺘﻄﺮﻕ ﻓﻰ ﺍﻟﺠﺰء ﺍﻟﺨﺎﺹ ﺑﺎﻟﻨﺼﻮﺹ ﺍﻟﻰ ﺍﺭﺑﻌﺔ ﻣﻦ ﺍﻟﺨﺼﺎﺋﺺ ﺍﻟﺠﺪﻳﺪﺓ ﺍﻟﺘﻰ
ﺍﺿﻴﻔﺖ ﻓﻰ ﺍﻻﺻﺪﺍﺭ ﺍﻟﺠﺪﻳﺪ ﻣﻦ ﺍﻟﻠﻐﺔ :
.8ﺍﻭﻻ :ﺍﺿﺎﻓﺔ ﺍﻟﻈﻞ ﻟﻠﻨﺼﻮﺹ ﻭﺗﺤﺪﻳﺪ ﺍﻟﺤﺠﻢ ﻭ ﺍﻟﻠﻮﻥ ﻭﺩﺭﺟﺔ ﺍﻟﺪﻗﺔ ﻭﺍﻟﻜﺜﺎﻓﺔ
ﻭﺍﻟﺸﻔﺎﻓﻴﺔ – ﻭﻗﺪ ﺳﺒﻖ ﻭﺍﻥ ﺗﻨﺎﻭﻟﻨﺎ ﺑﺎﻟﺸﺮﺡ ﻫﺬﺍ ﺍﻟﺠﺰء – ﺭﺍﺟﻊ ﺍﺿﺎﻓﺔ ﺍﻟﻈﻞ ﻓﻰ ﻟﻐﺔ
ﺍﻟــ css
.9ﺛﺎﻧﻴﺎ :ﺗﻘﻄﻴﻊ ﺍﻟﻨﺺ ﻓﻲ ﺁﺧﺮ ﺍﻟﻜﻠﻤﺔ ﺃﻭ ﺑﻌﺪ ﺭﻣﻮﺯ ﺍﻟﺘﻨﻘﻴﻂ ،ﺇﻻ ﻓﻲ ﺣﺎﻟﺔ ﺍﻟﻜﻠﻤﺎﺕ
ﺍﻟﻄﻮﻳﻠﺔ )ﻛﻌﻨﺎﻭﻳﻦ ﺍﻟﻮﻳﺐ ﻭ ﺍﻟﺮﻭﺍﺑﻂ ﻣﺜﻼ ( ﻓﻴﺘﻢ ﺍﻟﺘﻘﻄﻴﻊ ﺩﺍﺧﻠﻬﺎ ﺣﺘﻰ ﻳﺘﻼءﻡ ﺍﻟﻨﺺ
ﺑﺎﻟﻀﺒﻂ ﻣﻊ ﺣﺪﻭﺩ ﺍﻟﻤﺴﺎﺣﺔ ﺍﻭ ﺍﻟﻄﺒﻘﻪ CSS3 Word Wrap
ﻭﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻰ ﻳﻮﺿﺢ ﺍﻟﺨﺎﺻﻴﺔ ﺍﻟﺴﺎﺑﻘﺔ
><!DOCTYPE html
>"<html lang="ar" dir="rtl
><head
>"<meta charset="utf-8
><style
};div {width: 160px;border :1px solid black
{ .break
;word-break: break-all
}
{ .wrap
;word-wrap: break-word
}
></style
></head
><body
></h2ﺍﻟﺗﺻﺭﻑ ﺍﻟﺗﻠﻘﺎﺋﻲ><h2
ﻫﺫﺍ ﺍﻟﻧﺹ ﻳﺣﺗﻭﻱ ﻋﻠﻰ ﻛﻠﻣﺔ ﻁﻭﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻠﺔ .ﺳﺗﺗﺟﺎﻭﺯ ﺣﺩﻭﺩ ﺍﻟﻁﺑﻘﺔ ><div
></divﺍﻟﻭ ﺍﻟﻣﺳﺎﺣﺔ ﺭﻏﻡ ﺃﻧﻧﺎ ﺣﺩﺩﻧﺎ ﻋﺭﺿﻬﺎ
><h2>break-all</h2
ﺗﻘﻭﻡ ﺑﺗﻘﻁﻳﻊ ﺍﻟﻧﺹ ﻓﻲ ﺃﻱ ﻣﻛﺎﻥ ﻣﻥ ﺍﻟﻛﻠﻣﺔ ﻟﺗﺗﻼءﻡ ﺑﺎﻟﺿﺑﻁ ﻣﻊ ﺣﺩﻭﺩ ﺍﻟﻁﺑﻘﺔ word-breakﺍﻟﺧﺎﺻﻳﺔ>"<div class="break
> .</divﻭ ﻫﺫﻩ ﻛﻠﻣﺔ ﻁﻭﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻠﺔ ﺳﻳﺗﻡ ﺗﻘﻁﻳﻌﻬﺎ ﺃﻳﺿﺎ
><h2>break-word</h2
ﺗﻘﻭﻡ ﺑﺗﻘﻁﻳﻊ ﺍﻟﻧﺹ ﻓﻲ ﺁﺧﺭ ﺍﻟﻛﻠﻣﺔ ،ﺇﻻ ﻓﻲ ﺣﺎﻟﺔ ﺍﻟﻛﻠﻣﺎﺕ word-wrapﺍﻟﺧﺎﺻﻳﺔ>"<div class="wrap
></divﺍﻟﻁﻭﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻳﻠﺔ ﻓﺳﻳﺗﻡ ﺍﻟﺗﻘﻁﻳﻊ ﺩﺍﺧﻠﻬﺎ
></body
></html
ﻭﻳﻈﻬﺮ ﻓﻰ ﺍﻟﻤﺴﺘﻌﺮﺽ ﻛﻤﺎ ﻳﻠﻰ
.10ﺛﺎﻟﺜﺎ :ﺍﻟﺘﺤﻜﻢ ﻓﻰ ﺍﻟﻨﺼﻮﺹ ﺍﻟﺘﻲ ﺗﺨﺮﺝ ﻣﻦ ﺍﻟﻤﺤﺘﻮﻯ CSS3 Text
. Overflowﻫﺬﺓ ﺍﻟﺨﺎﺻﻴﺔ text-overflowﺗﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﻭﺿﻌﻴﺔ ﺍﻟﻨﺺ ﻋﻨﺪﻣﺎ
ﻳﺘﺠﺎﻭﺯ ﻫﺬﺍ ﺍﻟﻨﺺ ﺣﺪﻭﺩ ﺍﻟﻄﺒﻘﺔ ﺍﻭ ﺍﻟﻤﺴﺎﺣﺔ .ﻭﻳﻤﻜﻨﻨﺎ ﺇﻋﻄﺎءﻫﺎ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ
: clip|ellipsis|string|initial|inherit
ﻭﻳﻮﺿﺢ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻰ ﻫﺬﺓ ﺍﻟﺨﺎﺻﻴﺔ ﻣﺴﺘﺨﺪﻣﺎ ﺍﻟﻘﻴﻢ ﺍﻟﻤﺨﺘﻠﻔﺔ ﻟﻬﺎ
><!DOCTYPE html
>"<html lang="ar" dir="rtl
><head
>"<meta charset="utf-8
><style
};div {width : 160px; border :1px solid black
{ .overflows
*/ﺗﺣﺫﻑ ﺍﻟﻔﺭﺍﻏﺎﺕ ﺍﻟﺑﻳﺿﺎء ﻭ ﺗﺟﺑﺭ ﺍﺳﺗﻛﻣﺎﻝ ﺍﻟﻧﺹ ﻓﻲ ﺳﻁﺭ ﻭﺍﺣﺩ *white-space: nowrap; /
*/ﺇﺧﻔﺎء ﺍﻟﻧﺹ ﺍﻟﺫﻱ ﻳﺗﺟﺎﻭﺯ ﺣﺩﻭﺩ ﺍﻟﻣﺳﺎﺣﺔ ﺍﻭ ﺍﻟﻁﺑﻘﺔ *overflow : hidden; /
}
{ .clip
;text-overflow: clip
}
{.ellipsis
;text-overflow: ellipsis
}
></style
></head
><body
><h1>text-overflow</h1
></h2ﻧﺹ ﻋﺎﺩﻱ ><h2
><div ></divﻋﻠﻳﻪ text-overflowﻫﺫﺍ ﺍﻟﻧﺹ ﺍﻟﻁﻭﻳﻝ ﻟﻥ ﻳﺗﻡ ﻋﺭﺿﻪ ﻛﺎﻣﻼ ﺃﺛﻧﺎء ﺗﻁﺑﻳﻕ ﻧﻣﻁ
ﻭﻳﻈﻬﺮ ﻓﻰ ﺍﻟﻤﺴﺘﻌﺮﺽ ﻛﻤﺎ ﻳﻠﻰ
.11ﺭﺍﺑﻌﺎ :ﺗﻘﻄﻴﻊ ﺍﻟﻨﺺ ﻭﺳﻂ ﺍﻟﻜﻠﻤﺔ ﺃﻭ ﺧﺎﺭﺟﻬﺎ ﺣﺘﻰ ﻳﺘﻼءﻡ ﺍﻟﻨﺺ ﺑﺎﻟﻀﺒﻂ ﻣﻊ
ﺣﺪﻭﺩ ﺍﻟﻤﺴﺎﺣﺔ ﺍﻭ ﺍﻟﻄﺒﻘﻪ CSS3 Word Break
ﻣﺜﺎﻝ ﺗﻮﺿﺤﻲ ﻋﻠﻰ ﺫﻟﻚ
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
</style>
</head>
<body>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
<p><b>Note:</b> The word-break property is not supported in Opera 12 and earlier versions.</p>
</body>
</html>
ﻭﻳﻈﻬﺮ ﻓﻰ ﺍﻟﻤﺴﺘﻌﺮﺽ ﻛﻤﺎ ﻳﻠﻰ
ﺷﻜﻞ ﻳﻮﺿﺢ ﺟﻤﻴﻊ ﺍﻟﻘﻴﻢ ﻟﻠﺨﺎﺻﻴﺘﻴﻦ ﺍﻟﺴﺎﺑﻘﺘﻴﻦ
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺳﺎﺑﻊ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻣﻥ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ
ﻟﻐﺔ ﺍﻟـــ CSS3
ﺛﺎﻣﻧﺎ :ﺍﻟﺧﻁﻭﻁ CSS3 Web Fonts
ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﻟﻴﺴﺖ ﺟﺪﻳﺪﺓ ﺭﻏﻢ ﺃﻧﻬﺎ ﻅﻬﺮﺕ ﻣﻊ CSS3ﻓﻘﺪ ﻅﻬﺮﺕ ﺍﻟﺨﺎﺻﻴﺔ
ﻣﺴﺒﻘﺎ ً ﻓﻲ ﻧﺴﺦ ieﺍﻟﻘﺪﻳﻤﺔ ،ﺛﻢ ﺗﻢ ﺍﻟﺘﺨﻠﻲ ﻋﻨﻬﺎ ﻟﻠﻤﺸﺎﻛﻞ ﺍﻟﺘﻲ ﻛﺎﻧﺖ ﻓﻴﻬﺎ ،ﻭﻅﻬﺮﺕ
ﺑﺤﻠﺔ ﺟﺪﻳﺪﺓ ﻣﺠﺪﺩﺍً ﻓﻲ ﺁﺧﺮ ﻧﺴﺨﺔ.
ﻣﻔﻬﻮﻡ ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﺑﺒﺴﺎﻁﺔ ﻟﻤﻦ ﻻ ﻳﻌﺮﻓﻬﺎ ﻫﻮ ﺃﻧّﻚ ﺗﺴﺘﻄﻴﻊ ﺍﺳﺘﻌﻤﺎﻝ ﺃﻱ ﺧﻂّ ﺗﺮﻳﺪﻩ
ﻓﻲ ﺍﻟﻤﻮﻗﻊ ﺑﺪﻻً ﻣﻦ ﺍﻟﺨﻄﻮﻁ ﺍﻹﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﻤﺘﺼﻔﺤﺎﺕ ﺃﻭ ﺍﻟﺨﻄﻮﻁ ﺍﻟﻮﻳﺐ
ﺍﻵﻣﻨﺔ )ﻭﺍﻟﺘﻲ ﺃﺻﺒﺤﺖ ﻣﻤﻠﺔً ﺟﺪﺍً( ،ﻭﻫﻲ ﺑﺴﻴﻄﺔ ﺟﺪﺍً ﻅﺎﻫﺮﻳﺎً ،ﻓﻜﻞ ﻣﺎ ﻋﻠﻴﻚ ﻓﻌﻠﻪ ﻫﻮ
ﺇﺩﺭﺍﺝ ﻣﺴﺎﺭ ﺍﻟﺨﻂ ،ﻭﺇﻋﻄﺎﺋﻪ ﺍﺳﻤﺎً ،ﺛﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻻﺣﻘﺎ ً ﻓﻲ ﻣﻠﻒ ﺍﻝ CSSﺍﻟﺨﺎﺹ
ﺑﻚ.
ﻭﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺍﻟﺨﺎﺻﻴﺔ ﻛﻤﺎ ﻳﻠﻰ :
ﻣﺜﺎﻝ ﻋﻠﻰ ﺍﺳﺘﺘﺨﺪﺍﻡ ﺍﻟﺨﺎﺻﻴﺔ
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'Droid Arabic Naskh';
src: url('droidnaskh-regular.ttf');}
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
div {
font-family: myFirstFont;
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>
ﻭﻳﻈﻬﺮ ﻓﻰ ﺍﻟﻤﺴﺘﻌﺮﺽ ﻛﻤﺎ ﻳﻠﻰ
ﺷﺮﺡ ﺍﻟﻜﻮﺩ:-
.1ﻧﺒﺪﺃ ﺍﻟﺨﺎﺻﻴﺔ ﺑﺘﺼﺮﻳﺢ@font-face
-2ﺛﻢ ﺃﺳﻔﻠﻪ ﻧﻜﺘﺐ ﺍﺳﻢ ﺍﻟﺨﻂ ﺍﻟﺬﻱ ﺳﻨﺴﺘﻌﻤﻞ ﺑﻪ ﺍﻟﺨﻂ ﻻﺣﻘﺎ ً ) font-family:
;’‘(Droid Arabic Naskhﻧﺴﺘﻄﻴﻊ ﺍﺳﺘﻌﻤﺎﻝ ﺃ ّ
ﻱ ﺍﺳﻢ ﻧﺮﻳﺪﻩ ،ﺷﺮﻁ ﺃﻥ
ﻳﻜﻮﻥ ﺑﺄﺣﺮﻑ ﻻﺗﻨﻴﺔ ﻭﻻ ﻳﺒﺪﺃ ﺑﺮﻗﻢ ﺃﻭ ﺑﻌﻼﻣﺔ ﺗﺮﻗﻴﻢ ﻣﺎ.
-3ﻓﻲ ﺍﻟﺴﻄﺮ ﺍﻟﺜﺎﻧﻲ ﻧﺤﺪﺩ ﻣﺴﺎﺭ ﺍﻟﺨﻂsrc: url(‘droidnaskh-
;)’regular.ttf
-4ﺍﻟﺴﻄﺮﺍﻥ ﺍﻟﺜﺎﻟﺚ ﻭﺍﻟﺮﺍﺑﻊ ﻏﻴﺮ ﺃﺳﺎﺳﻴﺎﻥ ،ﻭﻟﻜﻦ ﺳﻨﺤﺘﺎﺟﻬﻤﺎ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﺃﻥ ﻧﺪﺭﺝ
ﺃﻛﺜﺮ ﻣﻦ ﻭﺯﻥ ﻭﺗﻨﺴﻴﻖ ﻟﻠﺨﻂ ﺍﻟﻮﺍﺣﺪ ،ﻓﺎﻟﺴﻄﺮ ﺍﻷﻭﻝ ﻫﻮ ﻭﺯﻥ ﺍﻟﺨﻂ ،ﻭ 400
ﺗﻌﻨﻲ ﻋﺎﺩﻱ )ﻭﻛﺬﻟﻚ 700ﺗﻌﻨﻲ ﺳﻤﻴﻚ ﻭ 300ﺗﻌﻨﻲ ﺧﻔﻴﻒ)
ﺃﺧﻴﺮﺍً ﺳﻄﺮ ﺗﻨﺴﻴﻖ ﺍﻟﺨﻂ ; font-style: normalﺗﻌﻨﻲ ﺇﺩﺭﺍﺝ ﺍﻟﺨﻂ ﺑﺪﻭﻥ
ﺗﻨﺴﻴﻘﺎﺕ )ﻧﻀﻊ italicﺑﺪﻻً ﻣﻦ normalﺇﺫﺍ ﻛﺎﻥ ﺍﻟﺨﻂ ﺍﻟﻤﺪﺭﺝ ﻣﺎﺋﻞ)
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺛﺎﻣﻥ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
ﺗﺎﺳﻌﺎ :ﺍﻟﺗﺣﻭﻳﻼﺕ ﺛﻧﺎﺋﻳﺔ ﺍﻷﺑﻌﺎﺩ CSS 2D Transforms
ﻣﻦ ﺑﻴﻦ ﺍﻟﻮﺣﺪﺍﺕ ﺍﻟﺘﻲ ﺃﺿﺎﻓﺘﻬﺎ css3ﻫﻲ ﺍﻟﺘﺤﻮﻳﻼﺕ ﺛﻨﺎﺋﻴﺔ ﺍﻷﺑﻌﺎﺩ .ﺑﻮﺍﺳﻄﺔ
ﺧﺎﺻﻴﺘﻴﻦ transformﻭ transform-originﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﻼﻋﺐ ﺑﺈﺣﺪﺍﺛﻴﺎﺕ ﻋﻨﺼﺮ
ﻣﻦ ﻋﻨﺎﺻﺮ htmlﻋﻠﻰ ﻣﺤﻮﺭﻱ xﻭ yﺃﻓﻘﻴﺎ ﻭ ﻋﻤﻮﺩﻳﺎ .ﺗﺴﺘﻌﻤﻞ
ﺍﻟﺨﺎﺻﻴﺔ trasformﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺪﻭﺍﻝ ،ﺗﺘﻴﺢ ﻟﻨﺎ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ،ﺇﺫ
ﻳﻤﻜﻨﻨﺎ ﺗﺤﺮﻳﻜﻬﺎ ،ﺗﻐﻴﻴﺮ ﻣﻘﺎﻳﻴﺲ ﺃﺑﻌﺎﺩﻫﺎ ،ﺗﻐﻴﻴﺮ ﺩﺭﺟﺔ ﺍﻹﻧﺤﺮﺍﻑ ،ﺍﻟﺪﻭﺭﺍﻥ ﻭ ﺗﻐﻴﻴﺮ
ﺣﺠﻤﻬﺎ .
ﺳﻨﺘﻌﺮﻑ ﻓﻲ ﻫﺬﺍ ﺍﻟﻤﻮﺿﻮﻉ ﻋﻠﻰ ﺍﻟﺪﻭﺍﻝ ﺛﻨﺎﺋﻴﺔ ﺍﻷﺑﻌﺎﺩ .ﻗﺒﻞ ﺫﻟﻚ ﻟﻨﻠﻘﻲ ﻧﻈﺮﺓ ﻋﻠﻰ
ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺍﻟﺘﻲ ﺗﺪﻋﻢ ﺍﻟﺨﺎﺻﻴﺘﻴﻦ ﻭﺍﻟﻤﻮﺿﺤﺔ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻰ :
ﺍﻟﺨﻄﻮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﺍﻋﻤﻞ ﺳﺮﻳﺮﺵ ﻋﻠﻰ ﺷﺮﺡ ﺧﺎﺻﻴﺔ @font-
faceﻫﻼﻗﻰ ﻣﻮﺍﻗﻊ ﻛﺜﻴﺮﺓ
ﺍﻻﻥ ﺳﻮﻑ ﻧﻘﻮﻡ ﺑﺎﻟﺒﺪء ﻓﻰ ﺷﺮﺡ ﺍﻟﺪﻭﺍﻝ ﺍﻟﺘﻲ ﺗﺘﻤﺎﺷﻰ ﻣﻊ ﺍﻟﺨﺎﺻﻴﺔtransform :
ﻭﺍﻟﺪﻭﺍﻝ ﻫﻰ :
)(• translate
• )(rotate
• )(scale
• )(skewX
• )(skewY
• )(matrix
ﺍﻭﻻ :ﺍﻟﺪﺍﻟﺔ ) : translate(x,y
ﻳﺘﻢ ﺗﺤﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ﻣﻦ ﻭﺿﻌﻴﺘﻪ ﺍﻷﺻﻠﻴﺔ ﺣﺴﺐ ﻣﺤﻮﺭﻱ ) Xﻣﻦ ﺍﻟﻴﺴﺎﺭ( ﻭ ) Yﻣﻦ
ﺃﻋﻠﻰ(
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ ﺳﻨﻘﻮﻡ ﺑﺘﺤﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ﺏ ) 30ﺑﻴﻜﺴﻞ( ﻣﻦ ﺍﻟﻴﺴﺎﺭ ﻭ ) 50ﺑﻴﻜﺴﻞ(
ﻣﻦ ﺍﻷﻋﻠﻰ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{width:50%;}
.mydiv{width:150px;height:100px;background:#8ac805;border:1px solid
gray;color:#fff;float:left;}p{border-bottom:2px solid black;padding-bottom:5px;}
.translation{
-ms-transform: translate(30px,50px);
-moz-transform: translate(30px,50px);
-webkit-transform: translate(30px,50px);
transform: translate(30px,50px);
}
</style>
</head>
<body>
<h1>CSS3 2D translate</h1>
<div class="mydiv"><ﺍﻟﻣﻛﺎﻥ ﺍﻷﺻﻠﻲ/div><p>flammekueche kuglopf Salu bissame Hans turpis météor
Heineken turpis, so quam. amet, gewurztraminer ch'ai ac sit Salut isamme suspendisse adipiscing
porta schneck hopla Huguette schpeck et Racing. blottkopf, Gal ! libero, merci vielmols salu hopla
Oberschaeffolsheim quam, placerat ornare geht's ac wie amet tristique mamsell wurscht</p><div
style="clear:both;"></div>
<div class="translation mydiv">translate(30px,50px)</div><p>flammekueche kuglopf Salu
bissame Hans turpis météor Heineken turpis, so quam. amet, gewurztraminer ch'ai ac sit Salut
bisamme suspendisse adipiscing porta schneck hopla Huguette schpeck et Racing. blottkopf, Gal !
libero, merci vielmols salu hopla Oberschaeffolsheim quam, placerat ornare geht's ac wie amet
tristique mamsell wurscht</p>
</body>
</html>
translateY ﻭtranslateX ﺍﻟﺪﺍﻟﺘﺎﻥ
translate . ﺩﺍﻟﺘﺎﻥ ﻣﺸﺘﻘﺘﺎﻥ ﻣﻦ
X ﺗُﺤﺮّﻙ ﺍﻟﻌﻨﺼﺮ ﺃﻓﻘﻴﺎ ﻋﻠﻰ ﻣﺤﻮﺭ: translateX
transform: translateX(30px); ﻣﺜﺎﻝ
Y ﺗُﺤﺮّﻙ ﺍﻟﻌﻨﺼﺮ ﻋﻤﻮﺩﻳﺎ ﻋﻠﻰ ﻣﺤﻮﺭ: translateY
transform: translateY(50px); ﻣﺜﺎﻝ
: ﻻﺳﺘﻌﻤﺎﻝ ﺍﻟﺪﺍﻟﺘﻴﻦ ﻣﻌﺎ
: transform: translateX(30px) translateY(50px);
ﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﺗﻌﻄﻴﻨﺎ ﻧﻔﺲ ﺍﻟﻨﺘﻴﺠﺔ ﺍﻟﺴﺎﺑﻘﺔ
transform: translate(30px,50px)
:ﺃﻋﻄﻴﻜﻢ ﺑﻌﺾ ﺍﻷﻣﺜﻠﺔ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box,.moved{width:160px;height:80px;background:rgba(138,200,15,0.7);border:1px solid
#78af03;color:#fff}
.box{border:1px dashed gray;background:#e7f1d2;margin-bottom: 30px;}
.translationXY {
-ms-transform: translateX(30px) translateY(15px);
-moz-transform: translateX(30px) translateY(15px);
-webkit-transform:translateX(30px) translateY(15px);
-o-transform: translateX(30px) translateY(15px);
transform: translateX(30px) translateY(15px);
}
.translationX {
-ms-transform: translateX(30px);
-moz-transform: translateX(30px);
-webkit-transform:translateX(30px);
-o-transform: translateX(30px);
transform: translateX(30px);
}
.translationY {
-ms-transform: translateY(15px);
-moz-transform: translateY(15px);
-webkit-transform:translateY(15px);
-o-transform: translateY(15px);
transform: translateY(15px);
}
</style>
</head>
<body>
<h1>CSS3 translateX AND translateY</h1>
<div class="box">
<div class="translationXY moved">translateX(30px) translateY(15px)</div>
</div>
<div class="box">
<div class="translationX moved">translateX(30px)</div>
</div>
<div class="box">
<div class="translationY moved">translateY(15px)</div>
</div>
</body>
</html>
ﺛﺎﻧﻴﺎ :ﺍﻟﺪﺍﻟﺔ )rotate(deg
ﺗﻴﺢ ﻫﺬﻩ ﺍﻟﺪﺍﻟﺔ ﺩﻭﺭﺍﻥ ﺍﻟﻌﻨﺼﺮ ،ﻧﻌﻄﻴﻬﺎ ﺍﻟﻘﻴﻤﺔ ﺑﻌﺪﺩ ﺍﻟﺪﺭﺟﺎﺕ (degre) .ﻳﻤﻜﻦ
ﻟﻠﻘﻴﻤﺔ ﺃﻥ ﺗﻜﻮﻥ ﺳﻠﺒﻴﺔ ﺃﻭ ﺇﻳﺠﺎﺑﻴﺔ ،ﻛﻤﺎ ﻳﻤﻜﻨﻨﺎ ﺇﻋﻄﺎء ﻗﻴﻤﺔ ﺃﻛﺒﺮ ﻣﻦ 360°ﺩﺭﺟﺔ .
ﻣﺜﻼ 400°ﺩﺭﺟﺔ ﺳﺘﻌﻄﻴﻨﺎ 40°ﺩﺭﺟﺔ ﻓﻘﻂ .ﺣﺎﻟﻴﺎ ﻻ ﻳﻬﻢ ﺇﻥ ﻛﺘﺒﺘﻢ 400°ﺃﻭ 40°
ﺩﺭﺟﺔ ﻓﺎﻷﻣﺮ ﻻ ﻳﺨﺘﻠﻒ .ﻟﻜﻦ ﺃﺛﻨﺎء ﺗﻨﺸﻴﻂ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻌﻨﻰ 400°ﺩﺭﺟﺔ ﺳﻴﺨﺘﻠﻒ
ﺗﻤﺎﻣﺎ ﻭ ﺳﻴﻌﻨﻲ ﺃﻥ ﺍﻟﻌﻨﺼﺮ ﺳﻴﻘﻮﻡ ﺑﺪﻭﺭﺓ ﻛﺎﻣﻠﺔ ﺣﻮﻝ ﺍﻟﻨﻘﻄﺔ ﺍﻷﺻﻠﻴﺔ ) (360°ﺛﻢ
ﻳﻀﻴﻒ 40°ﺩﺭﺟﺔ ،ﺳﻮﻑ ﻧﺘﻨﺎﻭﻝ ﻣﺜﺎﻝ ﻋﻠﻰ ﻫﺬﺓ ﺍﻟﺪﺍﻟﻪ :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{width:50%;}
.mydiv{width:100px;height:100px;background:#8ac805;border:1px solid
gray;color:#fff;float:left;}p{border-bottom:2px solid black;padding-bottom:25px;}
.rotation {
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>CSS3 2D Rotate</h1>
<div class="mydiv"><ﺍﻟﻣﻛﺎﻥ ﺍﻷﺻﻠﻲ/div><p>flammekueche kuglopf Salu bissame Hans turpis météor
Heineken turpis, so quam. amet, gewurztraminer ch'ai ac sit Salut isamme suspendisse adipiscing
porta schneck hopla Huguette schpeck et Racing. blottkopf, Gal ! libero, merci vielmols salu hopla
Oberschaeffolsheim quam, placerat ornare geht's ac wie amet tristique mamsell wurscht</p><div
style="clear:both;"></div>
<div class="rotation mydiv">rotate(20deg)</div><p>flammekueche kuglopf Salu bissame Hans
turpis météor Heineken turpis, so quam. amet, gewurztraminer ch'ai ac sit Salut bisamme
suspendisse adipiscing porta schneck hopla Huguette schpeck et Racing. blottkopf, Gal ! libero,
merci vielmols salu hopla Oberschaeffolsheim quam, placerat ornare geht's ac wie amet tristique
mamsell wurscht</p>
</body>
</html>
ﻭﻳﻈﻬﺮ ﺑﺎﻟﻤﺴﺘﻌﺮﺽ ﺑﻬﺬﺓ ﺍﻟﻄﺮﻳﻘﺔ
ﺛﺎﻟﺜﺎ :ﺍﻟﺪﺍﻟﺔ )scale(x,y
ﺗﺘﻴﺢ ﻟﻨﺎ ﺍﻟﺪﺍﻟﺔ scaleﺗﻐﻴﻴﺮ ﺣﺠﻢ ﺍﻟﻌﻨﺼﺮ ،ﺗﻜﺒﻴﺮﻩ ﺃﻭ ﺗﺼﻐﻴﺮﻩ ﺣﺴﺐ ﻣﺤﻮﺭﻱ Xﻭ
Yﺍﻟﻤﺤﻮﺭ Xﻳﻠﻌﺐ ﻋﻠﻰ ﺣﺠﻢ ﻋﺮﺽ ﺍﻟﻌﻨﺼﺮ ﻭ Yﻋﻠﻰ ﻁﻮﻟﻪ
ﺳﻮﻑ ﺍﻁﺮﺡ ﻣﺜﺎﻝ ﻓﻴﺔ ﺳﻨﺰﻳﺪ ﻋﺮﺽ ﺍﻟﻌﻨﺼﺮ ﺑﻀﻌﻔﻲ ﺣﺠﻤﻪ ﺍﻷﺻﻠﻲ ﻭ ﻁﻮﻟﻪ
ﺑﺜﻼﺛﺔ ﺃﺿﻌﺎﻑ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.mydiv{width:100px;height:60px;background:#8ac805;border:1px solid green;color:#fff;margin:0
0 80px 100px;}
.scales{
-ms-transform: scale(2 ,3);
-webkit-transform: scale(2 ,3);
-moz-transform: scale(2 ,3);
-o-transform: scale(2 ,3);
transform: scale(2 ,3);
}
</style>
</head>
<body>
<h1>CSS3 2D Scale</h1>
<div class="mydiv"><ﺍﻟﺣﺟﻡ ﺍﻷﺻﻠﻲ/div>
<div class="mydiv scales"> scale(2, 3)</div>
</body>
</html>
ﺍﻟﺪﺍﻟﺘﺎﻥ scaleXﻭscaleY
ﻣﺸﺘﻘﺘﺎﻥ ﻣﻦ ﺍﻟﺪﺍﻟﺔ scale
: scaleXﺗﻜﺒﻴﺮ ﻋﺮﺽ ﺍﻟﻌﻨﺼﺮ ﺃﻓﻘﻴﺎ ﻭﻓﻖ ﻣﺤﻮﺭX
: scaleYﺗﻜﺒﻴﺮ ﻁﻮﻝ ﺍﻟﻌﻨﺼﺮ ﻋﻤﻮﺩﻳﺎ ﻭﻓﻖ ﻣﺤﻮﺭY
ﻣﺜﺎﻝ ﺗﻮﺿﺤﻰ :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box,.moved{width:110px;height:80px;background:rgba(138,200,15,0.5);border:1px solid #79af03;color:#fff;}
.box{border:1px dashed gray;background:#fff;margin:0 0 40px 70px;}
.scale-xy {
-webkit-transform:scaleX(2.5) scaleY(1.5);
-moz-transform: scaleX(2.5) scaleY(1.5);
-o-transform: scaleX(2.5) scaleY(1.5);
-ms-transform: scaleX(2.5) scaleY(1.5);
transform: scaleX(2.5) scaleY(1.5);
}
.scale-x {
-webkit-transform:scaleX(2.5);
-moz-transform: scaleX(2.5);
-o-transform: scaleX(2.5);
-ms-transform: scaleX(2.5);
transform: scaleX(2.5);
}
.scale-y {
-webkit-transform:scaleY(1.5);
-moz-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
transform: scaleY(1.5);
}
</style>
</head>
<body>
<h1>scaleX(n) , scaleY(n)</h1>
<div class="box">
<div class="moved scale-xy">scaleX(2.5) scaleY(1.5)</div>
</div>
<div class="box">
<div class="moved scale-x">scaleX(2.5)</div>
</div>
<div class="box">
<div class="moved scale-y">scaleY(1.5)</div>
</div>
</body>
</html>
skew(x,y) ﺍﻟﺪﺍﻟﺔ: ﺭﺍﺑﻌﺎ
Y . ﻭX ﺗﻠﻌﺐ ﻋﻠﻰ ﺩﺭﺟﺔ ﻣﻴﻼﻥ ﺯﻭﺍﻳﺎ ﺍﻟﻌﻨﺼﺮ ﻭﻓﻖ ﻣﺤﻮﺭﻱskew ﺍﻟﺪﺍﻟﺔ
ﺩﺭﺟﺔ ﺣﻮﻝ30° ﻭX ﺩﺭﺟﺔ ﺣﻮﻝ ﻣﺤﻮﺭ15° ﻳﻤﻴﻞ ﺍﻟﻌﻨﺼﺮ، ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ
Yﻣﺤﻮﺭ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.mydiv{width:150px;height:100px;background:#8ac805;border:1px solid green;color:#fff;margin:0
0 50px 20px;}
.oblique {
-ms-transform: skew(15deg ,30deg);
-webkit-transform: skew(15deg ,30deg);
-moz-transform: skew(15deg ,30deg);
-o-transform: skew(15deg ,30deg);
transform: skew(15deg ,30deg);
}
</style>
</head>
<body>
<h1>CSS3 2D Skew</h1>
<div class="mydiv"><ﺍﻟﺣﺟﻡ ﺍﻷﺻﻠﻲ/div>
<div class="mydiv oblique"> skew(15deg ,30deg)</div>
</body>
</html>
ﺍﻟﺪﺍﻟﺘﺎﻥ skewXﻭskewY
ﺍﻟﺪﺍﻟﺘﺎﻥ ﻣﺸﺘﻘﺘﺎﻥ ﻣﻦ ﺍﻟﺪﺍﻟﺔ skew() .ﺑﻄﺒﻴﻌﺔ ﺍﻟﺤﺎﻝ ،ﻛﻞ ﺩﺍﻟﺔ ﺳﺘﺄﺧﺬ ﻗﻴﻤﺔ ﻭﺍﺣﺪﺓ
ﻓﻘﻂ ،ﻣﺜﻼ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﺃﻥ ﻳﻤﻴﻞ ﺍﻟﻌﻨﺼﺮ 15°ﺩﺭﺟﺔ ﺣﻮﻝ ﻣﺤﻮﺭ X
)transform: skewX(15deg
ﺃﻣﺎ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﺍﺳﺘﻌﻤﺎﻝ ﺍﻟﺪﺍﻟﺘﻴﻦ ﻣﻌﺎ:
;)transform: skewX(15deg) skewY(15deg
ﺧﺎﻣﺴﺎ :ﺍﻟﺪﺍﻟﺔ )( matrix
ﻫﺬﻩ ﺍﻟﺪﺍﻟﺔ ﻋﺒﺎﺭﺓ ﻋﻦ ﻣﺼﻔﻮﻓﺔ ﺗﺠﻤﻊ ﺑﻴﻦ ﻭﻅﺎﺋﻒ ﻛﻞ ﺍﻟﺪﻭﺍﻝ ﺍﻷﺧﺮﻯ ،ﻣﻦ ﺗﺤﺮﻳﻚ ﻭ
ﻣﻴﻼﻥ ﻭ ﺩﻭﺭﺍﻥ ﻭ ﺗﻐﻴﻴﺮ ﺍﻟﺤﺠﻢ ﻭ ﻧﻌﻄﻴﻬﺎ 6ﻗﻴﻢ .ﻟﺴﻮء ﺍﻟﺤﻆ ﺃﻥ ﺍﻟﺪﺍﻟﺔ ﺗﺴﺘﻌﻤﻞ
ﺣﺴﺎﺑﺎﺕ ﺭﻳﺎﺿﻴﺔ ﻣﻌﻘﺪﺓ ﻭ ﻟﻴﺴﺖ ﻓﻲ ﻣﺴﺘﻮﻯ ﺍﻟﺠﻤﻴﻊ .ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻤﻌﻠﻤﻴﻴﻦ ﻳﻤﻜﻨﻜﻢ
ﺍﻹﻁﻼﻉ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﺮﺍﺑﻂ ﻟﻔﻬﻢ ﻁﺮﻳﻘﺔ ﺗﻮﻅﻴﻒ ﺍﻟﻤﺼﻔﻮﻓﺎﺕ ﻓﻲ ﻟﻐﺔ" css33ﺍﻟﻤﻘﺎﻝ
ﺑﺎﻟﻠﻐﺔ ﺍﻹﻧﺠﻠﻴﺰﻳﺔ"
ﺳﻨﻘﺘﺼﺮ ﺣﺎﻟﻴﺎ ﻋﻠﻰ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻲ :
ﻟﻨﻔﺘﺮﺽ ﺃﻧﻨﺎ ﻧﺮﻳﺪ ﺇﺟﺮﺍء ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺘﺤﻮﻳﻼﺕ ﺍﻟﺘﻲ ﺭﺃﻳﻨﺎﻫﺎ ،ﺩﻓﻌﺔ ﻭﺍﺣﺪﺓ:
;)transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px
ﺍﻟﻜﻮﺩ ﺍﻟﺴﺎﺑﻖ ﻳﻌﺎﺩﻝ ﺍﻟﻤﺼﻔﻮﻓﺔ ﺃﺳﻔﻠﻪ
;)transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px
transform-origin ﺳﺎﺩﺳﺎ :
ﺗﺴﺘﻌﻤﻞ ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﻣﻮﺍﺯﺍﺓ ﻣﻊ ﺍﻟﺨﺎﺻﻴﺔ transform
ﺗﺘﻴﺢ ﻟﻨﺎ ﺗﻐﻴﻴﺮ ﺇﺣﺪﺍﺛﻴﺎﺕ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺃﺟﺮﻳﻨﺎ ﻋﻠﻴﻪ ﺍﻟﺘﺤﻮﻳﻼﺕ .ﺃﻱ ﺗﻐﻴﻴﺮ ﻧﻘﻄﺔ
ﺍﻷﺻﻞ ﻟﻠﻤﺤﻮﺭﻳﻦ Xﻭ YY .ﻓﻲ ﺍﻟﺘﺤﻮﻳﻼﺕ ﺍﻟﺜﻼﺛﻴﺔ ﺍﻷﺑﻌﺎﺩ ﻳﻤﻜﻨﻨﺎ ﺃﻳﻀﺎ ﺍﻟﻠﻌﺐ
ﻋﻠﻰ ﻋﻤﻖ ﺍﻟﻤﺤﻮﺭZ .
ﺍﻟﻘﻴﻤﺔ ﺍﻟﻤﺒﺪﺋﻴﺔ ﻟﻠﺨﺎﺻﻴﺔ ،ﺗُﻤﺮﻛﺰ ﺍﻟﻨﻘﻄﺔ ﺍﻷﺻﻠﻴﺔ " "oﻭﺳﻂ ﺍﻟﻌﻨﺎﺻﺮ .
ﻭ ﻫﻲ ﺗﻌﺎﺩﻝ :
;transform-origin: 50% 50%
ﺍﻟﺨﺎﺻﻴﺔ ﺳﻬﻠﺔ ﺍﻹﺳﺘﻌﻤﺎﻝ ،ﺃﻋﻄﻴﻜﻢ ﺑﻌﺾ ﺍﻷﻣﺜﻠﺔ ﻟﺘﻔﻬﻤﻮﺍ ﺩﻭﺭﻫﺎ ﺟﻴﺪﺍ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{float:right;width:100px;text-align:right;}
.cadre,.rotation{width:110px;height:80px;background:rgba(138,200,15,0.6);border:1px solid #79af03;color:#fff;}
.cadre{border:1px dashed gray;background:#e9f1d7;margin:0 0 15px 30px;}
.axis1{margin-top:-12px;margin-left:-7px;}
.axis3{margin-bottom:-11px;margin-right:-6px;}
h4 {border-top:1px solid silver;}
.rotation {
-webkit-transform:rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
font-weight:bold;font-family:Arial;color:red;
}
.origine0 {
-webkit-transform-origin:0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.origine50 {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: table-cell;
vertical-align: middle;
text-align:center;
}
.origine100 {
-webkit-transform-origin:100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
display: table-cell;
vertical-align: bottom;
text-align:right;
}
</style>
</head>
<body>
<h1>rotate(30deg)</h1>
<h4>origine: 0 0</h4>
<p> <ﻳﺗﻡ ﺍﻟﺩﻭﺭﺍﻥ ﻋﻠﻰ ﻧﻘﻁﺔ ﺍﻷﺻﻝ ﺃﻋﻠﻰ ﻳﺳﺎﺭ ﺍﻟﻌﻠﺑﺔ/p>
<div class="cadre">
<div class="rotation origine0"><div class="axis1">O</div></div>
</div>
<h4>origine: 50% 50%</h4>
<p> <ﻳﺗﻡ ﺍﻟﺩﻭﺭﺍﻥ ﻋﻠﻰ ﻧﻘﻁﺔ ﺍﻷﺻﻝ ﻭﺳﻁ ﺍﻟﻌﻠﺑﺔ/p>
<div class="cadre">
<div class="rotation origine50">O</div>
</div>
<h4>origine: 100% 100%</h4>
<p><ﻳﺗﻡ ﺍﻟﺩﻭﺭﺍﻥ ﻋﻠﻰ ﻧﻘﻁﺔ ﺍﻷﺻﻝ ﺃﺳﻔﻝ ﻳﻣﻳﻥ ﺍﻟﻌﻠﺑﺔ/p>
<div class="cadre">
<div class="rotation origine100"><div class="axis3">O</div></div>
</div>
ﻳﻤﻜﻨﻨﺎ ﺍﺳﺘﻌﻤﺎﻝ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻘﻴﻢ ﺍﻷﺧﺮﻯ ﻣﻊ، ﺑﺎﻹﺿﺎﻓﺔ ﻟﻠﻨﺴﺒﺔ ﺍﻟﻤﺆﻳﺔ
: ﻭ ﻫﻲtransform-origin ﺍﻟﺨﺎﺻﻴﺔ
top|bottom|right|left|center|length|inherit|initial
: ﻳﻤﻜﻨﻨﺎ ﺃﻳﻀﺎ ﻛﺘﺎﺑﺘﻬﺎ ﻛﺎﻟﺘﺎﻟﻲtransform-origin: 50% 50%; ﻣﺜﻼ
transform-origin: center center;
ﻣﺠﻤﻮﻉ ﻫﺬﻩ ﺍﻟﻘﻴﻢ ﺗﺘﻌﻠﻖ ﺑﺨﺎﺻﻴﺔ transform-originﻓﻲ ﻓﻀﺎء ﺛﻨﺎﺋﻲ ﺍﻷﺑﻌﺎﺩ .ﺃﻣﺎ
ﻓﻲ ﻓﻀﺎء ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﻳﻤﻜﻨﻨﺎ ﺃﻳﻀﺎ ﺗﺤﺪﻳﺪ ﺍﻟﻨﻘﻄﺔ ﺍﻷﺻﻠﻴﺔ ﻟﻤﺤﻮﺭ "Z" .ﻟﻜﻦ
ﺍﻟﻘﻴﻤﺔ ﺍﻟﻮﺣﻴﺪﺓ ﺍﻟﻤﺴﻤﻮﺡ ﺑﻬﺎ ﻟﻬﺬﺍ ﺍﻟﻤﺤﻮﺭ ﻫﻲ ﻗﻴﻤﺔ ، : lengthﻣﺜﺎﻝ:
;transform-origin: right bottom 2cm
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺗﺎﺳﻊ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
ﻋﺎﺷﺭﺍ :ﺍﻟﺗﺣﻭﻳﻼﺕ ﺛﻼﺛﻳﺔ ﺍﻷﺑﻌﺎﺩ CSS 3D Transforms
ﺗﻌﺎﻣﻠﻨﺎ ﻓﻲ ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻖ ﻣﻊ ﺍﻟﺘﺤﻮﻳﻼﺕ ﺛﻨﺎﺋﻴﺔ ﺍﻷﺑﻌﺎﺩ ،ﻭ ﺍﻟﺘﻲ ﺗﺮﺗﻜﺰ ﻋﻠﻰ ﻣﺤﻮﺭﻳﻦ
،ﻣﺤﻮﺭ ﺍﻟﻌﺮﺽ " "Xﻭ ﻣﺤﻮﺭ ﺍﻟﻄﻮﻝ "Y" .ﻟﺘﺤﻮﻳﻞ ﺍﻟﻌﻨﺎﺻﺮ ﻓﻲ ﻓﻀﺎء ﺛﻼﺛﻲ
ﺍﻷﺑﻌﺎﺩ ،ﺳﻨﻀﻴﻒ ﻣﺤﻮﺭﺍ ﺛﺎﻟﺜﺎ ،ﻭ ﻫﻮ ﻣﺤﻮﺭ " "Zﺍﻟﺬﻱ ﻳﻤﻨﺤﻨﺎ ﺍﻟﺘﺤﻜﻢ ﻓﻲ ﻋﻤﻖ
ﺍﻟﻌﻨﺎﺻﺮ ﻛﻤﺎ ﻓﻲ ﻁﻮﻟﻬﺎ ﻭﻋﺮﺿﻬﺎ.
ﻓﻲ ﻣﺠﺎﻝ ﺍﻟﻮﻳﺐ ،ﺃﻟﻔﻨﺎ ﺍﻹﺷﺘﻐﺎﻝ ﻓﻲ ﻓﻀﺎء ﺛﻨﺎﺋﻲ ﺍﻷﺑﻌﺎﺩ .ﺣﻴﺚ ﺃﻱ ﺻﻔﺤﺔ ﻣﻤﺜﻠﺔ
ﺑﻤﺤﻮﺭﻳﻦ ،ﻣﺤﻮﺭ Xﺍﻷﻓﻘﻲ ﻭ ﻣﺤﻮﺭ Yﺍﻟﻌﻤﻮﺩﻱ .ﺍﻟﻨﻘﻄﺔ ﺍﻷﺻﻠﻴﺔ ﺍﻟﺘﻲ ﺗﻤﺜﻞ
ﺗﻘﺎﻁﻊ ﺍﻟﻤﺤﻮﺭﻳﻦ ﻣﺒﺪﺋﻴﺎ ﺗﻮﺟﺪ ﺃﻋﻠﻰ ﻳﺴﺎﺭ ﺍﻟﺼﻔﺤﺔ .ﺇﺫﺍ ﺣﺮﻛﻨﺎ ﺍﻟﻌﻨﺎﺻﺮ ﺇﻟﻰ ﺍﻟﻴﺴﺎﺭ
ﻓﻬﻲ ﺗﺄﺧﺬ ﻗﻴﻤﺎ ﺳﻠﺒﻴﺔ ﻭ ﻗﻴﻤﺎ ﺇﻳﺠﺎﺑﻴﺔ ﻋﻠﻰ ﻳﻤﻴﻦ ﻣﺤﻮﺭ X .ﻧﻔﺲ ﺍﻟﺸﻲء ﻋﻠﻰ ﻣﺤﻮﺭ
،Yﺍﻟﺘﺤﺮﻙ ﺇﻟﻰ ﺃﻋﻠﻰ ﻳﺄﺧﺬ ﻗﻴﻤﺎ ﺳﻠﺒﻴﺔ ﻭ ﺇﻳﺠﺎﺑﻴﺔ ﺇﻟﻰ ﺃﺳﻔﻞ ﺍﻟﺼﻔﺤﺔ .ﺑﺎﻟﻨﺴﺒﺔ
ﻟﻠﻔﻀﺎء ﺍﻟﺜﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﻭ ﺍﻟ ُﻤﻤﺜّﻞ ﺑﺎﻟﻤﺤﻮﺭ Z .ﻫﺬﺍ ﺍﻟﻤﺤﻮﺭ ﻳﻤﺜﻞ ﻣﺴﻄﺤﺎ ﻳﺘﺠﻪ ﻧﺤﻮ
ﺍﻟﻤﺸﺎﻫﺪ ،ﻭ ﻳﻤﺜﻞ ﺍﻟﻌﻤﻖ ،ﺍﻟﻘﻴﻢ ﺍﻹﻳﺠﺎﺑﻴﺔ ﺗُﺤﺮﻙ ﺍﻟﻌﻨﺼﺮ ﻓﻲ ﺍﺗﺠﺎﻫﻜﻢ ﻭ ﺗﺠﻌﻠﻪ ﺃﻗﺮﺏ
ﺇﻟﻴﻜﻢ ﻭ ﺍﻟﺴﻠﺒﻴﺔ ﺗﺤﺮﻛﻪ ﺑﻌﻴﺪﺍ ﻋﻨﻜﻢ.
ﺳﻨﺘﻌﺮﻑ ﻓﻲ ﻫﺬﺍ ﺍﻟﻤﻮﺿﻮﻉ ﻋﻠﻰ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﺠﺪﻳﺪﺓ .ﻗﺒﻞ ﺫﻟﻚ ﻟﻨﻠﻘﻲ
ﻧﻈﺮﺓ ﻋﻠﻰ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺍﻟﺘﻲ ﺗﺪﻋﻢ ﺫﻟﻚ ﺍﻻﺿﺎﻓﺔ ﺍﻟﺠﺪﻳﺪﺓ ﻭﺍﻟﻤﻮﺿﺤﺔ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻰ :
ﺍﻟﺪﻭﺍﻝ ﺍﻟﺘﻲ ﺳﻨﺴﺘﻌﻤﻠﻬﺎ ﻣﻊ ﺍﻟﺨﺎﺻﻴﺔ ، transformﻫﻲ ﺗﻘﺮﻳﺒﺎ ﻧﻔﺴﻬﺎ ﺍﻟﺘﻲ ﺗﻌﺎﻣﻠﻨﺎ
ﻣﻌﻬﺎ ﺳﺎﺑﻘﺎ ،ﻣﻊ ﺇﺿﺎﻓﺔ ﺍﻟﺒﻌﺪ ﺍﻟﺜﺎﻟﺚ:
)(rotateX •
)(rotateY •
)(rotateZ •
)(scaleZ •
)(translateZ •
ﺍﻭﻻ :ﺍﻟﺪﺍﻟﺔ )rotateX(a
ﺗﺘﻴﺢ ﺍﻟﺪﺍﻟﺔ )( rotateXﺩﻭﺭﺍﻥ ﺍﻟﻌﻨﺼﺮ ﺣﻮﻝ ﺍﻟﻤﺤﻮﺭ ﺍﻟﺴﻴﻨﻲ " "Xﺑﺪﻭﻥ ﺍﻟﺘﺄﺛﻴﺮ
ﻋﻠﻰ ﺣﺠﻤﻪ .ﺗﺤﺪﺩ ﺍﻟﻘﻴﻤﺔ ﺑﺪﺭﺟﺔ ﺯﺍﻭﻳﺔ ﺍﻟﺪﻭﺭﺍﻥ .ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﻘﻴﻤﺔ ﺇﻳﺠﺎﺑﻴﺔ ﻳﺘﻢ
ﺍﻟﺪﻭﺭﺍﻥ ﻓﻲ ﺍﺗﺠﺎﻩ ﻋﻘﺎﺭﺏ ﺍﻟﺴﺎﻋﺔ ،ﻭ ﺍﻟﻌﻜﺲ ﺇﺫﺍ ﻛﺎﻧﺖ ﺳﻠﺒﻴﺔ.
ﻣﻜﺎﻥ ﺃﻭ ﻧﻘﻄﺔ ﺍﻟﺪﻭﺭﺍﻥ ﻳﺘﻢ ﺗﺤﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﻌﻤﺎﻝ ﺍﻟﺨﺎﺻﻴﺔtransform-origin
ﻣﺜﺎﻝ ﻋﻠﻰ ﺫﻟﻚ :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h3 {direction:rtl;}
.box,.rotation{width:200px;height:200px;background:rgba(138,200,15,0.8)
;border:1px solid #79af03;}
.box{border:1px dashed gray;background:#e9f1d7;}
.rotation-x:hover {
-webkit-transform:rotateX(140deg);
-moz-transform: rotateX(140deg);
transform: rotateX(140deg);
}
</style>
</head>
<body>
<h1>CSS3 3D RotateX</h1>
<div class="box">
<div class="rotation rotation-x">rotateX(140deg) <h3> ﺿﻊ ﻣﺅﺷﺭ ﺍﻟﻔﺄﺭﺓ
ﻋﻠﻰ ﺍﻟﻌﻧﺻﺭ ﻭ ﺳﻳﺩﻭﺭ140 ﺩﺭﺟﺔ ﺣﻭﻝ ﻣﺣﻭﺭX </h3> </div>
</div>
</body>
</html>
ﺩﺍﺧﻞ ﺍﻟﻤﺴﺘﻌﺮﺽ ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻭ ﺳﻴﺪﻭﺭ 140ﺩﺭﺟﺔ ﺣﻮﻝ
ﻣﺤﻮﺭ X
ﺛﺎﻧﻴﺎ :ﺍﻟﺪﺍﻟﺔ )rotateY(a
ﺗﺘﻴﺢ ﺍﻟﺪﺍﻟﺔ )( rotateYﺩﻭﺭﺍﻥ ﺍﻟﻌﻨﺼﺮ ﺣﻮﻝ ﺍﻟﻤﺤﻮﺭ ﺍﻟﺼﺎﺩﻱ " "Yﺑﺪﻭﻥ ﺍﻟﺘﺄﺛﻴﺮ
ﻋﻠﻰ ﺣﺠﻤﻪ .ﺗﺤﺪﺩ ﺍﻟﻘﻴﻤﺔ ﺑﺪﺭﺟﺔ ﺯﺍﻭﻳﺔ ﺍﻟﺪﻭﺭﺍﻥ .ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﻘﻴﻤﺔ ﺇﻳﺠﺎﺑﻴﺔ ﻳﺘﻢ
ﺍﻟﺪﻭﺭﺍﻥ ﻓﻲ ﺍﺗﺠﺎﻩ ﻋﻘﺎﺭﺏ ﺍﻟﺴﺎﻋﺔ ،ﻭ ﺍﻟﻌﻜﺲ ﺇﺫﺍ ﻛﺎﻧﺖ ﺳﻠﺒﻴﺔ.
ﻣﻜﺎﻥ ﺃﻭ ﻧﻘﻄﺔ ﺍﻟﺪﻭﺭﺍﻥ ﻳﺘﻢ ﺗﺤﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﻌﻤﺎﻝ ﺍﻟﺨﺎﺻﻴﺔtransform-origin
ﻣﺜﺎﻝ ﻋﻠﻰ ﺫﻟﻚ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h3 {direction:rtl;}
.box,.rotation{width:200px;height:200px;background:rgba(138,200,15,0.8)
;border:1px solid #79af03;}
.box{border:1px dashed gray;background:#e9f1d7;}
.rotation-y:hover {
-webkit-transform:rotateY(140deg);
-moz-transform: rotateY(140deg);
transform: rotateY(140deg);
}
</style>
</head>
<body>
<h1>CSS3 3D RotateY</h1>
<div class="box">
<div class="rotation rotation-y">rotateY(140deg) <h3> ﺿﻊ ﻣﺅﺷﺭ ﺍﻟﻔﺄﺭﺓ
ﻋﻠﻰ ﺍﻟﻌﻧﺻﺭ ﻭ ﺳﻳﺩﻭﺭ140 ﺩﺭﺟﺔ ﺣﻭﻝ ﻣﺣﻭﺭY </h3> </div>
</div>
</body>
</html>
ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻭ ﺳﻴﺪﻭﺭ 140ﺩﺭﺟﺔ ﺣﻮﻝ ﻣﺤﻮﺭ Y
ﺛﺎﻟﺜﺎ :ﺍﻟﺪﺍﻟﺔ )rotateZ(a
ﺗﺘﻴﺢ ﺍﻟﺪﺍﻟﺔ )( rotateZﺩﻭﺭﺍﻥ ﺍﻟﻌﻨﺼﺮ ﺣﻮﻝ ﻣﺤﻮﺭ " "Zﺑﺪﻭﻥ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺣﺠﻤﻪ .
ﺗﺤﺪﺩ ﺍﻟﻘﻴﻤﺔ ﺑﺪﺭﺟﺔ ﺯﺍﻭﻳﺔ ﺍﻟﺪﻭﺭﺍﻥ .ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﻘﻴﻤﺔ ﺇﻳﺠﺎﺑﻴﺔ ﻳﺘﻢ ﺍﻟﺪﻭﺭﺍﻥ ﻓﻲ ﺍﺗﺠﺎﻩ
ﻋﻘﺎﺭﺏ ﺍﻟﺴﺎﻋﺔ ،ﻭ ﺍﻟﻌﻜﺲ ﺇﺫﺍ ﻛﺎﻧﺖ ﺳﻠﺒﻴﺔ.
ﻣﻜﺎﻥ ﺃﻭ ﻧﻘﻄﺔ ﺍﻟﺪﻭﺭﺍﻥ ﻳﺘﻢ ﺗﺤﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﻌﻤﺎﻝ ﺍﻟﺨﺎﺻﻴﺔtransform-origin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h3 {direction:rtl;}
.box,.rotation{width:200px;height:200px;background:rgba(138,200,15,0.8)
;border:1px solid #79af03;}
.box{border:1px dashed gray;background:#e9f1d7;}
.rotation-z:hover {
-webkit-transform:rotateZ(140deg);
-moz-transform: rotateZ(140deg);
transform: rotateZ(140deg);
}
</style>
</head>
<body>
<h1>CSS3 3D RotateZ</h1>
<div class="box">
<div class="rotation rotation-z">rotateZ(140deg) <h3> ﺿﻊ ﻣﺅﺷﺭ ﺍﻟﻔﺄﺭﺓ
ﻋﻠﻰ ﺍﻟﻌﻧﺻﺭ ﻭ ﺳﻳﺩﻭﺭ140 ﺩﺭﺟﺔ ﺣﻭﻝ ﻣﺣﻭﺭZ </h3> </div>
</div>
</body>
</html>
ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻭ ﺳﻴﺪﻭﺭ 140ﺩﺭﺟﺔ ﺣﻮﻝ ﻣﺤﻮﺭ Z
ﺭﺍﺑﻌﺎ rotate3d(x,y,z,a) :
ﺗﺘﻴﺢ ﺍﻟﺪﺍﻟﺔ )( rotate3dﺩﻭﺭﺍﻥ ﺍﻟﻌﻨﺼﺮ ﺣﻮﻝ ﻣﺤﻮﺭ ُﻣﺤ ّﺪﺩ ﺑﺪﻭﻥ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺣﺠﻤﻪ
.ﺗﺤﺪﺩ ﺍﻟﻘﻴﻤﺔ ﺑﺪﺭﺟﺔ ﺯﺍﻭﻳﺔ ﺍﻟﺪﻭﺭﺍﻥ .ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﻘﻴﻤﺔ ﺇﻳﺠﺎﺑﻴﺔ ﻳﺘﻢ ﺍﻟﺪﻭﺭﺍﻥ ﻓﻲ ﺍﺗﺠﺎﻩ
ﻋﻘﺎﺭﺏ ﺍﻟﺴﺎﻋﺔ ،ﻭ ﺍﻟﻌﻜﺲ ﺇﺫﺍ ﻛﺎﻧﺖ ﺳﻠﺒﻴﺔ.
ﻓﻲ ﻓﻀﺎء ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﻳﻤﻜﻦ ﺗﺤﺪﻳﺪ ﻣﺤﻮﺭ ﺍﻟﺪﻭﺭﺍﻥ ﺑﺎﻹﻋﺘﻤﺎﺩ ﻋﻠﻰ ﻗﻴﻢ
ﺍﻟﻤﺘﺠﻬﺎﺕ ] ، a[x,y,zﻧﻘﻄﺔ ﺍﻟﺪﻭﺭﺍﻥ ﻳﺘﻢ ﺗﺤﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﻌﻤﺎﻝ ﺍﻟﺨﺎﺻﻴﺔtransform-
origin
: xﺗُﺤ ّﺪﺩ ﺇﺣﺪﺍﺛﻴﺎﺕ xﻟﻠﻤﺘﺠﻪ ﺍﻟﺬﻱ ﻳﻤﺜﻞ ﻣﺤﻮﺭ ﺍﻟﺪﻭﺭﺍﻥ
: yﺗُﺤ ّﺪﺩ ﺇﺣﺪﺍﺛﻴﺎﺕ yﻟﻠﻤﺘﺠﻪ ﺍﻟﺬﻱ ﻳﻤﺜﻞ ﻣﺤﻮﺭ ﺍﻟﺪﻭﺭﺍﻥ
: zﺗُﺤ ّﺪﺩ ﺇﺣﺪﺍﺛﻴﺎﺕ zﻟﻠﻤﺘﺠﻪ ﺍﻟﺬﻱ ﻳﻤﺜﻞ ﻣﺤﻮﺭ ﺍﻟﺪﻭﺭﺍﻥ
: aﺗﻤﺜﻞ ﺩﺭﺟﺔ ﺯﺍﻭﻳﺔ ﺍﻟ ّﺪﻭﺭﺍﻥ.
ﻣﺜﻼ :
)rotateX(80degﻫﻲ ﺍﺧﺘﺰﺍﻝ)rotate3d(1,0,0,80deg
)rotateY(80degﻫﻲ ﺍﺧﺘﺰﺍﻝ)rotate3d(0,1,0,80deg
)rotateZ(80degﻫﻲ ﺍﺧﺘﺰﺍﻝ)rotate3d(0,0,1,80deg
ﻟﻠﺠﻤﻊ ﺑﻴﻦ ﺍﻟﺪﻭﺍﻝ ﺍﻟﺜﻼﺙ ﻓﻲ ﺩﺍﻟﺔ )( rotate3dﻳﺠﺐ ﺍﺳﺘﻌﻤﺎﻝ ﺍﻟﻤﺼﻔﻮﻓﺎﺕ ،ﻟﻠﺬﻳﻦ
ﻟﻢ ﻳﺪﺭﺳﻮﺍ ﺍﻟﻤﺼﻔﻮﻓﺎﺕ ﻓﻲ ﻣﺎﺩﺓ ﺍﻟﺮﻳﺎﺿﻴﺎﺕ ،ﻳﻤﻜﻨﻜﻢ ﻧﺴﻴﺎﻥ ﺍﻷﻣﺮ ﻭ ﺗﺮﻙ ﻫﺬﻩ ﺍﻟﺪﺍﻟﺔ
ﺟﺎﻧﺒﺎ ،
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box,.rotation{width:200px;height:200px;background:rgba(138,200,15,0.8)
;border:1px solid #79af03;}
.box{border:1px dashed gray;background:#e9f1d7;}
.rotation-3d {
-webkit-transform:rotate3d(0.7, 0.5, 0.7, 80deg);
-moz-transform: rotate3d(0.7, 0.5, 0.7, 80deg);
transform: rotate3d(0.7, 0.5, 0.7, 80deg);
}
</style>
</head>
<body>
<h1>CSS3 Rotate3d</h1>
<div class="box">
<div class="rotation rotation-3d"><h3>rotate3d(0.7, 0.5, 0.7,
80deg)</h3></div>
</div>
</body>
</html>
ﺧﺎﻣﺴﺎ :ﺍﻟﺪﺍﻟﺔ )(translate3d
translateX , translateYﻭ translateZﺗﻘﻮﻡ ﻛﻞ ﺩﺍﻟﺔ ﺑﺘﺤﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ﻭﻓﻖ
ﻣﺤﻮﺭﻫﺎ ﺍﻟﺨﺎﺹ .ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺪﺍﻟﺔ translateZﻟﻦ ﻳﻈﻬﺮ ﺗﺄﺛﻴﺮﻫﺎ ﻋﻠﻰ ﻣﺘﺼﻔﺤﻜﻢ
ﻷﻧﻨﺎ ﻧﺸﺘﻐﻞ ﻓﻲ ﻓﻀﺎء ﺛﻨﺎﺋﻲ ﺍﻟﺒﻌﺪ .ﻳﻤﻜﻨﻨﺎ ﺟﻤﻊ ﺑﻴﻦ ﻫﺬﻩ ﺍﻟﺪﻭﺍﻝ ﻓﻲ ﺩﺍﻟﺔ ﻭﺍﺣﺪﺓ ،
ﻫﻲ)translate3d(x,y,z
{ .translate-3d
;)-webkit-transform: translate3d(20px, 30px, 10px
;)-moz-transform: translate3d(20px, 30px, 10px
transform: ;)translate3d(20px, 30px, 10px
}
ﺍﻟﺪﺍﻟﺔ )(scale3d
ﺭﺃﻳﻨﺎ ﻓﻲ ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻖ ﺃﻥ ﺍﻟﺪﺍﻟﺘﻴﻦ scaleXﻭ scaleYﺗﺄﺛﺮﺍﻥ ﻋﻠﻰ ﺣﺠﻢ ﺍﻟﻌﻨﺼﺮ
،ﺑﺘﻜﺒﻴﺮﻩ ﺃﻭ ﺗﺼﻐﻴﺮﻩ ،ﻣﺜﻼ ﺇﺫﺍ ﻛﺎﻥ ﻟﺪﻳﻨﺎ ﻋﻨﺼﺮ ﺑﻌﺮﺽ 100pxﻭ ﻁﺒﻘﻨﺎ
ﻋﻠﻴﻪ ) scaleX(2ﺳﻴﺼﺒﺢ ﺑﻌﺮﺽ200px.
ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺪﺍﻟﺔ ، scaleZﺗﻌﻄﻴﻨﺎ ﺗﺼﺮﻓﺎ ﻣﺨﺘﻠﻔﺎ ﻧﻮﻋﺎ ﻣﺎ ،ﻣﺎ ﺩﻣﻨﺎ ﻧﺸﺘﻐﻞ ﻓﻲ ﻓﻀﺎء
ﺛﻨﺎﺋﻲ ﺍﻷﺑﻌﺎﺩ ﻟﻴﺲ ﻟﻪ ﺃﻱ ﻋﻤﻖ ،ﺭﻏﻢ ﺃﻧﻬﺎ ﺩﺍﻟﺔ ﺛﻼﺛﻴﺔ ﺍﻷﺑﻌﺎﺩ ﺇﻻ ﺃﻧﻬﺎ ﺗﺘﺼﺮﻑ ﺗﻘﺮﻳﺒﺎ
ﻣﺜﻞ translateZ .ﺇﺫ ﺗﻈﻬﺮ ﻟﻨﺎ ﻛﺄﻧﻬﺎ ﺗﻘﻮﻡ ﺑﺘﺤﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ﻋﻠﻰ ﻣﺤﻮﺭ Z .
ﻳﻤﻜﻨﻨﺎ ﺟﻤﻊ ﻗﻴﻢ scaleﻓﻲ ﺩﺍﻟﺔ ﻣﺨﺘﺼﺮﺓ ﻭ ﻫﻲ scale3d .ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ ﻧﻔﺲ
ﺍﻟﺘﺄﺛﻴﺮ ﺳﻴﻄﺒﻖ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮﻳﻦ div1ﻭdiv2
{ .div1
;)transform: scaleX(2) scaleY(1.5) scaleZ(0.75
}
{ .div2
;)transform: scale3d(2,1.5,0.75
}
CSS3 Perspective
ﻟﺘﻔﻌﻴﻞ ﺍﻟﻔﻀﺎء ﺍﻟﺜﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﻳﺤﺘﺎﺝ ﺍﻟﻌﻨﺼﺮ ﺇﻟﻰ ﻣﻨﻈﻮﺭperspective
ﻓﻲ ﻓﻀﺎء ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﺗﻘﻮﻡ perspectiveﺑﺎﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﻤﺴﺎﻓﺔ ﺍﻟﺘﻲ ﺗﻔﺼﻞ
ﺍﻟﻤﺸﺎﻫﺪ ﺑﺎﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻳﺮﺍﻩ .ﺃﻱ ﺑﻴﻦ ُﻣﺴﻄّﺢ ﺍﻟﻤﺴﺘﻮﻯ z=00ﻭ ﺍﻟﻤﺸﺎﻫﺪ .ﻛﻠﻤﺎ
ﻛﺎﻧﺖ ﺍﻟﻤﺴﺎﻓﺔ ﺃﻗﺮﺏ ﺇﻻ ﻭ ﺍﺯﺩﺍﺩﺕ ﺍﻟﺘﺄﺛﻴﺮﺍﺕ ﺍﻟﺒﺼﺮﻳﺔ .ﻭ ﻛﻠﻤﺎ ﺍﺑﺘﻌﺪ ﺍﻟﻤﺸﺎﻫﺪ ﻋﻦ
ﻣﺴﻄﺢ zﺇﻻ ﻭﻛﺎﻧﺖ ﺍﻟﻨﺘﺎﺋﺞ ﺧﺎﺩﻋﺔ .ﻣﺜﻼ ﺃﻱ ﻗﻴﻤﺔ ﺃﺩﻧﻰ ﻣﻦ 2000ﺑﻴﻜﺴﻞ ﺳﺘﻌﻄﻲ
ﺍﻟﻤﺸﺎﻫﺪ ﺗﺄﺛﻴﺮﺍﺕ ﺟﺪ ﺑﺎﺭﺯﺓ ،ﺃﻣﺎ ﺇﺫﺍ ﺑﺎﻟﻐﻨﺎ ﻓﻲ ﺭﻓﻊ ﺍﻟﻘﻴﻤﺔ ،ﻣﺜﻼ 900ﺑﻴﻜﺴﻞ ﺳﺘﺒﺪﻭ
ﺍﻟﻨﺘﺎﺋﺞ ﺃﻗﻞ ﺗﺄﺛﻴﺮﺍ .
ﻳﻤﻜﻨﻨﺎ ﺇﺿﺎﻓﺔ perspectiveﺑﻄﺮﻳﻘﺘﻴﻦ :ﺇﻣﺎ ﺍﺳﺘﻌﻤﺎﻟﻬﺎ ﻛﺪﺍﻟﺔ ﻣﻊ
ﺍﻟﺨﺎﺻﻴﺔtransform :
ﻣﺜﺎﻝ ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box,.rotation{width:200px;height:200px;background:rgba(138,200
,15,0.8);border:1px solid #79af03;}
.box{border:1px dashed gray;background:#e9f1d7;margin-
left:15px;}
.rotation-x {
-webkit-transform:perspective(200px) rotateX(45deg);
-moz-transform: perspective(200px) rotateX(45deg);
transform: perspective(200px) rotateX(45deg);
}
</style>
</head>
<body>
<h1>CSS3 transform perspective</h1>
<div class="box">
<div class="rotation rotation-x">perspective(200px)
rotateX(45deg)</div>
</div>
</body>
</html>
ﺃﻭ ﺍﺳﺘﻌﻤﺎﻟﻬﺎ ﻛﺨﺎﺻﻴﺔ ﻣﻨﻔﺮﺩﺓ
{ .parent
;perspective: 200px
}
{ .child
;)transform: rotateX(45deg
}
ﻣﺘﻰ ﻳﺠﺐ ﺃﻥ ﻧﺴﺘﻌﻤﻞ ﺍﻟﺪﺍﻟﺔ )( perspectiveﻭ ﻣﺘﻰ ﻳﺠﺐ ﺍﺳﺘﻌﻤﺎﻝ
ﺍﻟﺨﺎﺻﻴﺔ perspective؟
ﻳﻮﺟﺪ ﻓﺮﻕ ﺑﻴﻦ ﺍﻟﺤﺎﻟﺘﻴﻦ ،ﻋﻨﺪﻣﺎ ﻧﺮﻳﺪ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ ،ﻧﺴﺘﻌﻤﻞ
ﺍﻟﺪﺍﻟﺔ )( perspectiveﻣﻊ ﺍﻟﺨﺎﺻﻴﺔtransform
ﺃﻣﺎ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﺗﻄﺒﻴﻖ ﻧﻔﺲ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﻧﺴﺘﻌﻤﻞ
ﺃﺻﻼ ﻻ ﺗﺄﺛﺮ ﻋﻠﻰ ﺍﻟﻮﺳﻢ ﺍﻟﺬﻱ ﻧﻄﺒﻘﻬﺎ، ﻷﻥ ﻫﺬﻩ ﺍﻷﺧﻴﺮﺓperspective. ﺍﻟﺨﺎﺻﻴﺔ
ﺑﻞ ﺗﺆﺛﺮ ﻋﻠﻰ ﺍﻟﻮﺳﻮﻡ ﺍﻷﺑﻨﺎء ﺍﻟﻤﺘﻮﺍﺟﺪﻳﻦ ﺩﺍﺧﻞ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﺍﻷﺏ، ﻋﻠﻴﻪ
:ﻟﻨﺄﺧﺬ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻲ
<div class="parent">
<div class="child"> 1 <ﺍﻟﻌﻨﺼﺮ ﺍﻹﺑﻦ/div>
<div class="child"> 2 <ﺍﻟﻌﻨﺼﺮ ﺍﻹﺑﻦ/div>
<div class="child"> 3 <ﺍﻟﻌﻨﺼﺮ ﺍﻹﺑﻦ/div>
<div class="child"> 4 <ﺍﻟﻌﻨﺼﺮ ﺍﻹﺑﻦ/div>
</div>
.parent {
-webkit-perspective:500px;
-moz-perspective: 500px;
perspective: 500px;
}
.child {
width:100px;height:100px;
background:rgba(138,200,15,0.8);
border:1px solid #79af03;
display:inline-block;
-webkit-transform:rotateX(30deg);
-moz-transform: rotateX(30deg);
transform: rotateX(30deg);
ﺟﻤﻴﻊ ﺍﻟﻮﺳﻮﻡ ﺍﻷﺑﻨﺎء " "childﺳﺘﺄﺧﺬ ﻧﻔﺲ ﺍﻟﺘﺄﺛﻴﺮ ،ﻭ ﺳﻴﺘﻢ ﺭﺅﻳﺘﻬﺎ ﻣﻦ ﻧﻘﻄﺔ ﻣﻮﺣﺪﺓ
ﻛﻤﺎ ﺗﺒﻴﻦ ﺍﻟﺼﻮﺭﺓ ﺃﺳﻔﻠﻪ :
ﺃﻣﺎ ﺇﺫﺍ ﻁﺒﻘﻨﺎ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺪﺍﻟﺔ )( ، perspectiveﻓﻜﻞ ﻭﺳﻢ ﺳﻴﺘﻢ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻴﻪ
ﺑﺸﻜﻞ ﻣﻨﻔﺮﺩ ،ﻭ ﺳﺘﺘﻢ ﺭﺅﻳﺘﻪ ﻣﻦ ﺍﻟﻤﺴﺎﻓﺔ ﺍﻟﻤﺘﻌﻠﻘﺔ ﺑﻪ ،ﻛﻤﺎ ﺗﺒﻴﻦ ﺍﻟﺼﻮﺭﺓ ﺃﺳﻔﻠﻪ:
{ .child
/* ... */
;)-webkit-transform:perspective(500px) rotateX(30deg
;)-moz-transform: perspective(500px) rotateX(30deg
transform: ;)perspective(500px) rotateX(30deg
}
CSS3 perspective-origin
ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺨﺎﺻﻴﺔ perspectiveﻳﻤﻜﻨﻨﺎ ﺗﻐﻴﻴﺮ ﻧﻘﻄﺔ ﺍﻟﻤﻨﻈﻮﺭ )ﻧﻘﻄﺔ ﺍﻟﺘﻼﺷﻲ( .
ﻣﺒﺪﺋﻴﺎ ﺗﻮﺟﺪ ﻫﺬﻩ ﺍﻟﻨﻘﻄﺔ ﻭﺳﻂ ﺍﻟﻌﻨﺼﺮ ﺍﻷﺏ ،ﻭﺗﺄﺧﺬ ﻗﻴﻤﺔ center:ﺃﻭ %50ﻛﻤﺎ
ﺭﺃﻳﻨﺎ ﺳﺎﺑﻘﺎ ﻓﻲ ﺍﻟﺨﺎﺻﻴﺔtransform-origin .
{ .parent
;-webkit-perspective:500px
;-moz-perspective: 500px
perspective: ;500px
;-moz-perspective-origin: 25% 75%
;-webkit-perspective-origin: 25% 75%
perspective-origin: ;25% 75%
}
CSS3 transform-style
ﺍﻟﺨﺎﺻﻴﺔ ، transform-styleﺗﺤﺪﺩ ﻣﺎ ﺇﺫﺍ ﻛﺎﻥ ﺍﻟﻮﺳﻢ ﺍﻹﺑﻦ ﺳﻴﺘﻤﻮﺿﻊ ﻓﻲ ﻓﻀﺎء
ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ،ﺃﻡ ﺳﻴﺘﻢ ﺗﺴﻄﻴﺤﻪ ﻓﻲ ﻓﻀﺎء ﺍﻟﻮﺳﻢ ﺍﻷﺏ .
ﺗﺄﺧﺬ ﺍﻟﺨﺎﺻﻴﺔ ﺛﻼﺙ ﻗﻴﻢflat|preserve-3d|inherit :
flat :ﻳﺘﻢ ﺗﻤﻮﺿﻊ ﺍﻟﻮﺳﻢ ﺍﻹﺑﻦ ﻓﻲ ﻣﺴﻄﺢ ﺍﻟﻮﺳﻢ ﺍﻷﺏ
preserve-3d :ﻳﺘﻢ ﺗﻤﻮﺿﻊ ﺍﻟﻮﺳﻢ ﺍﻹﺑﻦ ﻓﻲ ﻓﻀﺎء ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ
div {
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
transform: rotateY(45deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
CSS3 backface-visibility
ﺗُﺤﺪﺩ ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﻣﺎ ﺇﺫﺍ ﻛﺎﻥ ﻳﺠﺐ ﺇﺧﻔﺎء ﺃﻭ ﺇﻅﻬﺎﺭ ﺍﻟﻮﺟﻪ ﺍﻟﺨﻠﻔﻲ ﻟﻠﻌﻨﺼﺮ ﺃﺛﻨﺎء
.ﺩﻭﺭﺍﻧﻪ
visible|hidden|initial|inherit : ﺗﺄﺧﺬ ﺍﻟﺨﺎﺻﻴﺔ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ
.box1 {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
CSS3 ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﻋﺎﺷﺭ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ
CSS3 transitions : 11ﺍﻟﺗﺎﺛﻳﺭﺍﺕ ﺍﻻﻧﺗﻘﺎﻟﻳﺔ
transitionﻫﻲ ﺇﺣﺪﻯ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺠﺪﻳﺪﺓ ﻓﻰ ﺍﻟﻠﻐﺔ ، CSS3ﺗﺘﻴﺢ ﻟﻨﺎ ﺍﻟﺘﺤﻜﻢ ﻓﻲ
ﺍﻟﻔﺘﺮﺓ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ ﺃﺛﻨﺎء ﺗﻐﻴﻴﺮ ﺃﻧﻤﺎﻁ ﻋﻨﺼﺮ ﻣﺎ ﺩﻭﻥ ﺍﻟﻠﺠﻮء ﺇﻟﻰ ﺍﺳﺘﻌﻤﺎﻝ ﺍﻟﻔﻼﺵ ﺃﻭ
ﺟﺎﻓﺎﺳﻜﺮﻳﺒﺖ .ﻋﺎﺩﺓ ﻋﻨﺪﻣﺎ ﻧُﻐﻴﺮ ﻣﺜﻼ ﻟﻮﻥ ﻋﻨﺼﺮ ﺃﺛﻨﺎء ﻣﺮﻭﺭ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻗﻪ
" ،"hoverﻓﺈﻧﻨﺎ ﻧﻨﺘﻘﻞ ﺑﺼﻔﺔ ﺣﺎﺩﺓ ﻭ ﻓﻮﺭﻳﺔ ﻣﻦ ﺍﻟﻨﻤﻂ ﺍﻷﺻﻠﻲ ﺇﻟﻰ ﺍﻟﻨﻤﻂ ﺍﻟﻨﻬﺎﺋﻲ .
ﺑﺎﺳﺘﻌﻤﺎﻝ transitionﻳﻤﻜﻨﻨﺎ ﺍﻟﺘﺤﻜﻢ ﻓﻲ ﻭﻗﺖ ﺑﺪﺍﻳﺔ ﺍﻟﻔﺘﺮﺓ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ ﻭ ﺳﺮﻋﺘﻬﺎ ﻭ
ﻣﺪﺗﻬﺎ ،ﻋﺒﺮ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺨﺎﺻﻴﺎﺕ ،ﺃﺑﺪﺃ ﺑﺴﺮﺩﻫﺎ .ﺛﻢ ﺳﻨﺘﻌﺮﻑ ﻋﻠﻴﻬﺎ ﻋﺒﺮ ﺃﻣﺜﻠﺔ.
ﺍﻭﻻ ﺍﻟﻤﺘﺼﻔﺤﺎﺕ ﺍﻟﺘﻰ ﺗﺘﺪﻋﻢ ﻫﺬﺓ ﺍﻟﺨﺎﺻﻴﺔ ﺍﻟﺠﺪﻳﺪﺓ ﻫﻰ ﻣﻮﺿﺤﺔ ﻓﻰ ﺍﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻰ:
ﻣﺜﺎﻝ ﺗﻮﺿﺤﻰ ﻟﻠﺘﻌﺮﻑ ﻋﻠﻰ ﺍﻟﺨﺎﺻﻴﺔ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s; /* safari(3.1 => 6.1) , chrome(4.0 => < 26.0)*/
-moz-transition: width 3s; /* firefox(4.0 => < 16.0) */
-o-transition: width 3s; /* opera(10.5 => 12.0) */
transition: width 3s; /* * ﺍﻟﺨﺎﺻﻴﺔ ﺍﻷﺻﻠﻴﺔ/
div:hover {
width: 300px;
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
ﺧﺎﺻﻴﺔ Transitionsﺗﻌﻨﻰ ﺍﻟﺘﺄﺛﻴﺮﺍﺕ ﺍﻟﺘﻲ ﺗﺤﺪﺙ ﺃﺛﻨﺎء ﺍﻟﻔﺘﺮﺓ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ ﻣﻦ ﻧﻤﻂ
ﺇﻟﻰ ﺁﺧﺮ ﻟﻨﻔﺲ ﺍﻟﻌﻨﺼﺮ .ﻟﺘﻔﻌﻴﻞ ﻫﺬﻩ ﺍﻟﺘﺄﺛﻴﺮﺍﺕ ،ﻳﺠﺐ ﻋﻠﻰ ﺍﻷﻗﻞ ﺗﺤﺪﻳﺪ ﺷﻴﺌﻴﻦ
ﺃﺳﺎﺳﻴﻦ:
ﺧﺎﺻﻴﺔ CSSﺍﻟﺘﻲ ﺳﻨﻄﺒﻖ ﻋﻠﻴﻬﺎ ﺍﻟﺘﺄﺛﻴﺮ ﻣﺜﻞ (width, height, color,
)transform ...
ﺛﻢ ﺍﻟﻤﺪﺓ ﺍﻟﺰﻣﻨﻴﺔ ﺍﻟﺘﻲ ﺳﻴﺴﺘﻐﺮﻗﻬﺎ ﺍﻟﺘﺄﺛﻴﺮ )ﻣﺪﺓ ﺍﻟﻔﺘﺮﺓ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ(
ﻟﻨﺄﺧﺬ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ .ﺳﻨﻄﺒﻖ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﺨﺎﺻﻴﺔ " "widthﻭ ﺳﺘﺴﺘﻐﺮﻕ ﺍﻟﻤﺮﺣﻠﺔ
ﺍﻷﻧﺘﻘﺎﻟﻴﺔ 3ﺛﻮﺍﻧﻲ.
ﻟﻨﻘﻮﻡ ﺑﺘﺘﻄﺒﻴﻖ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺃﻛﺜﺮ ﻣﻦ ﺧﺎﺻﻴﺔ
ﻟﺘﻄﺒﻴﻖ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺨﺎﺻﻴﺎﺕ ،ﻧُﻔﺮّﻕ ﺑﻴﻨﻬﺎ ﺑﻌﻼﻣﺔ "",
: ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ ﺳﻨﻄﺒﻖ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﺘﺎﻟﻴﺔ
width,height,background-color,transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: red;
-webkit-transition:width 2s, height 2s, background-color 2s, -
webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform
2s;
}
.box:hover {
width:200px;
height:200px;
background-color: yellow;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
</head>
<body>
<h1>CSS3 transition</h1>
<h2><ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻟﻴﺒﺪﺃ ﺍﻟﺘﺄﺛﻴﺮ/h2>
<div class="box"></div>
<p style="color:green;"><b> ﻳﻌﻮﺩ، ﻋﻨﺪﻣﺎ ﻧُﺒﻌﺪ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻦ ﺍﻟﻌﻨﺼﺮ
<ﻟﻨﻤﻄﻪ ﺍﻷﺻﻠﻲ/b><p>
</body>
</html>
ﺧﺎﺻﻴﺎﺕ transitionﺍﻟﻤﺨﺘﺼﺮﺓ
ﻣﻦ ﺃﺟﻞ ﺍﻟﺘﺤﻜﻢ ﺍﻟﺴﻠﻴﻢ ﻓﻲ ﺍﻟﺘﺄﺛﻴﺮﺍﺕ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ ،ﻳﻤﻜﻨﻨﺎ ﺍﺳﺘﻌﻤﺎﻝ ﻣﺠﻤﻮﻋﺔ ﻣﻦ
ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﻤﺨﺘﺼﺮﺓ:
: transition-propertyﺗﺤﺪﻳﺪ ﺇﺳﻢ ﺃﻭ ﺃﺳﻤﺎء ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﺘﻲ ﺳﻴﺸﻤﻠﻬﺎ ﺍﻟﺘﺄﺛﻴﺮ
: transition-durationﺗﺤﺪﻳﺪ ﺍﻟﻮﻗﺖ ﺍﻟﺬﻱ ﺳﻴﺴﺘﻐﺮﻗﻪ ﺍﻟﺘﺄﺛﻴﺮ
: transition-timing-functionﺗﺤﺪﻳﺪ ﻣﻨﺤﻨﻰ ﺍﻟﺴﺮﻋﺔ ﻟﻠﺘﺄﺛﻴﺮ ﺍﻹﻧﺘﻘﺎﻟﻲ
: transition-delayﺗﺤﺪﺩ ﻭﻗﺖ ﺑﺪﺍﻳﺔ ﺍﻟﺘﺄﺛﻴﺮ
transition-property
ﺑﺪﻝ ﻛﺘﺎﺑﺔ ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﺘﻲ ﺳﻴﺸﻤﻠﻬﺎ ﺍﻟﺘﺄﺛﻴﺮ ﻛﻘﻴﻢ ﻟﻠﺨﺎﺻﻴﺔ transition .ﻭ ﻷﺳﺒﺎﺏ
ﺗﻨﻈﻴﻤﻴﺔ ﻭ ﺗﺴﻬﻴﻞ ﺍﻹﺳﺘﻌﻤﺎﻝ ،ﻣﻦ ﺍﻷﻓﻀﻞ ﺍﻟﻘﻴﺎﻡ ﺑﺴﺮﺩ ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺎﺕ ﻛﻘﻴﻢ
ﻟﻠﺨﺎﺻﻴﺔ transition-property .ﻣﺜﻼ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﺗﻄﺒﻴﻖ ﺍﻟﺘﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﻄﻮﻝ ﻭ
ﺍﻟﻌﺮﺽ ﻭ ﺍﻟﻠﻮﻥ ،ﻧﺴﺘﻌﻤﻠﻬﺎ ﻛﺎﻟﺘﺎﻟﻲ:
};.box{ transition-property : width, height, color
transition-duration
ﺍﻟﺨﺎﺻﻴﺔ ، transition-durationﺗﻬﺘﻢ ﺑﺘﺤﺪﻳﺪ ﺍﻟﻮﻗﺖ ﺍﻟﺬﻱ ﺳﻴﺴﺘﻐﺮﻗﻪ ﺍﻟﺘﺄﺛﻴﺮ.
ﻳﻤﻜﻨﻨﺎ ﺗﺤﺪﻳﺪ ﻣﺪﺓ ﺯﻣﻨﻴﺔ ﻭﺍﺣﺪﺓ ﻟﻜﻞ ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﺘﻲ ﺳﻴﺸﻤﻠﻬﺎ ﺍﻟﺘﺄﺛﻴﺮ ،ﻓﻲ ﺍﻟﻤﺜﺎﻝ
ﺃﺳﻔﻠﻪ ،ﺳﻴﺴﺘﻐﺮﻕ ﺍﻟﺘﺄﺛﻴﺮ ﺛﺎﻧﻴﺘﻴﻦ ﻟﻜﻞ ﻣﻦ ﺍﻟﻄﻮﻝ ﻭ ﺍﻟﻌﺮﺽ.
{ .box
;transition-property: width, height
;transition-duration: 2s
}
ﺃﻭ ﺗﺤﺪﻳﺪ ﻣﺪﺓ ﺯﻣﻨﻴﺔ ﻣﺨﺘﻠﻔﺔ ﻟﻜﻞ ﺧﺎﺻﻴﺔ ﻋﻠﻰ ﺣﺪﺓ ،ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﺳﻔﻠﻪ ﺳﻴﺴﺘﻐﺮﻕ
ﺍﻟﺘﺄﺛﻴﺮ ﺛﺎﻧﻴﺘﻴﻦ ﻟﻠﻌﺮﺽ ﻭ ﺃﺭﺑﻊ ﺛﻮﺍﻧﻲ ﻟﻠﻄﻮﻝ
{ .box
;transition-property: width, height
;transition-duration: 2s, 4s
}
:ﻣﺜﺎﻻ ﻟﻠﺨﺎﺻﻴﺘﻴﻦ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition-property: width, height, background-color;
transition-property: width, height, background-color;
-webkit-transition-duration: 2s, 3s, 4s;
transition-duration: 2s, 3s, 4s;
}
.box:hover {
width: 250px;
height: 250px;
background-color: green;
}
</style>
</head>
<body>
<h1>CSS3 transition duration</h1>
<h2><ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻟﻴﺒﺪﺃ ﺍﻟﺘﺄﺛﻴﺮ/h2>
<div class="box"></div>
<p style="color:green;"><b> ﻳﻌﻮﺩ ﻟﻨﻤﻄﻪ، ﻋﻨﺪﻣﺎ ﻧُﺒﻌﺪ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻦ ﺍﻟﻌﻨﺼﺮ
<ﺍﻷﺻﻠﻲ/b><p>
</body>
</html>
transition-delay
ﺗُﺤﺪﺩ ﺍﻟﻮﻗﺖ ﺍﻟﺬﻱ ﻳﺠﺐ ﺍﻧﺘﻈﺎﺭﻩ ﻗﺒﻞ ﺑﺪﺃ ﺗﻔﻌﻴﻞ ﺍﻟﺘﺄﺛﻴﺮ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition-property: width;
-webkit-transition-duration: 3s;
-webkit-transition-delay: 2s;
transition-property: width;
transition-duration: 3s;
transition-delay: 2s;
}
.box:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>CSS3 transition delay</h1>
<h2><ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﺳﺘﻨﺘﻈﺮ ﺛﺎﻧﻴﺘﻴﻦ ﻗﺒﻞ ﺃﻥ ﻳﺒﺪﺃ ﺍﻟﺘﺄﺛﻴﺮ/h2>
<div class="box"></div>
</body>
</html>
ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﺳﺘﻨﺘﻈﺮ ﺛﺎﻧﻴﺘﻴﻦ ﻗﺒﻞ ﺃﻥ ﻳﺒﺪﺃ ﺍﻟﺘﺄﺛﻴﺮ
transition-timing-function
{ .box
;-webkit-transition-timing-function: linear
;transition-timing-function: linear
}
ﺗﺘﻴﺢ ﻟﻨﺎ ﺍﻟﺨﺎﺻﻴﺔ transition-timing-functionﺍﻟﻠﻌﺐ ﻋﻠﻰ ﺳﺮﻋﺔ ﻣﺮﺍﺣﻞ
ﺍﻟﺘﺄﺛﻴﺮ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ ،ﻣﺜﻼ ﻳﻤﻜﻨﻨﺎ ﺑﺪﺃ ﺍﻟﺘﺄﺛﻴﺮ ﺑﺴﺮﻋﺔ ﺑﻄﻴﺌﺔ ﻭ ﺇﻧﻬﺎﺋﻪ ﺑﻄﺮﻳﻘﺔ ﺃﺳﺮﻉ ،ﺃﻭ
ﺍﻟﺤﻔﺎﻅ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﺴﺮﻋﺔ ﺧﻼﻝ ﻛﻞ ﻭﻗﺖ ﺍﻟﺘﺄﺛﻴﺮ ...ﺇﻟﺦ .
ﺗﺄﺧﺬ ﻫﺬﻩ ﺍﻟﺨﺎﺻﻴﺔ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻘﻴﻢ :
cubic-bezier() |linear |ease |ease-in |ease-out |ease-in-out |initial
|inherit
ﺷﺮﺡ ﻫﺬﺓ ﺍﻟﻘﻴﻢ ﻣﻮﺿﺢ ﻓﻰ ﺍﻟﺸﻜﻞ ﺍﻟﺘﻮﺿﺤﻲ ﺍﻟﺘﺎﻟﻰ :
ﺑﺎﺳﺘﻌﻤﺎﻝ ﺃﺳﻤﺎء ﺍﻟﻘﻴﻢ، 1 ﻣﺜﺎﻝ
.box1 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.box2 {
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.box3 {
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.box4 {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.box5 {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
ﺑﺎﺳﺘﻌﻤﺎﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ، ﻧﻔﺲ ﺍﻟﻤﺜﺎﻝ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h4 { text-align:center;color:#fff;}
div {
width: 100px;
height: 50px;
background-color: red;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 2s;
transition-duration: 2s;
}
div:hover {width: 300px;}
.box1 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.box2 {
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.box3 {
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.box4 {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.box5 {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
ﻳﻈﻬﺮ ﻓﻰ ﺍﻟﻤﺴﺘﻌﺮﺽ ﻛﻤﺎ ﻳﻠﻰ ﻣﻊ ﻣﻼﺣﻈﺔ ﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻟﻴﺒﺪﺃ
ﺍﻟﺘﺄﺛﻴﺮ
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ CSS3
CSS3 Animations : 12ﺍﻟﺣﺭﻛﺔ -ﺍﻟﺗﺎﺛﻳﺭﺍﺕ ﺍﻟﺣﺭﻛﻳﺔ -
ﺗﻢ ﺍﺿﺎﻓﺔ ﺧﺎﺻﻴﺔ ﺟﺪﻳﺪﺓ ﻓﻰ ﺍﻻﺻﺪﺍﺭ ﺍﻟﺠﺪﻳﺪ ﻭﻫﻰ Animationsﺍﻭ ﺍﻟﺤﺮﻛﺔ .ﻗﺒﻞ
ﺧﺎﺻﻴﺔ animationﺍﻟﺠﺪﻳﺪﺓ ﻛﺎﻥ ﻳﺘﻢ ﺍﻧﺸﺎء ﺍﻟﺤﺮﻛﺎﺕ ﺑﺘﺤﺮﻳﻚ ﻋﻨﺎﺻﺮ HTML
ﺑﺎﺳﺘﺨﺪﺍﻡ JavaScriptﺃﻭ ﺍﻟﺼﻮﺭ ﺍﻟﻤﺘﺤﺮﻛﺔ ﻣﺜﻞ GIFﺃﻭ ﺍﺳﺘﺨﺪﺍﻡ ﺍﺳﺘﺨﺪﺍﻡ
ﺇﺿﺎﻓﺎﺕ ﻣﺜﻞ . Adobe Flash.ﻣﻊ ﺇﺻﺪﺍﺭ CSS3ﺃﺻﺒﺢ ﺑﺈﻣﻜﺎﻧﻨﺎ ﺍﻹﺳﺘﻐﻨﺎء ﻋﻦ
ﺳﻜﺮﻳﺒﺘﺎﺕ ﺍﻟﻔﻼﺵ ﻭ ﺟﺎﻓﺎﺳﻜﺮﻳﺒﺖ ﻟﺘﻨﺸﻴﻂ ﺣﺮﻛﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺛﻨﺎء ﺍﻟﻤﺮﺣﻠﺔ ﺍﻹﻧﺘﻘﺎﻟﻴﺔ
ﻣﻦ ﻧﻤﻂ ﺇﻟﻰ ﺃﺧﺮ .
ﻭﻹﻧﺸﺎء ﺳﻠﺴﻠﺔ ﻣﺘﺤﺮﻛﺔ ﻟﻌﻨﺼﺮ ﻣﺎ ،ﻧﺤﺘﺎﺝ ﺇﻟﻰ ﺧﺎﺻﻴﺘﻴﻦ ﺃﺳﺎﺳﻴﺘﻴﻦ ﻭ ﻫﻤﺎ
""@keyframesﺍﻟﺘﻲ ﺗﺤﺪﺩ ﺷﻜﻞ ﺃﻧﻤﺎﻁ ﺍﻟﺒﺪﺍﻳﺔ ﻭ ﺍﻟﻨﻬﺎﻳﺔ ﻭ ﻛﺬﻟﻚ ﺍﻷﻧﻤﺎﻁ ﺍﻟﺒﻴﻨﻴﺔ
ﻟﻠﻤﺮﺣﻠﺘﻴﻦ .ﺛﻢ ﺧﺎﺻﻴﺔ " "animationﺍﻟﺘﻲ ﺗﺼﻒ ﺍﻟﺤﺮﻛﺔ ﻓﻲ ﺣﺪ ﺫﺍﺗﻬﺎ ﻭ ﺗﻨﺪﺭﺝ
ﻣﻨﻬﺎ ﻣﺠﻤﻮﻋﺔ ﻣﻦ ﺍﻟﺨﺎﺻﻴﺎﺕ ﺍﻟﺪﺍﻋﻤﺔ ،ﺳﺄﻋﺮﺿﻬﺎ ﻋﻠﻴﻜﻢ ﺃﻭﻻ ﺛﻢ ﺳﻨﺘﻌﺮﻑ ﻋﻠﻴﻬﺎ
ﺗﺪﺭﻳﺠﻴﺎ ﻋﺒﺮ ﺃﻣﺜﻠﺔ.
ﻭﻛﻤﺎ ﺗﻌﻮﺩﻧﺎ ﻗﺒﻞ ﺷﺮﺡ ﺍﻻﺿﺎﻓﺔ ﺍﻟﺠﺪﻳﺪﺓ ﻳﺘﻢ ﺗﻮﺿﻴﺢ ﺍﻟﻤﺴﺘﻌﺮﺿﺎﺕ ﺍﻟﺘﻰ ﺗﺘﺪﻋﻢ ﻫﺬﺓ
ﺍﻟﺨﺎﺻﻴﺔ ﺍﻟﺠﺪﻳﺪﺓ ﻭﺍﻟﻤﻮﺿﺢ ﻓﻰ ﺍﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻰ :
ﺍﻟﺧﺎﺻﻳﺔ Animation
ﻹﻧﺸﺎء ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﺸﻴﻄﻪ ،ﻧﺴﺘﻌﻤﻞ ﺍﻟﺨﺎﺻﻴﺔ animationﻭ ﻧﺤﺪﺩ ﻟﻬﺎ
ﻗﻴﻤﺘﻴﻦ ﻋﻠﻰ ﺍﻷﻗﻞ :ﺇﺳﻢ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﺸﻴﻄﻪ ،ﻭ ﺍﻟﻮﻗﺖ ﺍﻟﺬﻱ ﺳﻴﺴﺘﻐﺮﻗﻪ
ﺍﻟﺘﻨﺸﻴﻂ ﻛﻤﺎ ﻳﻠﻰ :
{ div
;animation: mytest 5s
}
ﺍﻟﻘﻴﻤﺔ ﺍﻷﻭﻟﻰ " "mytestﻫﻲ ﺇﺳﻢ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﺸﻴﻄﻪ ،ﻫﻲ ﻗﻴﻤﺔ ﺍﻓﺘﺮﺍﺿﻴﺔ
ﻳﻤﻜﻨﻜﻢ ﺗﺴﻤﻴﺘﻬﺎ ﻛﻤﺎ ﺷﺌﺘﻢ .ﺃﻣﺎ ﺍﻟﻘﻴﻤﺔ ﺍﻟﺜﺎﻧﻴﺔ "s" 5ﺗُﺤ ّﺪﺩ ﺍﻟﻤﺪﺓ ﺍﻟﺰﻣﻨﻴﺔ ﺍﻟﺘﻲ
ﺳﻴﺴﺘﻐﺮﻗﻬﺎ ﺍﻟﺘﻨﺸﻴﻂ .
ﺑﻬﺬﺍ ﺃﺻﺒﺢ ﺍﻟﻌﻨﺼﺮ divﺟﺎﻫﺰﺍ ﻟﻠﺘﻨﺸﻴﻂ .ﻟﺘﻔﻌﻴﻞ ﺍﻟﻌﻤﻠﻴﺔ ﻳﺠﺐ ﺗﻤﺮﻳﺮ ﺇﺳﻢ ﺍﻟﻌﻨﺼﺮ
ﺍﻟﺬﻱ ﺃﻧﺸﺄﻧﺎﻩ " "mytestﻟﻠﺨﺎﺻﻴﺔ ﺍﻟﺜﺎﻧﻴﺔ@keyframes .
{ @keyframes mytest
/* ... */
}
ﺍﻟﺧﺎﺻﻳﺔ @keyframes :
ﺩﺍﺧﻞ ﺍﻟﺨﺎﺻﻴﺔ @keyframesﻧﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺷﻜﻞ ﺍﻟﻨﻤﻂ ﺍﻟﺬﻱ ﺳﻴﻜﻮﻥ ﻋﻠﻴﻪ ﺍﻟﻌﻨﺼﺮ
ﻓﻲ ﺯﻣﻦ ﻣﺎ ﺃﺛﻨﺎء ﺍﻟﺘﻨﺸﻴﻂ ،ﻳﻤﻜﻨﻨﺎ ﺗﺤﺪﻳﺪ ﻧﻤﻂ ﺍﻟﺒﺪﺍﻳﺔ ﻭ ﺍﻟﻨﻬﺎﻳﺔ ﻭ ﻛﺬﻟﻚ ﺍﻷﻧﻤﺎﻁ ﺍﻟﺒﻴﻨﻴﺔ
.
ﻟﺘﺤﺪﻳﺪ ﻧﻤﻂ ﺍﻟﺒﺪﺍﻳﺔ ﻭ ﺍﻟﻨﻬﺎﻳﺔ ﻳﻤﻜﻨﻨﺎ ﺍﺳﺘﻌﻤﺎﻝ ﻣﻔﺘﺎﺣﻲ " : "from , toﻭ ﻫﻲ ﺗﻌﻨﻲ
"ﻣﻦ ،ﺇﻟﻰ " :
ﺩﺍﺧﻞ " "fromﺳﻨﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺃﻧﻤﺎﻁ ﺍﻟﺒﺪﺍﻳﺔ.
ﺩﺍﺧﻞ " "toﻧﺤﺪﺩ ﺃﻧﻤﺎﻁ ﺍﻟﻨﻬﺎﻳﺔ.
{ @keyframes mytest
{ from
;background-color: blue
}
{ to
;background-color: red
}
}
ﻓﻲ ﺍﻟﻣﺛﺎﻝ ﺃﺳﻔﻠﻪ ،ﺳﻧﻘﻭﻡ ﺑﺗﻧﺷﻳﻁ ﺍﻟﻌﻧﺻﺭ ﺍﻟﻣﺳﻣﻰ " "mytestﻟﻣﺩﺓ 6
ﺛﻮﺍﻧﻲ .ﻭ ﺳﻨﻘﻮﻡ ﺑﺘﻐﻴﻴﺮ ﻟﻮﻧﻪ ﻣﻦ ﺍﻷﺯﺭﻕ "ﻟﻮﻥ ﺍﻟﺒﺪﺍﻳﺔ" ﺇﻟﻰ ﺍﻟﻠﻮﻥ ﺍﻷﺣﻤﺮ "ﻟﻮﻥ
ﺍﻟﻨﻬﺎﻳﺔ"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:150px;
height:150px;
background-color:blue;
-webkit-animation: mytest 6s;
animation: mytest 6s;
}
@-webkit-keyframes mytest {
from { background-color: blue; }
to { background-color: red; }
}
@keyframes mytest {
from { background-color: blue; }
to { background-color: red; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ﻳﻣﻛﻧﻧﺎ ﺗﻁﺑﻳﻕ ﺍﻟﻌﺩﺩ ﺍﻟﺫﻱ ﻧﺭﻳﺩﻩ ﻣﻥ ﺍﻷﻧﻣﺎﻁ ﺩﺍﺧﻝ @keyframes .ﻟﻧﺭﻯ ﻣﺛﺎﻻ
ﺁﺧﺭ .
ﺳﻧﻘﻭﻡ ﺑﺗﺣﺭﻳﻙ ﻭﺳﻡ ﺍﻟﻌﻧﻭﺍﻥ h1ﻣﻥ ﺍﻟﻳﻣﻳﻥ ﺇﻟﻰ ﺍﻟﻳﺳﺎﺭ ﻭ ﻧﻘﻭﻡ ﺑﺗﻐﻳﻳﺭ ﻟﻭﻧﻪ ﻓﻲ
ﺍﻟﻭﻗﺕ ﻧﻔﺳﻪ .ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
-webkit-animation: mytest 5s;
animation: mytest 5s;
}
@-webkit-keyframes mytest {
from {
margin-left: 70%;
color: red;
}
to {
margin-left: 0%;
color: green;
}
}
@keyframes mytest {
from {
margin-left: 70%;
color: red;
}
to {
margin-left: 0%;
color: green;
}
}
</style>
</head>
<body>
<h1><ﻋﻧﻭﺍﻥ ﻣﺗﺣﺭﻙ/h1>
</body>
</html>
ﻳﻣﻛﻧﻧﺎ ﺃﻳﺿﺎ ﺍﺳﺗﻌﻣﺎﻝ ﻣﻔﺎﺗﻳﺢ ﺍﻟﻧﺳﺏ ﺍﻟﻣﺅﻳﺔ ﺑﺩﻝ " ، "from ... toﻭ ﻫﺫﺍ ﺳﻳﺳﺎﻋﺩﻧﺎ
ﻋﻠﻰ ﺗﺣﺩﻳﺩ ﺃﻧﻣﺎﻁ ﺑﻳﻧﻳﺔ ﺃﺧﺭﻯ ﻟﻠﻌﻧﺻﺭ ﺑﺎﻹﺿﺎﻓﺔ ﺇﻟﻰ ﻧﻣﻁ ﺍﻟﺑﺩﺍﻳﺔ ﻭ ﺍﻟﻧﻬﺎﻳﺔ .ﻛﻣﺎ ﻓﻰ
ﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ ::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:150px;
height:150px;
background-color:blue;
-webkit-animation: mytest 6s;
animation: mytest 6s;
}
@-webkit-keyframes mytest {
0% { background-color: blue;}
25% { background-color: green; }
50% { background-color: red; }
75% { background-color: yellow; }
100% { background-color: orange; }
}
@keyframes mytest {
0% { background-color: blue;}
25% { background-color: green; }
50% { background-color: red; }
75% { background-color: yellow; }
100% { background-color: orange; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animationﺍﻟﺧﺎﺻﻳﺎﺕ ﺍﻟﻣﺧﺗﺻﺭﺓ
ﻟﺩﻳﻧﺎ ﻣﺟﻣﻭﻋﺔ ﻣﻥ ﺍﻟﺧﺎﺻﻳﺎﺕ ﺍﻟﻣﺧﺗﺻﺭﺓ ﺍﻟﺩﺍﻋﻣﺔ ﻭ ﺍﻟﺗﻲ ﺗﺳﻬﻝ ﻋﻠﻳﻧﺎ ﺍﻟﺗﺣﻛﻡ ﻓﻲ
ﺗﻧﺷﻳﻁ ﺍﻟﻌﻧﺎﺻﺭ .ﻟﻛﻝ ﻭﺍﺣﺩﺓ ﺩﻭﺭﻫﺎ ﺍﻟﻣﻧﻭﻁ ﺑﻬﺎ .ﺭﺃﻳﻧﺎ ﻣﻧﻬﺎ ﻓﻲ ﺍﻷﻣﺛﻠﺔ ﺍﻟﺳﺎﺑﻘﺔ
ﺧﺎﺻﻳﺗﻳﻥ ﻛﻧﺎ ﻗﺩ ﺍﺳﺗﻌﻣﻠﻧﺎﻫﻣﺎ ﻛﻘﻳﻡ ﻟﻠﺧﺎﺻﻳﺔ animationﻫﻣﺎ:
: animation-nameﺇﺳﻡ ﺍﻟﻌﻧﺻﺭ ﺍﻟﺫﻱ ﺳﻳﺗﻡ ﺗﻧﺷﻳﻁﻪ ،ﺃﻁﻠﻘﻧﺎ ﻋﻠﻳﻪ •
ﺍﻋﺗﺑﺎﻁﻳﺎ ﺇﺳﻡ"mytest" .
: animation-durationﺍﻟﻭﻗﺕ ﺍﻟﺫﻱ ﺳﺗﺳﺗﻐﺭﻗﻪ ﻋﻣﻠﻳﺔ ﺍﻟﺗﻧﺷﻳﻁ •
animation:ﻻﺳﺗﻌﻣﺎﻝ ﺍﻟﺧﺎﺻﻳﺗﻳﻥ ﻳﻣﻛﻧﻧﺎ ﺗﻐﻳﻳﺭ ﺍﻟﻛﻭﺩ ﺍﻟﺳﺎﺑﻕ
{ div
;animation-name: mytest ;mytest 6s ﻛﺎﻟﺗﺎﻟﻲ
;animation-duration: 6s
}
ﺑﺎﻗﻲ ﺍﻟﺧﺎﺻﻳﺎﺕ ﺍﻟﻣﺧﺗﺻﺭﺓ ﺃﻋﺭﺿﻬﺎ ﻋﻠﻳﻛﻡ ،ﺛﻡ ﺳﻧﺩﺭﺳﻬﺎ ﻋﺑﺭ ﺃﻣﺛﻠﺔ:
: animation-delayﺗﺣﺩﺩ ﺍﻟﻭﻗﺕ ﺍﻟﺫﻱ ﻳﺟﺏ ﺍﻧﺗﻅﺎﺭﻩ ﻗﺑﻝ ﺑﺩﺃ ﺍﻟﺗﻧﺷﻳﻁ •
: animation-directionﺗﺣﺩﺩ ﻣﺎ ﺇﺫﺍ ﻛﺎﻥ ﺍﻟﺗﻧﺷﻳﻁ ﺳﻳﻠﻌﺏ ﻓﻲ ﺍﻹﺗﺟﺎﻩ •
ﺍﻟﻣﻌﺎﻛﺱ ﺃﻭ ﻳﻌﻭﺩ ﺇﻟﻰ ﻧﻘﻁﺔ ﺍﻟﺑﺩﺍﻳﺔ ﺃﻭ ﻳﺗﻡ ﺗﻛﺭﺍﺭﻩ
: animation-iteration-countﺗﺣﺩﺩ ﻋﺩﺩ ﺍﻟﻣﺭﺍﺕ ﺍﻟﺗﻲ ﺳﻳﺗﻡ ﻓﻳﻬﺎ •
ﺗﻛﺭﺍﺭ ﺍﻟﺗﻧﺷﻳﻁ
: animation-play-stateﺗﻣﻛﻧﻧﺎ ﻣﻥ ﺗﻭﻗﻳﻑ ﺍﻟﺗﻧﺷﻳﻁ ﺃﻭ ﺗﻔﻌﻳﻠﻪ •
: animation-timing-functionﺗﺣﺩﺩ ﻣﻧﺣﻧﻰ ﺍﻟﺳﺭﻋﺔ ﻟﻠﺗﻧﺷﻳﻁ ﻣﺛﻼ •
ﻳﺑﺩﺃ ﺑﺳﺭﻋﺔ ﻭ ﻳﺧﺗﻡ ﺑﺑﻁء
: animation-fill-modeﺗﺣﺩﺩ ﺍﻷﻧﻣﺎﻁ ﺍﻟﺗﻲ ﺳﻳﺄﺧﺫﻫﺎ ﺍﻟﻌﻧﺻﺭ ﻋﻧﺩﻣﺎ ﻻ •
ﻳﻛﻭﻥ ﻧﺷﻳﻁﺎ " :ﻋﻧﺩ ﺍﻧﺗﻬﺎء ﺍﻟﺗﻧﺷﻳﻁ ﺃﻭ ﻗﺑﻝ ﺑﺩﺋﻪ"
ﺍﻟﺧﺎﺻﻳﺔ animation-iteration-count :
ﺍﻟﺧﺎﺻﻳﺔ animation-iteration-countﺗﺣﺩﺩ ﻋﺩﺩ ﺍﻟﻣﺭﺍﺕ ﺍﻟﺗﻲ ﺳﻳﺗﻡ
ﻓﻳﻬﺎ ﺇﻋﺎﺩﺓ ﻟﻌﺏ ﺍﻟﺗﻧﺷﻳﻁ .ﻭ ﻧﻌﻁﻳﻬﺎ ﺍﻟﻘﻳﻡ ﺍﻟﺗﺎﻟﻳﺔ |: number| infinite| initial
inherit
ﺗﺣﺩﻳﺩ ﻋﺩﺩ ﺍﻟﻣﺭﺍﺕ ﺍﻟﺗﻲ ﺳﻳﺗﻡ ﻓﻳﻬﺎ ﺇﻋﺎﺩﺓ ﻟﻌﺏ ﺍﻟﺗﻧﺷﻳﻁ: number ﺍﻟﻘﻳﻣﺔ
ﻣﺛﺎﻝ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
position: relative;
background: red;
-webkit-animation: moving 4s;
-moz-animation: moving 4s;
animation: moving 4s;
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
animation-iteration-count: 3;
}
@-webkit-keyframes moving {
from {margin-left: 0%;}
to {margin-left: 90%;}
}
@keyframes moving {
from {margin-left: 0%;}
to {margin-left: 90%;}
}
</style>
</head>
<body>
<h1>animation-iteration-count : number</h1>
<div></div>
</body>
</html>
ﺩﻭﻥ ﺗﻭﻗﻑ، ﻳﺗﺣﺭﻙ ﺑﻭﺍﺳﻁﺗﻬﺎ ﺍﻟﻌﻧﺻﺭ ﺑﺻﻔﺔ ﻣﺳﺗﻣﺭﺓ: infinite ﺍﻟﻘﻳﻣﺔ
... ﻣﺛﺎﻝ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
position: relative;
background: red;
-webkit-animation: moving 4s;
-moz-animation: moving 4s;
animation: moving 4s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes moving {
from {margin-left: 0%;}
to {margin-left: 90%;}
}
@keyframes moving {
from {margin-left: 0%;}
to {margin-left: 90%;}
}
</style>
</head>
<body>
<h1>animation-iteration-count : infinite</h1>
<div></div>
</body>
</html>
animation-direction ﺍﻟﺧﺎﺻﻳﺔ
ﺗﺣﺩﺩ ﻣﺎ ﺇﺫﺍ ﻛﺎﻥ ﺍﻟﺗﻧﺷﻳﻁ ﺳﻳﻠﻌﺏ ﻓﻲ ﺍﻹﺗﺟﺎﻩanimation-direction ﺍﻟﺧﺎﺻﻳﺔ
: ﻭ ﺗﺄﺧﺫ ﺍﻟﻘﻳﻡ ﺍﻟﺗﺎﻟﻳﺔ. ﺍﻟﻌﻛﺳﻲ ﺃﻭ ﻭﻓﻕ ﺩﻭﺭﺍﺕ ﻣﺗﻛﺭﺭﺓ
normal| reverse| alternate| alternate-reverse| initial|
inherit
.. ﻭﺳﻧﻘﻭﻡ ﺑﺷﺭﺡ ﻫﺫﺓ ﺍﻟﻘﻳﻡ
ﻳﺗﺣﺭﻙ ﺍﻟﺗﻧﺷﻳﻁ ﺑﺷﻛﻝ ﻁﺑﻳﻌﻲ، ﺍﻟﻘﻳﻣﺔ ﺍﻹﻓﺗﺭﺍﺿﻳﺔ: normal ﺍﻟﻘﻳﻣﺔ
... ﻣﺛﺎﻝ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
background-color:red;
-webkit-animation: moving 5s;
animation: moving 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
}
@-webkit-keyframes moving {
from { margin-left: 90%;}
to { margin-left: 0%;}
}
@keyframes moving {
from { margin-left: 90%;}
to { margin-left:0%;}
}
</style>
</head>
<body>
<h1>animation-direction : normal</h1>
<div></div>
</body>
ﻳﻠﻌﺏ ﺍﻟﺗﻧﺷﻳﻁ ﺑﺷﻛﻝ ﻋﻛﺳﻲ: reverse ﺍﻟﻘﻳﻣﺔ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
background-color:red;
-webkit-animation: moving 5s;
animation: moving 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes moving {
from { margin-left: 90%;}
to { margin-left: 0%;}
}
@keyframes moving {
from { margin-left: 90%;}
to { margin-left: 0%;}
}
</style>
</head>
<body>
<h1>animation-direction : reverse</h1>
<div></div>
</body>
</html>
ﻳﺗﻡ ﺗﻐﻳﻳﺭ ﺍﺗﺟﺎﻩ ﺍﻟﺗﻧﺷﻳﻁ ﺑﻌﺩ ﺍﻧﺗﻬﺎء ﻛﻝ ﺩﻭﺭﺓ: alternate ﺍﻟﻘﻳﻣﺔ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
background-color:red;
-webkit-animation: moving 5s;
animation: moving 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes moving {
from { margin-left:90%;}
to { margin-left:0%;}
}
@keyframes moving {
from { margin-left:90%;}
to { margin-left:0%;}
}
</style>
</head>
<body>
<h1>animation-direction : alternate</h1>
<div></div>
</body>
</html>
: alternate-reverse ﺍﻟﻘﻳﻣﺔ
alternateﻳﺗﻡ ﺗﻐﻳﻳﺭ ﺍﺗﺟﺎﻩ ﺍﻟﺗﻧﺷﻳﻁ ﺑﻌﺩ ﺍﻧﺗﻬﺎء ﻛﻝ ﺩﻭﺭﺓ ﻋﻛﺱ ﺍﺗﺟﺎﻩ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:50px;
height:50px;
background-color:red;
-webkit-animation: moving 5s;
animation: moving 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
@-webkit-keyframes moving {
from { margin-left:90%;}
to { margin-left:0%;}
}
@keyframes moving {
from { margin-left:90%;}
to { margin-left:0%;}
}
</style>
</head>
<body>
<h1>animation-direction : alternate-reverse</h1>
<div></div>
</body>
</html>
ﺍﻟﺧﺎﺻﻳﺔ animation-timing-function :
ﺗﺤﺪﺩ ﺍﻟﺨﺎﺻﻴﺔ animation-timing-functionﻣﻨﺤﻨﻰ ﺍﻟﺴﺮﻋﺔ ﻟﺘﻨﺸﻴﻂ
ﺍﻟﻌﻨﺼﺮ ،ﺃﻱ ﺳﺮﻋﺔ ﺍﻹﻧﺘﻘﺎﻝ ﻣﻦ ﻧﻤﻂ ﻵﺧﺮ ﺑﻄﺮﻳﻘﺔ ﺳﻠﺴﺔ.
ﻳﻤﻜﻨﻨﺎ ﺍﺳﺘﻌﻤﺎﻝ ﻣﻨﺤﻨﻰ" cubic bezierﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ" ،ﺃﻭ ﺍﺳﺘﻌﻤﺎﻝ ﺍﻟﻘﻴﻢ ﺍﻟﻤﻌﺮﻓﺔ
ﻣﺴﺒﻘﺎ :
linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit
ﻭﺳﻮﻑ ﻧﻘﻮﻡ ﺑﺸﺮﺡ ﺑﻌﺾ ﺍﻟﻘﻴﻢ ...
ﺍﻟﻘﻴﻤﺔ ) : cubic-bezier(n,n,n,nﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ ،ﻳﻤﻜﻨﻨﺎ ﺗﺤﺪﻳﺪ 4ﻗﻴﻢ ﻟﻠﺴﺮﻋﺔ .
ﻛﻞ ﻗﻴﻤﺔ ﺗﺘﺮﺍﻭﺡ ﺑﻴﻦ 0ﻭ 1
ﺍﻟﻘﻴﻤﺔ : linearﻳﺤﺎﻓﻆ ﺍﻟﺘﻨﺸﻴﻂ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﺴﺮﻋﺔ ﻣﻦ ﺍﻟﺒﺪﺍﻳﺔ ﺇﻟﻰ ﻧﻬﺎﻳﺔ ﺍﻟﺪﻭﺭﺓ
ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﺎﺩﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ)cubic-bezier(0,0,1,1
ﺍﻟﻘﻴﻤﺔ : easeﺍﻟﻘﻴﻤﺔ ﺍﻹﻓﺘﺮﺍﺿﻴﺔ :ﻳﺒﺪﺃ ﺍﻟﺘﻨﺸﻴﻂ ﺑﺒﻂء ﺛﻢ ﻳﺰﺩﺍﺩ ﺳﺮﻋﺔ ﺛﻢ ﻳﻨﺘﻬﻲ ﺑﺒﻂء
ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﺎﺩﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ)cubic-bezier(0.25,0.1,0.25,1
ﺍﻟﻘﻴﻤﺔ : ease-inﻳﺒﺪﺃ ﺍﻟﺘﻨﺸﻴﻂ ﺑﺒﻂء .ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﺎﺩﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲcubic-
)bezier(0.42,0,1,1
ﺍﻟﻘﻴﻤﺔ : ease-outﻳﻨﺘﻬﻲ ﺍﻟﺘﻨﺸﻴﻂ ﺑﺒﻂء ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﺎﺩﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲcubic-
)bezier(0,0,0.58,1
ﺍﻟﻤﺜﺎﻟﻴﻦ ﺃﺳﻔﻠﻪ ﺳﻴﻌﻄﻴﺎﻥ ﻧﻔﺲ ﺍﻟﻨﺘﻴﺠﺔ
ﺑﺎﺳﺘﻌﻤﺎﻝ ﺍﻟﻘﻴﻢ ﺍﻟ ُﻤﻌﺮّﻓﺔ
.box1 { animation-timing-function: linear; }
.box2 { animation-timing-function: ease; }
.box3 { animation-timing-function: ease-in; }
.box4 { animation-timing-function: ease-out; }
.box5 { animation-timing-function: ease-in-out; }
ﺇﺳﺘﻌﻤﺎﻝ ﻣﻜﻌﺐ ﺑﻴﺰﻳﻲ
.box1 { animation-timing-function: cubic-bezier(0,0,0.25,1); }
.box2 { animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
.box3 { animation-timing-function: cubic-bezier(0.42,0,1,1); }
.box4 { animation-timing-function: cubic-bezier(0,0,0.58,1); }
.box5 { animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
ﻣﺷﺎﻫﺩﺓ ﺍﻟﻧﺗﻳﺟﺔ ﺑﻛﺗﺎﺑﺔ ﺍﻟﻣﺛﺎﻝ ﺑﺎﻟﻛﺎﻣﻝ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h4 { text-align:center;color:#fff;}
div {
hg
width: 100px;
height: 50px;
position: relative;
background-color: red;
-webkit-animation: moving 4s;
animation: moving 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.box1 {
-webkit-animation-timing-function: cubic-bezier(0,0,0.25,1);
animation-timing-function: cubic-bezier(0,0,0.25,1);
}
.box2 {
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
.box3 {
-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);
animation-timing-function: cubic-bezier(0.42,0,1,1);
}
.box4 {
-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);
animation-timing-function: cubic-bezier(0,0,0.58,1);
}
.box5 {
-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);
animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}
@-webkit-keyframes moving {
from {margin-left: 0%;}
to {margin-left: 80%;}
}
@keyframes moving {
from {margin-left: 0%;}
to {margin-left: 80%;}
}
</style>
</head>
<body>
<h1>animation-timing-function </h1>
<div class="box1"><h4>linear</h4></div>
<div class="box2"><h4>ease</h4></div>
<div class="box3"><h4>ease-in</h4></div>
<div class="box4"><h4>ease-out</h4></div>
<div class="box5"><h4>ease-in-out</h4></div>
</body>
</html>
ﺍﻟﺨﺎﺻﻴﺔ animation-play-state
ﻣ ّﻛﻧﻧﺎ ﺍﻟﺧﺎﺻﻳﺔ animation-play-stateﻣﻥ ﺗﻭﻗﻳﻑ ﺍﻟﺗﻧﺷﻳﻁ ﺃﻭ ﺗﻔﻌﻳﻠﻪ .ﻳﻣﻛﻧﻧﺎ
ﺇﻋﻁﺎءﻫﺎ ﻗﻳﻣﺗﻳﻥ :
: runningﺍﻟﻘﻳﻣﺔ ﺍﻹﻓﺗﺭﺍﺿﻳﺔ ،ﺗﻘﻭﻡ ﺑﺗﺷﻐﻳﻝ ﺍﻟﺗﻧﺷﻳﻁ
: pausedﺗﻘﻭﻡ ﺑﺗﻭﻗﻳﻑ ﺍﻟﺗﻧﺷﻳﻁ
{ .box
;-webkit-animation-play-state:paused
;animation-play-state:paused
}
ﺍﻟﺨﺎﺻﻴﺔ animation-delay :
ُﺗﺣ ّﺩﺩ ﺍﻟﺧﺎﺻﻳﺔ animation-delayﺍﻟﻣﺩﺓ ﺍﻟﺯﻣﻧﻳﺔ ﺍﻟﺗﻲ ﻳﺟﺏ ﺍﻧﺗﻅﺎﺭﻫﺎ ﻗﺑﻝ ﺑﺩء
ﺍﻟﺗﻧﺷﻳﻁ
{ .box
;-webkit-animation-delay: 3s
;animation-delay: 3s
}
ﻣﺛﺎﻝ ﻳﺟﻣﻊ ﺃﻏﻠﺏ ﺍﻟﺧﺎﺻﻳﺎﺕ ﺍﻟﺗﻲ ﺭﺃﻳﻧﺎﻫﺎ ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 70px;
height: 70px;
background: black;
position: relative;
-webkit-animation: moving 5s ease-in 2s infinite alternate;
animation: moving 5s ease-in 2s infinite alternate;
}
@-webkit-keyframes moving {
0% {background:black; left:0; top:0;}
25% {background:red; left:80%; top:0;}
50% {background:green; left:80%; top:250px;}
75% {background:orange; left:0; top:250px;}
100% {background:blue; left:0; top:0;}
}
@keyframes moving {
0% {background:black; left:0; top:0;}
25% {background:red; left:80%; top:0;}
50% {background:green; left:80%; :top:250px;}
75% {background:orange; left:0; top:250px;}
100% {background:blue; left:0; top:0;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
... ﻣﺛﺎﻝ ﺍﺧﺭ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.circle {
width: 100px;
height: 100px;
position:relative;
margin-right: 20px;
border-radius: 50%;
background: -webkit-linear-gradient(orange, yellow);
background: -moz-linear-gradient(orange, yellow);
background: -o-linear-gradient(orange, yellow);
background: linear-gradient(orange, yellow);
-webkit-animation: ball 2s ease-in-out 1s infinite alternate;
animation: ball 2s ease-in-out 1s infinite alternate;
}
@-webkit-keyframes ball {
from { transform: translateX(0) rotate(0);}
to { transform: translateX(450px) rotate(3turn);}
}
@keyframes ball {
from { transform: translateX(0) rotate(0);}
to { transform: translateX(450px) rotate(3turn);}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
CSS3 ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻗﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﻣﻛﻭﻥ ﺍﻭ ﺍﺿﺎﻓﺔ ﺟﺩﻳﺩﺓ ﻓﻰ ﻟﻐﺔ ﺍﻟـــ
CSS3 Images ﺗﻧﺳﻳﻕ ﺍﻟﺻﻭﺭ: 13
Rounded Images : ﺍﻭﻻ
ﻭﺍﻟﺫﻯborder-radius ﻟﻌﻣﻝ ﺣﻭﺍﻑ ﺩﺍﺋﺭﻳﺔ ﻟﻠﺻﻭﺭ ﻳﺗﻡ ﺫﻟﻙ ﻣﻥ ﺧﻼﻝ ﺍﺳﺗﺧﺩﺍﻡ
ﺳﺑﻕ ﻭﺗﻡ ﺷﺭﺣﻬﺎ
... ﻣﺛﺎﻝ
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
ﻣﺛﺎﻝ ﺍﺧﺭ ...
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p>Use the border-radius property to create circled images:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Thumbnail Images : ﺛﺎﻧﻳﺎ
- ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺻﺎﺋﺹ ﺍﻻﻁﺎﺭThumbnail ﻟﺟﻌﻝ ﺍﻟﺻﻭﺭ ﺗﺎﺧﺫ ﺷﻛﻝ
ﺍﻟﺫﻯ ﺳﺑﻕ ﻭﺗﻡ ﺷﺭﺣﻬﺎ- border property
... ﻣﺛﺎﻝ
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p>Use the border property to create thumbnail images:</p>
<img src="paris.jpg" alt="Paris" style="width:150px">
</body>
</html>
ﻣﺛﺎﻝ ﺍﺧﺭ ﻟﻌﻣﻝ Thumbnailﻟﻠﺻﻭﺭ ﺑﺎﻻﺿﺎﻓﺔ ﺍﻟﻰ ﺭﻭﺍﺑﻁ
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use
it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" style="width:150px">
</a>
</body>
</html>
CSS The object-fit Property :14ﺗﻧﺳﻳﻕ ﺍﻟﻌﻧﺻﺭ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ
ﺧﺎﺻﻳﺔ object-fit Propertyﺗﻌﻧﻰ ﻣﻠﻰء ﺍﻟﻌﻧﺻﺭ ﻟﻣﺳﺎﺣﺔ ﻣﺣﺩﺩﺓ .ﺍﻯ ﺍﻥ
ﺍﻟﻌﻧﺻﺭ ﺳﻭﻑ ﻳﺷﻐﻝ ﻣﺳﺎﺣﺔ ﻣﺣﺩﺩﺓ .
ﻭﻫﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ ﻳﺩﻋﻣﻬﺎ ﺍﻟﻣﺗﺻﻔﺣﺎﺕ ﺍﻟﺗﺎﻟﻳﺔ :
ﻓﻣﺛﻼ ﻟﻭ ﻟﺩﻯ ﻋﻧﺻﺭ ﺍﻟﺻﻭﺭﺓ ﺍﺑﻌﺎﺩﻫﺎ px 400 px 200ﻫﺫﺓ ﺍﻟﺻﻭﺭﺓ ﻣﻣﻛﻥ ﺍﻥ
ﺗﺣﺗﻝ ﻧﻔﺱ ﺍﻻﺑﻌﺎﺩ ﺍﻭ ﺍﻗﻭﻡ ﺑﺗﺣﺩﻳﺩ ﻣﺳﺎﺣﺔ ﺟﺩﻳﺩﺓ ﺗﺷﻐﻠﻬﺎ ﻭﺑﺎﻟﺗﺎﻟﻰ ﻳﺗﻐﻳﺭ ﻣﺳﺎﺣﺔ
ﺍﻟﺻﻭﺭﺓ ﺍﻟﻅﺎﻫﺭﺓ
ﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ ﻳﻭﺿﺢ ﻫﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ :
ﺳﻭﻑ ﺍﻗﻭﻡ ﺑﺎﺩﺭﺍﺝ ﺻﻭﺭﺓ ﺑﺩﻭﻥ ﺍﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ object-fitﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:400px;
</style>
</head>
<body>
<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
: ﻓﺗﻅﻬﺭ ﺍﻟﺻﻭﺭﺓ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﺗﻅﻬﺭ ﺍﻟﺻﻭﺭﺓ ﺑﺎﺑﻌﺎﺩﻫﺎ ﻭﻣﻘﺎﺳﺗﻬﺎ ﺍﻟﻁﺑﻳﻌﻳﺔ
ﺑﻔﺭﺽ ﺍﻧﻰ ﺳﻭﻑ ﺍﺳﺗﺧﺩﻡ ﺧﺎﺻﻳﺔ object-fitﻭﺗﺣﺩﻳﺩ ﺍﻟﻘﻳﻣﺔ coverﻛﻣﺎ ﻓﻰ
ﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:400px;
object-fit:cover;
</style>
</head>
<body>
<h2>The object-fit Property</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
ﻓﺗﻅﻬﺭ ﺍﻟﺻﻣﻭﺭﺓ ﺑﻣﻠﻰء ﻫﺫﺓ ﺍﻟﻣﺳﺎﺣﺔ ﻭﺳﻭﻑ ﻳﺗﻡ ﻗﻁﻊ ﺟﺯء ﻣﻥ ﺍﻟﺻﻭﺭﺓ ﻓﺗﻅﻬﺭ ﻓﻰ
ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ :
:ﻣﺛﺎﻝ ﺍﺧﺭ ﻣﻊ ﻋﺩﻡ ﺍﺳﺗﺧﺩﺍﻡ ﻧﻔﺱ ﺍﻟﺧﺎﺻﻳﺔ
<!DOCTYPE html>
<html>
<body>
<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of
the images will be destroyed:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>
</body>
</html>
: ﻓﺗﻅﻬﺭ ﺍﻟﺻﻭﺭﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﺳﻭﻑ ﻧﻌﻳﺩ ﻧﻔﺱ ﺍﻟﻣﺛﺎﻝ ﻭﻟﻛﻥ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ object-fitﻭﺗﺣﺩﻳﺩ ﺍﻟﻘﻳﻣﺔ cover
ﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<body>
<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the
images is preserved:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-
fit:cover;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>
: ﻓﺗﻅﻬﺭ ﺍﻟﺻﻭﺭ ﻛﻣﺎ ﻳﻠﻰ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ
: ﻟﻬﺎ ﺑﻌﺽ ﺍﻟﻘﻳﻡ ﻣﻧﻬﺎ ﻛﻣﺎ ﻳﻠﻰobject-fit ﺍﻟﺧﺎﺻﻳﺔ
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
: ﻭﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ ﻳﻭﺿﺢ ﺍﻟﻔﺭﻕ ﺑﻳﻥ ﻛﻝ ﻗﻳﻣﺔ
<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:400px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:400px">
</body>
</html>
CSS Buttons ﺗﻧﺳﻳﻕ ﺍﻻﺯﺭﺍﺭ:14
: ﻟﺗﻧﺳﻳﻕ ﺍﻻﺯﺍﺭﺍ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺍﻟﻠﻐﺔ ﻳﻛﺗﺏ ﺍﻟﻛﻭﺩ ﺍﻟﺗﺎﻟﻰ ﺍﻟﻣﻭﺿﺢ ﻓﻰ ﺍﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">
ﻭﺗﻅﻬﺭ ﺍﻻﺯﺭﺍﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
background-color • ﻟﻠﺗﻌﺩﻳﻝ ﻓﻰ ﺍﻟﻭﺍﻥ ﺍﻻﺯﺍﺭ ﻳﺳﺗﺧﺩﻡ ﺍﻟﺧﺎﺻﻳﺔ ﺍﻟﺗﺎﻟﻳﺔ
: ﻣﺛﺎﻝ ﻋﻠﻰ ﺗﻌﺩﻳﻝ ﺍﻻﻟﻭﺍﻥ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﻣﺳﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
: ﻛﻣﺎ ﻳﻠﻰButton Sizes • ﻟﻠﺗﻌﺩﻳﻝ ﻭﺗﻐﻳﺭ ﺣﺟﻡ ﺍﻻﺯﺭﺍﺭ ﻳﺳﺗﺧﺩﻡ ﺍﻟﺧﺎﺻﻳﺔ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the font size of a button with the font-size property:</p>
ﻭﻳﻅﻬﺭ ﻓﻰ ﺍﻟﺳﻣﺗﻌﺭﺽ ﻛﻣﺎ ﻳﻠﻰ
ﻛﻣﺎ ﻳﻠﻰpadding • ﻟﻠﺗﺣﻛﻡ ﻓﻰ ﺍﻟﻣﺳﺎﻓﺔ ﺑﻳﻥ ﻛﻝ ﺯﺭﺍﺭ ﻭﺍﺧﺭ ﻳﺗﻡ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ
:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>
ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡRounded Buttons • ﻟﻌﻣﻝ ﺍﺯﺭﺍﺭ ﺫﺍﺕ ﺣﻭﺍﻑ ﺩﺍﺋﺭﻳﺔ
ﻛﻣﺎ ﻳﻠﻰborder-radius ﺧﺎﺻﻳﺔ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡColored Button Borders • ﻟﻌﻣﻝ ﺍﻁﺎﺭ ﻟﻼﺯﺭﺍﺭ
ﻛﻤﺎ ﻳﻠﻰborder ﺧﺎﺻﻳﺔ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
Hoverable Buttons ﻟﻌﻣﻝ ﺗﺎﺛﻳﺭ ﻋﻠﻰ ﺍﻻﺯﺭﺍﺭ ﻋﻧﺩ ﻣﺭﻭﺭ ﺍﻟﻣﺎﻭﺱ ﻋﻠﻳﻬﺎ
: ﻛﻣﺎ ﻳﻠﻰ:hover ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻝ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
.button1:hover {
background-color: #4CAF50;
ﻟﻌﻣﻝ ﻅﻝ ﻋﻠﻰ ﺍﻻﺯﺭﺍﺭ Shadow Buttonsﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ •
box-shadowﻛﻤﺎ ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
</style>
</head>
<body>
<h2>Shadow Buttons</h2>
<p>Use the box-shadow property to add shadows to the button:</p>
ﻳﺗﻡ ﺫﻟﻙ ﻣﻥ ﺧﻼﻝ ﺧﺎﺻﻳﺔDisabled Buttons ﻟﻠﺗﺣﻛﻡ ﻓﻰ ﺷﻔﺎﻓﻳﺔ ﺍﻻﺯﺭﺍﺭ
ﻛﻤﺎ ﻳﻠﻰopacity
<!DOCTYPE html>
<html>
<head>
<style>
.button {
ﻛﻤﺎ ﻳﻠﻰwidth ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔButton Width ﻟﻠﺗﺣﻛﻡ ﻓﻰ ﺣﺟﻡ ﺍﻻﺯﺭﺍﺭ
:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>
<h2>Button Width</h2>
<p>Use the width property to change the width of the button:</p>
<p><strong>Tip:</strong> Use pixels if you want to set a fixed width and use percent for responsive buttons (e.g. 50%
of its parent element). Resize the browser window to see the effect.</p>
ﻛﻣﺎfloat: • ﻟﺗﺣﻛﻡ ﻓﻰ ﺍﺗﺟﺎﺓ ﺍﻻﻭﺭﺍﺭ ﻭﺗﻌﻭﻳﻣﻬﺎ ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ
: ﻳﻠﻰ
<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
.btn-group .button:hover {
background-color: #3e8e41;
</style>
</head>
<body>
<h2>Button Groups</h2>
<p>Remove margins and float the buttons to create a button group:</p>
ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻝBordered Button ﻟﻌﻣﻝ ﺍﻁﺎﺭ ﻟﻼﺯﺭﺍﺭ •
: ﻛﻤﺎ ﻳﻠﻰborder
<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
.btn-group .button:not(:last-child) {
border-right: none; /* Prevent double borders */
.btn-group .button:hover {
background-color: #3e8e41;
</style>
</head>
<body>
ﻳﺘﻢ ﺫﻟﻚ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺧﺎﺻﻴﺔButton on Image ﻟﻌﻣﻝ ﺯﺭﺍﺭ ﻋﻠﻰ ﺍﻟﺻﻭﺭﺓ •
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
.container img {
width: 100%;
height: auto;
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
Animated Buttons • ﻟﻌﻣﻝ ﺯﺭﺍﺭ ﻣﺗﺣﺭﻙ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
.button span:after {
content: '\00bb';
: ﻳﺗﻡ ﺫﻟﻙ ﻛﻣﺎ ﻳﻠﻰclick ﻟﻌﻣﻝ ﺯﺭﺍﺭ ﺑﺗﺎﺛﻳﺭ ﺍﻝ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
: ﻛﻣﺎ ﻳﻠﻰFade in ﻟﻌﻣﻝ ﺯﺭﺍﺭ ﺫﺍﺕ ﺗﺎﺛﻳﺭ ﺍﻝ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #f4511e;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
.button:hover {opacity: 1}
</style>
</head>
<body>
<h2>Fading Buttons - "Fade in Effect"</h2>
<button class="button">Hover Over Me</button>
</body>
Pagination : 15ﻋﻣﻝ ﺗﺭﻗﻳﻡ ﻟﻠﺻﻔﺣﺎﺕ
• ﻋﻣﻝ ﺗﺭﻗﻳﻡ ﺑﺳﻳﻁ Simple Pagination
ﺍﺫﺍ ﻛﺎﻥ ﻟﺩﻳﻙ ﻣﻭﻗﻊ ﺍﻟﻛﺗﺭﻭﻧﻰ ﻳﺣﺗﻭﻯ ﻋﻠﻰ ﻋﺩﺩ ﻛﺑﻳﺭ ﻣﻥ ﺍﻟﺻﻔﺣﺎﺕ ﻳﻣﻛﻧﻙ ﻋﻣﻝ
ﺗﺭﻗﻳﻡ ﻟﺔ ﻭﺫﻟﻙ ﻣﻥ ﺧﻼﻝ ﺍﻟﻛﻭﺩ ﺍﻟﺗﺎﻟﻰ
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
Active and ﻟﻌﻤﻞ ﺗﺮﻗﻴﻢ ﺫﺍﺕ ﺗﺎﺛﻴﺮ ﻭﺫﻟﻚ ﺑﺎﻟﻤﺮﻭﺭ ﺑﺎﻟﻤﺎﻭﺱ ﻋﻠﻴﺔ •
Hoverable Pagination
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
.pagination a.active {
background-color: #4CAF50;
color: white;
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
• ﻟﻌﻤﻞ ﺗﺮﻗﻴﻢ ﺫﺍﺕ ﺗﺎﺛﻴﺮ ﻭﺑﺤﻮﺍﻑ ﺩﺍﺋﺮﻳﺔ ﻭﺫﻟﻚ ﺑﺎﻟﻤﺮﻭﺭ ﺑﺎﻟﻤﺎﻭﺱ ﻋﻠﻴﺔ
Rounded Active and Hoverable Buttons
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
.pagination a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 5px;
</style>
</head>
<body>
<h2>Rounded Active and Hover Buttons</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
Bordered Pagination • ﻟﻌﻤﻞ ﺗﺮﻗﻴﻢ ﺫﺍﺕ ﺍﻁﺎﺭ
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Pagination with Borders</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
Space Between Links • ﻟﻌﻤﻞ ﻣﺴﺎﻓﺔ ﺑﻴﻦ ﺍﻟﺘﺮﻗﻴﻢ
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Pagination with Margins</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
Pagination Size • ﻟﻠﺘﻌﺪﻳﻞ ﻓﻰ ﺣﺠﻢ ﺍﻟﺘﺮﻗﻴﻢ
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 22px;
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
-16ﻟﺘﻘﺴﻢ ﻭﺗﺨﻄﻴﻂ ﺍﻟﺼﻔﺤﺔ ﺍﻟﻰ ﻋﺪﺩ ﻣﻦ ﺍﻻﻋﻤﺪﺓ CSS Multi-column
Layout
ﻭﻫﺫﺍ ﺍﻟﺧﺎﺻﻳﺔ ﻳﺩﻋﻣﻬﺎ ﻛﻝ ﻣﻥ column ﻳﺗﻣﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺍﻟﺧﺎﺻﻳﺔ ﺍﻟﺟﺩﻳﺩﺓ
ﺍﻟﻣﺳﺗﻌﺭﺿﺎﺕ ﺍﻟﺗﺎﻟﻰ :
• ﺍﻧﺸﺎء ﻋﺪﺩ ﻣﻦ ﺍﻻﻋﻤﺪﺓ CSS Create Multiple Columns
column-countﻛﻣﺎ ﻫﻭ ﻣﻭﺿﺢ ﺑﺎﻟﻣﺛﺎﻝ ﺍﻟﺗﺎﻟﻰ ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻝ
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
• ﻟﻌﻤﻞ ﻣﺴﺎﻓﺔ ﺑﻴﻦ ﺍﻻﻋﻤﺪﺓ ﻭﺗﺤﺪﻳﺪ ﻗﻴﻤﺘﻬﺎ CSS Specify the Gap
Between Columns
column-gapﻛﻤﺎ ﻓﻰ ﺍﻟﻤﺜﺎﻝ ﺍﻟﺘﺎﻟﻰ : ﻴﺘﻢ ﺬﻟﻚ ﺒﺎﺴﺘﺨﺪﺍﻢ ﺨﺎﺼﻴﺔ
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
• ﻟﻌﻤﻞ ﻣﺴﻄﺮﺓ ﺍﻭ ﻓﻮﺍﺻﻞ ﺑﻴﻦ ﺍﻻﻋﻤﺪﺓ CSS Column Rules
column-rule-styleﻛﻣﺎ ﻳﻠﻰ : ﻳﺘﻢ ﺫﻟﻚ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺧﺎﺻﻴﺔ ﺍﻝ
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
column-rule-width ﻟﺗﺣﺩﻳﺩ ﺳﻣﻙ ﺍﻟﻣﺳﻁﺭﺓ ﺍﻭ ﺍﻟﻔﺎﺻﻝ •
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p>
<div class="newspaper">
ﺍﻟﻔﺎﺻﻝ column-rule-color ﻟﺗﺣﺩﻳﺩ ﻟﻭﻥ ﺍﻟﻣﺳﻁﺭﺓ ﺍﻭ •
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
</style>
</head>
<body>
• ﻟﺘﺤﺪﻳﺪ ﺳﻤﻚ ﺍﻟﻌﻤﻮﺩ Column Width
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
ﺍﻟﺘﺤﻜﻢ ﻓﻰ ﻭﺍﺟﻬﺔ ﺍﻟﻤﺴﺘﺨﺪﻡ CSS User Interface
ﻫﺫﺓ ﺍﻟﺧﺎﺻﻳﺔ ﻳﺩﻋﻣﻬﺎ ﺍﻟﻣﺳﺗﻌﺭﺿﺎﺕ ﺍﻟﺗﺎﻟﻳﺔ :
• ﺗﻐﻴﺮ ﺣﺠﻢ ﺍﻟﻌﻨﺼﺮ CSS Resizing
ﻳﺗﻡ ﺫﻟﻙ ﺑﺎﺳﺗﺧﺩﺍﻡ ﺧﺎﺻﻳﺔ ﺍﻝ resizﻛﻣﺎ ﻳﻠﻰ :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>
ﻣﺛﺎﻝ ﺍﺧﺭ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>
ﻣﺛﺎﻝ ﺍﺧﺭ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>
<!DOCTYPE html> CSS Outline Offset • ﻟﻌﻤﻞ ﺍﻁﺎﺭ
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
CSS Box Sizing ﻟﻌﻤﻞ ﻣﺮﺑﻊ ﺍﻭ ﺻﻨﺪﻭﻕ •
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
</style>
</head>
<body>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
ﻣﺛﺎﻝ ﺍﺧﺭ
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
</style>
</head>
<body>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
<!DOCTYPE html>
ﻣﺛﺎﻝ ﺍﺧﺭ
<html>
<head>
<style>
body {
margin: 0;
*{
box-sizing: border-box;
input, textarea {
width: 100%;
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
ﻭﺑﻬﺫﺍ ﻧﻛﻭﻥ ﻓﺩ ﺍﻧﺗﻬﻳﻧﺎ ﻣﻥ ﺷﺭﺡ ﻫﺫﺓ ﺍﻟﻭﺣﺩﺍﺕ ﺍﻟﻣﺿﺎﻓﺔ ﺍﻭ ﺍﻻﺿﺎﻓﺎﺕ ﺍﻟﺟﺩﻳﺩﺓ ﻓﻰ
ﻟﻐﺔ ﺍﻟـــ CSS3
You might also like
- Hourglass Workout Program by Luisagiuliet 276% (21)Hourglass Workout Program by Luisagiuliet 251 pages
- Read People Like A Book by Patrick King-Edited61% (70)Read People Like A Book by Patrick King-Edited12 pages
- Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health77% (13)Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health260 pages
- Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits83% (1016)Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits13 pages
- The 36 Questions That Lead To Love - The New York Times94% (34)The 36 Questions That Lead To Love - The New York Times3 pages
- The 36 Questions That Lead To Love - The New York Times95% (21)The 36 Questions That Lead To Love - The New York Times3 pages
- Jeffrey Epstein39s Little Black Book Unredacted PDF75% (12)Jeffrey Epstein39s Little Black Book Unredacted PDF95 pages
- The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt23% (954)The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt38 pages
- Name-Sakshi Sinha Reg no-RA1711003020373 CSE-4F WP Assignment (Lab Programs 1-4)No ratings yetName-Sakshi Sinha Reg no-RA1711003020373 CSE-4F WP Assignment (Lab Programs 1-4)14 pages
- Unit 3 Lesson 1 Introduction To HTML CSSNo ratings yetUnit 3 Lesson 1 Introduction To HTML CSS38 pages
- Introduction To HTML+CSS+Javascript - PPTX - 2No ratings yetIntroduction To HTML+CSS+Javascript - PPTX - 267 pages
- What You Should Already Know: CSS IntroductionNo ratings yetWhat You Should Already Know: CSS Introduction20 pages
- What Is CSS? CSS Stands For Cascading Style Sheets: ColorNo ratings yetWhat Is CSS? CSS Stands For Cascading Style Sheets: Color84 pages
- Distance Learning: Information and Communication GtechnologyNo ratings yetDistance Learning: Information and Communication Gtechnology9 pages
- Distance Learning: Information and Communication GtechnologyNo ratings yetDistance Learning: Information and Communication Gtechnology9 pages
- Inline CSS:: CSS: Cascading Style SheetNo ratings yetInline CSS:: CSS: Cascading Style Sheet44 pages
- Java Web Development Course: Writing CSS Codes100% (1)Java Web Development Course: Writing CSS Codes50 pages
- Web Technology: Clint Programming Server Programming0% (1)Web Technology: Clint Programming Server Programming50 pages
- Astigmatism - Optics Physiology and Management100% (4)Astigmatism - Optics Physiology and Management318 pages
- Physiology Chapter 51 Receptor and Neural Function of The RetinaNo ratings yetPhysiology Chapter 51 Receptor and Neural Function of The Retina7 pages
- Eye Eye: Visit For More The Ultimate Online Montessori Resource !100% (1)Eye Eye: Visit For More The Ultimate Online Montessori Resource !21 pages
- A Country-Wide Survey On Knowledge, Attitude and Practice About Causes and Management Towards Amblyopia Among Saudi PopulationNo ratings yetA Country-Wide Survey On Knowledge, Attitude and Practice About Causes and Management Towards Amblyopia Among Saudi Population10 pages
- Question Clinical Anatomy of The Visual System FFXNo ratings yetQuestion Clinical Anatomy of The Visual System FFX4 pages
- Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real HealthLivingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
- Donald Trump & Jeffrey Epstein Rape Lawsuit and AffidavitsDonald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
- The 36 Questions That Lead To Love - The New York TimesThe 36 Questions That Lead To Love - The New York Times
- The 36 Questions That Lead To Love - The New York TimesThe 36 Questions That Lead To Love - The New York Times
- Jeffrey Epstein39s Little Black Book Unredacted PDFJeffrey Epstein39s Little Black Book Unredacted PDF
- The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - ExcerptThe 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
- Name-Sakshi Sinha Reg no-RA1711003020373 CSE-4F WP Assignment (Lab Programs 1-4)Name-Sakshi Sinha Reg no-RA1711003020373 CSE-4F WP Assignment (Lab Programs 1-4)
- What Is CSS? CSS Stands For Cascading Style Sheets: ColorWhat Is CSS? CSS Stands For Cascading Style Sheets: Color
- Distance Learning: Information and Communication GtechnologyDistance Learning: Information and Communication Gtechnology
- Distance Learning: Information and Communication GtechnologyDistance Learning: Information and Communication Gtechnology
- Web Technology: Clint Programming Server ProgrammingWeb Technology: Clint Programming Server Programming
- Responsive Design: All CSS responsive featuresFrom EverandResponsive Design: All CSS responsive features
- Physiology Chapter 51 Receptor and Neural Function of The RetinaPhysiology Chapter 51 Receptor and Neural Function of The Retina
- Eye Eye: Visit For More The Ultimate Online Montessori Resource !Eye Eye: Visit For More The Ultimate Online Montessori Resource !
- A Country-Wide Survey On Knowledge, Attitude and Practice About Causes and Management Towards Amblyopia Among Saudi PopulationA Country-Wide Survey On Knowledge, Attitude and Practice About Causes and Management Towards Amblyopia Among Saudi Population
- Question Clinical Anatomy of The Visual System FFXQuestion Clinical Anatomy of The Visual System FFX