ლამაზი ყვავილი CSS-ის საშუალებით

თავიდან დავიწყოთ იმით რომ შევქმნათ სტანდარტული ცხრილი ჩვენს ვებ გვერდზე და მისი ID იყოს "flower".

ასევე უნდა ითქვას რომ გარკვეულ უჯრებს გარკვეული კლასი უნდა ქონდეს მინიჭებული, ეს უბრალოდ იმიტომ რომ ყვავილის ყველა ფურცელი ერთნაირად არ იყოს გამოსახული, შეგიძლიათ სიმარტივისთვის დააკოპიროთ ქვემოთ ნაჩვენები კოდი:
<table id="flower" align="center" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
  </tr>
  <tr>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="zeda_marjvena">&nbsp;</td>
   <td class="zeda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
   <td>&nbsp;</td>
   </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td class="qveda_marcxena">&nbsp;</td>
   <td class="qveda_marjvena">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
</table>
ახლა კი უკვე გადავიდეთ უშუალოდ სტილის მინიჭებაზე რაც სტანდარტული CSS-ით ხდება. შესაძლებელია როგორც გვერდის შიგნით არსებული ასევე გარე CSS-ის გამოყენებაც.
#flower tr td{
width:100px;
height:100px;
}

პირველ რიგში მივუთითეთ ყოველი უჯრის და შესაბამისად მთლიანი ყვავილის თითოეული ფურცლის ზომა. ესაა 100 პიქსელი სიგანე და სიმაღლე. ახლა კი რაც დაგვრჩენია ესაა თავად ყვავილის ფორმირება და მისთვის ფერების, კონტურების და მრგვალი ფორმების დამატებაა.
უშუალოდ კოდი ასე უნდა გამოიყურებოდეს:
.zeda_marjvena{
border-top-right-radius:100px;
-moz-border-top-right-radius:100px;
-webkit-border-top-right-radius:100px;

border-top:1px solid #00F;
border-right:1px solid #00F;

background-color:#C60;}

.zeda_marcxena{
border-top-left-radius:100px;
-moz-border-top-left-radius:100px;
-webkit-border-top-left-radius:100px;

border-top:1px solid #00F;
border-left:1px solid #00F;

background-color:#C60;}

.qveda_marjvena{
border-bottom-right-radius:100px;
-moz-border-bottom-right-radius:100px;
-webkit-border-bottom-right-radius:100px;

border-bottom:1px solid #00F;
border-right:1px solid #00F;

background-color:#C60;}

.qveda_marcxena{
border-bottom-left-radius:100px;
-moz-border-bottom-left-radius:100px;
-webkit-border-bottom-left-radius:100px;

border-bottom:1px solid #00F;
border-left:1px solid #00F;

background-color:#C60;}

ახლა ალბათ მიხვდით თუ რატომ ქონდა ცხრილის უჯრებს სპეციფიკური კლასები მინიჭებული. კოდის გაშვებისას აღმოაჩენთ სწორედ იმას რისი ჩვენებაც მინდოდა თქვენთვის. ესაა მშვენიერი ყვავილის ფორმის ცხრილი რომელიც სიმართლე რომ ვთქვათ ნაკლებად გმაოსაყენებელია დიზაინში თუმცა მისი შექმნის პრინციპის კარგად გაგება ძალიან დაგეხმარებათ მომავალში.

ასევე ცოტა უფრო მეტი ეფექტის მოსახდენად შესაძლებელია მისი დატრიალება 45 გრადუსით. ამისათვის ჩავწეროთ შემდეგი კოდი კლვალვ CSS-ში:
#flower{
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);}

ამ ყველაფერს თუ გააკეთებთ დარწმუნებული ვარ ძალზედ გესიამოვნებათ მიღებული შედეგი და ბევრი თქვენგანი გაკვირვებულიც კი დარჩება რადგან პირველად აღმოაჩენს თუ რამხელა ძალა აქვს CSS-ს.