Hi Guys, Everyday we learn something new and this is those day that I learned something and would like to share. I never really had this situation or use case before that I had to rotate a text inside a DIV or in any other container. So the requirement came up with the new Wordpress plugin I am developing for myself. Let see how this is done. First the proposed property is called transform and is available in webkit and Mozilla browser with their prop prefixes i.e. -webkit and -moz Lets check out the CSS to anticlockwise rotate text by 90 degrees i.e. Now lets check the markup Ok So when you try to load the above in FireFox or Chrome or Safari all works well but in IE it doesn't work that well because as usual IE has no support for transform property. But IE has its own filter for this stuff to work. Here is what you can do. You can do a check on IE and add IE filter to the style above. This is how its done The end result is shown below I hope this helps Advertisement Further reading on this topic http://www.thecssninja.com/css/real-text-rotation-with-css http://css-tricks.com/date-display-with-sprites/ Cheers … [Read more...]
CSS Circle example trick
Hi Guys, I was just wondering how can we create circle purely in CSS. While I am still learning CSS but this was no brainer. Here is the final result Here is the code for this. I have done that in hurry so this can be improved. I hope this will help you clear some fundamentals of using CSS where it can be used. Now compare this to adding an Image to do the same thing, that will have some bandwidth cost associated with it. I know the above circle looks boring so lets spice it up further Add this code to above styles Advertisement Result will look pretty impressive in all browsers but IE here is the result Thanks for reading, Cheers. … [Read more...]
CSS Cool 3d Ribbon Example
Hi Guys, So I thought I should share a cool 3d Ribbon with you guys, Final result looks like this Advertisement Here is code for what I've done. Well this is a known technique so I guess you will find it really similar to some others out there. I hope above stuff helps. Cheers, … [Read more...]
CSS3 Search Box
Hi Guys, For another website that I launched today I wanted to have really cool CSS based styled Search box. So I designed one for myself and thought its worthwhile to share. The final product look like this If you don't like the above outcome you can edit the CSS to suit your design. Below is the code for this search box For IE there is only a slight variance in looks because it clearly don't support background gradients. SO to look atleast OK in IE I've made one IE specific change. You can change backgrounds to suit your theme, its really easy to change. Tested on IE9, Firefox and Chrome. Should work fine on I hope this CSS3 search box will help you. Please leave you comment to give me feedback. Cheers, … [Read more...]
autosize background image css3
G'day fellas, This post is a quick tip if you are interested in providing a Background Image to your website and you want it be resized accordingly when a user resize his/her browser. In old days this wouldn't have been possible through CSS at all and we have to do lot of workarounds to make that happen. In CSS3 it is possible and even easier than ever. I will take you through CSS property background-size Browser support has grown for this CSS property, with the latest versions of all big browsers now support background-size, including Firefox, Chrome, Safari, Opera and yippi IE as well, without the need of browser specific properties. background-size property value can be one of these auto contain cover inherit initial We will concentrate on auto, contain and cover. background-size: auto; When you set background-size to auto (this is the default value) this means that the background image is shown at its original size. e.g. CSS to elaborate this A working example is shown here http://jsfiddle.net/upqUc/1/ background-size: auto; is equals to background-size: auto auto; bottom line is that if you do not mention second auto it is added by default. Now lets jump on to background-size: contain; If you use contain value for background-size property that means that your background image is scaled. While scaling it preserves the image’s original proportions and the aspect ratio. Image can go as large as possible as long as it is contained within the background positioning area. What I mean to say is that Image's actual width and height never exceed the viewing area. there may be some areas of the background which may not covered by the background image depending on whether or not the proportions of the background image are matching those of the background positioning area. background-size: cover; If you end up using cover value for background-size property, then the background image is … [Read more...]
5 Best jQuery CSS3 Navigational Mega Menus
I had a choice earlier either to create a mega menu myself or find a useful one from online community. So I looked and looked and found few that are really good. With some CSS updates you can change the look and feel of these navigational menus without a hitch. I really like the ones I've mentioned below. I hope you'll like them too. So lets see what my favourite list #1 CSS3 Mega Drop Down Menu I like this one because it is pure CSS3 and even works on IE6. This is the one that I am currently using in one of my projects. It's real breeze when speed is what you are looking for. Advertisement #2 jQuery Mega Menu 2 This one is really nice but you can make it even nicer if you know some CSS. CSS is really simple and the effects when you hover on menu are customizable. Speed wise it rocks too. I am really impressed with this one. Other thing that rocks with this menu is its automatic alignment that aligns to its parent menu container width. Advertisement #3 jQuery Mega Menu with overlay effect Well if you are looking for a sleek mega menu with overlay effect, you must read this tutorial. Effects are smooth while you hover. I will prefer this one on any of my other project where the requirement is for navigational mega menu with an overlay effect. #4 Vertical jQyery Mega Navigational Menu This is really a cool vertical jQyery menu. The colors for this menu are really good. Do check it out #5 Large Drop Down Menu This is really cool, sleek and very appealing. Just to get a feel you must check it out. Really fast, clean HTML and CSS code which is really easy to modify I am quite sure that you will end up using any one of the above. If you would like to share what you are using please leave your comments Cheers … [Read more...]
Recent Comments