কন্টেন্ট
- কোড সহ ডিজাইনিং করার সুবিধা
- ডেটা আগে
- মোবাইলের সদ্ব্যবহার বিনামূল্যে
- একটি সাধারণ ভাষা সন্ধান করা
- দ্রুত শিখুন
- দ্রুত পুনরাবৃত্তি
- আরম্ভ করার সময় আরও দ্রুত
- এইচটিএমএল 5 কেন?
- Magন্দ্রজালিক তথ্য- বৈশিষ্ট্য
- CSS3 - এটি নতুন ফটোশপ
- Sass + কম্পাস: যাদুতে সুস্বাদু
- jQuery: ওহ, হ্যাঁ আপনি পারেন
- ফ্রেমওয়ার্ক
- সর্বশেষ ভাবনা
এই নিবন্ধটি প্রথম। নেট ম্যাগাজিনের 235 সংখ্যায় প্রকাশিত হয়েছিল - ওয়েব ডিজাইনার এবং বিকাশকারীদের জন্য বিশ্বের সর্বাধিক বিক্রিত ম্যাগাজিন।
আমি প্রয়োজনের চেয়ে আর কোনও কাজ করার কখনও বড় অনুরাগ হইনি। আমাকে বা আমার দলকে আরও কার্যকর করার দক্ষতার উপর ভিত্তি করে আমি পদ্ধতিগুলি এবং সরঞ্জামগুলি মূল্যায়ন করার ঝোঁক রাখি। তারা কত দ্রুত আমাদের একটি কার্যকরী পণ্যতে পাবেন? যোগাযোগ করার ক্ষেত্রে তারা কতটা কার্যকর? তারা কি আমাদের পথ থেকে দূরে থাকে?
কয়েক বছর ধরে, আমি আমার ডিজাইন প্রক্রিয়া এবং সরঞ্জামগুলি সামঞ্জস্য করেছি। আমি ভাবছি আমি এটি চালিয়ে যাব। এটি প্রযুক্তি এবং ওয়েবের জন্য ডিজাইনের প্রকৃতি। এই শিল্প ক্রমাগত বিকশিত হয়; আমাদের প্রক্রিয়া এবং সরঞ্জাম পাশাপাশি বিকাশ করা প্রয়োজন।
এইচটিএমএল 5 এবং সিএসএস 3 ফটোশপ থেকে দূরে এবং জীবিত, শ্বাস প্রশ্বাসের নকশার দিকে আরও অনেকগুলি ডিজাইন প্রক্রিয়াটিকে উপরি প্রবাহিত করা সহজ করে তোলে। ফাউন্ডেশন, বুটস্ট্র্যাপ এবং জিক্যুরির মতো সরঞ্জামগুলি আপনার নকশার প্রক্রিয়াটিকে আরও বেশি অ্যাক্সেসযোগ্য কোডে স্থানান্তরিত করে।
কোড সহ ডিজাইনিং করার সুবিধা
প্রথমত, আমি ফটোশপ বা আপনার কার্যপ্রবাহ থেকে অন্য কোনও ভিজ্যুয়াল ডিজাইন সম্পাদক বাদ দেওয়ার পরামর্শ দিচ্ছি না। পরিবর্তে, আমি সেই নকশাটি শীঘ্রই কোডে স্থানান্তরিত করার সুবিধার দিকে মনোনিবেশ করব।
ডেটা আগে
এইচটিএমএল ডিজাইনের বিষয়ে আমি যে জিনিসটি সবসময় পছন্দ করি তা হ'ল এটি ডেটা-প্রথম দৃষ্টিকোণ থেকে চিন্তাভাবনাকে উত্সাহ দেয়। বিপরীতে, চিত্রক, ওমনিগ্রাফেল বা বালাসামিকের মতো অঙ্কন প্রোগ্রামগুলি ব্যবহার করে আপনি একটি বাক্স দিয়ে শুরু করেন এবং এটি ডেটা দিয়ে পূরণ করেন।
এইচটিএমএলে আপনি ডোম (ডকুমেন্ট অবজেক্ট মডেল) তৈরি করেন, যেমন ধরণের টেবিল তৈরি করে। এটি অর্থবহ শ্রেণিবিন্যাস সহ সত্য তথ্য ডিজাইনে ফিরে আসা। এইচটিএমএল 5 নতুন শব্দার্থ উপাদানগুলির সংযোজন সহ এটি আরও এক ধাপ এগিয়ে নিয়ে যায়: নিবন্ধ, বিভাগ, শিরোনাম, একপাশে, পাদচরণ এবং আরও অনেক কিছু। এই ডেটা-প্রথম পদ্ধতির সাথে মোবাইল প্রথম, প্রতিক্রিয়াশীল ডিজাইনের সাথে সুন্দরভাবে মিশে গেছে।
মোবাইলের সদ্ব্যবহার বিনামূল্যে
আপনি যদি এটি পড়ছেন তবে আপনি সম্ভবত মোবাইলের জন্য ডিজাইন করছেন। এবং সম্ভাবনাগুলি আপনি একটি ফর্ম বা দুটি ডিজাইন করতে যাচ্ছেন। এইচটিএমএল 5 দিয়ে আপনি ভাগ্যবান। এইচটিএমএল 5 এর আগে, আপনার ইনপুট প্রকারগুলি পাঠ্য বা পাসওয়ার্ড ক্ষেত্রের বেশ কয়েকটি ছিল। এইচটিএমএল অনেকগুলি অতিরিক্ত ইনপুট ধরণের প্রবর্তন করেছে, যার মধ্যে রয়েছে:
ইনপুট টাইপ = "ইমেল"> ইনপুট টাইপ = "টেল"> ইনপুট টাইপ = "ইউআরএল"> ইনপুট টাইপ = "তারিখ"> ইনপুট টাইপ = "তারিখ-সময়">
এই অতিরিক্ত, অনন্য ইনপুট ধরণের সম্পর্কে সত্যই দুর্দান্ত কি তা হ'ল আইওএস এবং অ্যান্ড্রয়েডের মোবাইল ব্রাউজারগুলি সেগুলিকে স্বীকৃতি দেয় এবং স্বয়ংক্রিয়ভাবে একটি প্রাসঙ্গিক সচেতন কীবোর্ড পরিবর্তন করে - কোনও বিশেষ জিকুয়েরি প্লাগইন বা হ্যাকের প্রয়োজন হয় না। ওহ, এবং যদি আপনার ব্রাউজারটি না জানত তবে কী ইনপুট টাইপ = "ইমেল"> হয়, তবে এটি কেবল একটি পাঠ্য ইনপুটকে ডিফল্ট করে।
একটি সাধারণ ভাষা সন্ধান করা
"আমাদের ডিজাইনার এবং বিকাশকারীরা একই ভাষায় কীভাবে কাজ করতে পারে তা দুর্দান্ত" - জন ড্রাগো, ইনফ্লেশনের অ্যাপ্লিকেশন বিকাশকারী।
এটি পরিচিত মনে হচ্ছে কিনা দেখুন। আমি একটি কনফারেন্স রুমে আধা ডজন সার্ভার-সাইড অ্যাপ্লিকেশন ডেভস নিয়ে রয়েছি যারা আমার চারপাশে রুবি, পাইথন, জাভা বা .NET এ চেনাশোনাগুলি কোড করতে পারে। আমি একমাত্র ডিজাইনার আমার কয়েকটি পরামর্শ প্রাথমিকভাবে প্রয়োগ করা খুব জটিল বলে খারিজ করা হয়েছে। আমি হোয়াইটবোর্ডে চলেছি এবং কীভাবে ডিজাইনটি প্রয়োগ করা যেতে পারে তার জন্য বোর্ডে কিছু HTML এবং CSS লেখা শুরু করি। হঠাৎ কথোপকথনের স্বর বদলে যায় এবং বিকাশকারীদের মধ্যে একজন অনিচ্ছুকভাবে বলে, "আচ্ছা, হ্যাঁ - আমরা যদি সেভাবে এটি করি তবে এটি কার্যকর হতে পারে।"
আমার ডিজাইন প্রক্রিয়াটির আরও কোডে সরানো বিকাশকারীদের সাথে কথোপকথনের উন্নতি করেছে। কোডটিতে কীভাবে আপনার নকশা তৈরি করতে হবে তা জেনে শ্রদ্ধার একটি যুক্ত স্তর রয়েছে। সেই শ্রদ্ধা অর্জনের জন্য আপনাকে বিশেষজ্ঞ হতে হবে না। আমার এইচটিএমএল এবং সিএসএস দক্ষতা রক শক্ত হলেও, আমার জাভাস্ক্রিপ্ট দক্ষতা সবচেয়ে ভাল i এবং আমি তা স্বীকার করতে লজ্জা পাই না। তবুও, ফ্রন্টএন্ড বা সার্ভার-সাইড বিকাশকারীদের সাথে কাজ করার সময়, আমরা একটি সাধারণ ভাষায় কথা বলতে পারি বা অর্ধেকের সাথে দেখা করতে পারি, এটি একটি বিশাল সুবিধা।
দ্রুত শিখুন
যদিও ওয়্যারফ্রেমস এবং ভিজ্যুয়াল কম্পোজিটগুলি পরিকল্পনায় সহায়তা করতে পারে, এই স্থির শিল্পকর্মগুলি তাত্ত্বিক। আপনি কারও সাথে কথোপকথনটি ব্যাখ্যা করার জন্য কতবার চেষ্টা করেছেন, কেবল তাদের প্রতিক্রিয়া জানানোর জন্য, "আমার ধারণা আমি এটি দেখতে হবে” " আপনি যত তাড়াতাড়ি কোনও প্রোটোটাইপে যান, কিছু লোকের সাথে যোগাযোগ করতে পারে তত তাড়াতাড়ি আপনি নকশাটি অনুধাবন করতে পারবেন এবং ধারণাগুলি কার্যকর কিনা তা দেখতে পারবেন।
দ্রুত পুনরাবৃত্তি
শেষবার কখন তৈরি হয়েছিল এমন কোনও চূড়ান্ত নকশা যা আপনার ফটোশপের সাথে সঠিকভাবে মিলেছে? প্রায় না. ডিজিটাল পণ্যের নকশা সহ, পরিবর্তন নিয়মিত ঘটে। তদ্ব্যতীত, কয়েক ডজন স্ক্রিন জুড়ে আপনার 226 থেকে 24pt এ শিরোনামের আকার বাড়ানোর মতো পরিবর্তনগুলি ফটোশপটিতে কয়েক ঘন্টা সময় নিতে পারে। স্মার্ট অবজেক্টস আপনাকে ফটোশপটিতে অবজেক্ট-ওরিয়েন্টেড ডিজাইনের কিছু স্তর দেয়। দুর্ভাগ্যক্রমে, আমি জানি বেশিরভাগ ভিজ্যুয়াল ডিজাইনার যথেষ্ট পরিমাণে স্মার্ট অবজেক্টগুলি ব্যবহার করেন না। সিএসএস সহ, কারণ এটি ডিজাইনের আরও নিয়মিত পদ্ধতিতে উত্সাহ দেয়, টাইপোগ্রাফিক পরিবর্তনগুলি কয়েক ঘন্টার পরিবর্তে কয়েক মিনিট সময় নেয়।
আপনার সমস্ত বোতামে রৈখিক গ্রেডিয়েন্টগুলি পরিবর্তন করার বিষয়ে কী? বা কোন সীমানার আকার? স্কোয়ার্ড কোণ থেকে 2px বৃত্তাকারগুলিতে পরিবর্তন সম্পর্কে কীভাবে? ফটোশপে, এটি কয়েক ঘন্টা সময় নিতে পারে এবং আপনার এখনও এটি কোড করতে হবে। কোড ডিজাইনের ক্ষমতা ভিজ্যুয়াল ডিজাইনের পুনরাবৃত্তির জন্য ফটোশপে ফিরে যাওয়ার বৃত্তাকার ট্রিপ এড়াতে সহায়তা করে। আপনি যখন CSS3 এবং Sass ব্যবহার করে এই পরিবর্তনগুলি আপড্রোমেড কোডে সরিয়ে নিয়ে যান (যা আমি এই নিবন্ধে পরে কভার করব) সেগুলি রিয়েল-টাইমে ঘটতে পারে এবং কয়েক মিনিট সময় নেয়।
আরম্ভ করার সময় আরও দ্রুত
বছরের পর বছরগুলিতে, আমি আমার ডিজাইনের অনেকগুলি প্রবাহকে প্রবাহের কোডগুলিতে রূপান্তরিত করার সাথে সাথে আমি সত্যিকারের উন্নতি অনুভব করেছি - বাজারে সময়মত 20 থেকে 30 শতাংশ হ্রাস। আমি যত বেশি এটি করি, নকলকরণের প্রচেষ্টাটি আমি কম সময় ব্যয় করি। আমি ফটোশপ বা আতশবাজিগুলিতে গিয়ে কম চক্র ব্যয় করছি এবং তারপরে কোডটিতে কাজটি পুনরাবৃত্তি করছি।
এক পর্যায়ে নকশাকে কিছু প্রকারের ব্যাকএন্ডের সাথে ইন্টারফেস করতে হবে, তা সে সিএমএস, রেলস অ্যাপ বা অন্য কিছু হোক। যেহেতু আমার বেশিরভাগ ডিজাইনের কাজ কোডে রয়েছে তাই ইন্টিগ্রেশনটি খুব শীঘ্রই ঘটে। বছর দুয়েক আগে আমার এক ক্লায়েন্ট পয়েন্টরল পাঁচ দিনের মধ্যে প্রোটোটাইপ থেকে উত্পাদনে গিয়েছিল।
এইচটিএমএল 5 কেন?
এইচটিএমএল 5 পূর্ববর্তী সংস্করণগুলির তুলনায় সহজ। উদাহরণস্বরূপ নথির প্রকারের ঘোষণাটি নিন। HTML এর পূর্ববর্তী সংস্করণগুলিতে the কুকুর এরকম কিছু লাগছিল:
! ডক্টইইচটি এইচটিএমএল পাবলিক "- // ডাব্লু 3 সি // ডিটিডি এক্সএইচটিএমএল 1.1 // এএন" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
এবং ছয়টি বিভিন্ন সংস্করণ ছিল। ভাগ্যক্রমে এইচটিএমএল 5 কুকুর এটা এমন দেখতে:
! ডক্টইপ এইচটিএমএল>
গম্ভীরভাবে। এটাই. শোকজনকভাবে সহজ।
একটি স্ট্যান্ডার্ড এইচটিএমএল পৃষ্ঠা তৈরি করার সময়, অনেকগুলি সাধারণ উপাদান রয়েছে যেমন শিরোনাম, প্রধান সামগ্রীর ক্ষেত্র, সাইডবার এবং পাদচরণ। আমি নিশ্চিত যে এর আগে আপনি এরকম কিছু দেখেছেন:
ডিভি আইডি = "শিরোলেখ> ডিভি আইডি =" নাভ "> </ ডি> / ডিভিউ> ডিভি আইডি =" প্রধান "> ডিভি আইডি =" সাইডবার "> / ডিভিও / ডিভিউ> ডিভি আইডি =" পাদলেখ "> / ডিভাইড
সাধারণ কিছু নেই। তবে একবার সামগ্রীতে ভরাট হয়ে গেলে এই টেমপ্লেটটি ডিভ স্যুপে পরিণত হয়। বিপরীতে, এইচটিএমএল 5 এর নতুন শব্দার্থ উপাদানগুলির সাথে, আপনি স্ক্যান করতে অনেক সহজ এবং সহজ কিছু পান, যেমন:
শিরোনাম> ন্যাভ </ এনভি> / শিরোনাম> নিবন্ধ> একপাশে </ बाजूला> / নিবন্ধ> পাদলেখ>
ঐ দিকে তাকান. কিছু যে বোধগম্য।
Magন্দ্রজালিক তথ্য- বৈশিষ্ট্য
এইচটিএমএল 5 এসেছে আরও দুর্দান্ত এক হুক যা আপনাকে আপনার নিজস্ব অর্থপূর্ণ শব্দটি তৈরি করার ক্ষমতা দেয়: দ্য তথ্য-। পূর্বে, আপনি যদি কোনও ডিওএম উপাদানকে অর্থপূর্ণ কিছু অর্পণ করতে চান তবে আপনি আইডি, ক্লাস এবং ভূমিকাতে সীমাবদ্ধ ছিলেন।
দুর্ভাগ্যক্রমে, আইডি অবশ্যই অনন্য হতে হবে। ক্লাসগুলি সর্বজনীন (yিপি!), তবে এগুলি ব্যবহার করে দ্রুত কোনও জগাখিচুড়ি হতে পারে। ভূমিকাগুলি একটি নিরপেক্ষ সম্পদ যা এআরআইএর জন্য উল্লেখযোগ্য অর্থ সরবরাহ করে। সাম্প্রতিককালে, আমি ডেটা ব্যবহার করছি - একটি ইভেন্ট ট্র্যাকিং অ্যানালিটিক্স প্ল্যাটফর্মের জন্য যা আমরা ইনফ্লেকশনে বিকাশ করছি।আমরা আমাদের ডিজাইন পরীক্ষার বড় ভক্ত। অ্যাপ্লিকেশন বা পৃষ্ঠাগুলিতে যেগুলি আন্তঃআতর্কতার সাথে কাজ করে সেগুলিতে কাজ করার সময় আমরা পৃষ্ঠার মধ্যে গ্রাহকের সাথে জড়িত থাকার বিষয়ে আরও দানাদার অন্তর্দৃষ্টি রাখতে চাই।
প্রবেশ করান তথ্য-। এটির সাহায্যে আপনি নির্ধারিত করতে পারেন, পাশ দিয়ে যেতে পারেন এবং একটি 'নিজের নিজস্ব সংজ্ঞায়িত' অর্থ মডেলটি স্থাপন করতে পারেন। সুতরাং, উদাহরণস্বরূপ, আপনি এটি করতে পারেন:
ইনপুট টাইপ = "বোতাম" ডেটা-আইডি = "ফেসবুক" ডেটারেজিওন = "প্রধান" ডেটা-ইভেন্ট = "রেজিস্টার"> ইনপুট টাইপ = "বোতাম" ডেটা-আইডি = "টুইটার" ডাটারেজিওন = "প্রধান" ডেটা-ইভেন্ট = "নিবন্ধ "> ইনপুট টাইপ =" বোতাম "ডেটা-আইডি =" লিংকডইন "ডেটারেজিওন =" প্রধান "ডেটা-ইভেন্ট =" রেজিস্টার ">
আমরা জাভাস্ক্রিপ্টের সাথে শ্রোতাকে পৃষ্ঠায় সংযুক্ত করতে পারি এবং যে কোনও সময় কোনও গ্রাহক উপরে যায়, বা এই বোতামটি ক্লিক করলে আমরা সেই ক্রিয়াকলাপটি ট্র্যাক করতে পারি। কেবলমাত্র ওউথের মাধ্যমে যে কেউ টুইটারের মাধ্যমে নিবন্ধিত হয়েছে তা ট্র্যাক করার পরিবর্তে আমরা দেখতে পাচ্ছি যে তারা ফেসবুক, তারপরে টুইটার, লিংকডইন এবং তারপরে অবশেষে তাদের ওআউথ মডেলের জন্য টুইটার চয়ন করার সিদ্ধান্ত নিয়েছে।
এটি পিনট্রেস্টের মতো কোনও সাইটে বা নতুন মাইস্পেস নকশায় প্রসারিত করার কল্পনা করুন যেখানে গ্রাহকরা আগ্রহের ভিত্তিতে তাদের পুনরায় সাজানোর জন্য টাইলগুলি টানুন এবং ফেলে দিন। অথবা সম্ভবত টাইলস লুকিয়ে রাখছে তারা আগ্রহী নয় The তথ্য- অ্যাট্রিবিউট আপনাকে সংজ্ঞা দিতে পারে এমন জিনিসগুলির কাছে অর্থগত অর্থের একটি অতিরিক্ত স্তর সংযুক্ত বা নির্ধারণ করতে সক্ষম করে। যে সাইটগুলি এবং অ্যাপ্লিকেশনগুলিতে অ্যাজাক্সের উপর প্রচুর নির্ভরতা রয়েছে তাদের জন্য এটি সীমাহীন সুযোগগুলি খুলবে।
CSS3 - এটি নতুন ফটোশপ
সিএসএস 3 পুরোপুরি নতুন স্তরের ডিজাইনের চেহারা-অনুভূতিকে নিয়ে আসে যা ব্যাকগ্রাউন্ড চিত্র, টুকরোগুলি এবং কুখ্যাত 'স্লাইডিং ডোরস' কৌশল প্রয়োজন। ধন্যবাদ, এটি অতীতের সমস্ত বিষয়।
আসুন রৈখিক গ্রেডিয়েন্ট, বৃত্তাকার কোণ, পাঠ্য ছায়া যা এটিকে একটি দুর্দান্ত চিঠি প্রেসের প্রভাব দেয় এবং হোভারের উপর একটি আভা দেয় তার সাথে অভিনব বোতামটি তৈরি করা যাক। এই কৌশলগুলি শিখতে অনেক বেশি এগিয়ে যাবে। তাদের প্রত্যেককে স্বাধীনভাবে বা বিভিন্ন সংমিশ্রণে ওয়েবে বর্তমানে প্রচলিত বর্তমান দৃশ্যমান হটনেস সম্পর্কে প্রায় টানতে ব্যবহার করা যেতে পারে।
প্রথমে ডিফল্টে কয়েকটি সমন্বয় করা যাক বোতাম> এবং ইনপুট টাইপ = "জমা দিন"> উপাদান। ধরে নিই যে আপনি একটি স্ট্যান্ডার্ড সিএসএস রিসেট ব্যবহার করেন, আমরা কেবলমাত্র একটি সামান্য আকার এবং শ্বাসকষ্ট যুক্ত করব।
/ * বোতামগুলির বোতামগুলি, যার বোতামগুলি পেয়েছে = ======================================== * * / বোতাম, ইনপুট [প্রকার = "জমা"] {উচ্চতা: 2.7 মিম; প্যাডিং:। 4 এম .7 এম; লাইন-উচ্চতা: 1.9; }
প্রতিবাদ: জমা দেওয়া বোতাম এবং ইনপুটগুলি পুনরায় সাজানোতে জটিল হতে পারে। আমি লাইন-উচ্চতাটি ১.6 বা তার বেশি সংশোধন করে খুঁজে পেয়েছি, আপনি ভিতরে অতিরিক্ত ডিভি বা স্প্যানের প্রয়োজন হ্যাক এড়াতে পারবেন বোতাম> ট্যাগ
এখন আমরা আমাদের বোতামের সমস্যাটি 'স্থির' করেছি, আমরা একটি তৈরি করতে পারি .btn গোলাকার কোণগুলি, একটি লিনিয়ার গ্রেডিয়েন্ট, আউটলাইন এবং সেই লেটারপ্রেস চেহারা সহ আমাদের সুন্দর ক্লিন বোতাম দেওয়ার জন্য বর্গ।
.btn {প্রদর্শন: ইনলাইন-ব্লক; সীমানা: 1px কঠিন # d4d4cc; -মোজ-সীমানা-ব্যাসার্ধ: 4px; -ওয়েবেকিট-বর্ডার-ব্যাসার্ধ: 4 পিএক্স; সীমানা ব্যাসার্ধ: 4px; প্যাডিং: .4 এম .7 এম; পটভূমি: # edeff2; পটভূমি: -উইবকিট-গ্রেডিয়েন্ট (লিনিয়ার, 0% 0%, 0% 100%, থেকে (#fefefe), রঙ-স্টপ (0.55, # edeff2), থেকে (# e4e6e9)); পটভূমি: -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (কেন্দ্রের শীর্ষ, #fefefe, # edeff2 55%, # e4e6e9); -মুজ-বাক্স-ছায়া: আরজিবা (160,172,187, .7) 0 0 .2 এম 0; -ওয়েবেকিট-বক্স-ছায়া: আরজিবা (160,172,187, .7) 0 0 .2 এম 0; বাক্স-ছায়া: rgba (160,172,187, .7) 0 0 .2 এম 0; রঙ: # 6c7786; হরফ আকার: 1.1 মিমি; পাঠ্য-ছায়া: #fefefe 1px 0 1px; লাইন উচ্চতা: 1.375 ম; কার্সার: পয়েন্টার; }
এবং তারপরে একটি সূক্ষ্ম আভা সহ একটি দুর্দান্ত হোভার ইফেক্ট বাক্স-ছায়া পদ্ধতি:
.btn: হোভার, .বিটিএন: ফোকাস {-মোজ-বক্স-ছায়া: # 129ceb 0px 0px 2px; -ওয়েবেকিট-বক্স-ছায়া: # 129ceb 0 0 2px; বাক্স-ছায়া: # 129ceb 0 0 2px; পটভূমি: # e6e9eb; পটভূমি: -উইবকিট-গ্রেডিয়েন্ট (লিনিয়ার, 0% 0%, 0% 100%, থেকে (# f7f7f7), রঙ-স্টপ (0.55, # f6f6f7), থেকে (# e6e9eb)); ব্যাকগ্রাউন্ড: -মোজ-লিনিয়ারগ্র্যাডিয়েন্ট (কেন্দ্রের শীর্ষ, # f7f7f7, # f6f6f7 55%, # e6e9eb); রঙ: # 45484 বি; পাঠ্য-ছায়া: আরজিবি (255,255,255) 1 পিএক্স 1 পিএক্স 0; সীমানা-রঙ: # c9c9c0; }
এখন, আমি রৈখিক গ্রেডিয়েন্ট কোড লেখার বড় অনুরাগী নই। এটি দীর্ঘ এবং বিভ্রান্তিকর যেমন আপনি দেখতে পাচ্ছেন, আমি কেবলমাত্র এর জন্য সংস্করণটি অন্তর্ভুক্ত করেছি -মুজ, -উইবকিট, এবং আদর্শ মডেল আপনি যদি -o এবং -ms সংস্করণগুলি অন্তর্ভুক্ত করতে চান তবে আপনাকে কোড দ্বিগুণ করতে হবে।
অন্য দুটি বিকল্প আছে। একটি হ'ল সিএসএস 3 জেনারেটর; রঙিন জিলা সহ ওয়েবে বিভিন্ন উপলব্ধ। তবে আপনি যদি আপনার গেমটি কিছুটা বাড়িয়ে নিতে চান তবে সাসে ডাইভিংয়ের বিষয়টি বিবেচনা করুন: কম্পাসের সাথে মিলিত, এটি godশ্বরিক।
Sass + কম্পাস: যাদুতে সুস্বাদু
আপনি CSS4 ইউনিকর্ন সংস্করণের আশা করা বন্ধ করতে পারেন। এটি এখানে এবং এটি সাস + কম্পাস নামে পরিচিত। সাস সিন্ট্যাকটিক্যালি অসাধারণ স্টাইলশিটগুলির জন্য বোঝায়: আপনি CSS3 এর সমস্ত traditionalতিহ্যগত সুবিধাগুলি ভেরিয়েবল, মিক্সিংস, এক্সটেন্ডার এবং অন্যান্য গুডির যুক্ত সুখের সাথে উত্তরাধিকারী।
আমি সম্প্রতি একটি 5,000-লাইনের সিএসএস ফাইল রিফেক্টর করেছি যা নীলের একই ছায়ায় 30 টিরও বেশি ভিন্নতা রয়েছে। সাসের সাহায্যে, আমি এই কোড দিয়ে প্রতিটি পরিবর্তনকে প্রতিস্থাপন করেছি:
রঙ: $ নীল;
সংজ্ঞা দিয়ে $ নীল আমার মধ্যে _variables.scss ফাইল, আমি একটি সিফল্ট রঙ তৈরি করতে পারি যা প্রতিটি সিএসএস বা এসসিএসএস ফাইল উল্লেখ করতে পারে। সিএসএস লেখার যে কেউ ব্যবহার করতে পারেন $ নীল এবং আইড্রোপার ব্যবহার, একটি হেক্স কোড, বা আরজিবি, আরজিবিএ বা এইচএসএল রঙের সন্ধান করার দরকার নেই।
লিনিয়ার গ্রেডিয়েন্ট কোড মনে আছে? কোডের বিভিন্ন লাইন লেখার পরিবর্তে এটি সম্পর্কে কীভাবে:
@ ব্যাকগ্রাউন্ড অন্তর্ভুক্ত করুন (লিনিয়ার-গ্রেডিয়েন্ট (# বি 1 সিএফডিসি, # 7 এ 9cac));
সাস এবং কম্পাসকে ভারী উত্তোলন করতে দিন এবং আপনার জন্য সঠিক বাক্য গঠন তৈরি করুন: হয়ে গেল। ধরা যাক আপনি কোনও রঙের গাer় বা হালকা সংস্করণ চান। আপনি ফটোশপে আইড্রপারকে চারদিকে সরিয়ে ফেলতে বা সাসে হালকা / গা /় কমান্ডগুলি ব্যবহার করতে পারেন:
@ ব্যাকগ্রাউন্ড অন্তর্ভুক্ত করুন (রৈখিক-গ্রেডিয়েন্ট (গা (় ($ লাইটগ্রি, 2%), গা dark় ($ অফ-হোয়াইট, 5%)));
এটি 2% অন্ধকার দিয়ে একটি রৈখিক গ্রেডিয়েন্ট তৈরি করবে $ হালকা-ধূসর এবং 5% অন্ধকার হয়ে গেছে হালকা ধূসর। ভয়েল! এমনকি আপনার এইচএক্স বা আরজিবি কোডও লাগবে না।
jQuery: ওহ, হ্যাঁ আপনি পারেন
আমি একটি স্বীকারোক্তি আছে। আমাকে ভয় দেখানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছিল। তারপরে আমি jQuery পেয়েছি। আমি জাভাস্ক্রিপ্ট গুরু হিসাবে দাবি করব না, তবে আমি দৃ pretty় আত্মবিশ্বাসী যে আমি যে কোনও ধরণের রূপান্তর বা jQuery ব্যবহারের জন্য আমার প্রয়োজন ফাংশনটি বন্ধ করতে পারি।
উদাহরণস্বরূপ, একটি নতুন নতুন সংযুক্ত লিঙ্কে ক্লিক করে স্ক্রিনে একটি সেকেন্ডারি ফোন নম্বর ইনপুট প্রদর্শনের ক্ষমতাটি ধরুন। JQuery ব্যবহার করে, আপনি কেবল এটি লিখুন:
// - প্রগতিশীল প্রকাশ করে - // $ (’। নতুন নম্বর’)। ক্লিক করুন (ফাংশন () {$ (’। Alt-নম্বর’)। ফ্যাদইন (’দ্রুত’);});
আরও উন্নত কিছু খুঁজছেন? এটির জন্য সম্ভবত একটি প্লাগ-ইন রয়েছে। প্রাথমিক আচরণগুলি সহজ এবং জটিলগুলি jQuery এর সাথে যোগাযোগযোগ্য appro
ফ্রেমওয়ার্ক
আজ সবচেয়ে মজবুত ফ্রেমওয়ার্কগুলির মধ্যে দুটি হ'ল ফাউন্ডেশন এবং বুটস্ট্র্যাপ। এখন, আপনি সিএসএস ফ্রেমওয়ার্কগুলি বরখাস্ত করার আগে, আপনাকে কিছু জিজ্ঞাসা করি। আপনি jQuery ব্যবহার করেন? কারাগারে রুবি? জ্যাঙ্গো? সমস্ত ফ্রেমওয়ার্ক।
ঠিক যেমন jQuery এবং আরআর, ফাউন্ডেশন এবং বুটস্ট্র্যাপ জন্মগ্রহণ করেছিল তা স্বীকার করেই যে আমরা বারবার করার মতো ন্যায্য সংখ্যা রয়েছে (যেমন রিসেট, টাইপোগ্রাফি, গ্রিড, ফর্ম, বোতাম, এনএভি এবং তালিকা)। ফাউন্ডেশন এবং বুটস্ট্র্যাপ উভয়ই সহায়ক শ্রেণীর ব্যবহারের মাধ্যমে প্রতিক্রিয়াশীল ডিজাইনের জন্য সমর্থন সরবরাহ করে। উভয়ই নথিবদ্ধ এবং রাস্তা পরীক্ষা করা হয়েছে, যাতে আপনি এটিকে আত্মবিশ্বাসের সাথে ব্যবহার করতে পারেন।
দুটির মধ্যে একটি মূল পার্থক্য: বুটস্ট্র্যাপ সিএসএস প্রিপ্রোসেসিংয়ের জন্য কম সিস্টেমের উপর ভিত্তি করে, যেখানে ফাউন্ডেশন সাসের উপর ভিত্তি করে। আমি অতিরিক্ত ক্ষমতার কারণে কমকে কমকে প্রাধান্য দিচ্ছি, তবে সাস এবং ল্যাস কম স্কোয়াশ ট্র্যাডিশনাল সিএসএস উভয়ই টুকরো টুকরো করে।
ফ্রেমওয়ার্ক সম্পর্কে একটি শেষ চিন্তা। যারা অন্য কারও কাঠামোর অতিরিক্ত ফুসকুড়ির উত্তরাধিকারী হতে চান না তাদের জন্য, বিদ্যমানটিকে বাছাই করা এবং খালি হাড়গুলিতে ফেলা বিবেচনা করুন বা নিজের নিজের রোল করার জন্য কয়েকটি থেকে চেরি বাছাই করা বিবেচনা করুন। যেভাবেই হোক, প্রতিবার স্ক্র্যাচ থেকে শুরু করার কোনও কারণ নেই।
সর্বশেষ ভাবনা
আপনার ডিজাইনটি শেষ পর্যন্ত কীভাবে সক্রিয় হয় তার উপর আরও বেশি নিয়ন্ত্রণ চান? আরও প্রসেসগুলিকে কোডে প্রবাহিত করুন। এইচটিএমএল 5 অবশেষে ডিওএম-এর কিছু অর্থ নিয়ে আসে। অযৌক্তিক ভাল বিড়ম্বনা কুকুরগুলি ও ডিভাইটিস সিএসএস 3 হ'ল নতুন ফটোশপ: লিনিয়ার গ্রেডিয়েন্টস, বর্ডারডিয়াস এবং বক্স-শ্যাডো এফটিডাব্লু! এবং বুটস্ট্র্যাপ, ফাউন্ডেশন, সাস এবং জিকুয়েরির মতো সরঞ্জামগুলির সাহায্যে কোডটিতে প্রবাহের নকশাটি কখনও সহজ ছিল না।
ক্রিয়েটিভ ব্লক এ এইচটিএমএল 5 এর 55 টি আশ্চর্য উদাহরণ আবিষ্কার করুন।
