SVG for Web Design

What is SVG

SVG stands for Scaleable Vector Graphics. If you work with graphics or have some idea about it you know what’s the advantage of working with vector graphics. We know about some vector format like eps, ai etc. svg is yet another format specially built for web to make two dimensional graphics.. The SVG specification is an open standard developed by the World Wide Web Consortium(W3C) since 1999. SVG is written by XML language which is pretty semantic but it’s very hard to write with hand though. All modern browsers support SVG. Checkout full support details here. Continue reading SVG for Web Design

How to change bootstrap scrollspy offset

Its a case study actually, I was stuck to change the scrollspy offset, however, there is some dirty and fair way to set this value. Question is why I need this. If you use fixed position navigation or change the scroll offset then you will see the navigation items inn’t highlighting perfectly, generally the problem is always the exact previous item being highlighted after reaching the content. I saw a topic here but wasn’t satisfied actually. Continue reading How to change bootstrap scrollspy offset

transition not working while resizing image

I was making a navigation which will be fixed and be smaller after scrolling a little bit. I set transition for smooth resizing content. I got a problem that the logo image wasn’t resizing smoothly i mean with transition.

The image don’t support (as far as I know) transition on resizing if the size isn’t defined. You have to write the normal size of the image and also the size of the image after the event (hover, click etc.)

wrong code,

#logo img:hover {width: 150px;}

Correct code,

 

#logo img {width: 100px;}

#logo img:hover {width: 150px;}

থিমফরেস্টে ওয়ার্ডপ্রেস থিম পাবলিশ করার আগে একটা প্রয়োজনীয় চেকলিস্ট

আগেই বলে নিচ্ছি পোষ্টটি লিখেছেন হাসিন ভাইয়া, তার অনুমতিতে এখানে হুবহু কোট করা হল। মূল ডকটি এখানে

অনেক কষ্ট করে এবং সময় ব্যয় করে একটা ওয়ার্ডপ্রেস থিম তৈরী করে তারপর হার্ড রিজেক্ট বা একের পর এক সফট রিজেক্ট খেলে দেখা যায় অনেকেই কনফিডেন্স হারিয়ে ফেলেন। তাদের জন্য আজকে আমার ছোট্ট এই চেকলিস্ট যাতেকরে প্রয়োজনীয় কাজগুলো আগেই ঠিকমত করে রাখতে পারেন এবং রিজেকশনের সম্ভাবনাও কমিয়ে ফেলতে পারেন 

১. ভ্যালিড মার্কআপ লিখুন। মার্কআপ যদি ব্রোকেন হয় তাহলে সেটা রিজেক্ট খাওয়ার সম্ভাবনা শতকরা ৯৯ ভাগ ২. ডিজাইনে বৈচিত্র আনতে হবে এমন কোন কথা নেই, জাস্ট আপনার কাজ যেন সব ব্রাউজারে ঠিক মত চলে সেদিকে লক্ষ্য রাখুন। ৩. টাইপোগ্রাফি এবং কনটেন্টের বিন্যাস খুবই প্রয়োজনীয় একটা বিষয়। এই বিষয়ে অভিজ্ঞ হবার জন্য নতুন বা অ্যাপ্রুভ হওয়া থিমগুলো বেশী করে দেখুন। খুব বেশী এলিমেন্ট দেয়ার চেয়ে বরং আকর্ষনীয় ভাবে উপস্থাপন করাটা বেশী জরুরী ৪. অবশ্যই কোন স্টাইলশীট বা জাভাস্ক্রিপ্ট ফাইল ইনক্লুড করতে হলে সেটা ওয়ার্ডপ্রেসের wp_enque_script(), wp_enqueue_style() ব্যবহার করতে হবে, এবং wp_enqueue_scripts এবং admin_enqueue_scripts অ্যাকশন হুক ব্যবহার করতে হবে। এর কোন বাত্যয় হলে রিজেকশন একদম নিশ্চিত। ৫. </head> এর ঠিক আগের লাইনে wp_head() এবং </body> এর ঠিক আগের লাইনে wp_footer() কল করুন। ৬. সকল প্রকার ইনলাইন স্টাইল ব্যবহার থেকে বিরত থাকুন ৭. সকল প্রকারের পিএইচপি নোটিশ, ওয়ার্নিং এবং এরর ফিক্স করে ফেলুন। কোন নোটিশ বা ওয়ার্নিং থেকে গেলে রিজেকশন একরকম নিশ্চিত। এবং এক্ষেত্রে আপনি error_reporting(0) ব্যবহার করতে পারবেন না। বরং সরাসরি ফিক্স করুন ৮. ব্লগ দেয়াটা আবশ্যক। ওয়ান পেজ বা মাল্টিপারপাস টেমপ্লেট করলেও ব্লগ সাথে রাখতেই হবে এবং ব্লগের নেভিগেশন মেনু অবশ্যই ওয়ার্ডপ্রেসের মেনু বিল্ডারের সাথে কম্প্যাটিবল হতে হবে। সাথে অবশ্যই সেকেন্ড লেভেল বা থার্ড লেভেল মেনু যাতে ঠিকমত দেখা যায় সেটা খেয়াল রাখা লাগবে। ৯. ওয়ার্ডপ্রেস থিমটি (বিশেষ করে ব্লগ সাইডবার) অবশ্যই উইজেট এনাবলড হতে হবে। ১০. single.php পেজে wp_link_pages() এর ব্যবহার না থাকলে রিজেকশন অবশ্যম্ভাবী ১১. ওয়ার্ডপ্রেসের ট্যাগ, ক্যাটেগরী, আর্কাইভ, পোস্ট, পেজ, পেজিনেশন যেন ঠিকমত দেখায় সেটা খেয়াল রাখতে হবে ১২. কোন আবশ্যক প্লাগইন ব্যবহার করলে সেটা থিমের সাথে এমবেড না করে বরং TGM Plugin Activation ক্লাস ব্যবহার করে সেগুলো এনাবল করুন। ১৩. ফাইলে কোন অযথা কমেন্ট করা কোড থাকলে সেগুলো মুছে ফেলুন ১৪. থিম ফোল্ডার থেকে সকল প্রকারের হিডেন ফাইল ডিলেট করে দিন ১৫. নিজস্ব কোন গ্লোবাল ভ্যারিয়েবল ব্যবহার করলে অবশ্যই অবশ্যই ভ্যারিয়েবলের নামে একটা প্রিফিক্স (যেমন আপনার থিমের নাম) ব্যবহার করবেন। ১৬. আপনার থিমে অবশ্যই যেন কনটেন্টের অ্যালাইনমেন্ট এবং স্পেসিং ঠিক থাকে ১৭. কোন ধরনের ডিপ্রিকেটেড ট্যাগ ব্যবহার করা থেকে বিরত থাকুন।

থিমটি সাবমিট করার আগে অবশ্যই ডেভেলপার প্লাগইন (http://wordpress.org/plugins/developer

, ডিবাগ বার, থিম চেক) দিয়ে চেক করে নিন যেন অজান্তে কোন এরর না থেকে যায়। আর অবশ্যই wptest.io থেকে টেস্ট ডাটা ডাউনলোড করে আপনার থিমে ইমপোর্ট করে দেখবেন ফরম্যাটিং এবং সবকিছু ঠিক মত দেখায় কিনা – এটা কিন্তু খুবই প্রয়োজনীয় একটা বিষয়।

সবশেষে আপনার জন্য শুভকামনা রইল অনেক 🙂

Tiles Gallery with HTML5 and CSS3

Was working to build a theme and created a small gallery. Its so easy to make this type of gallery or this type of gallery is enough in the web. So if you are expert one please leave the page asap 😛

Add the CSS file

[html]<link rel="stylesheet" type="text/css" href="assets/css/style.css">[/html]

This is HTML Markup 

[html]<div class="gallery gallery-col-4"> <div class="item"> <img src="assets/img/01.jpg" alt=""> <a href="#"> <div class="overlay"> <h4>Heading</h4> <p>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum</p> </div> </a> </div> <!– ——————— more item can be here ————————— –> </div>[/html]

There are 3 column style available for the gallery, to get 2 or 3 column style change the class “gallery-col-4” to “gallery-col-2” or “gallery-col-3“.

DEMO Image copyright reserved by MaK’s PhotoGraphy

Gallery DEMO Here

Also gallery demo has added below.

DOWNLOAD AND GITHUB LINK

License: Free to use and abuse 😉

Keep Using it 🙂