CSS ღილაკების სერვისი

ლამაზი CSS ღილაკების შესაქმნელი უფასო სერვისები

  

ამ სტატიის მიზანია შემოგთავაზოთ  ის ონლაინ სერვისები, რომლებიც პასუხს აგებენ რომ შექმნან ლამაზი CSS ღილაკები საიტებისთვის.

რა არის  CSS სტილების უპირატესობა? ის რომ, მათი გამოყენება ძალიან ადვილია. მასში ადვილად არის შესაძლებელი ცვლილებების შეტანა, რათა შეცვალოთ მთლიანად საიტის  და მისი ცალკეული ელემენტების გარეგნული სახე, შექმნათ ლამაზი მენიუ, ლამაზი  CSS ღილაკები და დინამიური ელემენტებიც კი.

იდენტიფიკატორების და კლასების გამოყენებით HTML კოდში, შესაძლებელია საიტის ნებისმიერი ელემენტის საოცრად შეცვლა. ეს იქნება: div ბლოკი, ტექსტი, ქუდი თუ სარდაფი. .

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

ვქმნით ლამაზ CSS ღილაკებს საიტებისათვის

თავისი ბუნებით სერვისი Da Button Factory ძალიან მარტივია, აქ რეგისტრაციის გავლა საჭირო არ არის, უბრალოდ შედიხართ და ქმნით საჭირო CSS ღილაკს ონლაინში. მიაქციეთ ყურადღება, რომ favicon სერვისი პრაქტიკულად იდენტური სერვისია სოციალური ქსელისა  Вконтакте,

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

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

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

როგორ გავაკეთოთ ლამაზი CSS ღილაკი CSS3Button-თან ერთად

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

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

მარტივი, მაგრამ სასარგებლო ინსტრუმენტები CSS ღილაკების შესაქმნელად

webmasters.by – ძალიან მარტივი ინსტრუმენტი ლამაზი CSS ღილაკის შესაქმნელად საიტისათვის. აქ მარეგულირებელი ზოლების (მიქშერების) დახმარებით, ძალიან სწრაფად შეგიძლიათ შეცვალოთ ზომები, ფერს კი უბრალოდ ავირჩევთ. ერთი სიტყვით მარტივად ვაფორმებთ ღილაკს და ვქმნით მის გარეგნულ იერს არა მარტო მისი არააქტიური მდგომარეობისათვის, არამედ CSS ღილაკზე მაუსის ისრის ზემოდან დადების შემთხვევაშიც, ღილაკი შეიცვლის ფერებს, რომლის პარამეტრებსაც ასევე თქვენი სურვილით და გემოვნებით შეარჩევთ.  CSS კოდის მისაღებად უნდა დააწკაპოთ ღილაკზე.

css3.me – აქ კი მთლიანად სრულფასოვანი  CSS ღილაკი არ დაგხვდებათ, უბრალოდ ფონი იქნება ამ ღილაკისთვის. თუმცა აქაც ყველაფერი მარტივია, უბრალოდ საჭიროა ფონის ფერის, მომავალი ღილაკის სარტყლის სიგანის, ფერის ან გრადიენტების პარამეტრების მინიჭება.

buttonoptimizer.com – წინა სერვისებისაგან განსხვავებით, ეს სერვისი, საშუალებას იძლევა დავარეგულიროთ CSS ღილაკების შიდა კიდეები საიტზე და შესაძლებელია აგრეთვე თავად ღილაკში ჩავსვათ პატარა სურათი (ლოგო ან იარლიყი) წარწერასთან ერთად. აღსანიშნავია რომ, მოცემული სერვისი იძლევა არა მარტო  მზა CSS კოდს, არამედ შეგიძლიათ გადმოქაჩოთ ღილაკის მზა PNG ფაილი.

cssbuttongenerator.com – ამ საიტზეც იპოვით განსხვავებებს, ირჩევთ არა მარტო სარტყელი დაამატოთ CSS ღილაკს, არამედ შეცვალოთ მისი ფორმაც. ერთი სიტყვით, რეგულირდება პრაქტიკულად ყველა პარამეტრი: ფონის ფერი, კიდეები, ჩრდილი და ჩრდილის პოზიციონირებაც კი.

მოცემული სერვისების გარდა, არსებობს უამრავი სხვა ანალოგიური სერვისი. ისინი განსხვავდებიან ერთმანეთისგან პარამეტრების  შეცვლის შესაძლებლობების რაოდენობით, ასევე რამდენად მოსახერხებელი და ადვილია მათი გაგება და გამოყენება. სტატიის მიზანია მოახდინოთ შემოთავაზებული სერვისების შედარება და აირჩიოთ შემდგომი გამოყენებისათვის, თქვენთვის ყველაზე  ოპტიმალური.

მენიუ ქვემენიუებით - დემო ვერსია

• ბრიტანეთი
  • ლონდონი
  • ბერმინგემი
  • ლიდსი
  • მანჩესტერი
• აშშ
  • ნიუ-იორკი
  • ლოს-ანჯელესი
  • ჩიკაგო
  • ჰიუსტონი
  • ფილადელფია
  • ფინიკსი
  • სან-ანტონიო
• საფრანგეთი
  • პარიზი
  • მარსელი
  • ლიონი
  • ტულუზა
  • ნიცა
  • ნანტი
  • სტრასბულგი
• ესპანეთი
  • მადრიდი
  • ბარსელონა
  • ვალენსია
  • სევილია
• იტალია
  • რომი
  • მილანი
  • ნეაპოლი
  • ტურინი
  • პალერმო

მენიუ

როგორ შევქმნათ მენიუ გამომავალი ფანჯრებით უბრალოდ HTML-ისა და CSS- ის დახმარებით

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

ხშირად საიტის აწყობის დროს, საიტის დიზაინი ითხოვს ისეთი ტიპის მთავარი მენიუს დაყენებას, რომელსაც ასევე ექნება სხვა ქვე მენიუები და ისინი გამოჩნდებიან მაშინ, როდესაც მაუსის კურსორის გადაადგილება მოხდება, ამ მენიუსათვის გამოყოფილ ადგილზე. როგორ უნდა გადავწყვიტოთ ეს საკითხი? რა თქმა უნდა JavaScript-ის დახმარებით, და ეს რა თქმა უნდა სწორი გზა იქნება, მაგრამ ასეთი მენიუს გაკეთების, არსებობს გაცილებით იოლ გზა და უარი ვთქვათ როგორც ფრეიმვორკებზე, ასევე  JS-ზე. 

გთავაზობთ მენიუს დემო ვერსია -ს

ახლა კი დავიწყოთ ამგვარი მენიუს გაკეთება.

როგორ გავაკეთოთ მენიუ

პირველ რიგში უნდა შევადგინოთ რაიმე ჩამონათვალი, თანდართული ლინკებით, რომელიც კურსორის დადების დროს გამოჩნდება. ამის ვარიანტები უამრავია. ჩვენ კი განვიხილავთ ერთერთ მათგანს.

ვქმნით მენიუს

პირველად ვქმნით ძირითადი პუნქტების ჩამონათვალს  და ამ პუნქტებს შიგნით, სათითაოდ ვამატებთ თითო-თითო ჩამონათვალს, შიდა ჩამონათვალები გამოჩნდება მხოლოდ მაშინ როდესაც კურსორს მივიტანთ შესაბამის, ძირითად პუნქტზე.

< ul  class = "dropdown" > 
 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > ბრიტანეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > ლონდონი </ a > </ li > 
 < li > < a  href = "/" > ბირმინგემი </ a > </ li > 
 < li > < a  href = "/" > ლიდსი </ a > </ li > 
 < li > < a  href = "/" > შეფფილდი </ a > </ li > 
 < li > < a  href = "/" > მანჩესტერი </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > აშშ </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > ნიუ-იორკი </ a > </ li > 
 < li > < a  href = "/" > ლოს-ანჯელესი </ a > </ li > 
 < li > < a  href = "/" > ჩიკაგო </ a > </ li > 
 < li > < a  href = "/" > ხიუსტონი </ a > </ li > 
 < li > < a  href = "/" > ფილადელფია </ a > </ li > 
 < li > < a  href = "/" > ფინიკსი </ a > </ li > 
 < li > < a  href = "/" > სან-ანტონიო </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > საფრანგეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > პარიზი </ a > </ li > 
 < li > < a  href = "/" > მარსელი </ a > </ li > 
 < li > < a  href = "/" > ლიონი </ a > </ li > 
 < li > < a  href = "/" > ტულუზა </ a > </ li > 
 < li > < a  href = "/" > ნიცა </ a > </ li > 
 < li > < a  href = "/" > ნანტი </ a > </ li > 
 < li > < a  href = "/" > სტრასბურგი </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > ესპანეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > მადრიდი </ a > </ li > 
 < li > < a  href = "/" > ბარსელონა </ a > </ li > 
 < li > < a  href = "/" > ვალენსია </ a > </ li > 
 < li > < a  href = "/" > სევილია </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > იტალია </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > რომი </ a > </ li > 
 < li > < a  href = "/" > მილანი </ a > </ li > 
 < li > < a  href = "/" > ნეაპოლი </ a > </ li > 
 < li > < a  href = "/" > ტურინი </ a > </ li > 
 < li > < a  href = "/" > პალერმო </ a > </ li > 
 </ ul > 
 </ li > 
</ ul >

სანამ კურსორი არ დგას მენიუს პუნქტზე, ჩადებული ჩამონათვალები არ ჩანს ეკრანზე და განთავსებულია ეკრანის მიღმა, 10 ათასი პიქსელი ამისათვის სრულიად საკმარისია. დაახლოებით ხუთი წლის შემდეგ ამ პიქსელების გაზრდა 20 ათასამდე იქნება შესაძლებელი. კურსორის ძირითად პუნქტზე დადების შემთხვევაში, ეკრანის გარკვეულ ადგილზე ჩამოიშლება, ამ პუნქტის შესაბამისი, შიდა ჩამონათვალი.

CSS

იმისათვის რომ, ყველაფერმა იმუშაოს, ჩვენ დაგვჭირდება ე.წ."სტილები", აი ისინიც:

ul .dropdown  li  { position : relative ; }
  ul .dropdown ,
      ul .dropdown-inside  {
      list-style-type : none ;
      padding :  0 ;
      }
  ul .dropdown-inside  {
      position : absolute ;
      left : - 9999 px ;
      }
  ul .dropdown  li .dropdown-top  {
      display : inline ;
      float : left ;
      margin :  0  1 px 0  0 ;
      }
  ul .dropdown  li .dropdown-top  a  {
      padding :  3 px 10 px 4 px ;
      display : block ;
      }
  ul .dropdown  a .dropdown-top  { background :  #efefef ; }
  ul .dropdown  a .dropdown-top :hover  { padding :  2 px 10 px 5 px ; }
  ul .dropdown  li .dropdown-top :hover  .dropdown-inside  {
      display : block ;
      left :  0 ;
      }
  ul .dropdown  .dropdown-inside  { background :  #fff ; }
  ul .dropdown  .dropdown-inside  a :hover  { background :  #efefef ; }

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

<body>
<div class="wrapper">
<ul class="dropdown">
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">ბრიტანეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">ლონდონი</a></li>
<li><a href="https://www./">ბერმინგემი</a></li>
<li><a href="https://www./">ლიდსი</a></li>
<li><a href="https://www./">მანჩესტერი</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">აშშ</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">ნიუ-იორკი</a></li>
<li><a href="https://www./">ლოს-ანჯელესი</a></li>
<li><a href="https://www./">ჩიკაგო</a></li>
<li><a href="https://www./">ჰიუსტონი</a></li>
<li><a href="https://www./">ფილადელფია</a></li>
<li><a href="https://www./">ფინიკსი</a></li>
<li><a href="https://www./">სან-ანტონიო</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">საფრანგეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">პარიზი</a></li>
<li><a href="https://www./">მარსელი</a></li>
<li><a href="https://www./">ლიონი</a></li>
<li><a href="https://www./">ტულუზა</a></li>
<li><a href="https://www./">ნიცა</a></li>
<li><a href="https://www./">ნანტი</a></li>
<li><a href="https://www./">სტრასბულგი</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">ესპანეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">მადრიდი</a></li>
<li><a href="https://www./">ბარსელონა</a></li>
<li><a href="https://www./">ვალენსია</a></li>
<li><a href="https://www./">სევილია</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">იტალია</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">რომი</a></li>
<li><a href="https://www./">მილანი</a></li>
<li><a href="https://www./">ნეაპოლი</a></li>
<li><a href="https://www./">ტურინი</a></li>
<li><a href="https://www./">პალერმო</a></li>
</ul>
</li>
</ul>
</div>
</body>

<style>

ul.dropdown li { position: relative; }
 ul.dropdown,
 ul.dropdown-inside {
 list-style-type: none;
 padding: 10;
 }
 ul.dropdown-inside {
 position: absolute;
 left: -9999px;
 }
 ul.dropdown li.dropdown-top {
 display: inline;
 float: left;
 margin: 0 3px 0 0;
 }
 ul.dropdown li.dropdown-top a {
 padding: 5px 10px 4px;
 }
 ul.dropdown a.dropdown-top { background: #efefef; }
 ul.dropdown a.dropdown-top:hover { padding: 2px 10px 15px; }
 ul.dropdown li.dropdown-top:hover .dropdown-inside {
  left: 0; top: 10;
 }
 ul.dropdown .dropdown-inside { background: #f2f2f2; }
 ul.dropdown .dropdown-inside a:hover { background: #efefef; }


</style>

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

გისურვებთ წარმატებებს!

ეს როგორ მუშაობს

ONLINE - კურსები - CSS

გაკვეთილი 2. ეს როგორ მუშაობს

CSS -ის ჩართვა  HTML-ში ოთხ ნაირადაა შესაძლებელი:
1. მხოლოდ ლინკი HTML-ში, თავად CSS კი ცალკე ფაილში (ამ წესს მეტ უპირატესობას ანიჭებენ):

 <link rel="stylesheet" type="text/css" href="style.css">

2. CSS-ის ჩართვის კიდევ ერთი წესია, ცალკე ფაილში განთავსება:

 <style type="text/css" media="all">@import "style.css";</style>

3. უშუალოდ HTML-დოკუმენტში:

<style type="text/css">

  body {

  color:green;

  }

</style>

4. უშუალოდ ელემენტში:

 <p style="font-size: 18px; color: blue;">Этот абзац мы хотим отделить от основного текста</p>

ყველასტილი, ლინკების ჩათვლით .CSS-ფაილზე, ბოლო ხერხის გარდა, ჩაიწერება ტეგებს შორის <HEAD></HEAD>. მაგალითი მოყვანილია  სურათზე № 3.CSS-ის სინტაქსზე მომდევნო გაკვეთილში ვისაუბრებთ, ახლა კი ეს ყველაფერი მოვსინჯოთ მაგალითებზე. HTML -ში საიტის ფონს ფერი შემდეგ ნაირად მიენიჭება:

<body bgcolor="#FF0000">

CSS -ში იგივეს განხორციელება ხდება ასე

body {background-color: #FF0000;}

რაშია CSS-ის უპირატესობა? როდესაც ამას ვაკეთებთ HTML-ში, ფერის კოდის ჩასმა მოგიწევთ საიტის ყველა გვერდზე. და თუ ასეთი გვერდები ასობითაა? მაშინ როცა  CSS-ის დახმარებით ფერის კოდი ჩაიწერება ერთხელ  ფაილში, რომელიც საიტის ყველა გვერდისთვის იმუშავებს. ჩვეულებრივ ასეთ ფაილს უწოდებენ STYLE.CSS.  ამას გარდა არსებობს ისეთი CSS-ფაილები რომლებიც კონკრეტულად მხოლოდ საიტის თითო გვერდისთვის მუშაობს, განსაზღვრავს სტილებს მაგალითად საიტის ცალკეული განყოფილებებისათვის. მაგალიტად, აი როგორ არის მოწყობილი, სტილების ცხრილები საიტისთვის FREEADVICE.RU:

ფაილი ცხრილებით, რომელიც განსაზღვრავს მთელი საიტის სტილს დევს, ძირეულ კატალოგში:

სურათი 1.

ამის გარდა არის სხვა ცხრილებიც, მაგალითად სართულებიანი მენიუს სტილის განმსაზღვრელი:

სურათი 2.

გთავაზობთ საიტის მთავარი გვერდის კოდის ნაწილს:

სურათი 3.

მასზე ხედავთ (ზემოდან მეორე სტრიქონი) ლინკს ფაილზე STYLE.CSS, რომელის განსაზღვრავს მთელი საიტის სტილს, ასევე არის ცალკეულად გაწერილი სტილები**, რომლების კონკრეტულად ამ გვერისთვის მუშაობს.*ეს ლინკი ბრაუზერს მიუთითებს, რომ მან უნდა გამოიყენოს ის წესები რომელიც იმუშავებს HTML-დოკუმენტებთან, განსაზღვრული ფაილში STYLE.CSS ( CSS-ის გამოყენების პირველი წესი).** CSS-ის გამოყენების მესამე წესი.