Posts

Understand the basics of Media Queries

Hello Guys Today we understand the basics of media query. All websites which is works online have four major screen ie 1.Large desktop screen  2.Medium desktop screen 3.Ipad screen {768px width - 1024px} 4.Mobile screen { less than 768px} Take an example:- @media screen and (min-width: 768px) and (max-width: 979px) {...} This media query will work between 768px width to 979 width only. Now take an another example of max width media query ie: @media screen and (max-width: 980px) {...} This media works only in 980px screen size or less than 980px screen size. This media query is more effective than above media query in which we set min-width and max-width. This media query also decrease the lines of css.

CSS cascade hierarchy

Image
Hello Guys, css  has multiple hierarchical levels that cascade in importance and priority. Css have three types which work according to his priority. 1: Inline CSS 2: Inline CSS 3: External CSS Inline css have highest priority. after than internal css after than external css. If we want to disable inline css effects we use "!important". Refer by:- http://webstyleguide.com/

Simple file folder structure of website template

Image
Hello Guys, Remember a proper structure of website template file is necessary. A proper file structure give ease to designer or developer. Just have a look on this image. Refer by:-http://webstyleguide.com/

Structure of HTML website template

Image
Hello Guys,  Today we understand a basic structure of website template. Ref by:- http://webstyleguide.com/

Simple bootstrap 3.0 E Commerce website template

Hello Guys, Check this free template which is made up on bootstrap 3.0 Demo:--  http://csszilla.comxa.com/html/

How we show a image in website background which set according to screen size of desktop or in tablet

Image
Hello Guys, Now you can apply a image in full width website background. Here we apply a pattern also on image which is placed in full background size. This background image is set according to all screen sizes by re-sizing window. Demo:- http://jsfiddle.net/csszilla/3CRWY/ Full Screen Demo:- http://jsfiddle.net/csszilla/3CRWY/embedded/result/

Js Toggle for multiple use in mobile and in website

Hello Guys Here a general purpose js toggle which is useful for you in your project. Check this demo Demo:- http://jsfiddle.net/csszilla/E4emz/1/ FullScreen:- http://jsfiddle.net/csszilla/E4emz/1/embedded/result/