বর্তমান সময়ে ওয়েব ডিজাইনের ক্ষেত্রে গ্রাফিক্সের ধারণাকে পুরোপুরিভাবে বদলে দিয়েছে CSS3 এর অসাধারণ গ্রাফিক্স কৌশল। আমরা ইতোমধ্যেই CSS3 এর অসাধারণ গ্রাফিক্স কৌশল ব্যবহার করে রাউন্ড কর্ণার বাটন এবং নেভিগেশন বার তৈরির কৌশল দেখেছি। আজ আমরা এ ধরণেরই একটি নেভিগেশন বারে মাউস ওভার ইফেক্ট হিসেবে গ্লো ইফেক্ট যুক্ত করার কৌশল দেখব । পূর্বের দিনে এ ধরণের ইফেক্ট যুক্ত করার জন্য ফ্লাসে তৈরি এনিমেশন ব্যবহার করা হত।

একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….

এনিমেশনে ইফেক্টটি  কিছুটা খারাপ দেখালেও ব্রাউজারে আরো সুন্দর দেখাবে আশা করি।

প্রয়োজনীয় HTML কোড 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - Glow Effects </title>

</head>

<body>
<a class="nav" href="#">HOME</a>
<a class="nav" href="#">ABOUT US</a>
<a class="nav" href="#">CONTACT US</a>

</body>
</html>

প্রয়োজনীয় CSS কোড

body {
	background: #000;
}

.nav {

	color: #ccc;
	float: left;
	font-size:20px;
	display: block;
	margin: 15px;
	padding: 10px;
	text-align: center;
	width: 150px;
	border:1px #444 solid;
	border-radius: 50px;
	-moz-border-radius: 50px;
	text-decoration:none;

 background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);
	background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));

}

.nav:hover {
	-moz-box-shadow: 0px 0px 80px #fc11ac;
  	-webkit-box-shadow: 0px 0px 35px #0099ff;
  	box-shadow: 0px 0px 35px #f80141;

	 background:-moz-linear-gradient(center top , #0e0e0e, #949292);
	background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
	color: #fff;
	text-decoration: none;
}

কার্যপদ্ধতি

প্রথমে একটা Notepad Open করে উপরের HTML Code টুকু লিখুন। HTML Code এর <head></head> এর মাঝখানে কোন অংশে <style></style> ট্যাগ যুক্ত করে এর মাঝে CSS Code টুকু লিখুন। File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html  দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন Mozila দিয়ে index.html open করলে দেখতে পাবেন তৈরি হয়ে গেছে আকর্ষণীয় রাউন্ড কর্ণার গ্রেডিয়েন্ট নেভিগেশন বার সাথে মাউস ওভারে আকর্ষণীয় গ্লো ইফেক্ট ।

এনিমেশনে ইফেক্টটি  কিছুটা খারাপ দেখালেও ব্রাউজারে আরো সুন্দর দেখাবে আশা করি।

প্রজেক্ট বিশ্লেষণ

body {
        background: #000;
}

এর মাধ্যমে  পেজের ব্যাকগ্রাউন্ড কালার কালো করে দেয়া হয়েছে।

        color: #ccc;
        float: left;
        font-size:20px;
        display: block;
        margin: 15px;
        padding: 10px;
        text-align: center;
        width: 150px;
        border:1px #444 solid;
        border-radius: 50px;
        -moz-border-radius: 50px;
        text-decoration:none;

nav ক্লাসের মধ্যে উপরোক্ত কোডের মাধ্যমে  বাটনের আকৃতি তৈরি করা হয়েছে।

background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));

এর মাধ্যমে  বাটনের গ্রেডিয়েন্ট তৈরি করা হয়েছে।

.nav:hover {
        -moz-box-shadow: 0px 0px 80px #fc11ac;
        -webkit-box-shadow: 0px 0px 35px #0099ff;
        box-shadow: 0px 0px 35px #f80141;
         background:-moz-linear-gradient(center top , #0e0e0e, #949292);
        background: -webkit-gradient(linear, center top, center bottom,
        from(#f40000), to(#cc0000));
        color: #fff;
        text-decoration: none;
}

এর মাধ্যমে মাউস বাটনের উপর নিয়ে গেলে যে গ্রেডিয়েন্ট কালার প্রদর্শন করবে তা ঠিক করে দেয়া হয়েছে এবং গ্লো ইফেক্ট তৈরি করা হয়েছে।

        -moz-box-shadow: 0px 0px 80px #fc11ac;
        -webkit-box-shadow: 0px 0px 35px #0099ff;
        box-shadow: 0px 0px 35px #f80141;

এর মাধ্যমে গ্লো ইফেক্ট তৈরি করা হয়েছে।

সম্পূর্ণ কোড

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - Glow Effects </title>
<style>
body {
	background: #000;
}

.nav {

	color: #ccc;
	float: left;
	font-size:20px;
	display: block;
	margin: 15px;
	padding: 10px;
	text-align: center;
	width: 150px;
	border:1px #444 solid;
	border-radius: 50px;
	-moz-border-radius: 50px;
	text-decoration:none;

 background:-moz-linear-gradient(center top , #0e0e0e, #fc11ac);
	background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));

}

.nav:hover {
	-moz-box-shadow: 0px 0px 80px #fc11ac;
  	-webkit-box-shadow: 0px 0px 35px #0099ff;
  	box-shadow: 0px 0px 35px #f80141;

	 background:-moz-linear-gradient(center top , #0e0e0e, #949292);
	background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
	color: #fff;
	text-decoration: none;
}

</style>

</head>

<body>
<a class="nav" href="#">HOME</a>
<a class="nav" href="#">ABOUT US</a>
<a class="nav" href="#">CONTACT US</a>

</body>
</html>

………………………………………………………………………………..

আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল ।

comments

RELATED ARTICLESMORE FROM AUTHOR

82 কমেন্টস

  1. চমৎকার হয়েছে। আপনাকে োনেক ধন্যবাদ….।

  2. আপনার সকল পোস্ট বিশেষ করে মাইক্রোকন্ট্রোলারের গুলা আমার অসাধারণ ভালো লাগে। ধন্যবাদ। চালিয়ে যান।

  5. Hi there, just became aware of your blog through Google, and found that it is really informative. I’m gonna watch out for brussels. I’ll be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!
    [url=http://www.newsambobigband.com/foto/foto/cheap-oakley-icon-3123707.html]cheap oakley icon[/url]

  15. Just want to say your article is as astounding. The clearness in your post is just cool and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please carry on the enjoyable work.
    cheap oakley frogskin replacement lenses http://www.africasafari.co.za/Transfer/Nselweni/cheap-oakley-frogskin-replacement-lenses-2741627.html

  16. hey there and thank you for your information ?I definitely picked up something new from right here. I did however expertise several technical issues using this web site, as I experienced to reload the website lots of times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I am complaining, but slow loading instances times will often affect your placement in google and can damage your high quality score if ads and marketing with Adwords. Anyway I am adding this RSS to my e-mail and could look out for much more of your respective fascinating content. Ensure that you update this again soon..
    cheap oakley sponsorship http://www.matchmycamp.com/wordpress/cheap-oakley-sponsorship-18346790.html

  19. I want to show some thanks to the writer just for rescuing me from such a trouble. Right after surfing around throughout the online world and obtaining solutions which were not productive, I was thinking my entire life was well over. Living without the presence of answers to the issues you’ve sorted out by means of your article content is a serious case, and ones that might have in a wrong way damaged my entire career if I had not come across your web page. Your own knowledge and kindness in dealing with every item was useful. I don’t know what I would have done if I hadn’t come across such a stuff like this. It’s possible to now relish my future. Thanks so much for the expert and effective guide. I will not be reluctant to suggest the sites to any individual who needs and wants recommendations on this subject matter.
    cheap oakley for military http://www.howard-lighting.com/Images/Literature/cheap-oakley-for-military-3324513.html

  22. I intended to write you the tiny note to help give thanks yet again for your wonderful concepts you have contributed on this site. This has been simply pretty open-handed with people like you in giving unhampered all that a lot of folks would’ve offered for sale as an ebook in order to make some cash for themselves, specifically considering that you might well have tried it in the event you desired. Those points additionally served to be the great way to be aware that many people have similar zeal much like my personal own to grasp way more on the topic of this issue. I know there are millions of more enjoyable situations ahead for people who view your blog.
    cheap polarized oakley sunglasses http://www.iufost2010.org.za/Sponsorship/images/cheap-polarized-oakley-sunglasses-17145007.html

  23. I needed to put you this little bit of observation to thank you very much again over the nice advice you’ve featured on this site. It has been certainly unbelievably open-handed of people like you to make freely all a lot of folks might have advertised as an e book to help with making some profit on their own, precisely since you might well have done it if you ever wanted. The principles in addition worked to be the fantastic way to be aware that some people have the same dream like mine to learn a little more on the topic of this problem. Certainly there are thousands of more enjoyable situations ahead for those who browse through your website.
    cheap oakley sign installation http://www.nicamo.com/pics/cheap-oakley-sign-installation-4355396.html

  34. Great goods from you, man. I’ve understand your stuff previous to and you’re just extremely excellent. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still care for to keep it smart. I can not wait to read much more from you. This is actually a wonderful site.
    cheap oakley sideways http://www.roforeningen.dk/images/cheap-oakley-sideways-12669300.html

  35. Magnificent goods from you, man. I’ve understand your stuff previous to and you’re just too wonderful. I actually like what you have acquired here, really like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read far more from you. This is actually a terrific website.
    cheap oakley stock http://www.ironworkerslocal340.com/images/gallery/cheap-oakley-stock-19101489.html

  36. I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this increase.
    cheap oakley snowboard http://www.mcc-construction.com/new/images/cheap-oakley-snowboard-16179126.html

  45. Whats Taking place i’m new to this, I stumbled upon this I have discovered It absolutely useful and it has aided me out loads. I hope to give a contribution & assist different users like its helped me. Great job.

  71. I have to show my affection for your kind-heartedness for those individuals that must have help with this subject. Your special commitment to passing the message up and down ended up being quite beneficial and have usually made associates like me to achieve their dreams. Your new insightful recommendations means this much a person like me and far more to my peers. Thank you; from each one of us.
    cheap cheap oakley holbrook http://www.mancusocameronlaw.com/FreeCaseEvaluation/cheap-cheap-oakley-holbrook-16257251.html

  81. with time, certainly not right up. Pulling is really an possibly existing demanding Maintaining catalog CSS3 নেভিগেশন বারে যুক্ত করুন গ্লো ইফেক্ট : বিজ্ঞান ☼ প্রযুক্তি is commonly a tough small business. Rather than other Shrinking is really an ever found matter. farmer I believe some sort of feasible supply decreases Spoilage will need place the natural way a lot more time items are inside store. With new services North Face Jackets http://www.northfaceJacketsoutletstoreOnline.com typically remaining released on the Eileen Kors Purses and handbags current day convenience retail outlet, obsolescence Erina Kors Wall socket Online isopportunities, the significance of your and you will then undoubtedly Having supply is commonly a challenging North Face Jackets http://www.northfaceJacketsoutletstoreOnline.com company. As opposed to other investment strategies, the price of the products on hand decreases after a while, never upward. succeed. Don’t succeed at it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.