ა! გენერატორებს იყენებ? CSS3ან HTML5? თუ არა, მაშინ იქნებ ღირდეს ცდა :) უბრალოდ წარმოიდგინეთ, შეგიძლიათ უარი თქვათ ღილაკების სტილის, ბლოკების კუთხეების, ჩრდილების, გრადიენტების ხელით აღწერაზე, თუ ვინმე იყენებს და ასე შემდეგ, ასევე HTML5. რატომ წერთ ერთსა და იმავე კოდს ყოველ ჯერზე, როცა ქმნით ახალ პროექტს, როცა შეგიძლიათ „შეავსოთ“ უჯრებში არსებული პარამეტრები, დააჭიროთ ღილაკს და მიიღოთ მზა კოდი და საჭიროების შემთხვევაში გაასწოროთ!
ამ სტატიაში მე გაჩვენებთ ასეთი გენერატორების არჩევანს. ძირითადად ეს იქნება CSS3 გენერატორები და წყვილი HTML5-ისთვის. სერვისის ვებსაიტზე გადასასვლელად - დააწკაპუნეთ სერვისის სახელზე!

CSS3 გენერატორები:

CSS3.me

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

CSS3 Maker

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

CSS3 გენერატორი

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

Webestools Shadow გენერატორი

ჩრდილების გენერატორი. შესაძლებელია მხოლოდ ჩრდილების რეგულირება: ფერი, ოფსეტური, ბუნდოვანი, შიდა ან გარე ჩრდილი და ა.შ.

ღილაკების გენერატორები

CSS3 ღილაკების გენერატორი

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

CSS3-Tricks Button Maker

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

CSS3 Button.net

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

სასაზღვრო გამოსახულების და რადიუსის გენერატორი

საზღვარი-რადიუსი

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

სასაზღვრო გამოსახულება

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

CSS3 გრადიენტის გენერატორი

Colorzilla გრადიენტის რედაქტორი

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

HTML5 გენერატორები

HTML5 ★ ქვაბის ფირფიტა

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

Shikiryu HTML5 გენერატორი ცოტა უფრო რთულია, ვიდრე წინა. საშუალებას გვაძლევს შევიტანოთ გვერდის სათაური და აღწერა, დავაკავშიროთ css ჩარჩო, css ღილაკის სტილები, ბიბლიოთეკა, ანალიტიკა და ა.შ.

Initializr არის HTML5 შაბლონის გენერატორი, რომელიც დაგეხმარებათ დაიწყოთ ახალი პროექტი. Initializr ქმნის თქვენთვის სუფთა, კონფიგურირებადი შაბლონს. შერჩეული პარამეტრებია: პირველადი ფრეიმვორი, სერვერის პარამეტრები (.htaccess, nginx.conf, web.config), jquery კავშირი, google analytics, არჩევანი შორის და ა.შ.

ეს არის მარტივი გენერატორი. ჩვენ გვთხოვენ ავირჩიოთ რომელი ელემენტები იქნება გვერდზე და ასევე მიუთითოთ რამდენიმე ვარიანტი.

სულ ესაა, თუ იცით რაიმე კარგი HTML5 ან CSS3 გენერატორი, მოგერიდებათ დაწეროთ მათ შესახებ კომენტარებში :)

იმისათვის, რომ იყოთ უახლესი სტატიებისა და გაკვეთილების შესახებ, გამოიწერეთ

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

გენერატორები, ონლაინ CSS სერვისები

განახლებულია 04/05/2017

— სერვისი ბრაუზერის პრეფიქსების გენერირებისთვის და სხვა.

- ფერადი პალიტრების უზარმაზარი კოლექცია, მათ შორის მასალისა და ბრტყელი დიზაინის შესაქმნელად.

- ფერადი სქემის გენერატორი.

Autoprefixer ონლაინ რეჟიმში— ამატებს საჭირო გამყიდველის პრეფიქსებს და შლის არასაჭიროებს თქვენს CSS-ში.

— ვებსაიტისთვის ფერადი სქემების შერჩევის სერვისი, ალტერნატიული ჩრდილები, სურათიდან ფერების განსაზღვრა.

cssფილტრები- ინდივიდუალური ფილტრები და Instagram-ის მსგავსი ფილტრები სურათებისთვის.

ტიპი მასშტაბი- ვიზუალური კალკულატორი სათაურების ზომის გამოსათვლელად.

გამჭვირვალე ტექსტურები— გამჭვირვალე უწყვეტი ტექსტურების კოლექცია თქვენი ვებსაიტისთვის.

გამოსახულების სლაიდერის შემქმნელი— ონლაინ სერვისი სურათებით ადაპტური სლაიდერის შესაქმნელად.

— 3D რედაქტორი სუფთა CSS-ის გამოყენებით სამგანზომილებიანი მოდელების შესაქმნელად.

ვებ კოდის ინსტრუმენტები— კოდის გენერატორი CSS ეფექტების შესაქმნელად, HTML კოდი სხვადასხვა ელემენტებისთვის, Twitter ბარათები და სხვა სასარგებლო ნივთები.

როგორ გავაკეთო ცენტრი CSS-ში— სტილის გენერატორი ბლოკის ან ტექსტის ცენტრირებისთვის (გასწორებისთვის) სხვადასხვა ტექნიკის გამოყენებით. ასევე არსებობს Internet Explorer-ის სხვადასხვა ვერსიების მხარდაჭერა.

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

CSS Apple მოწყობილობის გენერატორი— მარკირების და სტილის გენერატორი Apple მოწყობილობებისთვის. მოწყობილობის ტიპი ველში შეგიძლიათ აირჩიოთ მოწყობილობის ტიპი, Device Width-ის გამოყენებით შეგიძლიათ დააყენოთ სიგანე და ასევე აირჩიოთ ეკრანის ფერი მოწყობილობის შიდა ფერის ველში.

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

სიმფსონები CSS-ში- თქვენი საყვარელი პერსონაჟების კოლექცია სუფთა CSS-ში.

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

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

Flexplorer— პლატფორმა Flexbox მოდელის შესაძლებლობების დემონსტრირებისთვის. თქვენ შეგიძლიათ დააყენოთ თქვენი საკუთარი პარამეტრები ბლოკებისთვის და ნახოთ მაგალითი მოქმედებაში.

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

გრძელი ჩრდილები— სერვისი, რომელიც საშუალებას გაძლევთ შექმნათ ეგრეთ წოდებული „გრძელი ჩრდილები“ ​​ბლოკებისა და ტექსტისთვის.

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

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

CSS ტექსტი ბილიკის გენერატორისკენგამოიმუშავებს html კოდს მრუდის გასწვრივ მდებარე ტექსტისთვის.

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

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

CSS3 გენერატორიარის ონლაინ სერვისი, რომელიც საშუალებას გაძლევთ მარტივად შექმნათ CSS3 კოდი გარკვეული თვისებებისთვის, როგორიცაა:
border-radius, box-shadow, text-shadow, RGBA, @font-face, მრავალი სვეტი, ყუთის ზომის შეცვლა, ყუთის ზომა, მონახაზი, გარდამავალი, ტრანსფორმაცია, გრადიენტი. თქვენ მხოლოდ უნდა აირჩიოთ ის თვისება, რომლის გამოყენებაც გსურთ თქვენი ბრაუზერის სტილში, დააყენოთ მისთვის საჭირო ვარიანტები და შემდეგ დააკოპიროთ მიღებული კოდი თქვენს პროექტში.

CSS 3.0 Maker- CSS3 გენერატორის მსგავსი სერვისი, არის კიდევ ერთი საინტერესო ფუნქცია - ტექსტის როტაცია.

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

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

საზღვრის გამოსახულება- ონლაინ CSS3 საზღვრის გამოსახულების თვისებების გენერატორი, რომელიც საშუალებას გაძლევთ ანიმაციური ბლოკის საზღვრები სურათების გამოყენებით.

— HTML+CSS შაბლონის გენერატორი. ამ რესურსის წყალობით, თქვენ შეგიძლიათ მარტივად შექმნათ გვერდის განლაგება ბლოკის განლაგების საფუძველზე. რესურსის დიდი პლიუსი ის არის, რომ თქვენ შეგიძლიათ გააკეთოთ განლაგება როგორც ფიქსირებული, ასევე „თხევადი“ სიგანით, ისე, რომ არ დაუფიქრდეთ, როგორ დააჭიროთ „ძირს“ ბრაუზერის ფანჯრის ბოლოში. ჩვენ მას ვურჩევთ ყველა დამწყებ განლაგების დიზაინერს!

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

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

CSS sprite გენერატორიდაზოგავთ უამრავ დამატებით სამუშაოს თქვენი ვებ გვერდებისთვის სპრაიტების შექმნისას.

თქვენს ყურადღებას მოაქვს CSS3 შესაძლებლობების ოსტატურად გამოყენების მაგალითი. თქვენ გექნებათ შესაძლებლობა შექმნათ რთული უწყვეტი ფონი თქვენი ვებსაიტისთვის. 37 ნიმუში დამზადებულია სხვადასხვა სტილში და დარწმუნებული ვართ, რომ თქვენ იპოვით ნიმუშს თქვენი გემოვნებით!

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

PHP

სუფთა HTML-ის წერა ხშირად მოუხერხებელია, განსაკუთრებით თუ საჭიროა დინამიური ჩანართების გაკეთება.

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

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

როგორც უფრო უნივერსალური გადაწყვეტა, კარგი იქნებოდა არა ლამაზი სინტაქსის გამოგონება, არამედ ყველაზე გავრცელებული PHP და ნაცნობი პრიმიტიული CSS სელექტორების გამოყენება.

Როგორ მუშაობს?

იდეა იყო, რომ ეს რაც შეიძლება მარტივი ყოფილიყო:

H::div ("შინაარსი")
რა იქნება გამომავალი

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

H::div ("კონტენტი", ["კლასი" => "ზოგიერთი შიგთავსი" ])

და ვინმემ შეიძლება იფიქროს, რომ ეს არ შეიძლება იყოს უფრო მარტივი, მაგრამ აქ CSS სელექტორები და პატარა ქუჩის ჯადოსნობა მოდიან სამაშველოში:

H::("div.some-content")("კონტენტი")
გამომავალი იქნება იგივე. ერთი შეხედვით შეიძლება ცოტა უცნაურად მოგეჩვენოთ, მაგრამ პრაქტიკაში ძალიან მოსახერხებელია.

Aura.Html-თან შედარებით

დასაწყისში ვახსენე Aura.Html, ღირს შედარება, თუ როგორ იქმნება HTML იქ და აქ.

$helper->input(array("type" => "ძებნა", "name" => "foo", "value" => "bar", "attribs" => array()));
ჩვენი ვარიანტი:

H::("შეყვანა")()
ნებისმიერი პარამეტრი შეიძლება განთავსდეს მასივში.
გასასვლელში:

და კიდევ ერთი უფრო სერიოზული ვარიანტი.

Aura.Html (მაგალითი დოკუმენტაციადან):

$helper->input(array("type" => "select", "name" => "foo", "value" => "bar", "attribs" => array("placeholder" => "გთხოვთ აირჩიოთ one", "options" => array("baz" => "Baz Label", "dib" => "Dib Label", "bar" => "Bar Label", "zim" => "Zim Label", )))
ჩვენი ვარიანტი:

H::("არჩევა")([ "in" => [ "გთხოვთ აირჩიოთ ერთი", "Baz Label", "Dib Label", "Bar Label", "Zim Label" ], "value" => [ " ", "baz", "dib", "bar", "zim" ], "selected" => "bar", "disabled" => "" ])
Აქ inგამოიყენება ცალსახად, ის შეიძლება გამოყენებულ იქნას ტეგის შიდა ნაწილების გადმოსაცემად, როგორიცაა შინაარსიმაგალითში დივუფრო მაღალი. გამოიყენება როგორც ზოგადი, ასევე ზოგიერთი სპეციალური წესები, რომელთა შესახებაც ქვემოთ მოცემულია.
გამომავალი არის იგივე:

გთხოვთ აირჩიოთ ერთი ბაზის ლეიბლი Dib Label ბარის ეტიკეტი ზიმ ლეიბლი

სპეციალური დამუშავება

ყველა ტეგი მიჰყვება დამუშავების ზოგად წესებს, მაგრამ არის რამდენიმე ტეგი, რომლებსაც აქვთ დამატებითი კონსტრუქციები მოხერხებულობისთვის.
Მაგალითად:

H::("შეყვანა")()

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

გამოყენების კიდევ ერთი მაგალითი inდა სპეციალური დამუშავება შეყვანა:

H::("შეყვანა")([ "შემოწმებული" => 1, "მნიშვნელობა" => , "in" => ["გამორთული", "ჩართული"] ])
გამორთულია ჩართულია
არანაირი შეფუთვა ეტიკეტიარ არის დამატებული სპეციალურად იმისათვის, რომ კოდი იყოს რაც შეიძლება ზოგადი და პროგნოზირებადი.

თუ საჭიროა მასივის დამუშავება

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

H::("tr td")([ "პირველი უჯრედი", "მეორე უჯრედი", "მესამე უჯრედი" ])
ან თუნდაც გამოტოვოთ დამატებითი ფრჩხილები უმარტივეს შემთხვევაში

H::("tr td")("პირველი უჯრედი", "მეორე უჯრედი", "მესამე უჯრედი")
გასასვლელში:

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

H::("tr.row td.cs-left")("პირველი უჯრედი", [ "მეორე უჯრედი", [ "კლასი" => "შუა უჯრედი", "სტილი" => "ფერი:წითელი;" , "colspan" => 1 ] ], [ "მესამე უჯრედი", [ "colspan" => მცდარი ] ])
თუ ზარში ასევე მითითებულია ატრიბუტები - კლასიდა სტილიგაფართოვდება, დანარჩენი გადაიწერება, ატრიბუტები ლოგიკური მნიშვნელობით ყალბიწაიშლება.

ჯადოსნური ჯოხის გამოყენებით, რომელიც არ არის CSS სელექტორის ნორმალური ნაწილი (ეს არის ერთადერთი გამონაკლისი, რომლის გარეშეც შეგიძლიათ გააკეთოთ), შეგიძლიათ აკონტროლოთ როგორ ხდება ბუდეების დონეები:

H::("tr| td")([ [ "პირველი რიგი, პირველი სვეტი", "პირველი მწკრივი, მეორე სვეტი" ], [ "მეორე მწკრივი, პირველი სვეტი", "მეორე მწკრივი, მეორე სვეტი" ] ])
თუ მასივი მიღებულია მონაცემთა ბაზიდან ან სხვა საცავიდან, მოსახერხებელია ასეთი მასივის უშუალოდ გამოყენება და ეს შეიძლება გაკეთდეს სპეციალურ ატრიბუტზე გადაცემით. ჩასმა:

$array = [ [ "ტექსტი" => "ტექსტი1", "id" => 10 ], [ "ტექსტი" => "ტექსტი2", "id" => 20 ] ]; h::a ("$i", [ "href" => "გვერდი/$i", "ჩასმა" => $მასივი ])
ტექსტი 1 ტექსტი 2
თქვენ შეგიძლიათ დაწეროთ ყველა ატრიბუტი ერთ ხაზზე:

$array = [ [ "id" => "first_checkbox", "value" => 1 ], [ "id" => "second_checkbox", "value" => 0 ], [ "id" => "third_checkbox", "მნიშვნელობა" => 1 ] ]; h::("შეყვანა]]")([ "ჩასმა" => $მასივი ])

და ეს ყველაფერი შეიძლება გაფართოვდეს

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

H::რადიო([ "შემოწმებული" => 1, "მნიშვნელობა" => , "in" => ["გამორთული", "ჩართული"] ])
ჩართულია გამორთულია
თქვენ ასევე შეგიძლიათ უგულებელყოთ მეთოდი წინასწარი დამუშავებადა განახორციელეთ თვითნებური ატრიბუტების დამუშავება ტეგის გამოტანამდე, მაგალითად, თუ ატრიბუტი არსებობს მონაცემები-სათაურიმე ვკიდებ კლასს და ამ გზით ვიღებ ხელსაწყოს მინიშნებას ელემენტზე hover-ზე.

გამოყენების უპირატესობა

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

Კარგი დღე! მე მაშინვე აგიხსნით პოსტის დიზაინს: ერთ დღეს, როცა მას წავაწყდი, არ გამიხარდა წარმოდგენილი გენერატორების ინფორმაციისა და ნავიგაციის ელემენტების უზარმაზარი რაოდენობა და მით უმეტეს მათი მომხმარებლის ინტერფეისით! მე აღშფოთებული ვიყავი, რომ ინსტრუმენტები მუშაობა სტილები- თვითონ არ რჩებიან იმ შესაძლებლობების ფარგლებში, რასაც წარმოადგენენ... როგორ?!

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

ვიმედოვნებ, რომ ბევრი ადამიანისთვის ეს ნოუ-ჰაუ კარგი დამხმარე იქნება ვებ განვითარების პროცესში.

CSS გენერატორები:

• CSS3.me- მარტივი, ელეგანტური და ამავე დროს ფუნქციებით მდიდარი CSS გენერატორი, ლამაზი დომენით
• CSS3Maker.com- ძალიან ფართო ფუნქციონირება ახალ CSS3 ფუნქციებთან მუშაობისთვის, ბრაუზერის ჯვარედინი თავსებადობა, მოქნილობა და ყველაფრის სრული ნაკრები, რაც გჭირდებათ;
• CSS3Generator.com- არაფერი ზედმეტი, კლასიკისა და სიმარტივის მოყვარულთათვის, ერთი სიტყვით „ძველი სკოლა“;
• Colorzilla.com- გრადიენტის გენერატორი ლამაზი ფონის სურათების შესაქმნელად, ბრაუზერების უმეტესობის მხარდაჭერით და სურათების გამოყენების გარეშე (სუფთა CSS).

ვებ ინსტრუმენტები:

• ღილაკების შემქმნელი- ღილაკების დიზაინის ინსტრუმენტი, Web 2.0-ის რიტმით. ფუნქციონალებიდან შეიძლება აღვნიშნოთ მორგების შესაძლებლობა: შიდა შიგთავსი, ტექსტის ზომა, კუთხეების მრგვალობა და გრადიენტური ფერების არჩევანი;
• ფორმის შემქმნელი- ფორმის დიზაინერი, რომელიც საშუალებას გაძლევთ შეცვალოთ როგორც ფორმის მთლიანი, ასევე მისი ცალკეული ელემენტების გარეგნობა;
• ხატების შემქმნელი- იგრძენით თავი თავისუფალ მხატვრად, ქმნის ახალ ხატებს თქვენი ღილაკებისთვის, მენიუებისთვის და ფავიკონებისთვის;
• ლენტის მშენებელი- სუფთა CSS-ის გამოყენებით ელეგანტური ლენტების შესაქმნელად, გამოიყენეთ ეს ინსტრუმენტი პარამეტრებისა და პარამეტრების ფართო სპექტრით.

სურათები ღილაკების (ხატების) სახით სტატიის დასაწყისში - დაწკაპუნებადი!

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

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

დღეს ცოტას გააკვირვებს ნებისმიერი ონლაინ გენერატორი, იქნება ეს ვიწრო ორიენტირებული აპლიკაციები კოდის გენერირებისთვის, ცალკე ღილაკი ხაზოვანი გრადიენტის ეფექტით, თუ ბლოკები მომრგვალებული კუთხეებითა და ჩრდილებით, ან მთლიანი კომბინატები (ინსტრუმენტების კრებული), რომელიც მოიცავს უნარს. თითქმის ყველა CSS3 ფუნქციის დასამუშავებლად. ასეთ ვებ აპლიკაციებთან მუშაობისას ყველაზე მნიშვნელოვანი ის არის, რომ თქვენ დაუყოვნებლივ, „შეკვეთის დატოვების გარეშე“, იხილეთ თქვენი მუშაობის შედეგი პირდაპირ ბრაუზერში და დაუყოვნებლივ მიიღეთ მზა კოდი ყველა საჭირო ფუნქციითა და პარამეტრით.

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

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

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

• სასაზღვრო რადიუსი- ბლოკის საზღვრის სტილი მომრგვალებული კუთხეებით
• გრადიენტები- აირჩიეთ სტილი და დააკონფიგურირეთ გვერდის ელემენტების გრადიენტური შევსების ფუნქციის პარამეტრები
• CSS ტრანსფორმაციები- გადააქციეთ ობიექტი, როგორც გსურთ, დაატრიალეთ, შეკუმშეთ კოორდინატთა მასშტაბის გასწვრივ
• CSS ანიმაციები- დაამატეთ ანიმაციური ეფექტი ვებ გვერდის ელემენტებისთვის
• CSS გადასვლები- CSS თვისება იცვლება შეუფერხებლად და დროთა განმავლობაში
• RGBA— აირჩიეთ და შეცვალეთ ფერების პალიტრა, ასევე ვებ გვერდის ელემენტების გამჭვირვალობის დონე
• ტექსტის ჩრდილი- ეფექტი ტექსტისთვის
• ყუთის ჩრდილი- დაამატეთ ჩრდილი ელემენტებს
• ტექსტის როტაცია- ტექსტის როტაცია ნებისმიერი მიმართულებით
• @FontFace— რამდენიმე საინტერესო კომბინაცია ვებ შრიფტებთან მუშაობისთვის

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

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

ვებსაიტის ტექსტის სათაური უჩვეულო 3D ეფექტით ყოველთვის იპყრობს ყურადღებას. ეს მშვენიერი ონლაინ გენერატორი დაგეხმარებათ შექმნათ ასეთი სასწაული დამატებითი გამოსახულების ფაილების და Javascript-ის გამოყენების გარეშე 3D CSS ტექსტი.

გარანტირებული მხარდაჭერა ყველა თანამედროვე ბრაუზერისთვის: Firefox, Chrome, Safari, ოპერადა ცოტა ხნის წინ IE10! პარამეტრებით მანიპულირებისას ყოველთვის დაინახავთ თქვენი მუშაობის საბოლოო შედეგს. შრიფტების ნაკრები მცირეა, დროდადრო განახლებულია, მაგრამ მთავარია კირიული ანბანის სწორი ჩვენება, ანუ ტექსტის რუსულ ენაზე აკრეფისას ვერ ნახავთ სხვადასხვა კრაკობრაზიას, როგორც ეს ხდება ამ სხვა ვებ აპლიკაციებში. ტიპი.

ინსტრუმენტების კიდევ ერთი ნაკრები CSS3 პარამეტრების ონლაინ რედაქტირებისთვის, მათ შორის თვისებების დამუშავებისა და კოდის გენერირების ჩათვლით ტექსტი-ჩრდილი(ჩრდილი ტექსტში), წრფივი და რადიალური გრადიენტი, გარდაქმნას(სხვადასხვა სახის ელემენტების გარდაქმნები). ბლოკის ვებ ელემენტების სტილის პარამეტრების ფართო სპექტრი წარმოდგენილია ინსტრუმენტთა ნაკრები ყუთის თვისებები.

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

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

- სწრაფად შეამოწმეთ რომელი CSS3 თვისებებია მხარდაჭერილი ბრაუზერის მიერ, რომელსაც თქვენ იყენებთ.

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

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

მთელი პატივისცემით, ანდრია