Css-ի ֆունկցիաները (Մաս-2)

Մոտավոր ընթերցում. 9 րոպե 0 դիտումներ

Նկարի ֆունկցիաներ

linear-gradient

linear-gradient – Գծային գրադիենտը սահմանում է գունային շերտեր ուղիղ գծերի տեսքով։

Պարզ գծային գրադիենտը պատրաստելու համար բավական է միայն երկու գույն սահմանել․ դրանք կոչվում են գույների կանգառի կետեր։ Հնարավոր է սահմանել երկուսից ավել գույներ։

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(black, white);
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div></div>
  </body>
</html>

Գծային գրադիենտի կանխադրված տարբերակում գույները սկսում են վերևից ներքև։ Այն հնարավոր է փոխել կամ հատուկ բառերով, կամ նշելով թեքության աստիճանը « deg » չափման միավորով։ Հատուկ բառերը սկսվում են « to »-ով։

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(to right, black, white);
}

Հատուկ բառերը հետևյալն են՝

	Անկյունը	Նկարագրություն
to top	0deg	Ներքևից վերև
to left	270deg -90deg	Աջից ձախ
to bottom	180deg	Վերևից ներք
to right	90deg -270deg	Ձախից աջ
to top left		Ներքևի աջ անկյունից վերևի ձախ անկյունը։
to top right		Ներքևի ձախ անկյունից վերևի աջ անկյունը։
to bottom left		Վերևի աջ անկյունից ներքևի ձախ անկյունը։
to bottom right		Վերևի ձախ անկյունից ներքևի աջ անկյունը։

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(to right, black, orange, red, white);
}

Հնարավոր է գույներին սահմանել՝ որքան տարածք պետք է ամեն մեկը զբաղեցնի․

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(to left, orange 28px, green 70%, brown);
}

brown-ի համար սահմանված չէ կանգառի որևէ կետ, ուստի այն կզբաղեցներ 0%-ից մինչև 100% տարածությունը, եթե չլինեին orange և green կետերը։

Գույների միջև կտրուկ անցումներ ունենալու համար երկու հարևան կետերը պետք է սահմանվեն նույն վայրում․

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(to bottom left, orange 50%, black 50%);
}

Երկու գույնով գրադիենտ պատրաստելու ժամանակ գույների հարթ փոփոխությունը կատարվում է տվյալ օբյեկտի մեջտեղից։ Այն կարելի է փոխել՝ հիմնական 50%-ի փոխարեն նշելով ենթադրենք 20%։

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
 background: linear-gradient(orange, 20%, black);
}

Ամեն գույնի համար հնարավոր է սահմանել երկու կետեր, որոնցով կվորոշվի գույնի տարածությունը տվյալ օբյեկտում։ Կարող ենք նաև որոշել գույների հարթ փոփոխության տարածքը։ Նայենք օրինակին՝

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
}
.div01 {
  background: linear-gradient(to left,
   lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80%);
  background: linear-gradient(to left,
   lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);
}

Այսպիսով, կանաչ գույնը զբաղեցնում է 0%-ից 20%-ը, հարթ փոփոխությունը կանաչից կարմիր, զբաղեցնում է 10%-ը(20%->30%), 30%-ից 45%-ը կարմիրի մաքուր գույնն է՝ առանց որևէ հարթ փոփոխության։

45%-ից 55%-ը կատարվում է հարթ փոփոխություն կարմիրից կապույտ․ կապույտը առանց փոփոխության զբաղեցնում է 55%-ից 70%-ը։

70%-ից 80%-ը կատարվում է հարթ փոփոխություն կապույտից դեղինը․ 80%-ից 100%-ն էլ զբաղեցնում է դեղինը։

Ներքևի հատկությունը նույնն է․ նրանում նշված են ավելի հակիրճ( linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); ):

Նույն օրինակը գույների կտրուկ փոփոխություններով՝

				
					div {
 width: 800px;
 height: 500px;
 margin: 50px 50px;
}
.div02 {
 background: linear-gradient(to left,
   lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75%);
 background: linear-gradient(to left,
   lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);
}

Որպես երկրորդ գույն թույլատրվում է սահմանել ոչինչ, այսինքն թափանցիկ՝ գույնի փոխարեն նշելով «transparent» բանալի բառը:

				
					div {
 width: 600px;
 height: 400px;
 margin: 50px 50px;
 background: linear-gradient(to right, red, 20%, transparent);
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body style="background: green">
    <div></div>
  </body>
</html>

Հնարավոր է շերտավորել գրադիենտները, եթե դրանք ունենան որոշակի թափանցիկություն. այն կսահմանվի rgba-ի վերջին արժեքով։

				
					  div {
    width: 600px;
    height: 400px;
    margin: 50px 50px;
    background: 
      linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
      linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
      linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
  }

radial-gradient

Շրջանաձև գրադիենտը նման է գծայինին։ Շրջանաձևը սահմանում է կենտրոնական կետից գրադիենտային շրջան։

Կետը հնարավոր է փոխել՝ ինչպես նաև շրջանի ձևը՝ շրջանաձև կամ օվալաձև` circle կամ ellipse(այս մեկը կանխադրված արժեքն է)։

Գրադիենտի համար կանխադրված է 50% 50% կենտրոնը։

Գրադիենտը կարող է օվալաձև լինել, եթե տվյալ օբյեկտը քառակուսի չէ, քանի որ շրջանի կողմերը ձգվում են օբյեկտի չորս կողմերով։

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(red, blue);
}

Շրջանաձև գրադիենտին նույնպես հնարավոր է գույների կետեր որոշել՝

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(circle, green 10%, yellow 20% 30%, skyblue 40%);
}

Հնարավոր է որոշել գրադիենտի կենտրոնը․ նշվում է « at »-ը, որից հետո սահմանվում է հորիզոնական և ուղղահայաց կետերը տոկոսով, կամ հատուկ բառերով(left, right և այլն)։

top left = left top = 0% 0% (վերևի ձախ անկյունում);

top = top center = center top = 50% 0% (վերևի մեջտեղում)

right top = top right = 100% 0% (վերևի աջ անկյունում);

left = left center = center left = 0% 50% (կենտրոնի ձախ անկյունում);

center = center center = 50% 50% (կենտրոնում) — կանխադրված է այս մեկը։

right = right center = center right = 100% 50% (կենտրոնի աջ անկյունում);

bottom left = left bottom = 0% 100% (ներքևի ձախ անկյունում);

bottom = bottom center = center bottom = 50% 100% (ներքևի կենտրոնում);

bottom right = right bottom = 100% 100% (ներքևի աջ անկյունում):

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(circle at top left, green 10%, 
             yellow 20% 30%, skyblue 40%);
}

Հնարավոր է որոշել շրջանաձև գրադիենտի չափերը չորս հատուկ բառերով՝

closest-side(ըստ օբյեկտի ամենամոտ կողմի),

closest-corner(ըստ օբյեկտի ամենամոտ անկյան),

farthest-side(ըստ օբյեկտի ամենահեռու կողմի․ սա կանխադրված է),

farthest-corner(ըստ օբյեկտի ամենահեռու անկյան):

closest-side՝

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(ellipse closest-side at 50% 20%, green, 
             yellow 10%, blue 50%, beige);
}

Կետի համար սահմանված է at 50% 20% կորդինատները՝ ուղղահայաց՝ 20%։ Ամենամոտ կողմը կետին(closest-side-ը) օբյեկտի վերևի մասն է․ ուստի շրջանը կձգվի կետին ամենամոտ կողմի միջև տարածությամբ՝ 20%+20%-ով, իսկ հորիզոնական՝ 50%+50%-ով։

closest-corner՝

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(ellipse closest-corner at 30% 40%, 
             green, yellow 10%, blue 50%, beige);
}

Շրջանը կձգվի կետին ամենամոտ անկյան միջև տարածությամբ։

farthest-side՝

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(ellipse farthest-side at 20% 50%, red, 
             yellow 10%, blue 50%, beige);
}

Կետի համար սահմանված է at 20% 50% կորդինատները՝ հորիզոնական՝ (20%)։ Ամենահեռու կողմը կետին(farthest-side-ը) օբյեկտի աջ մասն է․ ուստի շրջանը հորիզոնական կձգվի կետին ամենահեռու կողմի միջև տարածությամբ՝ 80%+80%-ով, իսկ ուղղահայաց՝ 50%+50%-ով։

farthest-corner՝

				
					div {
 width: 800px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(ellipse farthest-corner at 30% 25%, green, 
             yellow 10%, blue 50%, beige);
}

Շրջանը կձգվի կետին ամենահեռու անկյան միջև տարածությամբ:

Հնարավոր է շերտավորել գրադիենտները, եթե դրանք ունենան որոշակի թափանցիկություն․ այն կսահմանվի rgba-ի վերջին արժեքով՝

				
					div {
 width: 400px;
 height: 400px;
 margin: 50px 50px;
 background: radial-gradient(circle at 50% 0,
   rgba(255, 0, 0, .5),
   rgba(255, 0, 0, 0) 70.71%),
  radial-gradient(circle at 6.7% 75%,
   rgba(0, 0, 255, .5),
   rgba(0, 0, 255, 0) 70.71%),
  radial-gradient(circle at 93.3% 75%,
   rgba(0, 255, 0, .5),
   rgba(0, 255, 0, 0) 70.71%) beige;
 border-radius: 50%;
}

conic-gradient

conic-gradient – Կոնաձև գրադիենտն գույները դասավորում է կետի շուրջկողմը՝ փաթաթված։

Գույների կետերը սահմանվում են տոկոսով կամ աստիճանով(%, deg): Գույները դասավորվում են ժամսլաքի ուղղությամբ։

				
					div {
 width: 400px;
 height: 400px;
 margin: 50px 50px;
 background: conic-gradient(red, blue);
}

Այստեղ նույնպես հնարավոր է որոշել գրադիենտի կենտրոնը և գույների զբաղեցրած տարածքները։

				
					div {
 width: 400px;
 height: 400px;
 margin: 50px 50px;
 background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Հնարավոր գրադիենտի սկիզբը փոխել` սահմանել նոր անկյուն՝ օգտագործելով « from » հատուկ բառը՝

				
					div {
 width: 400px;
 height: 400px;
 margin: 50px 50px;
 background: conic-gradient(from 45deg, red, orange, 
             yellow, green, blue, purple);
}

repeating-linear-gradient

repeating-linear-gradient – Ուղիղ գծով տարածվող, կրկնվող գրադիենտ։

				
					div {
 width: 500px;
 height: 300px;
 margin: 15px 15px;
 background: repeating-linear-gradient(-45deg, red, red 5px, 
             blue 5px, blue 15px, orange 15px, orange 30px);
}

repeating-radial-gradient

repeating-radial-gradient -Կրկնվող շրջանաձև գրադիենտ։

				
					div {
 width: 500px;
 height: 300px;
 margin: 15px 15px;
 background: repeating-radial-gradient(circle, red 5px 10px, 
             blue 10px 20px, orange 20px 35px);
}

repeating-conic-gradient

repeating-conic-gradient – Կրկնվող կոնաձև գրադիենտ․

				
					div {
 width: 500px;
 height: 300px;
 margin: 15px 15px;
 background: repeating-conic-gradient(red 5deg 10deg, 
             blue 10deg 20deg, orange 20deg 35deg);
}

image-set()

Նկարը տարբեր ֆորմատներով սահմանելու համար է։

ժամանակակից ֆորմատներից ․avif-ը(նկարի ծավալը նվազեցնում է 2 անգամ՝ առանց որակը կորցնելու, որով այն ավելի արագ է ներբեռնվում սերվերից․ ՛.webp՛ ֆորմատը այն նվազեցնում է 30%-ով) ներկայումս աջակցվում է միայն Chrome և Firefox բրաուզերների կողմից։ Ուստի image-set() -ի միջոցով նկարը կնշվի մի քանի ֆորմատներով։

				
					  img {
    background-image: image-set(
      "image.avif" type("image/avif"),
      "image.jpg" type("image/jpeg")
    );
  }

Նույնը հնարավոր է կատարել նաև html -ում՝ օգտագործելով <picture> էլեմենտը

				
					<picture>
  <source srcset="images/image01.avif" type="image/avif" />
  <img decoding="async" src="images/image01.jpg" alt="image01" />
</picture>

cross-fade()

cross-fade() – ֆունկցիան օգտագործվում է մի քանի նկարներ իրար խառնելու համար՝ նկարների համար սահմանելով որոշակի թափանցիկություն։

				
					  div {
    width: 500px;
    height: 500px;
    background-image: -webkit-cross-fade(
      url("html.png"),
      url("kaskadsm.jpg"),
      70%
    );
  }

70% թափանցիկությունը վերաբերում է առաջին նկարին, իսկ երկրորդին կսահմանվի 30%։

Կան որոշակի առանձնահատկություններ, որոնք բրաուզերները դեռ չեն աջակցում․ նկարներին առանձին սահմանում է թափանցիկություն։

Նայենք օրինակին՝

cross-fade(url(white.png) 0%, url(black.png) 100%); – ամբողջովին սև
cross-fade(url(white.png) 25%, url(black.png) 75%); – 25% սպիտակ, 75% սև
cross-fade(url(white.png) 50%, url(black.png) 50%); – 50% սպիտակ, 50% սև
cross-fade(url(white.png) 75%, url(black.png) 25%); – 75% սպիտակ, 25% սև
cross-fade(url(white.png) 100%, url(black.png) 0%); – ամբողջովին սպիատկ

cross-fade(url(white.png) 75%, url(black.png) 75%); – 75% սպիտակ, 75% սև

cross-fade(url(red.png), url(yellow.png), url(blue.png)); – այստեղ 100%-ը կբաժանվի երեքի միջև, ամեն մեկին 33.33%․ նույնն ինչ՝
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

element()

Ֆունկցիան աջակցվում է միայն FireFox -ի կողմից։

Էլեմենտի համար որպես ֆոն կարելի է սահմանել ցանկացած էլեմենտի պարունակությունը։

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>
  <body>
    <p style="color: white; background: -moz-element(#second)">Hello world!!</p>
    <div id="second" style="width: 100px; height: 100px; background: orange">
      My DIV
    </div>
  </body>
</html>

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>
  <body>
    <p style="color: red; background: -moz-element(#button01)">Hello world!!</p>
    <button id="button01" type="button">Սեղմել</button>
  </body>
</html>

paint()

Աշխատում է միայն Chrome, Edge, Opera բրաուզերների հետ։

Էլեմենտին սահմանվում է ֆոն « background » -ի միջոցով։ Նկարի դեպքում այն սահմանվում է ‘url’ -ով՝ background: url(images/image01.jpg); :

paint() ֆունկցիայի միջոցով ինքներս կարող ենք ֆոնի համար նկարել ցանկացած պատկեր։ Այն նկարվում է Javascript -ով։

paint() -ում նշվածը Javascript -ում նկարած պատկերի վերջնական արդյունքը ներկայացնող անվանումն է։

Html ֆայլը – example.html ՝

				
					body {
 margin: 0px;
 padding: 0px;
}
#screen {
 box-sizing: border-box;
 margin: 10px;
 padding: 0px;
 width: calc(100vw - 20px);
 height: calc(100vh - 20px);
 background-color: #111;
 background-image: paint(a-pattern);
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script>
      CSS.paintWorklet.addModule("the-javascript-file.js");
      /*javascript ֆայլի անվանումն է*/
    </script>
  </head>
  <body>
    <section id="screen"></section>
  </body>
</html>

Javascript ֆայլը – thejavascriptfile.js՝

				
					class Shape {  /*կլասի անվանումն է */
 paint(pc, geom, properties) {
  let x = geom.width / 2;
  let y = geom.height / 2;
  pc.strokeStyle = 'white';
  pc.lineWidth = 4;
  pc.beginPath();
  pc.arc(x, y, 50, 0, 2 * Math.PI);
  pc.stroke();
  pc.closePath();
 }
}

registerPaint('a-pattern', Shape);

Օրինակը՝ https://codepen.io/Rumyra/pen/JLLoZo

Հաշվիչ ֆունկցիաներ

counter() counters()

ֆունկցիան պատկերելու է պարզ թվային փոփոխականի(x = 65, « Նա x տարեկան է ») արժեքը։ Այն նախատեսված է ցուցակի համար սահմանելու հաշվիչ։

Հաշվիչը բաղկացած է երեք մասից՝

1. counter-reset – սահմանում է փոփոխական, որում պահպանվում է հաշվիչի արդյունքը։ Սկզբնական արժեքը հավասար է 0-ի։

2. counter-increment – հաշվիչն է, որը կհաշվի նույնատիպ էլեմենտների քանակը տվյալ էջում։

3. counter() – ֆունկցիան է, որը պատկերելու է հաշվիչի արդյունքը։ Այստեղ սահմանվում է փոփոխականի անվանումը։

Ֆունկցիան սահմանվում է content հատկության մեջ, որը կցուցադրի հաշվիչի արդյունքը։

Օրինակ՝

				
					  body {
    counter-reset: hashvich;
    /* Սահմանում ենք փոփոխական հաշվիչի համար  « hashvich »  անվանմամբ*/
  }
  h2::before {
    counter-increment: hashvich;
    /* հաշվիչը ամեն <h2> տեսակի էլեմենտի համար 1-ով գումարվում է։ */
    content: "Համար " counter(hashvich) " - ";
    /* content-ը ::before պսևդոէլեմենտի միջոցով  իր ամբողջ պարունակությունը
 ցուցադրելու է ամեն <h2> տողից առաջ։  counter()-ի միջոցով հաշվիչի 
 արժեքն էլ է ավելանում  այդ պարունակությանը։*/
  }

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
    <h2>խաղացողը։</h2>
  </body>
</html>

counters() – ի միջոցով հնարավոր է հաշվել ցուցակում ցուցակը։

				
					ol {
 counter-reset: hashvich;
 list-style-type: none;
}
li::before {
 counter-increment: hashvich;
 content: counters(hashvich, ".") " ";
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ol>
      <li>item</li>
      <li>
        item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>
            item
            <ol>
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ol>
          </li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
      <li>item</li>
    </ol>
    <ol>
      <li>item</li>
      <li>item</li>
    </ol>
  </body>
</html>

symbols()

ֆունկցիան էլէմենտի պարունակության մեջ ավելացնում է հատուկ սիմվոլներ։

Աշխատում է միայն Firefox բրաուզերի վրա։

Ունի մի քանի տեսակներ՝

cyclic

cyclic – ցիկլային ալգորիթմ՝ թվարկված սիմվոլները հերթով հատկացվում է հաշվիչին և ավարտվելու դեպքում ցիկլը կրկնվում է։

				
					ol {
 list-style: symbols(cyclic "" "" "");
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body>
    <ol>
      <li>item</li>
      <li>
        item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>
            item
            <ol>
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ol>
          </li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
      <li>item</li>
    </ol>
    <ol>
      <li>item</li>
      <li>item</li>
    </ol>
  </body>
</html>

fixed

fixed – նշված բոլոր սիմվոլները հերթականությամբ տեղադրվում են․ սիմվոլների ավարտվելուն պես, ցուցակին վերադարձվում է իրեն հատուկ համարակալումը՝

				
					ol {
 list-style: symbols(fixed "" "" "")
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body>
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </body>
</html>

symbolic

symbolic – սիմվոլները տեղադրելու ամեն ցիկլից հետո յուրաքանչյուր սիմվոլ գումարում է մեկով։

Օրինակ` a, b, c սիմվոլներ. երկրորդ ցիկլի ժամանակ դրանք կգումարվեն մեկով՝aa, bb, cc և այլն։

				
					div {
 margin: 70px 70px;
}
ol {
 list-style: symbols(symbolic "" "" "")
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body>
    <div>
      <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ol>
    </div>
  </body>
</html>

alphabetic

alphabetic – սիմվոլները տեղադրում է մորզեի այբուբենի պես։

Օրինակ` a, b, c սիմվոլները․ առաջին ցիկլի ժամանակ սիմվոլները կտեղադրվեն ինչպես կան, երկրորդ ցիկլի ժամանակ` երկու սիմվոլ՝ նախ aa, հետո ab, ba, bb, երրորդում՝ aaa, aba, abb, aca, acb, acc և այլն:

				
					div {
 margin: 70px 70px;
}
ol {
 list-style: symbols(alphabetic "○" "●" "□")
}

numeric

numeric –աշխատում է ինչպես alphabetic-ը, բայց մի տարբերությամբ․ alphabetic-ը սիմվոլները ցուցադրում է մորզեի այբուբենով, իսկ numeric-ը սիմվոլները ցուցադրում է համարակալման տեսքով։ Համարակալումը սկսում է մեկից:

Տարբերությունը կերևա, եթե որպես սիմվոլներ օգտագործվեն թվեր՝

				
					div {
 margin: 70px 70px;
}
ol {
 list-style: symbols(alphabetic "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}

				
					div {
 margin: 70px 70px;
}
ol {
 list-style: symbols(numeric "0" "1" "2" "3" "4" "5" "6" "7" "8" "9");
}

Ֆորմի ֆունկցիաներ

circle()

circle() – ֆունկցիան կարելի է օգտագործել shape-outside և clip-path css հատկությունների հետ։ Այն օբյեկտը կցուցադրի շրջանաձև։

clip-path -ի միջոցով օբյեկտը ցուցադրվում է սահմանված պատկերով, այս դեպքում՝ շրջանաձև։

shape-outside -ի դեպքում վերահսկում է էլեմենտի շուրջը տեղադրված օբյեկտները(օրինակ՝ որևէ տեքստ)։

				
					img {
 float: left;
 clip-path: circle();
 shape-outside: circle();
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img decoding="async" src="image.png" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit
      libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum vitae
      accusamus nobis.....․
    </p>
  </body>
</html>

clip-path-ի միջոցով նկարին հաղորդվել է շրջանի տեսք, իսկ shape-outside-ի միջոցով նույն նկարի համար սահմանվել է՝ շուրջը եղող էլեմենտները(այս դեպքում տեքստը) պետք է դասավորվեն շրջանաձև։

Հնարավոր է վերահսկել շրջանին վերաբերող պարամետրերը՝ ռադիուսը և կենտրոնը։

Միայն ռադիուսը վերահսկելու համար սահմանվում է մեկ արժեք %-ով(կամ պիքսելին վերաբերող այլ չափման միավորով)։

				
					div {
 float: left;
 width: 500px;
 height: 500px;
 background: orange;
 shape-outside: circle(48%);
}

Հնարավոր է փոխել նաև կենտրոնի կորդինատները:

Անհրաժեշտ է սահմանել երեք արժեք, որտեղ առաջինը՝

շրջանի ռադիուսն է։ Մնացած պարամետրերը առանձնացվում են « at » հատուկ բառով։

at-ից հետո եկող արժեքը շրջանի կենտրոնի կորդինատն է հորիզոնական ուղղությամբ(ձախից աջ), իսկ երկրորդը՝ ուղղահայաց(վերևից ներքև)։

Արդյունքը պատկերացնելու համար, shape-outside-ի փոխարեն օգտագործենք clip-path-ը՝

				
					img {
 float: left;
 width: 400px;
 height: 400px;
 margin: 100px 100px;
 clip-path: circle(200px at 150px 200px);
}

ellipse()

ellipse() – սահմանում է էլիպսաձև պատկեր։ Աշխատում է circle()-ի պես։

«at»-ից առաջ նշվում է երկու արժեք՝ շրջանի ռադիուսը հորիզոնական և ուղղահայաց։

				
					img {
 float: left;
 width: 400px;
 height: 400px;
 margin: 10px 10px;
 clip-path: ellipse(200px 160px);
 shape-outside: ellipse(210px 160px at 200px 200px);
}

inset()

inset() – սահմանում է ուղղանկյան պատկեր։ Ընդունում է մինչև չորս արժեքներ։

shape-outside: inset( 150px ) – մեկ արժեք նշելու դեպքում այն կվերաբերի ուղղանկյան չորս կողմերին։

shape-outside: inset( 150px 120px ) –առաջինը կվերաբերի պատկերի վերևի և ներքևի կողմերին, իսկ երկրորդը՝ ձախ և աջ կողմերին։

shape-outside: inset( 110px 20px 60px 10px) – կվերաբերի ուղղանկյան չորս կողմերին ժամսլաքի ուղղությամբ՝ վերևի, աջ, ներքևի և ձախ կողմերին։

shape-outside-ի դեպքում inset()-ին չորս արժեք սահմանելիս շրջապատող էլեմենտները, ենթադրենք տեքստը, կընդգրկեն հիմնական էլեմենտը չորս կողմերից ըստ արժեքների։ Երկու արժեքի դեպքում՝ shape-outside: inset( 110px 20px ) – 110px / 2 = 55px վերևից, 55px ներքևից, և 20px / 2 = 10px աջից, 10px ձախից(ձախից արդյունք չենք ունենա, եթե float-ը հավասար է left-ի)։

				
					div {
 shape-outside: inset(20px 60px 40px 0px);
 background-color: orange;
 width: 200px;
 height: 200px;
 float: left;
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div></div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit
      libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum ……..
      vitae accusamus nobis․
    </p>
  </body>
</html>

Հնարավոր է փոխել անկյունների հարթությունը։ Այն սահմանվում է « round » հատուկ բառով։

Երկու արժեքի դեպքում առաջինը կվերաբերի վերևի ձախ և ներքևի աջ կողմերին, իսկ երկրորդը՝ վերևի աջ և ներքևի ձախ կողմերին։

Չորս արժեքի դեպքում դրանք կվերաբերեն անկյուններին հետևյալ կերպ՝ վերևի ձախ, վերևի աջ, ներքևի աջ, ներքևի ձախ կողմերին։

				
					  img {
    float: left;
    width: 400px;
    height: 400px;
    margin: 10px 10px;
    clip-path: inset(10px round 110px 40px);
  }
  .img01 {
    float: right;
    width: 400px;
    height: 400px;
    margin: -410px 650px;
    clip-path: inset(10px round 120px 70px 40px 10px);
  }

polygon()

polygon() – ֆունկցիան աշխատում է shape-outside և clip-path հատկությունների հետ։ Օբյեկտին հաղորդում է բազմանկյան տեսք։

Պետք է սահմանել 3 և ավելի զույգ արժեքներ, որոնցով կստանանք պարզ երկրաչափական պատկերներ։

Ամեն զույգը բաղկացած է x և y կորդինատներից՝ հորիզոնական և ուղղահայաց։

Եռանկյան պատկեր ստանալու համար անհրաժեշտ է երեք կորդինատային կետեր՝

				
					div {
 float: left;
 width: 200px;
 height: 200px;
 background: orange;
 clip-path: polygon(100px 0px, 50px 100px, 150px 100px);
}

Նախ անհրաժեշտ է կետ սահմանել <div>-ի կենտրոնում, ուստի՝ 100px դեպի աջ հորիզոնական ուղղությամբ և 0px՝ ուղղահայաց։

Եռանկյան ձախ կողմը՝ 50px դեպի աջ հորիզոնական ուղղությամբ և 100px ուղղահայաց դեպի ներքև։

Եռանկյան աջ կողմը՝ 150px հորիզոնական ուղղությամբ դեպի աջ և 100px ուղղահայաց դեպի ներքև։

Արդյունքում՝

Պատկեր ստանալուց հետո հնարավոր է դրա ներսում բաց թողնված մաս լինի, որը չի ոճավորվել։

Կարող ենք սահմանել «nonzero կամ evenodd » հատուկ բառերը։ Առաջինը պատկերը կցուցադրի ամբողջական, իսկ երկրորդը՝ կցուցադրի իր բաց մասերի հետ մեկտեղ։

nonzero

				
					img {
 margin: 10px 10px;
 width: 600px;
 height: 400px;
 clip-path: polygon(nonzero, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <img decoding="async" src="Chicago.jpg" />
  </body>
</html>

evenodd

				
					img {
 margin: 10px 10px;
 width: 600px;
 height: 400px;
 clip-path: polygon(evenodd, 0 40%, 100% 40%, 20% 100%, 50% 0, 80% 100%);
}

Հնարավոր է ունենալ բազմաթիվ կորդինատային կետեր և ստանալ ցանկացած բազմանկյուն։

Պատկերներ ստանալու համար կարող ենք օգտվել հետևյալ կայքից՝ https://bennettfeely.com/clippy/

Եթե shape-outside-ի համար անհրաժեշտ է դժվար պատկեր ստանալ, ապա այն կսահմանվի PNG ֆորմատի նկարով, որով կդասավորվի տեքստը։

Դրա համար անհրաժեշտ է photoshop-ով պատկերն առանձնացնել ընդհանուր նկարից և պահպանել այն PNG ֆորմատով (հետևյալ հղումով կարող եք ծանոթանալ դրա կարգին՝ https://youtu.be/bplx4Z5ItII կամ որոնել՝ “ Как вырезать обьект и сохранить на прозрачном фоне в фотошопе “ ) :

				
					div {
 float: left;
 width: 300px;
 height: 300px;
 shape-outside: url(star-smm.png);
}

Հնարավոր է արդյունքը չերևա։ Դա CORS արգելափակման հետ է կապված։

Արդյունքը համակարգչում ստանալու համար անհրաժեշտ է լոկալ սերվեր։ « Open Server » ծրագիրը կապահովի վիրտուալ սերվեր ձեր համակարգչում։

Այն կարող եք ներբեռնել հետևյալ հղումով՝ https://ospanel.io/download/ ։

youtube-ում կարող ենք գտնել վիդեոդասընթաց, որով կիմանանք ինչպես ծրագիրը համակարգչում նստացնել և պատրաստել առաջին լոկալ կայքը։ youtube-ում կարող ենք որոնել՝ « openserver для начинающих », կամ նայել հետևյալ վիդեոդասևնթացը՝ https://www.youtube.com/watch?v=t9obrAGntcU ։

Հնարավոր է խնդիր առաջանա, որ 80 պորտը զբաղված է՝

Այն կարելի է կարգավորել հետևյալ կերպ՝

				
					img {
 float: left;
 shape-outside: url(star-smm.png);
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body style="background: grey">
    <img decoding="async" src="star-smm.png" />
    <p style="color: lime">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim
      tellus et nisi facilisis lobortis. Donec vel consectetur nisi. Ut urna
      lorem, convallis in magna id, dictum convallis felis. Quisque posuere
      efficitur………………
    </p>
  </body>
</html>

Տեքստը աստղին շատ մոտ է։ Այն հեռացնելու համար կսահմանվի shape-margin հատկությունը՝

				
					img {
 float: left;
 shape-outside: url(star-smm.png);
 shape-margin: 15px;
}

Նկարում շերտեր սահմանելով՝ տեքտը կպատկերվի շերտին համապատասխան։

Անհրաժեշտ է ունենալ երկու նկար՝

առաջինը հիմնականն է,

երկրորդը՝ դրա համար սահմանված մասկեն, որը նկար է PNG ֆորմատով․ այն կարող է պատրաստվել photoshop-ով։

Պատրաստելու համար կարող ենք նայել հետևյալ դասընթացները՝

https://www.youtube.com/watch?v=TCVIBkFZRVw
https://www.youtube.com/watch?v=kmwpVAwQ7XI

կամ youtube-ում փնտրել « как отрезать частьи картинки и изменить прозрачность в фотошопе » ։

Նկարի տարբեր շերտերին հասանելություն տալու համար կօգտագործվի shape-image-threshold հատկությունը։

Այն ընդունում է 0-ից(ամբողջական թափանցիկություն) մինչև 1(ոչ թափանցիկ) արժեքը։

Առաջին շերտը թափանցիկացված էր 50%-ով․ որպեսզի այն հասանելիություն ունենա, անհրաժեշտ է shape-image-threshold –ի արժեքը 0.5-ից բարձր սահմանվի՝

				
					img {
 float: left;
 margin: 100px 0px;
 width: 1000px;
 height: 667px;
 shape-outside: url(maska.png);
 shape-image-threshold: 0.6;
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body style="background: grey">
    <img decoding="async" src="city.png" />
    <p style="color: lime">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim
      tellus et nisi facilisis lobortis. Donec vel consectetur nisi. Ut urna
      lorem, convallis in magna id, dictum convallis felis. Quisque posuere
      efficitur efficitur. Fusce in dui quis metus condimentum hendrerit id in
      velit…..
    </p>
  </body>
</html>

Երկրորդ մասը թափանցիկացված էր 70%-ով։ Նրան հասանելիություն տալու համար անհրաժեշտ է shape-image-threshold – ի արժեքը 0.7-ից բարձր սահմանվի՝

				
					img {
 float: left;
 margin: 100px 0px;
 width: 1000px;
 height: 667px;
 shape-outside: url(maska.png);
 shape-image-threshold: 0.8;
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body style="background: grey">
    <img decoding="async" src="city.png" />
    <p style="color: lime">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim
      tellus et nisi facilisis lobortis. Donec vel consectetur nisi. Ut urna
      lorem, convallis in magna id, dictum convallis felis. Quisque posuere
      efficitur efficitur. Fusce in dui quis metus condimentum hendrerit id in
      velit…..
    </p>
  </body>
</html>

Նմանատիպ էֆֆեկտ հնարավոր է ստանալ նաև գրադիենտի համար՝

				
					  div {
    float: left;
    margin: 10px 10px;
    width: 800px;
    height: 800px;
    background-image: linear-gradient(
      to bottom right,
      rebeccapurple,
      transparent 60%
    );
    shape-outside: linear-gradient(
      to bottom right,
      rebeccapurple,
      transparent 60%
    );
    shape-image-threshold: 0.2;
  }

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
    <script></script>
  </head>
  <body>
    <div></div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim
      tellus et nisi facilisis lobortis. Donec vel consectetur nisi. Ut urna
      lorem, convallis in magna id, dictum convallis felis. Quisque posuere
      efficitur efficitur.․․․․․․․․․․․․․
    </p>
  </body>
</html>

path()

path() – ֆունկցիայի միջոցով կօգտագործվի SVG ֆորմատի նկարներ։

SVG-ն սովորական նկարներից տարբերվում է նրանով, որ կարող է իր չափերն ավտոմատ մեծացնել՝ չկորցնելով նկարի որակը։

path()-ֆունկցիան ներկայումս չի աջակցվում բրաուզերների կողմից, ուստի անհրաժեշտ է SVG-ն այլ կերպ օգտագործել։

<img> էլեմենտում հնարավոր է սահմանել svg ֆորմատի նկար(<img src= “ image.svg ” >), սակայն այն անհասանելի կլինի Javascript-ում:

svg ֆորմատի նկարների հետ աշխատելու լավագույն տարբերակը html -ում այն հատուկ տեգերի միջոցով սահմանելն է, որով այն հասանելի կդառնա նաև Javascript -ի և Css -ի համար։

				
					svg {
 border: 4px solid #aaa;
 background-color: grey;
}

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <svg width="500" height="500" viewbox="0 0 200 200">
      <path
        d="M41.32,111.874a2.1,2.1,0,0,1,.5-1.582v-
   1.5c0.14,0.064.28,0.118,0.415,0.173-0.086-.412-0.
   167-0.835-0.2471.248,0.161,0.076.329,0.164,0.5,0.
   251a50.758,50.758,0,0,1,.9-6.162H43.8c-0.091-.315-0.
   081-2.994-0.081-2.994a2.267,2.267,0,0,0,.663-0.748c-0.6-1.
   616.965-10.447,1.4-11.239,0.248,0.077.5,0.163,0.744,0.25,
   0.355,0.89.652,1.583,0.167,2.321,0.14,0.066.28,0.119,
   0.415,0.173-0.107.218-.221,0.445-0.329,0.662,0.615,0.1.
   884,0.032,0.663,0.672,0.189,0.055.378, 0.109,0.577,0.164a2,
   2,0,0,1-.5.922c0.415,0.5-.124.358,0,0.911a1.
   888,1.888,0,0,0,.824.835c-0.107.25-.221,0.5-0.328,0.749,1.234,
   0.336.619,2.929,0.247,3.819,1.116,0.617-.221,
   4.077-․․․․․․․․․․․․․․․․․․․․․․․․․․․․․․  "
      />
    </svg>
  </body>
</html>

				
					<svg  width="500" height="500" viewbox= "0 0 200 200" >

width=“500” height=“500” – սա այն տարածքն է, որտեղ ցուցադրվելու է svg նկարը։

viewbox= “0 0 200 200” – առաջին երկու արժեքը SVG նկարի պարունակության x և y կորդինատներն են, այսինքն հնարավոր է SVG նկարի պարունակությունը տեղաշարժել SVG -ի տարածքում հորիզոնական(x) և ուղղահայաց(y) ուղղություններով։ Հիմա SVG նկարի տարածքը 500px լայնությամբ և բարձրությամբ է։

viewbox -ի վերջին երկու արժեքները՝ 200px -երը սահմանում են՝ SVG -ի 500px տարածքում կցուցադրվի միայն պատկերի 200px-ում ընդգրկվող մասը։

				
					<path d="M41.32,111……" />

<path> –ը նույնն է ինչ path() ֆունկցիան:

d ատրիբուտի մեջ սահմանվում են պատկերի կետերի կորդինատները։

svg ֆորմատի նկար հնարավոր է ստանալ photoshop-ով՝

svg ֆորմատը նկար չէ այլ ինտերնետային էջ է, քանի որ ամբողջ նկարը բաղկացած է html կոդից։

Տվյալ ֆայլը բացենք « notepad++ » ծրագրի միջոցով՝

Կոդում կան որոշակի լրացումներ, որոնք անհրաժեշտ չեն։

svg նկարը վեբ էջում տեղադրելու համար կարելի է վերցնել միայն այն, ինչը ցուցադրված է ներքևում։

Այն տեղադրվում է <body> էլեմենտում՝

				
					<body>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path
      d="M148.875,143.375L74.162,155.208l-34.342-
      67.4L93.309,34.321l67.4,34.342Z"
    />
  </svg>
</body>

Tagged:
CSS

Css-ի ֆունկցիաները (Մաս-2)

Նկարի ֆունկցիաներ

linear-gradient

radial-gradient

conic-gradient

repeating-linear-gradient

repeating-radial-gradient

repeating-conic-gradient

image-set()

cross-fade()

element()

paint()

Հաշվիչ ֆունկցիաներ

counter() counters()

symbols()

cyclic

fixed

symbolic

alphabetic

numeric

Ֆորմի ֆունկցիաներ

circle()

ellipse()

inset()

polygon()

nonzero

evenodd

path()

Թողնել մեկնաբանություն Չեղարկել պատասխանը

ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ

Մեր մասին

Հետևեք մեզ

Կապ մեզ հետ

Նվիրատվություն

Աջակցել կայքին։

Css-ի ֆունկցիաները (Մաս-2)

Նկարի ֆունկցիաներ

linear-gradient

radial-gradient

conic-gradient

repeating-linear-gradient

repeating-radial-gradient

repeating-conic-gradient

image-set()

cross-fade()

element()

paint()

Հաշվիչ ֆունկցիաներ

counter() counters()

symbols()

cyclic

fixed

symbolic

alphabetic

numeric

Ֆորմի ֆունկցիաներ

circle()

ellipse()

inset()

polygon()

nonzero

evenodd

path()

Նմանատիպ հոդվածներ

Թողնել մեկնաբանություն Չեղարկել պատասխանը

ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ

Նվիրատվություն

Աջակցել կայքին։