Add '3D Pressible Button' to your web project

CSS can be used to create an awesome "call to action" button, as in the case of our 3D pressible button here. It uses CSS2 pseudo element to add a lower 3D side to the link, and CSS3 shadows and transition to complete the look. To overcome a severe limitation of Google Chrome and Safari at the time of writing not supporting CSS3 transitions on pseudo elements, we use the "inherit" technique as described here, so the 3D side of the button is animated when the user presses down on the button.  Note that the default "depth" of the 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS. Let's see how it looks like and get the source code:

Add '3D Pressible Button' to your web project

See the Pen pressable by kShazzad (@kShazzad) on CodePen.

So what you think about this button, don't forget to mention :)

Read More

Add 'CSS3 Black Menu' to your website

Few days ago I've published Vertical text menu for websites for continue the series here I'm presenting Dashing CSS3 Black Menu with drop-down sub menu for your website. It is built with HTML, CSS and CSS3 effect transition, compatible with all major web browser and looks fabulous on any kind of website no matter their background is light or dark. Let's see how it looks like and get the source codes:

Add 'Dashing CSS3 Black Menu' to your website

See the Pen black by kShazzad (@kShazzad) on CodePen.

So what you think about this menu don't forget to mention. Check out other trending navigation menus 3 responsive navigation menu, Multipurpose navigation menu, Overlay style menu, CSS3 navigation menu style 1, CSS3 navigation menu style 2, Goodluck

Read More

Add 'Simple Neat' Search bar to your web project

I've published various kinds of search bar for Blogger and web sites, such as 6 Simple Search Bar, Dynamic width Search Bar, Black CSS3 Search Bar, Pulsating Search Bar and so on, for continue the series here I am publishing another Simple Neat search bar for your web project, which is constructed lightly with CSS, HTML, compatible with any any web browser and looks classy on any type of website, this search bar's design adapted from Apple.com. let's see how it looks like and get the source code:

Add 'Simple Neat' Search bar to your web project

See the Pen neat by kShazzad (@kShazzad) on CodePen.

So how it working on your web site don't forget to mention :)

Read More

Add "Image gallery with Caption" to your web project

Someday ago I published a tutorial about How to caption image with 4 popular CSS3 method, Here I present to you a full version of that tutorial, this is called "Image gallery with Caption", this widget is made with CSS3 elements and effects, it's easy to configure and light weighted so it will load quickly and looks slick on any types of web site, let's take a look at it shall we. Read on:

Add "Image gallery with Caption" to your web project

See the Pen Caption by kShazzad (@kShazzad) on CodePen.

So what you think about this widget don't forget to mention :)

Read More

Add 'Hexagon Shape' button to your web project

I've already published some of coolest button types on Crawlist, Like CSS3 Shake button, Blinking button, 3D button etc, Here I am sharing another cool button to your web project for your web project, it's called  'Hexagon Shape' button. The interested thing is this buttons were built with single element, made with CSS3 3D perspective element. These buttons are easy to use and supports all major web browsers. Let's take a look at them, shall we:

Add 'Hexagon Shape' button to your web project

So how this button working on your site don't forget to mention :)

Read More

Add "Accordion" widget to your web project

Accordion is a type of widget that Constructed with HTML, CSS and powered by jQuery, It is a tabbed style widget that has title tabs and within title tab you can put important text, codes, image elements folded and those elements can only be revealed by clicking on title tab. Here an awesome light weighted Accordion widget source code given, Read on:

Add "Accordion" widget to your web project

See the Pen accordion by kShazzad (@kShazzad) on CodePen.

 
How to configure:

• In <div class="accordion-item"> Item 1 place your title text

• In <div class="data"> replace dummy text with your text

• Don't call jquery.min.js twice

How this widget working on your web project don't forget to mention :)

Read More

Add 'Building Images' Style Slider to your webpages

'Building Images' Style Slider is a new addition to modern slider technology, the best thing about this slider is this slider is entirely coded HTML5 and JavaScript, which makes this slider very lightweight and handy. It's easily configurable and adaptable to any types of sites. Here below source code of this slider given; Read on:

Add 'Building Images' Style Slider to your webpages

See the Pen slider by kShazzad (@kShazzad) on CodePen.

How to configure:

• If you want to change default Height and Weight, just change the all Height and Weight value

• Add your images here; change default images

var urls = [
            'http://i.imgur.com/OeDykaH.jpg',
            'http://i.imgur.com/lLHspCj.jpg',
            'http://i.imgur.com/tCz9GQS.jpg'
        ],

• Also change the number of images, default is 3, change 3 with your image number

for (var i = 1; i < 3; i++)

So what you think about this slider and how it working on your web project don't forget to mention :)

Read More