9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Monday, July 11, 2011

Google Plus Style Animations with Jquery and CSS3

Google plus given an awesome kick to user experience, specially circles UI animations. I feel it’s great and new definition to have user experience design. I have tried circle rotation animation effect with Jquery and CSS3. Just few lines of code applying CSS styles using jQuery methods like .addClass() and .animation(). Take a look at these live demos with modern brewers.

Special Animation Effects

Monday, May 02, 2011

Tab Style Login and Signup with CSS

This post is very basic level CSS implementation. I want to explain how to design tab style login and registration panel with CSS, HTML and Jquery. Tab system help you to save page space, Just take a quick look at these four steps, use it and enrich your web projects. I had implemented this at labs.9lessons.info.
Login Signup Design
Monday, December 20, 2010

Status Message Design with CSS

I received lot of requests from my readers that asked to me how to design Twitter and Facebook like status message(image + text) with CSS. So that I had presented a very basic level CSS tutorial with Div and Ol tags, truly it's for CSS beginners. I hope you like this. Thanks!

Status Messages Design with CSS
Thursday, December 09, 2010

CSS3 for Web Design Part

This article is brief introdution about the basic CSS3 propertices and please note that CSS3 is under development. Now a days most popular browsers supports CSS3 except Internet Explorer lower versions, Use it and avoid images for round corners and shadow effects.

CSS3 webdesign
Monday, November 08, 2010

Blog Design with CSS and HTML

In this post I will show you how to design blog template frame with CSS and HTML step by step . CSS helps you to design better and flexible webpage layouts. This is very basic CSS + HTML tutorial, CSS just awesome it adds flavor to the web page.
Blog design CSS and SEO
Thursday, October 21, 2010

New Twitter Design Expanding URLs with Jquery, Ajax and PHP

My last post explained about New Twitter design basic layout with CSS and Jquery. In this post I want to explain how to expand URLs like new Twitter user interface using jquery, ajax and PHP. It is very easy just implementing with oembed jquery media plugin. Take a look at this demo link.

New Twitter Design
Monday, October 11, 2010

New Twitter Design with CSS and JQuery.

The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Take a look at this awesome demo.

New Twitter Design
Tuesday, September 07, 2010

Collapsed Image with Jquery and CSS.

How to do collapsed image with Jquery and CSS. Orkut.com implemented this concept while updating image scrap, the scrap shows image in collapsed style to reduce the webpage height. This is very simple script using mouseover, mouseout and css Jquery functions.

facebook tag friends with jquery
Thursday, July 08, 2010

Youtube like Rating with Jquery and Ajax

I received a email request from my reader that asked to me how to implement Youtube like rating with Jquery. It is so nice with quick bar results, So that I had designed a simple script with PHP,Jquery and Ajax. Sure you will like it. Live demo

Youtube like rating
Monday, December 14, 2009

Twitter like Login with Jquery and CSS.

In this post I want to explain "Twitter like login hide and show effect with jquery and CSS ". Very simple just five line of code using jquery hide() and show() events and little CSS code, use it and enrich your web projects. Take a look at live demo.

Twitter like Login with Jquery and CSS.
Monday, November 02, 2009

Live Update and Delete Records with Animation Effect using Jquery and Ajax.

Some days back I had posted popular articles Insert a Record with animation effect. and Delete Records with Random Animation Effect using jquery and ajax. I received lot of requests from my readers that asked to me how to combine both scripts. So I had developed a tutorial Live update and delete records with animation effect using jquery and ajax implementing live() jquery event.

Take a look at Twitter and Facebook style application live demo

Live Update and Delete Records with Animation Effect using Jquery and Ajax.
Friday, October 23, 2009

Live Preview with jQuery

In this post I want to explain How To Implement Live Content Preview with jQuery. This is very basic jquery tutorial using keyup() element. It's useful just five lines of javascript code to show live content preview. Best examples Google Adwords Campaign piece preview. Take a look at live demo

Live Preview with jQuery
Friday, October 16, 2009

Outstanding and Inspiring Website Backgrounds.

Are your looking for Innovative Illustrative and Sketchy Website Backgrounds. In this post I had listed 9 impressive websites. If you known any links just post a comment. Thanks!


Thursday, October 08, 2009

Zooming with jQuery and CSS.

In this post I want to explain about Text Zooming with jQuery and CSS. This is basic level tutorial just changing style using jQuery script. It's simple use it for zooming website content. Take a look at live demo

Related Post : Changing design colors with jquery

Zooming with jQuery and CSS

Tuesday, September 08, 2009

How to Implement an Animation Effect Website with jQuery

In this post I want to explain how to implement an Animation Website with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects. Take a look at the live demo here.

How to Implement an Animation Effect Website with jQuery
Wednesday, August 26, 2009

Facebook Style Alert Confirm Box with jQuery and CSS.

I received a request from my reader that asked to me how to implement facebook style alert box. so I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It's simple just changing some line of CSS code. Take a look at live demo

Original jquery.alert.js Demo click here

Facebook Style Alert Confirm Box with jQuery and CSS.
Thursday, August 20, 2009

Magical Sign-up Page with jQuery and CSS.

Always simple registration page helps to increase more sign-ups. This post about magical and interesting registration page with jQuery and CSS. Use this and enrich your web project sign-up page.Take a look at live demo

Magical Sign-up Page with jQuery and CSS.
Wednesday, June 03, 2009

Visited links strike out with CSS.

Have you visited OurSignal.com it's popular items on social sites news. If you visit any news link after page refresh the title should be strike-out. It's a very basic CSS tips using element a:visited. Just take a look at live demo.

Monday, June 01, 2009

Facebook like suggestions with jQuery content appears and disappears.

This post about how to implement Facebook-like users Suggestions. When you click delete(X) button "Do not show this suggestion" the content disappears slowly and to get the new suggestion content appears. I had developed this using jQuery, PHP just some lines of code.

Facebook like suggestions with jQuery content appears and disappears.
Monday, March 02, 2009

Clean User Interface CSS Tips

So in this post i want to explain how to design a clean user interface using CSS (Cascading Style Sheets). It's useful to make your web pages more simple and neat.

Better than images to use CSS buttons the web page download faster.
CSS Buttons
mailxengine Youtueb channel
Make in India
X