Tag Archives: CSS3

CSS3 Filter – Invert support in Internet Explorer 10+

CSS3 introduced one of the very fancy feature to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone happy about it.

Here is the list of browser that supports this feature:

  1. Chrome (prefixed)
  2. Firefox
  3. Safari
  4. Opera

and then we have Internet Explorer which still hasn’t put it on shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.

Statements from IE:

I had an requirement to invert white images into black. This was when user switches themes on the website. Hence created this small useful plugin that takes the current image and uses SVG filter solution to invert it into black.

Check out:  InvertImages

Usage is pretty simple.

Let us say you have an white image:

<img src="images/icon-home.png" alt="Home Page" class="icon-home">

And you wish to change this image into black, all you have to is:

$("img.icon-home").invertImages();

For more options, please read this Wiki:  InvertImages jQuery Plugin Wiki

IT FITs Version 2.0 – Our most popular responsive template

It’s been a while but it’s here finally. Version 2.0 of our most popular HTML5 CSS3 Responsive Template.

Major updates since last version:

  • Updated Typography
  • Added large display responsive support
  • Dropped IE8 and older support
  • Removed flashy transitions.

DEMO

If you find any issues and want more features, submit them here in Github – https://github.com/cssjunction/It-Fits

DOWNLOAD

CSS Icons for Better Web – Part I

Recently, I have been busy working on several mobile applications – both web and native apps. Most of them was User Centric and app was allowing them to set their own themes. This made my job as a CSS Developer a little trickier as I was using several icons with CSS sprites. Trying to come up with a better solution on how can I get rid of limited opportunity given by image sprites – I made a decision that CSS Icon should play the role here.

Here is why I chose to do the same:

  • Very first, it’s very best for performance as there wont be any HTTP request and
  • CSS icons are modular – we can reuse and remake/style it based on condition.

Today, I am going to share some of very basic icons – that we can create using CSS and use it right away- the way we wanted. This is a series of posts, will be posting more on coming days – more icons with CSS.

Mean time, you can check CSS3 Document Icon, written by me for Nettus+.

Quick Preview

Preview of CSS3 Arrow Icons

Above preview, if you try to produce by using image icon – you gotta use 4 different images. But if you write by CSS, NO IMAGE is required. Even if you need to change the color and you did use image, you will need another set of images with color changed in Photoshop and reusing – causing bit more load to your page. By CSS – you can have as many colors as your want – much more efficient, efficient – that’s why I called it – CSS Icons for better web.

How to  – Steps:

  1. A simple class with border on right & top – no background.
  2. Then Rotate it to different angles (45 for right, 135 for down, 225 for left and -45 for up.)

Lets Do it.

1. Any Element with Class .arrow

<i class="arrow"> </i>

Your CSS

.arrow {
    display:inline-block;
    width:7px;
    height:7px;
    line-height:7px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Now create three more classes with different different rotation and apply to HTML along with the main class.

.arrow-down {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.arrow-left {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.arrow-up{
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

Changing the arrow color on HOVER, (See how easy – think what we used to do with images):

.arrow:hover {
    border-color:#444;
}

You can see the final preview here (See in Result Tab):

And Here is a useful demonstration, (using :after pseudo element instead of separate HTML element to keep markup clean and more semantic) (See in Result Tab):

It Fits :: Free HTML5 CSS3 Responsive Template

We have something very special today for all of you great visitors. Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features. Even icons are fonts – hmm super fast page loading.

UPDATE: New Version 2.0 of this template is available.  Check Version 2.0 –  IT FITS.

HTML5 CSS3 Template

Page you will have:

  • Home page
  • Portfolio page
  • Regular page
  • Blog page
  • Contact page
  • 404 page – (default from HTML5 Boilerplate template.)

I have used LESS css for this projects – for better and faster CSS coding, but you will notice there is pure CSS file is in use. Reason – what I used to do is I do code in LESS and compile it using any software like WINLESS and then I use the compiled pure css files. When you download the template source code, you will find three .LESS files but all complied in one css file that is main.css.

Too much talk? Head over now:

Demo

Browser compatibility:

All modern browser works fine. Responsiveness is missing from IE7 and IE8. IE9+, Chrome, Firefox, Opera, Safari works fine. You can see how it looks on the smaller device by re-sizing your browser. Or head over to The Responsinator, then give the demo URL and see.

In terms of visual appearance, IE7 and IE8 has graceful degradation – no support for CSS3 so as, but template presentation is fine.

IE6??? I don’t talk about it.

That’s it guys – not much talk. This theme has been released under Creative Common  CC 3.0 Attribution (by) license, so feel free to use anywhere.

Download now

Let me know your views and feedback. Please follow us @CSSJunction, if you want to follow the author of template – @shekhardesigner

More HTML5/CSS3 Templates: