Due to difference between CSS media queries based on max-width and jQuery’s ‘$(window).width()’ measurement (caused by the inconsistent ways in which browser media queries handle scrollbars), there is always a mismatch between ‘jQuery $(window).width()’ and CSS3 Media Queries. Which in turn causes some ugly or unexpected behaviour by your responsive website.
Category » HTML – CSS
Convert an image to grayscale using CSS
Here is simple CSS rule to convert an image to grayscale using CSS or making image appear as black and white. As far as CSS filters are supported in webkit browsers, this solution is cross-browser.
Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar
Twitter Bootstrap is powerful mobile first front-end framework that provides all the necessary components to develop responsive websites using its common elements. One of the most popular elements on any website is the top navigation bar and the search widget. On a recent project, I had to implement Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar and making the search bar fixed across different screen size.
Difference between “display:none”, “visibility:hidden” or “opacity:0”
In HTML, We need to hide and show the elements according to our requirement and we achieve this with different ways. An element could be hidden with “display:none”, “visibility:hidden” or “opacity:0”. But these options are used according to their requirement because their usage are different.
Post and price tags using CSS3
You can create post and price tags using CSS3 and place them into your blog, ecommerce website or any other kind of website. This is a rather simple CSS trick which uses :before and :after pseudo-elements to draw triangle and circle in post and price tags we are creating here.
Embed base64 encoded images
Most modern desktop browsers such as Chrome, Mozilla, Internet Explorer supports images encoded as data url. But there are problems displaying data URLs in some mobile browsers like Android Stock Browser.
Here we are presenting that how we can embed base64 encoded images in various platforms.
Implement styles on parent tag if it has children
We need to implement the css things based on the condition that the parent tag has a child or not. For the same,I faced an issue of implement styles on parent tag if it has children.
I found many tutorials for solving this problem using jQuery or javascript. But I was looking the solution using css.
Add arrow in anchor tag using css3
In every website, we use menu and other things with ordered/unordered list. For displaying nested or next level, we need to place the arrow to indicate next level. We can add arrow in anchor tag using css3.
Prevent anchor in an iframe from scrolling the parent window
I was building a page in a website. In that page I was loading a page inside an iframe. The page inside iframe had an anchor (http:/fellowtuts.com/test.html#specific_content) as well. When I used to click on the anchors within the iframe to reach the specific content section, it was working in firefox browser smoothly but working with a undesired behaviour in chrome and internet explorer browsers. In chrome, it was scrolling the parent window to top along with Iframe’s content.
Offsetting anchor hash tag links to adjust for fixed header
Sometimes our website has a fixed header or navigation menu that usually remains fixed at the top of the page. When you use the URL anchor (the #fragment part), the browser window will scroll itself (instantly) to bring anchor at the top of the page, leaving the content behind the fixed header. So here we need for offsetting anchor hash tag links to adjust for fixed header to let content appear below the fixed item.
[ Page 4 of 7 ]