Posts

Showing posts from May, 2014

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/

How we make hexagon with box shadow through css

Hello All Check this demo for make hexagon with box-shadow through css. Demo:-  http://jsfiddle.net/csszilla/gmpZ6/5/ Full screen demo:-  http://jsfiddle.net/csszilla/gmpZ6/5/embedded/result/

How we make paragraph inverted comma with css which set according to content size

Hello Guys Today we learn how you make paragraph inverted comma with css. here we use a q tag for put our paragraph content. Now inverted comma will coming from css with before and after tag. q:before { color: #fa4173; font-family: Times New Roman, Times, serif; content: '\201C'; font-size: 60px; padding-right: 5px; } q:after { color: #fa4173; font-family: Times New Roman, Times, serif; content: '\201D'; font-size: 60px; padding-left: 5px; margin-top: 5px; } Demo:-  http://jsfiddle.net/csszilla/RQrsk/9/embedded/result/

how we make responsive 3D blocks with css

Hello Guys Toady we understand how to make 3d responsive blocks with css. Check out this demo and try to understand . Demo:-  http://jsfiddle.net/csszilla/RQrsk/embedded/result/

Basic concept of liquid css and design

Theory:- Hello Guys, hope you doing well. Today i explain the basic concept of liquid design which make your web page totally fluid and looks good in all screen sizes. Fonts sizes issue:- Good question!! if we stick with our liquid design principles we’ll need to use relative font units. Our choices are: 1:-Em's 2:-%'s 3:-ex's 4:-css keywords What is Liquid Design? The term "Liquid" means a webpage should flow smoothly in all screen sizes. <style> body { font-size:1.5em;} .top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;} .block1 { width:50%; float:left; background:#033; min-height:50px;} .block2 { width:50%; float:left; background:#090; min-height:50px;} .middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;} .left_part { min-height:100px; float:left; width:30%; background:#960;} .right_part { min-height:100px; float:left; width:70%; background:#690;} .foote

CSS selectors by Alphabats

A ::after After is a pseudo element which  is used for insert some text directly into webpage with out written in main html. CSS:- .button:after { content:"csszilla"; display:block;} HTML:- <a href="#" class="button"></a> ::before before is a pseudo element which is used for insert some text directly into website, same as after element. CSS:- .button:before { content:"csszilla"; display:block;} HTML:- <a href="#" class="button"></a> :active The :active pseudo selector is used to change the color of element when clicked or when element is activated. Generally :active is used in a tag in navigation etc. CSS:- ul li a.active { background-color:#333;} HTML:- <ul> <li>    <a href="#" class="active">CSS ZILLA</a> </li> </ul>  Attribute css has ability to target HTML based on their attribute.

CSS Curls

Curls Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left Ref:-  Hover.css (http://ianlunn.co.uk/)

CSS Speech Bubbles

Speech Bubbles Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left Ref:-  Hover.css (http://ianlunn.co.uk/)