| Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол |
6.border-left-style
Сол жақ шекеаралық түсті әртүрлі стилдерге (бейнелерге) өзгерту
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-left-style</title>
- <style>
- .line {
- border-left-color: red;
- border-left-style: double;
- border-left-width: 7px;
- padding-left: 10px;
- }
- </style>
- </head>
- <body>
- <div class="line">
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
7.border-top-color
Элементтің жоғарғы жағында шекара түсін орнатады.
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-top-color</title>
- <style>
- h1 {
- border-top-color: #ccc;
- border-top-style: double;
- border-top-width: 7px;
- border-left-color: #ccc;
- border-left-style: solid;
- border-left-width: 2px;
- padding: 7px;
- }
- </style>
- </head>
- <body>
- <h1>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</h1>
- <p>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
8.background-clip
Белгіленген кестенің немесе шекара ішіндегі фондық суретті шекара ішінде толықтай көрсетеді.
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>background-clip</title>
- <style>
- .example {
- background: #5f392f url(images/gear.png);
- border: 10px dotted red;
- background-clip: border-box;
- padding: 10px;
- color: #fff;
- min-height: 48px;
- }
- </style>
- </head>
- <body>
- <div class="example">Esten Tech</div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
9.border-bottom-left-radius
Белгіленген кестенің немесе шекаралық сызықтың сол жақ бұрышын доғалдау немесе радиусын орнату .
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-bottom-left-radius</title>
- <style>
- .radius {
- background: #fc0;
- padding: 15px;
- margin-bottom: 10px;
- }
- </style>
- </head>
- <body>
- <div style="border-bottom-left-radius: 20px" class="radius">
- border-bottom-left-radius: 20px
- </div>
- <div style="border-bottom-left-radius: 70px 40px" class="radius">
- border-bottom-left-radius: 70px 40px
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
10. border-left-width
Элементтің сол жағына орналасқан бейнеленген түстің қалыңдығын белгілейді .
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-left-width</title>
- <style>
- .line {
- border-left-color: red; /* Цвет линии слева */
- border-left-style: double; /* Стиль линии */
- border-left-width: thick; /* Толщина линии */
- padding-left: 10px; /* Расстояние между линией и текстом */
- }
- </style>
- </head>
- <body>
- <div class="line">
- <h3>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</h3>
- <p>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
Дайындаған: Естен Ербол
Esten Tech： CSS Кодтарының мағынасы - 2
