Hello, This post is about Google Web Font API. Google make things simple for any organization or individual thats why lot of people love this company. One of many initiative from Google is its Web Font API. As a Programmer I've using Fonts like Arial, Calibri, Sans-serif etc to style my DOM elements, but if I ever need a non standard font then I would have to buy it and import it within my CSS code as font-faces. With Google Fonts we get hold of many Top end fonts for FREE. People contribute to the project and thus we got to use them. This post is about how to use Google Fonts First option is to Link directly to the CSS files This options is very simple and you just need to create a link to the font definition files. One of my personal favorite font is Monda quite new but gives crisp to your Header tags So to include the CSS Files you just need to click "Quick use" and copy the link definitions as shown below [crayon-64833f044c6bb104698184/] Alright so that was pretty simple. But here is something that you would like to know. When doing things like above there are two HTTP requests involved. Let me tell you what it means. In you browser just paste the URL from link href directly in your browser address bar you will get something like this [crayon-64833f044c6c0467509319/] No as you can see that font-face have a property called src which is pointing to another themes.googleusercontent.com URL so the first HTTP request was to load the font-face definition and second was to load actual font from themes.google..... But if would just copy font-face definition in your CSS then that would save you ONE http request. Usage You can use Monda on an H1 tag as shown below [crayon-64833f044c6c1195773055/] Second option is to Use CSS @import and you can simple add reference to our Monda font as shown below [crayon-64833f044c6c3839498698/] This also will result in couple of http requests so above rule … [Read more...]
Google Web Font API – A super cool way to make use of new fonts in your web pages
HTML5 attribute hidden equivalent to CSS’ display:none
Hello, While I am becoming more and more aware of some of the key features of HTML5 I would like you to know that there is a new attribute that you can make use of which is called [crayon-64833f044cb40880889072/] This attribute serves exactly the same thing that our old friend display:none does So in CSS we used this [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044cb44896594337/] And then we apply the above style to an element as [crayon-64833f044cb45486394796/] Now lets do the exact same thing with our new HTML5 friend "the hidden attribute" We can use hidden attribute 3 ways. As bool [crayon-64833f044cb46264668211/] As string literal [crayon-64833f044cb47946185288/] or as an empty string literal [crayon-64833f044cb48887921892/] Browser support No surprises here that IE does not support it. All other major browser do support it which includes firefox, chrome, opera, safari Using hidden attribute With jQuery This is pretty simple and we will do it the standard way we add attribute to an element Here is a quick example [crayon-64833f044cb49706303151/] As you can see that the element with ID hide_this_element will not appear on the page as a result of above jQuery code. jQuery with fallback [crayon-64833f044cb4a611090271/] [crayon-64833f044cb4b517045989/] [crayon-64833f044cb4e359820041/] I am in double mind to use it because there are few HTML things that when kept to HTML core looks more syntactically correct but anyone can argue on this point. I will. For the time being though I will still be using my beloved CSS display: property. It will be another few years before we see standards getting adopted by major browsers as soon as they become standards. I hope :) I hope that you find this writeup useful. As always your comments are always welcomed Cheers. … [Read more...]
persisting DIV on scroll with jQuery
Hello, I sometimes find it interesting why many sites want to persist some HTML container while user scrolls. By persisting what I mean to say is that say you got a very useful navigation that applies to a subsection of your page and you want to detach it somehow so that user don't have to scroll up to access it again. This is exactly what I will be showing you today. Idea is simple and we will make use of our friendly jQuery function called scrollTop() There are two things I want to show you today. Persisting Single Element on page scroll Persisting section headers Detaching single Element by ID By this what I mean is that we will be detaching one single element when user scroll reach that element. Ok so lets check out what need to be done The HTML This is not a full page HTML so for demo purposes this should be enough [geshi lang="html5" nums="1" target="_self" ] [crayon-64833f044ccb0865148359/] [crayon-64833f044ccb2052129263/] The CSS There is only one class thats required. You can also opt for jQuery(Element).css() if you like. [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044ccb3682659860/] The jQuery Code [geshi lang="jquery" nums="1" target="_self" ] [crayon-64833f044ccb4505658157/] Above example is pretty straight forward for me to try to explain whats happening. Here is a demo for you to try Demo http://jaspreetchahal.org/examples/jquery-examples/detach-div-single.html Persisting section headers This is a little bit trickier. I came up with a solution and did some research to see how others do it. I then modified my code a little bit to come up with this. Lets check out the required HTML, CSS and jQuery code required for sectioned header persistence The HTML Rather than making it full page HTML lets keep it simple to this [crayon-64833f044ccb5593905782/] Couple of things to note here. First, we have class name detach-container added to the parent … [Read more...]
Making textarea,div width 100% with padding CSS tip
Hello, As you may be aware that textarea are used in almost every web application that accept user input through forms. This is also true that we want to set textarea width to 100% most of the time but there is a stubborn problem associated with it and that problem is internal padding of textarea. Lets consider this markup The markup [geshi lang="html5" nums="1" target="_self" ] [crayon-64833f044cf85336055513/] [crayon-64833f044cf88372418697/] Ok so that we have HTML to work with we should look at the CSS magic. but before that I would like to add something here. Notice I have used in style (this is just for my examples) and added a padding to both textareas above. This is intentional because what happens is that if you try to put 100% width to our textarea then because textarea's will be stretched from where the content start thus padding and border are generally added to the final with because out textarea is in a content-box mode by default. So the final width is calculated in this manner [crayon-64833f044cf89657775748/] This is not what we wanted right? there is solution to this problem and is shown in the CSS below [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044cf8a539833886/] As you can see that we are making use of CSS property box-sizing which is fixing our problem with our textarea width because it is considering our textarea as a box literally neglecting any styles applied to it. Definitions Definition from w3schools explaining content-box and border-box is below Property Value Description content-box The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height border-box The specified width and height (and min/max properties) on this element determine the border box of the element. … [Read more...]
best 3 ajax loader GIF generators
Hi Guys, My likings to these online fabulous tools are based on Simplicity Number of customization options and finally how good the result looks like Ok so lets go ahead and check them out First on the list is preloaders.net This is the best tool available to generate animated ajax loading GIFs http://preloaders.net gives you all the options I guess, that you need to create a good looking ajax loader. Its simple to create an animated GIF Pick a Category Select you preloader Customize it and Hit that big blue button "Generate preloader" and then you are able to download it. Second on the list is ajaxload.info Not as advanced as preloader tool but its simple slick and works. Not many options to play with but what you see is what you get. Its a great tool if you don't understand the options available from my first choice. I recommend to take this tool for a spin. I am 100% sure that you will find it quite useful in long run. URL: ajaxload.info Third on the list is cssload.net URL: cssload.net This online tool has less customization options than what you see in preloaders tool but if you are time savvy nerd and want something that is CSS only and you like what you saw in the templates window as shown below then its the fastest of all tools to generate a animated ajax loader but the catch is that its CSS only and rely on native CSS animation (transition capabilities), The best thing about this tool is that its got a live preview i.e. what ever changes you are making to your spinner you can see them all happening right in front of your eyes so there are no surprises at the end when you are ready to download the CSS code for your spinner. Please note that your Spinner will not work on older browsers that don't support CSS3 Other tools such as http://loadinfo.net/ could be useful too, it all depends on what you are trying your final animation to look like Conclusion Of all the tools that I've tried to … [Read more...]
HTML5 CSS3 glowing border for input text, textarea
Hello, CSS3 and HTML5 are two technologies which I am trying to mater but there is so much to cover. I write post of these sorts so that the thing that I learned today stick with me. Someone said that "A dullest pencil is better than a brightest memory" - so my writings serves as notes to me more too often too. In this post I am going to show you how you can make your textfields and textareas glow when they get user focus. The output will be something like this Ok so lets let back to business. Let take the markup below to start with The Markup [geshi lang="html5" nums="1" target="_self" ] [crayon-64833f044d0c7242833847/] Now lets see what will make them glow. I will through 2 themes but you can change colors based on your website's theme The CSS - Grey theme [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044d0c9715098199/] The CSS - Red theme [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044d0ca713847224/] The Demo Demo for the above code can be found here http://jaspreetchahal.org/examples/css-examples/glowing_form_input_textarea.html Notice the way I used attribute autofocus in the first textfield in our example markup? If you want to learn more about this attribute please read this. http://jaspreetchahal.org/html5-auto-focus-textfield-textarea-example-without-using-javascript/ If you would like to add more to the above examples please do so using comments section. I hope that this helps Cheers, … [Read more...]
Using font awesome as icons to beautify Input boxes
Hello, Well first of all thanks to creator of font awesome who has developed such a wonderful font that we can use and get rid of those images that we used for past many many years to beautify our buttons, informational messages etc. Its HTML5 and CSS3 days now and all is starting to make sense now. Purpose of this post is to show you how we can use font awesome to beautify a HTML text field or a HTML number box or similar. Its not exactly a background image but our Font awesome icon will be placed on top of our input box so that it act as one. Ok so if you have no Idea what I am talking about you should check this out and comeback to finish reading this post OR just finish this post and then visit the link below :) http://fortawesome.github.com/Font-Awesome/ Alright so lets get started here First download fontawesome from the URL above. Font awesome is a font library with CSS wrapper that was first created for Twitter bootstrap (http://twitter.github.com/bootstrap/) and offers many advantages. Some of the advantages are highlighted below With one single font you get 220+ vector icons, that means it does not matter how big you want to make your font size the quality will not deteriorate. Its absolutely FREE for commercial use. I would suggest you though to make generous donations because this type of stuff takes a while to build and what more satisfactory than supporting a good souls those are making their work freely available. CSS wrapper. i.e. you don't do anything with the font directly and use CSS to manipulate your icons. It comes with IE7 support (A stroke of a genius) and much more Alright lets jump into some depth now with some examples that I assume that you are not using twitter bootstrap at all. Here are the installation instructions Download and extract fontawesome somewhere on your harddrive Now Copy the Font directory into your project. Copy font-awesome.css into your project Open font-awesome.css and edit … [Read more...]
CSS cross browser opacity example
Hello, While I am working on a project one of the requirement is that make the site look and feel as much compatible with Internet Explorer 7. IE7 Yeah! Well nothing against the browser because its Free and still lot of people use it. I myself am not fan of IE7 but IE9 and 10 are on right track I guess. I am Chrome lover. Anyway this post is not about the browser comparison but rather I just wanted to highlight how we can make the element opacity to work in majority of the browsers. Alright so lets check it out. For the example I worked on below is the mark up used The Markup [crayon-64833f044d80c761541338/] I wanted to display an overlay on my image with text "Copyright © jaspreetchahal.org" lets check the CSS for the above [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044d80f262518695/] All the major browsers now support property opacity but this was not the case some time back. But still if you are looking to make your website to work on many old browsers that some people still use then making use of browser specific CSS properties is the right thing to do as we did with the opacity property above Lets check the result of the above styles Demo Demo can be viewed by click the link below. http://jaspreetchahal.org/examples/css-examples/cross-browser-element-opacity.html I hope that this will help you in one way or another Cheers Advertisement … [Read more...]
CSS Stitched Look for elements
Hello, While I am still on subject of CSS and pseudo elements I thought I should share another CSS snippet with my readers. This snippet will transform your elements to a stamp look or you can call it a stretched look. Here is quick result of what we are going to create Now you can make adjustments to your likings when you edit the source Ok let check our the CSS first Advertisement The CSS [geshi lang="css" nums="1" target="_self" ] [crayon-64833f044d91e004301885/] To create gradients for the backgrounds I always use this awesome tool that you can browse to later after reading this whole post. http://www.colorzilla.com/gradient-editor/ Lets now check the Markup required The Markup [crayon-64833f044d920316694165/] Pretty easy right. This is my last post dedicated to :before and :after pseudo elements. If I come up with something interesting in future I will definitely share again. Lets check the demo with few variations Demo http://jaspreetchahal.org/examples/css-examples/css-stitched-look.html In the above demo page I've made few basic variations so that you get the taste what else you could do. I hope that you have enjoyed the last three posts covering few tricks that you can use to do some interesting stuff with CSS pseudo elements. Cheers, Advertisement … [Read more...]
Recent Comments