How to write responsive styles in css?
To make website responsive in all device , include following meta tag in header section: <meta name=”viewport” content=”width=device-width”> Then include media queries in stylesheet and add responsive styles there: examples: @media only screen and (max-width: 767px) and (min-width: 480px){ } for more details: http://www.howtofindit.in/responsive-style-media-query-in-stylesheet/
Grid system in Bootstrap
Grid system is the main feature of bootstrap. we can divide the container into 12 sections and use those section based on our needs(based on the width of each section in our website design. there 4 classes in bootstrap to use this feature: xs: extra small for mobile device width sm: small for tablets. md…
what is bootstrap?
bootstrap is a html – css framework mainly used for making responsive websites. Bootstrap have some predefined classes, using those classes we can make the website responsive to all device easily, no need to write separate styles for small devices. Newest version of bootstrap is bootstrap 4. contains some more classes. Main properties of bootstrap…
Expansion of “RBGA” colors in css?
Red,Blue, Green colors with opacity(alpha channel. rgba(255,0,0,1.0) css property: background-color:rgba(255,0,0,1.0);
Responsive style media query in stylesheet
/**********************************//***************iPhone Landscape*************/ @media only screen and (max-width: 767px) and (min-width: 480px){ } /***************iPhone Portrait**************/ @media only screen and (max-width: 479px) and (min-width: 320px){ } /**************iPad Landscape***************/ @media only screen and ( max-width: 1024px ) and (min-width: 986px){ } /********************************************//**************iPad Portrait***************/ @media only screen and (max-width: 985px) and (min-width: 768px){ }
Browser Specific styles inside stylesheet itself
style specific mozilla ======== @-moz-document url-prefix() { } style specific chrome ======== @media screen and (-webkit-min-device-pixel-ratio:0) { div{top:0;} }
Position change effect once hover on the div
Include below css in your stylesheet for hover for the div: .form_social img:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); top: -10px; } .form_social img { width: 32px; margin-top: 3px; }
Bounce effect for a div once over the mouse on the div using CSS
Add class “bounce” for the div in which you need to add bounce effect, and include below css in your stylesheet: .bounce { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .bounce :hover, .bounce :focus,.bounce:active {…
CSS media queries not working
Add following meta tag inside head tag : <meta name=”viewport” content=”width=device-width” />
Adding page pre loader image in websites while loading
code =========================== <div id=”site-loader” class=”load-complete”> <div class=”load-position”> <div class=”logo”><img src=”Image url” alt=”Title”/></div> // Provide Image url and title here <h6><?php _e( ‘Please wait, loading…’, “Title” ); ?></h6> <div class=”loading”> <div class=”loading-line”></div> <div class=”loading-break loading-dot-1″></div> <div class=”loading-break loading-dot-2″></div> <div class=”loading-break loading-dot-3″></div> </div> </div> </div> style ================================ .load-complete { position: fixed; overflow: hidden; background: #fff;…