GBloghelper: web dev

Showing posts with label web dev. Show all posts

7 best CMS/script for building Social networking website

The demands of social networking and community sites are increasing rapidly. For building a community/networking site you need to code it from scratch. But if you are not a pro coder or you don’t have a nerd team, building a social networking website is completely impossible. So as non coder to build Social networking website you can use CMS (content management system - readymade platform what helps you to build site) also known as platform software or script. With social networking CMS you will be able to-

Build a Social networking website in a short time

It can be use for personal or commercial purpose

Customizable, so you can modify any part of site as you want

Some of these CMS are open source (completely free and you can modify/upgrade the source code) and some of paid.

Let’s see what content management systems I talking about for building Social networking website.

7 best CMS/script for building Social networking website

Dolphin

Dolphin is the world's most advanced community CMS. It is Open source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Premium upgrade available.

Jcow

Jcow is flexible Social Networking software written in PHP. It can help you to: Build a social network for your interests and passions, Build a member community for your existing website, Build a social networking site like Facebook, Twitter. Paid version got more customizable option.

Buddypress

Buddypress is a Wordpress CMS's plugin. After installing Wordpress you will be able to install this plugin and start a minimal social networking site on your Wordpress. Build a social network for your company, school, sports team, or niche community. BuddyPress lets users sign-up and start creating profiles, posting messages, making connections, creating and interacting in groups, and much more. BuddyPress boasts an ever growing array of new features developed by an awesome plugin development community. There are more than 330 BuddyPress plugins available, and the list is growing every day, multi language supports, updates regularly.

Oxwall

Oxwall is unbelievably flexible and easy to use PHP/MySQL, Community CMS/platform. Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions.

Beatz

Beatz is an online social networking community script that allows you to start your own favorite artist band website. Beatz is an online community script for sharing, discussing and learning about new artists and your favorites.

Elgg

Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organization.

Etano

Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies and products.

CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.

Add Swing effect on Images of Blogger blog

CSS3 took web design to its most wanted attractive step. Using CSS3 effects on websites elements (text, images) makes our site look gorgeous and trendy. With this site I try to publish various CSS3 effects (base Button, Image effect) what you can use on your web project and Blogger blogs easily. To continue that here another super cool effect I presenting. It will give your image Swing effect on mouse hover. Made with CSS3 transform animation and keyframes to design the swinging pattern, it also cross browser supports. Let’s see how it looks like and how to enable it on your image of Blogger.

Add CSS3 Swing effect on Images of Blogger blog

Live demo-

Codes for copy-

Part 1: CSS

/*crawlist.net css starts*/
.ks-swing:hover{
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
}

@-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0); }
    5% { -webkit-transform: rotate(10deg); }
    10% { -webkit-transform: rotate(-9deg); }
    15% { -webkit-transform: rotate(8deg); }
    20% { -webkit-transform: rotate(-7deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(-5deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(-3deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
    0% { -moz-transform: rotate(0); }
    5% { -moz-transform: rotate(10deg); }
    10% { -moz-transform: rotate(-9deg); }
    15% { -moz-transform: rotate(8deg); }
    20% { -moz-transform: rotate(-7deg); }
    25% { -moz-transform: rotate(6deg); }
    30% { -moz-transform: rotate(-5deg); }
    35% { -moz-transform: rotate(4deg); }
    40% { -moz-transform: rotate(-3deg); }
    45% { -moz-transform: rotate(2deg); }
    50% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
    0% { transform: rotate(0); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(-9deg); }
    15% { transform: rotate(8deg); }
    20% { transform: rotate(-7deg); }
    25% { transform: rotate(6deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    45% { transform: rotate(2deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}
/*crawlist.net css ends*/

Part 2: HTML

<img class="ks-swing" src="Image Link"/>

How to add this effect on Blogger

Step 1:

Go to ‘template’ tab

Select ‘Edit HTML’

Find into codes snippet (Using Ctrl+f or Cmd+f) ]]><

Above ]]>< copy and paste Part 1’s codes

Save template

Step 2:

While you writing a post, After upload and insert complete for a image, Select ‘HTML’ view from (compost/html) upper side of post editor.

You will see your uploaded images source code, Place

class="ks-swing"

in the <img tag. See the picture for more info about how to do it.

After placing the Class, back to ‘compose’ view

Your image swinging is done,

How to use this effect on web project

Copy and paste the CSS part into your web project’s stylesheet.css

And call your image with part 2’s HTML part where you want to show this effect

So what you think about this CSS3 tutorial for Blogger, don’t forget to mention. New tutorial will be release soon, stay connected. Chill…

Add 5 Superb CSS3 effect on Images of Blogger blog

In our Blogger post we use various images as hint, example, for showcase an object or just as a part of post. Highlighting those images, effect’s on images necessary too. In Blogger’s default template your images automatically gets border and shadow effect, again if you are using custom template your may be not having any effect on your images.
But if you want more specific effect on your images or you want to use custom effect on your Blogger blog you can use CSS3 effects for images. Here 5 superb, most popular CSS3 effect code I gathered (Shadow, Opacity, Tilt, Jump, Morph effects). See what image effect suits your images, and add them on your blogger images.

CSS3 Shadow effect on Images

Just Shadow effect

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado {-moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
box-shadow: 0 2px 10px rgba(0, 0, 0,.75);}

Shadow effect on mouse hover

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado:hover { -moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
box-shadow: 0 2px 10px rgba(0, 0, 0,.75);}

Shadow effect on mouse hover with CSS3 animation

HTML

<img class="ks-sado" src="image link" />

CSS

.ks-sado:hover {-moz-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
-webkit-box-shadow:0 2px 10px rgba(0, 0, 0,.75);
box-shadow: 0 2px 10px rgba(0, 0, 0,.75);
-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;}

More customization : This shadow effect generate upon RGBA color code. If you want other color shadow on images Go to any color picker (Color Hexa) and place your color code's Hex digit on rgba(0, 0, 0,.75)'s first 3 '0', and Last 0 for Opacity.

CSS3 Opacity blur effect on Images

add opacity blur effect on images in blogger

Just Opacity effect

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci { opacity:.7;}

Opacity effect on mouse hover

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci:hover { opacity:.7; }

Opacity effect on mouse hover with animation

HTML

<img class="ks-opaci" src="image link" />

CSS

.ks-opaci:hover { opacity:.7;
   -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease; }

CSS3 Tilt effect on Images

Just tilt effect on image

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);}

Tilt effect on mouse hover

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);}

Tilt effect on mouse hover with animation

HTML

<img class="ks-stumbi" src="image link" />

CSS

.ks-stumbi {webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
    }

.ks-stumbi:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);

webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease; }

CSS3 Jump effect on Images

Just jump on hover

HTML

<img class="ks-jumpi" src="image link" />

CSS

.ks-jumpi { margin:15px;}
.ks-jumpi:hover { margin-top:10px;}

CSS3 Jump effect on Images with animation

HTML

<img class="ks-jumpi" src="image link" />

CSS

.ks-jumpi { margin:15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;}
.ks-jumpi:hover { margin-top:10px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;}

CSS3 Morph effect on Images

Image will spin 360 degrees on mouse hover. As it’s spinning, 'border-radius' will cropped to 50%. From Design Shack.

HTML

<img class="ks-circl" src="image link" />

CSS

.ks-circl {
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;}

.ks-circl:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);}

How to add any effect in Blogger

Step 1: You need to embed the CSS code into your template. The effect you want to use in your post, First that effect's CSS code embed into your template.

Select 'Template' tab, then 'Edit HTML',

Find (Using Ctrl+F or Cmd+F) ]]></b:skin>

Above ]]></b:skin> paste your following CSS (Under pink color title) code,

'Save template'.

Step 2: After your image uploading done,

From post editor's top (Compose/HTML) Switch to 'HTML',

After clicking 'HTML' you will see your uploaded image's source tag code

In this Image tag code add your following (what effect's CSS code you embedded into your template) effect's HTML class code. Example:-

If you embedded shadow effect's CSS in your template add class="ks-sado" into your image's Img tag

(example <img border="0" src="image link" class="ks-sado"/>)

For Opacity effect class="ks-opaci"
For Tilt effect class="ks-stumbi"
For Jump effect class="ks-jumpi"
For Morph effect class="ks-circl"

That's it.

All codes are universal, will be support on any browser (except IE), Any question, feedback leave with comment. New effects, shadow for images will be release soon, So stay subscribed. Goodluck..

4 Popular CSS3 Image captioning method

The default image captioning method we usually use is just more like showing the name of images. That captioning method is bit simple and awkward ways of representing caption. So here I am presenting 4 trendy image caption method using CSS3 effects, (not jQuery - JavaScript). These image caption methods will show your image caption on mouse hover with

Curtain, Fade in out, Pop under, Slide from left effect.

All effect got maximum support with any web browser,

Easily customizable via CSS editing

Let’s see how these effects look like and how to use ‘em on your website project.

Curtain style CSS3 image caption

HTML

<div class="ks-curtain">
<img src="Image link">
<span class="ks-caption the-caption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-curtain {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-curtain img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-curtain .ks-caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-curtain .the-caption
{
width: 170px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-curtain:hover .the-caption
{
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
/*crawlist.net css ends*/

Fade in out style CSS3 image caption

HTML

<div class="ks-fade">
<img src="Image Link">
<span class="captiono ocaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-fade {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-fade img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-fade .captiono {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-fade .ocaption
{
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
font:Arial;
font-size:15px;
}
.ks-fade:hover .ocaption
{
opacity: 1;
}
/*crawlist.net css ends*/

Pop under style CSS3 image caption

HTML

<div class="ks-under">
<img src="Image link">
<span class="captio kscaption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-under {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-under img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-under .captio {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-under .kscaption
{
height:53px;
width: 200px;
display: block;
bottom: -56px;
text-align: center;
font:Arial;
font-size:15px;
}
.ks-under:hover .kscaption
{
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/*crawlist.net css ends*/

Slide from left style CSS3 image caption

HTML

<div class="ks-lefty">
<img src="Image Link">
<span class="capion aption">
<p>Your Text</p>
</span>
</div>

CSS

/*crawlist.net css starts*/
.ks-lefty {
border: 5px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.ks-lefty img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.ks-lefty .capion {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
.ks-lefty .aption
{
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
left: 200px;
font:Arial;
font-size:15px;
}
.ks-lefty:hover .aption
{
background-color: rgba(0,0,0,1)!important;
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
/*crawlist.net css ends*/

How to add on your website project

First copy and paste the CSS part on your site’s Stylesheet.css

Whether on your website you want to show this image caption’s there copy and paste the HTML part.

How to configure

At HTML part’s ‘Image link’ paste your image link, on which image you want to show caption Into <p> and </p> tag write your caption

As your image’s height and width delete default code and place your image height and width. And also fix the caption’s height width too if effect does not showing right.

Compatibility
These effects are optimized for maximum fallback support with major web browser. Any browser with CSS3 Compatibility will show these effect easily.

Any feedback leave with comment, soon I’ll publish more image caption method so stay subscribed.

15 best free responsive jQuery image sliders

Image sliders are the best way to highlight your prior content on homepage/landing page. In the vast web world you may find a large number of Image sliders, and maybe you don’t have sufficient time and patient for checking all of them out. So here I tried to scale down the number to 15 and presenting 15 of the best free, responsive and latest tech enriched content sliders. See their demo and download them, then use them on your project. Read on:

1. FlexSlider

An awesome, fully responsive jQuery slider toolkit.

Simple, semantic markup

Supported in all major browsers

Horizontal/vertical slide and fade animations

Multiple slider support, Callback API, and more

Hardware accelerated touch swipe support

Custom navigation options

Compatible with the latest version of jQuery

Demo
Download

2. unslider

unslider is a responsive and cross-browser jQuery plugin for creating clean and flexible content sliders on your web site. unslider currently supports almost all the html elements like image, text, video, etc.

Lightweight (~3kb minified) and easy to implement

Responsive and cross-browser

Keyboard and Dot navigation support

Customizable transition animations

Touch & Swipe support

Prev/Next button support

Demo
Download

3. Ideal Image Slider

The aim behind the Ideal Image Slider is to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as “extensions”. Here are the ideals and core features:

HTML5 (SEO optimised)

CSS3 transitions (a few simple transitions like slide/fade)

Left/Right navigation (including touch/swipe support)

Responsive

HiDPI (retina) support

ARIA support

Extremely simple to setup (no dependencies)

Very extensible

Uses progressive enhancement

Demo
Download

4. Slider Pro

Slider Pro is a professional jQuery plugin which allows you to display a group of mixed content in a responsive and touch compatible slider. Key Features:

Fully responsive with custom JS breakpoint.

Touch swipe, keyboard, and thumbnails navigation.

Fullscreen and auto height support.

CSS3 powered transitions.

Infinite loop like a carousel.

Image lazy load.

Retina image support.

Galley lightbox enabled.

Automatic video handling.

Supports mixed content, not only images.

Demo
Download

5. jSlider

jSlider is a simple, lightweight, full-featured jQuery plugin for creating animated content / images on your webpage / web applications. Features:

Mobile-friendly. Support both mouse drag and touch swipe to switch between slides.

Cross browser. Supports all major browsers and even IE 8/9/10.

Options can be passed via data-attributes directly in the markup.

Arrows and dots navigation.

Custom animation types.

Fully responsive for any screen size.

3 built-in slider modes (slide, fade & gallery) to fit your any needs.

Supports infinite looping that makes the slider act like a carousel.

Auto resize slider content to fit parent container.

Demo
Download

6. Slippry

Responsive slider plugin for jQuery. Intrinsic trick to enable responsive resizing without js!

Slippry is a pretty customization slider, included some (slightly random) combinations of options and the function settings and CSS (if applicable) to recreate them.

Designs/styles: Out-of-the-box, Pictures, Portfolio, News, Shop, Thumbnails, CSS vs jQuery.

Demo
Download

7. Hero Slider

It is a common approach to fill in the intro section of a website with a slideshow: you’re trying to show the users as much as you can above the fold, yet you want to deliver this information in an organized and clean way. Therefore we built for you a ready-to-use jQuery slider, with some built in options like video/image backgrounds and different text alignments. In an attempt to increase user engagement, we replaced the “navigation arrows” with buttons. The difference is: buttons have a title, a hint about what kind of content to expect. Arrows just tell users “you can switch slide”.

Demo
Download

8. jQuery lightSlider

jQuery lightSlider is a lightweight responsive Content slider. Features:

Fully responsive – will adapt to any device.

Supports touch devices and swiping.

Gallery mode to create an image slideshow with thumbnails

Small file size (6kb) (minified), fully themed, simple to implement.

CSS transitions with jQuery fallback.

Full callback API and public methods.

Auto play and auto loop to create a content carousel.

Keyboard, arrows and dots navigation.

Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.

Slide and Fade Effects.

Multiple instances on one page.

Demo
Download

9. Zenith

Zenith is responsive slider jquery plugin that comes in 4 basic layouts and 7 transition animation available

4-th layout, or slider layout, has some variations of its own, producing 3 more pre-defined sub-layouts and unlimited possibilities of styling, editing and creating some of your own variations.

You can edit some HTML, and add that markup by passing it’s elements classes or id’s to the options when initializing zenith.

Zenith differs from other responsive slider jquery plugins in dozen ways.

It’s unique layouts for showcasing highlights will enhance your product, or app presentation.

You can style almost every part by passing your own custom CSS directly into options, without even touching the main style.

Demo
Download

10. SmoothSlides

A responsive jQuery slideshow with beautiful panning effects on each image.

Demo
Download

11. jcSlider

A responsive slider jQuery plugin with CSS animations.This plugin does not use jQuery animations. Only CSS3, because performance matters. No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them. It couldn’t be easier!

Only 1 js file, 1Kb minified

Responsive

Multiple effects (more than 60!)

Works with html, images… whatever you want to animate

Demo
Download

12. Responsive Layered Slider with CSS3 & jQuery

The entire slider works by using just a JavaScript document and you don't have to attach any CSS style sheets to use it.

Each layer will have 18 possible effects which you can use to your liking.

All animations are created by inserting CSS code into the page using JavaScript

Demo
Download

13. Zoom Slider

A simple content slider with depth-like zoom functionality for a predefined area in each slide. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, it shows some more details.

Demo
Download

14. PgwSlideshow

Responsive slideshow / gallery / carousel for jQuery / Zepto

Fully responsive slideshow

Desktop and Mobile devices supported

Less than 4 KB (minified and gzipped)

Full customization with the CSS file included

Demo
Download

15. slider.js

slider.js is a lightweight, simple-to-use jQuery plugin that helps you generate a fullscreen, responsive slider carousel for showcasing your photos, designs and stories.

Demo
Download

So what you think about this list don’t forget to mention. More Cool slider information base list will be publish soon, so stay subscribed. Goodluck…..

How to create Vertical text/link navigation menu

The navigation menu styles we mostly see around on web are sidebar menu, vertical menu, fixed to header menu etc. It’s very rare to spot a site with vertical text/link style menu, right? So here it is I developed this vertical text/link style menu which offers; links are hanging from top side of site, and links will be shown vertically. This menu made with CSS3 transform formula to make links appear vertically and added opacity effect and cheerful flat color to each link enhanced with Google web font. Let’s see how it looks like and to create this menu. Read on-

How to create Vertical text/link navigation menu

How to:
Step 1: First create a navigation class; and all positioning codes-

.nav {
    position: relative;
        float:right;
        top: -3px;
}

Step 2: Here we design the nav’s li elements; with CSS3 transform: rotate(-90deg); width; text positioning and <li> positioning.

.nav ul li {
    -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
    width: 100px;
    overflow: hidden;
    padding:5px 10px 10px 18px;
    float: left;
    background-color: #7f9db9;
    text-align: left;
    margin-left:-50px
}

Step 3: Now designing the ‘a link’ elements with font style, size, decoration and color.

.nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:500;
    font-size:16px;
}

Step 4: Then individual color and hover color setting up for <li> elements with rgba color codes; we creating 5 link slot so setting up their color respectively with l1, l2, l3, l4 and l5 <li> classes.

.nav ul li.l1 {
    background-color: rgba(243, 156, 18,0.65);
}
.nav ul li.l1:hover {
    background-color: rgb(243, 156, 18);
}
.nav ul li.l2 {
    background-color: rgba(207, 0, 15,0.65);
}
.nav ul li.l2:hover {
    background-color: rgb(207, 0, 15);
}
.nav ul li.l3{
    background-color: rgba(54, 215, 183,0.65)
}
.nav ul li.l3:hover {
    background-color: rgb(54, 215, 183);
}
.nav ul li.l4{
    background-color: rgba(25, 181, 254,0.65)
}
.nav ul li.l4:hover {
    background-color: rgb(25, 181, 254);
}
.nav ul li.l5{
    background-color: rgba(65,117,160,0.65)
}
.nav ul li.l5:hover {
    background-color: rgb(65,117,160);
}

Step 5: It’s time to call ready CSS classes to HTML; So I’m using a <div> to call .nav you may call it under <nav> for integrating design to HTML5. Adding <ul>, <li> and <a> elements. And finally finishing the design.

    <div class="nav">
        <ul>
            <li class='l1'><a href="#">Home</a></li>
            <li class='l2'><a href="#">Blogger</a></li>
            <li class='l3'><a href="#">Wordpress</a></li>
            <li class='l4'><a href="#">About</a></li>
            <li class='l5'><a href="#">Contact</a></li>
        </ul>
    </div>

Step 6: Place links in "#" and change anchor texts as you like. Change color code of <li> with your desired rgba color. And here are the full codes of this vertical text style navigation menu:

<div class="nav">
        <ul>
            <li class='l1'><a href="#">Home</a></li>
            <li class='l2'><a href="#">Blogger</a></li>
            <li class='l3'><a href="#">Wordpress</a></li>
            <li class='l4'><a href="#">About</a></li>
            <li class='l5'><a href="#">Contact</a></li>
        </ul>
    </div>

<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
.nav {
    position: relative;
        float:right;
        top: -3px;
}
.nav ul li {
    -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
    width: 100px;
    overflow: hidden;
    padding:5px 10px 10px 18px;
    float: left;
    background-color: #7f9db9;
    text-align: left;
    margin-left:-50px
}
.nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:500;
    font-size:16px;
}
.nav ul li.l1 {
    background-color: rgba(243, 156, 18,0.65);
}
.nav ul li.l1:hover {
    background-color: rgb(243, 156, 18);
}
.nav ul li.l2 {
    background-color: rgba(207, 0, 15,0.65);
}
.nav ul li.l2:hover {
    background-color: rgb(207, 0, 15);
}
.nav ul li.l3{
    background-color: rgba(54, 215, 183,0.65)
}
.nav ul li.l3:hover {
    background-color: rgb(54, 215, 183);
}
.nav ul li.l4{
    background-color: rgba(25, 181, 254,0.65)
}
.nav ul li.l4:hover {
    background-color: rgb(25, 181, 254);
}
.nav ul li.l5{
    background-color: rgba(65,117,160,0.65)
}
.nav ul li.l5:hover {
    background-color: rgb(65,117,160);
}
/*crawlist.net CSS ends*/</style>

Compatibility:

This menu is compatible with all latest version of web browsers.

So what is your opinion about this navigation menu don't forget to mention, Chill....

10 Best Code playgrounds/Online HTML Editors for developers

We use code playgrounds/online-cloud based HTML editors for instant web developing, creating snippets, or making use of existing code snippets for time saving, cloud base backup etc. Now days uses of online HTML editor is rising rapidly cause online playgrounds or code editors that provides instantly ready coding atmosphere through web applications that allow real time editing and previews of client-side codes for experimenting with CSS, HTML, PHP, JavaScript and instant result help you to develop useful web project and save them, sendboxing tools for testing, debugging and sharing your code snippets. Here I am presenting 10 of Best Code playgrounds/Online HTML Editors for developers; read on:

10 Best Code playgrounds/Online HTML Editors for developers

1. Codepen
CodePen offers the coolest user interface without costing money. It’s a sophisticated playground for the front end side of the web. It’s all about inspiration, education, and sharing. The service highlights popular demonstrations and offers advanced functionality such as sharing and embedding.

2. CSSDesk
CSSDesk is an Online HTML5, CSS3 Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live, offers account, cloud saving, pro features, clean interface and code preferences. It does not have lots of fancy features its simplicity gives focus on the things that matter.

3. Cloud9
Cloud9 IDE lets you code and chat together with your fellow developers, share your workspaces or keep them private. Set up your system without any hassle, Built-In Terminal For command-line wizardry, Language Tools Make writing code a breeze, Debugger, Configure your own UI, themes, run panel, Built-In Image Editor etc it’s the best premium IDE in the world.

4. JSFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment select the framework MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla then start editing. It has ability to save, share and embedding the code. Unlike Codepen, JSFiddle got no live previews; You have to basically refresh the page by clicking on the play button.

5. JS Bin
JS Bin is a web-app specifically designed to help JavaScript and CSS coders to test snippets of code, debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML. You can save, and send the URL to a peer for review or help.

6. ShiftEdit
ShiftEdit is an online IDE that syncs and backs up your code revisions. It supports real-time validation, sophisticated auto-complete, syntax checking, function definitions make programming a breeze All Browsers, Terminal, Customizable snippets, notes, change themes, Connect to your project files wherever they reside (FTP, SFTP, Dropbox, Google Drive, Clone a repository from Github/Bitbucket)

7. Dabblet
Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses prefix free, so that you will not have to add any prefixes in your CSS code, save your work in Github, embed it in other websites and share it with others. It currently only supports modern versions of Chrome, Safari and Firefox.

8. Liveweave
Liveweave is a useful HTML5, CSS3 & JavaScript playground and a real-time editor packed with features such as having the capability to turn off its live preview, take better care of your eyesight with the night vision mode, offers over 20 JavaScript libraries, supports SVG, It also comes with a built-in ruler. It is a great tool to test, practice and share creations.

9. Editr
Editr is a HTML, CSS and JavaScript playground that you can host on your server. It is based on ACE Editor. Its super easy to setup. It supports multiple instances on one page. Configurations are available via JS object or HTML attributes supports 3 layout views: horizontal, vertical and single. First two are for live edit. Third one is for presentation. Editr is licensed under MIT License.

10. The HTML5 Playground
This service includes a library of code snippets you can explore to see HTML5 in action. They include some basic getting-started examples, such as the use of the HTML5 Doctype and the audio tag, including HTML5 elements such as range and date inputs and automated validation for email addresses and websites.

So what you use, which one is your favorite worth mentioning don’t forget to mention :)

20 awesome responsive navigation examples for your website inspiration

Are you looking for high-end responsive navigation menu for your web project take a look at these examples, demos, and tutorials on responsive navigation menus; they collected from all over the web and best of other menus around. Most of them compatible with any sites frameworks and they developed with CSS3, HTML5, JavaScript, jQuery by excellent hands. Read on: