কিছুদিন আগে আমি jQuery এর উপর পোষ্ট করেছিলাম আশা করি সেটা সবাই চেষ্ঠা করেছেন , এবং সবার ভালো লেগেছে । কিয়েকদিন আগে আমি CSS3 ও jQuery এর উপর ভিত্তি করে আরেকটা খুবি মজার জিনিস শিখলাম । তাই আজ আমি আপনাদের সাথে শেয়ার করলাম ।
আমরা যারা ওয়েবসাইট নিয়ে কাজ করি তারা সবাই CSS সম্পর্কে জানি । এখন CSS ও HTML এর নতুন ভার্সন হলো CSS3 এবং HTML5 । এটা এখনো সম্পুর্নভাবে চালু হয়নি কারণ, এখনো সকল ব্রাউজার CSS3 এবং HTML5 সাপোর্ট করে না । তবে অ্যাপলের সাফারি, গুগল ক্রোম, ফায়ার ফক্স এর সর্বশেষ ভার্সনে কাজ করবে । ইন্টারনেট এক্সপ্লোরারে কাজ করবে না ।
CSS3 ও jQuery এর মজাআসুন আগে দেখে নি মজা টা কি !!!
ডেমো দেখার জন্য এখানে ক্লিক করুন ।
আশা করি ডেমোটা দেখে মনে হচ্ছে এটাতো এমনি বানানো যাই, তাই না ? আসলে আপনি ইচ্ছা করলে ইমেজ দিয়ে বানাতে পারেন । কিন্তু এটা সম্পুর্নরুপে বানানো হয়েছে CSS3 দিয়ে, তাই সাইটি লোড হতে অনেক কম সময় লাগবে ।
এবার আসুন, এই মজার জিনিস বানাতে আপনাদের যা যা করতে হবে তা হলো, আপনাকে একটা HTML, CSS, JavaScript এর ফাইল বানাতে হবে । আপনাদের সুবিধার জন্য আমি এক ফাইলে সব কোড দিয়ে দিলাম । এই কোডগুলোকে একটা নোডপ্যাডে কপি – পেষ্ট করে সেভ করুন index.html নামে ।
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3 ও jQuery এর মজা : MEHEDI.COM.BD</title>
<style>
/* BASIC RESET */
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin:0;
padding:0;
}
/* HTML ELEMENTS */
body {
background-color:#000;
color:#eee;
overflow:hidden;
font-family:SolaimanLipi, Georgia, Times, Serif;
}
h1 {
font: bold 65px/60px SolaimanLipi, Helvetica, Arial, Sans-serif;
text-align: center;
color: #eee;
text-shadow: 0px 2px 6px #333;
}
h1 small {
font-size: 20px;
text-transform:uppercase;
letter-spacing: 14px;
display: block;
color: #ccc;
}
h2 a {
display: block;
text-decoration: none;
margin: 0 0 30px 0;
font: italic 45px SolaimanLipi, Georgia, Times, Serif;
text-align: center;
color: #bfe1f1;
text-shadow: 0px 2px 6px #333;
}
h2 a:hover {
color: #90bcd0;
}
/* COMMON CLASSES */
.break {
clear:both;
}
/* WRAPPER */
#wrapper {
width:800px;
margin:40px auto;
}
/* CONFIGURATION */
#configuration {
position:absolute;
left:0;
top:0;
width:300px;
background-color:rgba(50, 50, 50, 0.7);
padding:20px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
}
#configuration input {
font-size:12px;
padding:5px;
}
#configuration p {
padding:10px;
}
#configuration h3 {
font: italic 30px SolaimanLipi, Georgia, Times, Serif;
text-align: center;
color: #bfe1f1;
text-shadow: 0px 2px 6px #333;
}
/* BOKEHS */
#bokehs {
}
.bokeh {
position:absolute;
z-index:-1;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Paint with default settings
repaint();
// Paint when button has been clicked
$("#changeEffects").click(function(){
repaint();
});
// Clear when button has been clicked
$("#clearBokeh").click(function(){
// Remove all child elements from the bokeh container
$("#bokehs").empty();
});
// Hide the title when button has been clicked
$("#hideTitle").click(function(){
$("#title").remove();
$(this).remove();
});
// Hide/show options
$("#hideOptions").toggle(function() {
$(this).attr("value", "অপশন প্যানেল বড় করুন");
$("#configuration").animate({ top : '-250px' }, 300);
}, function() {
$(this).attr("value", "অপশন প্যানেল ছোট করুন");
$("#configuration").animate({ top : '0px' }, 300);
});
});
// Master function that paints all the bokeh effects
function repaint() {
// Retrieve all user submitted data
var numberOfBokehs = $("#nrOfOrbs").val();
var bokehMinSize = parseInt($("#orbMin").val());
var bokehMaxSize = parseInt($("#orbMax").val());
var orbColour = $("#orbColour").val();
// Check if we need to create random colours
var useRandomColours = false;
if ( $("#orbRandom").is(":checked") ) {
useRandomColours = true;
}
// Check if we need to create gradients
var useGradients = false;
if ( $("#orbGradient").is(":checked") ) {
useGradients = true;
}
// Generate the bokeh orbs
for(var i = 0; i < numberOfBokehs; i++) {
// Generate a random bokeh size
var bokehSize = randomXToY(bokehMinSize, bokehMaxSize);
if(useRandomColours) {
// Generate the random bokeh colour
var bokehColour = randomColour();
} else {
// Use the given RGB code
var bokehColour = orbColour;
}
// Create the bokeh
var bokeh = $("<div />")
.addClass("bokeh")
.css({
'left' : Math.floor(Math.random()* screen.width ) + 'px',
'top' : Math.floor(Math.random()* screen.height ) + 'px',
'width' : bokehSize + 'px',
'height' : bokehSize + 'px',
'-moz-border-radius' : Math.floor(bokehSize)/2 + 'px',
'-webkit-border-radius' : Math.floor(bokehSize)/2 + 'px',
'border' : '1px solid rgba(' + bokehColour + ', 0.7)'
});
if(useGradients){
bokeh.css({
// Gradients for Firefox
'background' : '-moz-radial-gradient( contain, rgba('+ bokehColour +', 0.1), rgba(' + bokehColour + ',0.4))',
// Freaking ugly workaround to make gradients work for Safari too, by applying it to the background-image
'background-image' : '-webkit-gradient(radial, center center, 0, center center, 70.5, from(rgba('+ bokehColour +', 0.1)), to(rgba(' + bokehColour + ',0.4)))'
});
} else {
bokeh.css({
'background' : 'rgba(' + bokehColour + ', 0.3)'
});
}
// Append to container
bokeh.appendTo("#bokehs");
}
}
// Function to get a random value between two values
function randomXToY(minVal,maxVal,floatVal) {
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
// Function to generate a random colour in RBA
function randomColour() {
var rint = Math.round(0xffffff * Math.random());
return (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255);
}
</script>
</head>
<body>
<div id="configuration">
<h3>CSS3এর মজা</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="52%">কতগুলো বৃত্ত বানাতে চান</td>
<td width="48%"><input type="text" id="nrOfOrbs" value="100" size="5" /></td>
</tr>
<tr>
<td>বৃত্তের সাইজ</td>
<td><input type="text" id="orbMin" size="2" value="50" />
থেকে
<input type="text" id="orbMax" size="2" value="150" />
px</td>
</tr>
<tr>
<td>বৃত্তের কালার (RGB)</td>
<td><input type="text" id="orbColour" size="8" value="10, 30, 70" /></td>
</tr>
<tr>
<td>অথবা অটো কালার</td>
<td><input type="checkbox" id="orbRandom" checked="checked" /></td>
</tr>
<tr>
<td>গ্রাডিয়েন্ট কালার</td>
<td><input type="checkbox" id="orbGradient" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="changeEffects" value="বৃত্ত বানান" />
<input type="button" id="clearBokeh" value="সববৃত্ত মুছুন" />
<input type="button" id="hideOptions" value="অপশন প্যানেল ছোট করুন" /></td>
</tr>
</table>
</div>
<div id="wrapper">
<div id="title">
<h1>CSS3
ও
jQuery <br>
<br>
এর মজা</h1>
<h2><br><a href="http://www.mehedi.com.bd">MEHEDI.COM.BD</a></h2></div>
<div id="bokehs">
<!-- Bokeh will get injected dynamically using jQuery -->
</div>
</div>
</body>
</html>ব্যাস !!!! এবার index.html ফাইলটি ফায়ারফক্স ওপেন করে উপভোগ করুন CSS3 ও jQuery এর মজা 
সম্পুর্ন প্রজেক্ট ডাউনলোড করার জন্য এখানে ক্লিক করুন ।
আশা করি খুব তারাতারি সকল ব্রাউজার CSS3 সাপো্রট করবে এবং আমরা CSS3 ব্যবহার করে আমাদের সাইটগুলোকে আরো আকর্ষনীয় করতে পারবো এবং আমাদের সাইট লোড হতেও অনেক কম সময় লাগবে ।
আপনাদের কোন সমস্যা হলে আমাকে জানাবেন । ধন্যবাদ সবাইকে ।
অজানা ইনফরমেশনসম্প্রতিকালের অজানা ইনফরমেশন… |
আমি মেহেদী.কম.বিডি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 34 টি টিউন ও 280 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
দারুন টিউনস। খুবই ভাল লিখেছেন।
আরে ভাই —আপনার প্রথম টিউনটাতে jQuery লেখা দেখে বুঝিনাই তা কি। তাই দেখা হয় নাই। ওয়েবওয়্যার এর পোস্ট আমার সব থেকে প্রিয়।
আগেরটা এখনই দেখে নিচ্ছি।
ধন্যবাদ।
নিয়মিত টিউনস করবেন আশাকরি। সাথে আছি।
ধন্যবাদ ভাইয়া । অজানা ইনফরমেশন ভিজিট করবেন নিয়োমিত । আশা করি আপনাদের ভালো কিছু ইনফরমেশন দিতে পারবো ।
অবশ্যই । এই জন্যই তো কোড দেয়া আছে । আপনি ইচ্ছা করলেই আপনারা সাইটে যুক্ত করতে পারবেন ।
চমৎকার একটা টিউন উপহার দিলেন। এই জন্য আপনাকে অনেক ধন্যবাদ।
বিনামূল্যে আধুনিক এবং রোমান্টিক সব ভিডিও গান ও সিনেমা ডাউনলোডের জন্য ভিজিট করুন
http://AllFreeVideo.tk