CSS3 Using attr() function with content property

Hi Guys, While working on css3 pseudo classes I came across this beauty, that could be handy just in few cases. You can read more about attr() specs here http://www.w3.org/TR/css3-values/#attr Anyway lets talk a little bit more about this function. Key things you should remember are In CSS3 attr() can return different types in contrast to CSS2 implementation where it would only return string Purpose of attr is data related not presentation related It must be used with attribute names such as data-*  There is better way to understand other than when its shown implemented. Consider this example The Markup We will work with a basic markup and will only define a DIV as shown below [crayon-545308e4ebf39443906580/] [crayon-545308e4ebf4b955965623/] Nothing complicated in our DIV above. The only thing you should note is that I defined few custom attributes such as data-name, data-href, data-phone  The CSS Now lets check the CSS side of things [crayon-545308e4ebf57980105846/] As you can see that we are using our attr() with content property and we are making use of our custom attributes and using them as fill values for blanks. Demo See above implementation in action by visiting the example page below http://jaspreetchahal.org/examples/html5/attr.html As you can see that CSS is becoming more powerful with every release with functions such as attr() being added/improved. I still sometimes wonder if that is actually an overhead when performance is something that you are looking for. I hope this helps   … [Read more...]

Using Font Awesome Icons in HTML5 Lists

First there is no difference as such in HTML4/5 lists as far as my knowledge goes. They render the same way so the title of this post is not misleading but I am just trying to stay up with the latest :) Anyway this post shows how to use Font Awesome in your Ordered or Unordered lists. The result will look like this First things first, if your browser does not support CSS pseudo classes then this approach will not work. You will be glad to hear that most of the latest browsers including Chrome, IE, Firefox supports them. If you have don't know what pseudo classes are then go look at this little tutorial http://www.w3schools.com/css/css_pseudo_classes.asp Anyway lets get back on track and see how the above is done. I assume that you correctly have included bootstrap, font awesome files on your HTML5 page. The Markup [crayon-545308e4ed4fa977213675/] above is really basic markup that is required. I've added more lines just so it looks nice in the end. Now lets take a look at our CSS The CSS Here is the CSS that is required to give us the required result. [crayon-545308e4ed50a123557046/] The most important bit in the above CSS is the use of psedo class :before and content that should go before each list item. Demo http://jaspreetchahal.org/examples/font-awesome-list.html A near full list of content values is pro Font Awesome Content Values - Quick reference - Without icons though Here is the Content values of icon- fonts, To integrate check this page out http://fortawesome.github.io/Font-Awesome/#integration icon-glass --> "\f000" icon-music --> "\f001" icon-search --> "\f002" icon-envelope --> "\f003" icon-heart --> "\f004" icon-star --> "\f005" icon-star-empty --> "\f006" icon-user --> "\f007" icon-film --> "\f008" icon-th-large --> "\f009" icon-th --> "\f00a" icon-th-list --> "\f00b" icon-ok --> "\f00c" icon-remove --> "\f00d" icon-zoom-in --> "\f00e" icon-zoom-out --> … [Read more...]

CSS photoshop like selection effect on divs

Hi Guys, I am not sure why you would do it other than to get user attention on specific part of your HTML page. I found those little animated borders annoying anyway but they do work to get attention of your website visitor. This post talk about it. We will be looking at a selection animation using GIFs added as borders to your DIVs First of all much thanks to Mathew James for being such an inspiration and providing free GIF files needed for this effect. Anyway lets get back to the point and start doing some real work The Markup [crayon-545308e4ee153516159600/] [crayon-545308e4ee168474239669/] No rocket science understanding the above HTML. its simple and straight forward. The CSS   [crayon-545308e4ee174474771994/]   Result [raw]   [/raw] Demo can also be reached from this URL Demo on separate page http://jaspreetchahal.org/examples/css-examples/anim-border/css-border-animated.html Download Background Image used is given below for you to download   I hope this helps Cheers … [Read more...]

CSS3 form field highlight spotlight on focus HTML5

Hi Guys, Well there are times when you want to add some sort of interactivity to your webpage, one of those is when you introduce modal windows, where user fills up something and take any action "in form" of hitting a button or something. Long story cut short is that you just want to highlight an area which you think is most important to the user. We will do something cool with our form fields today, that will give you an idea what I am talking about. The Markup Below is the basic easy to understand markup that has nothing but form fields as shown below [crayon-545308e4eedee155523759/] Nothing unusual that you couldn't understand above Now lets check out the CSS part and that is the most important one to introduce our so called dialog mask for textfields/textareas etc The CSS The only CSS bit or style that is required is listed below   [crayon-545308e4eedfe405957091/] Result   Demo Here is a quick demo to what I am talking about. http://jaspreetchahal.org/examples/html5/formfieldfocus.html Tested on All major Latest browsers   I hope this little trick is anyhow useful to you :) Cheers, … [Read more...]

HTML5 Canvas Gradient Transparent Mask Over Image

Just thought I should share this tip with you, Now that I have been playing around with Canvas Object in HTML5 for a while I think more tips like these will flow as they used to in past. I've been working on a jQuery plugin that will offer something cool, stay tuned for that. This post technique is backbone to that plugin. Anyway lets get back to the point without wasting more time. Problem Canvas Gradient  transparency that could be used as Mask Step 1 Lets get our Canvas read and draw an Image on it Markup [crayon-545308e4ef574755063019/] Draw Image [crayon-545308e4ef583353472350/] By now you would have something like this Let now add our transparent gradient to out canvas object. Here is the code for that [crayon-545308e4ef590517484692/] Above code should go under where it says CODE SNIPPET 2 in first snippet. Here is the result You can play around with the colours, I've created a Pen at code pen so that you can mess around and find a suitable setting. You can introduce transparency on both or all 4 sides of above image. You can give it a try. I hope this helps, Cheers, … [Read more...]

Pure CSS3 Animated Social Tiles using Fontello social fonts

Hi Guys, First of all I would like to tell you how good Fontello really is. Yeah its awesome. The best thing I like about it is that you download/use what you really want and custom CSS class names is just an icing on the cake. I will show you in a second how I used Fontello and CSS3 to create social icon tiles. Fontello can be browsed through this link http://fontello.com/ I downloaded the following Fonts/CSS gplus linkedin facebook twitter You should be able to search and find by putting in the above text in the search field. The End result to what we are going to produce is shown below (Please note that this is a screenshot, Live demo is provided a little bit below) The Markup Here is the markup that will be required to achieve above result [crayon-545308e4efdce547812392/] Please note that anchor class names, this is where Fontello will kick in. That's pretty basic stuff for HTML gurus like yourself but the CSS stuff is even simpler and can be further simplified. Lets check it out The CSS [geshi lang="css" nums="1" target="_blank" ] [crayon-545308e4efdde695593741/] Nothing much really as you can see we are just making use of CSS transitions to give us that hover effect that we want. Now its time for a Demo, I have hosted the demo at codepen.io as well as here on this site, so If you want to play with the code please do so at codepen Demo http://jaspreetchahal.org/examples/html5/fontello/fonthover.html Playground You can play around with code edits and have fun with my pen hosted on codepen Download Source   I hope that this will help you out in some way. Please don't hesitate to correct/improve the above code if you think it can be further simplified. I don't spend much time doing that myself. Cheers.   … [Read more...]

CSS3 change text selection color

Hi Guys, There are times when you would like to override default browser text selection color. What I mean can only be shown with example. Try selecting the paragraph above. You will see something like this (chrome) Now say you would like to change that selection color to grey or red or any other color of your choice then how to do it Lets check it out Global selection color change You can add these styles to your page or to your Stylesheet file for page/site wide selection color change [crayon-545308e4f0569694559644/] This will have a page wide effect. Demo A demo can be reached from the link below http://jaspreetchahal.org/examples/css-examples/css-selection.html The result will be similar to the one shown below (chrome)   Now that was with changing text color globally lets do the same thing with individual paragraphs say you have a markup as shown below . [crayon-545308e4f057c139943548/] [crayon-545308e4f0587609173145/]   change selection color for individual elements on page Now to change selection color of above two containers I'll have these style in my spreadsheet or on my page   [crayon-545308e4f0591117870959/] The result will be this (chrome)   Demo is provided below   http://jaspreetchahal.org/examples/css-examples/css-selection-individual.html Browser support All major browsers in the latest versions support this behavior   I hope that this help. If you have any questions regarding this post or would like to mend anything please leave your comments cheers,         … [Read more...]

twitter Bootstrap site is non responsive on phones and tablets

Hello, This is more of a question of whether you are using correct meta, styles and javascript lib or not on your pages. Generally nowadays you will use CSS frameworks like Bootstrap and rely on them for responsiveness of your pages. Lets see what's bare minimum requirement for your pages to work and look good if you are solely building your pages with twitter bootstrap The CSS You should be including the responsive CSS stylesheet provided with bootstrap [crayon-545308e4f1672048528438/] and then you should include jQuery and bootstrap.js files on your page before the body end tag as shown below [crayon-545308e4f1683779792142/] Don't forget to add viewport meta tag in your head element as shown below [crayon-545308e4f168e369454189/] So the bare minimum HTML template for twitter bootstrap is shown below   [crayon-545308e4f1698739613368/] In addition to above you can also put a mobile friendly icons links as shown below   [crayon-545308e4f16a4145929098/] so the final template will be [crayon-545308e4f16ae106392269/] [crayon-545308e4f16ba682135573/] The above should also be included inside the head element. Now when you try to view your site on your iPhone or Android phone you will see your site behaving properly layout wise. Always try to use bootstrap grid system for column based layouts.   Resources http://twitter.github.com/bootstrap/index.html If this post needs any correction please let me know by leaving your comments. I hope this helps Cheers.     … [Read more...]

Google Web Font API – A super cool way to make use of new fonts in your web pages

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-545308e4f24eb271114498/] 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-545308e4f24fa744946113/] 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-545308e4f2506875594917/] Second option is to Use CSS @import and you can simple add reference to our Monda font as shown below [crayon-545308e4f2510129788431/] This also will result in couple of http requests so above rule … [Read more...]

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-545308e4f31ad923842597/] 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-545308e4f31be250981307/] And then we apply the above style to an element as [crayon-545308e4f31c9631294211/] 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-545308e4f31d3244575173/] As string literal [crayon-545308e4f31dd167603305/] or as an empty string literal [crayon-545308e4f31eb485582586/]     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-545308e4f31fe689900237/] 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-545308e4f320b271843914/] [crayon-545308e4f3215395000209/] [crayon-545308e4f321f826083531/]   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...]