Posts

Showing posts with the label CSS

Flip or Rotate Image using CSS

In this quick code you will learn how to flip or rotate image with transition effect using CSS. We will have opportunity to trigger the flip or rotate action on mouse hover or click, for this we will be using jQuery.

Create Expandable or Toggle Drop Down using jQuery

In this quick code you will learn how to create expandable or toggle drop down menu with little icon which shows menu is opened or not. Let's straight look at working example below.

CSS Based Multi-Branch Tree View Menu for Website

Recently I had a requirement to create a multi-branch tree view menu for website which should be completely CSS based and no single line of JS code.

What is LESS (style-sheet language)? Exploring LESS coding features inside Visual Studio - Web Essential?

Image
In this post we are going to talk about LESS and its introduction, coding, compilation and features available in Visual Studio Editor with Web Essential extension. Before talking about anything let’s understand what is LESS and how it can help developers.

Creating Image Sprite in Visual Studio - Web Essential

Image
In this article you will learn how to create image sprite using Visual Studio Web Essential Extension. Suppose you have a website that uses lots of images and each image loads individually which increases number of requests and makes website slow. We need quick website optimization to fix it.

Paste Image from clipboard onto Visual Studio Editor : Video - Web Essential

In this article you will learn how to paste clipboard image onto Visual Studio Editor. Like we can paste clipboard image in MS-Word, it is possible to paste in Visual Studio Editor with the help of Web Essential Visual Studio Extension.

Image Optimization in Website - Web Essential

Image
In this article you will learn about Image Optimization using Web Essential Visual Studio extension. You will learn how we can optimize individual image by right clicking on image file, how to optimize group of images in the folder, how to optimize image in CSS file and how to optimize Base64 Encode Image (dataUri) in CSS file.

Base64 Encode Image in Website - Web Essential

Image
In this article you will learn about Base64 Encode Image, why we encode image and how it can improve website performance. We are going to make use of Web Essential which is a must have Visual Studio extension.

Media Only Queries in CSS3 / @media only screen and (max-width: 900px) { attributes; }

Image
If you remember, CSS2 added support for the media="screen" way of defining which stylesheet to use for which representation of the data.

Now CSS3 added a new feature to this functionality, by adding media queries. Basically, this means you can change stylesheets or styles on the web page based on for instance the width and height of the viewport/browser.

Best practices for speeding up your website - web performance optimization

In this post I would like to share my strategies for web performance optimization and speeding up website, here's my list with tools or technologies I use:
1. Code minification and bundling
By this process we remove comments and extra spaces as well as crunch variable names in order to minimize code. Code minification applies to CSS, JavaScript or HTML codes and code bundling applies to CSS and JavaScript codes, in some cases we bundle HTML codes also.
If you use Visual Studio, then it has an extension Bundler & Minifier (by Mads Kristensen) this tool can easily bundle and minify codes inside IDE. You can configure this extension for automatic bundling on build as well as you can use this to manually select files and then bundle and minify.
Another way with Visual Studio web applications which I like the most, is by using bundling and minification NuGet packages, this automatically bundles and minifies when you publishing project in release mode.
There are number of browser based t…

Bundling and Minification in Visual Studio 2012 or Migrate existing Website

Image
Bundling and minification are two new techniques introduced with ASP.NET 4.5 Beta to improve request load time.It improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).

Free E-book: Time-Saving VS11 and ASP.NET 4.5 Features You Shouldn’t Miss

Last weak, two Telerikers Joshua Holt and Carl Bergenhem introduced a very nice free e-book for developer community to get job done quickly with less code. Very nice book, read it once.

Getting started with jQuery UI

Image
In this post you will learn how to get started with jQuery UI. Believe me, jQuery UI is really very easy to learn and it provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library which you can use to build highly interactive web applications.

The whole jQuery UI categorized into three groups that is core, interactions, widgets and effects.
In this post I am going show you how to setup a demo page for jQuery UI. You just need to follow the steps given below.
Step 1 (Downloading UI Library)
At very first you need to download the jQuery UI library from here http://jqueryui.com/download. You might get confused on this download page because there is various checkboxes to select. Look if you want to download library that contains core elements of UI then deselect all components and select only UI Core there. Similarly, if you want library that contains interaction elements only then deselect …

Making Clone on Web Page using jQuery

Image
Introduction
This post shows how to make the clone of elements on web page using jQuery, for this we will use .clone() method.
Sometimes we want to copy (clone) elements on web page, for example, navigate menu can be placed on header and footer too and there may be many situations come to us where we need to clone. Why write something twice if we have opportunity to use jQuery.
So, let's create a demonstration page for this talk.
<body> <h2>History of Visual Studio</h2> <divclass="mainBody">         Visual Studio's history probably begins in <strongclass="year">1975</strong> with Bill and Paul's decision to create Altair BASIC.  Maybe you could start before that but I think that's as far back as you could go and still say it's about Visual Studio at all – it's at that time that Microsoft decided it was going to have software development products and not, say, toaster automation. </div> <p>         Some …

Moving Tags in DOM using jQuery

Image
Introduction
Download
I this quick post you will learn how to move any tag in DOM using jQuery. Firstly, I will show you a problem and then I will talk on its fixes. Here's a problem:
My friend has designed a web page that has following information inside <body> tag. He is actually novice in web.
<body> <divstyle="width: 500px; text-align: justify;"> <h2>History of Visual Studio</h2> <divclass="mainBodyInfos"> <divclass="CopyrightInfo">                 Copyright © 2009-2012 ITORIAN. All rights reserved. </div>             Visual Studio's history probably begins in 1975 with Bill and Paul's decision to create Altair BASIC.  Maybe you could start before that but I think that's as far back as you could go and still say it's about Visual Studio at all - it's at that time that Microsoft decided it was going to have software development products and not, say, toaster automation.             ….. <…

Popular posts from this blog