Implement a Blur or Filter Effect on an Image Using CSS3

Published August 10, 2017 by saurav.roy.

It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like photoshop filters. The filter CSS property lets you apply graphical effects like blurring, sharpening, or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. This short post shows how to apply blur filter and combination of blur and greyscale filter on hover on image using pure CSS.

HTML Markup

Let’s start off by creating the HTML markup. Define two image tags with CSS class blur and blurGrey respectively. These CSS classes are also applied to 2 H1 heading elements. So, in case of mouse hover on H1 tag or image, the filter will be applied.
The image used in this demo is taken from FreeImages.

Blur on Hover

Blur and GreyScale on Hover

CSS

The filter property accepts a built-in filter function or a custom function. The function accepts a value which can be in percentage or a decimal value. To apply blur filter, we need to pass a blur function with some values. In the HTML, one of the image element and H1 element is having blur CSS class. As we want to apply blur effect on hover, therefore :hover selector is used. Inside the hover selector, pass a decimal value or percentage value to blur function. The bigger the number, the more blur would be there.

.blur {
 -webkit-filter: blur(0);
 filter: blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
 .blur:hover {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 }

The above CSS classes will apply blur effect on images. The CSS3 transition property allows you to change property values smoothly (from one value to another), over a given duration.
We can also pass multiple filter functions separate by space. This is required when multiple effects are needed. For example, to apply both blur and greyscale effects on image, pass both the filters. Like,

.blurGrey {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
 .blurGrey:hover {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);
 }

You can check out working demo here. There are other built-in filter functions to create different effects. Below is a list of all such built-in filter functions to choose.

• brightness() – To adjust the brightness.
• contrast() – To adjust the contrast.
• drop-shadow() – Apply a drop shadow effect.
• hue-rotate() – Applies a hue rotation on the image.
• invert() – Invert the samples on the image.
• opacity() – To manipulate the opacity of the image.
• saturate() – Saturates the image.
• sepia() – Apply sepia (redish brown color) filter on the image.
• url() – for applying SVG filters

Conclusion

To sum it up, we’ve just learned how to apply CSS3 filters to create a blur and greyscale effect on the images and H1 heading element. CSS3 filters are like photoshop filters and can be implemented very easily with a few lines of CSS code. We also saw a list of other built-in filter functions to apply different effects. Have fun!

Share and Enjoy !

0Shares
0 0

7 HTML Tutorials You Should Check Out

Published May 28, 2015 by saurav.roy.

HTML5 is the future of web development and provides endless inspiration for web development beginners. Even the giants in this technical field like Google and Apple are working with HTML5 for more advanced web development. But beginners can also learn how to use HTML5 effectively with tutorials and  example websites which are available. Here is a list tutorials that web designers shouldn’t miss.

1. Coding of HTML5 & CSS3 – One Page Website Template

Through this tutorial users can easily learn how to code a CSS3 and HTML5 for single page website templates. Even the demo is also downloadable.

html-tutorials

2. Future is in your Hand – Creation of an Elegant Website

If you are creative  then this tutorial is perfect for you. It will help users to learn the conversion of CSS & HTML from PSD and also will provide support to make your website as perfect with great ideas.

html-tutorials

 

3. Design of your Own iPhone Apps

 

How happy would you be if you could design your own iPhone apps by using this tutorial? Every beginner should try this at least once. By using HTML5 and some of the CSS3 codes, users can design some cool apps for iPhone. The release of this tutorial has generated a lot of excitement in the design community.

html-tutorials

4. Make some Unique Forms using HTML5

 

London-based web designer Inayaili de León created this tutorial that will help users to design HTML forms using some new CSS3 techniques.

html-tutorials

 

5. Be a Blog Designer- Using HTML5

Designing a blog often requires some tough choices. But using this guide can help design a blog with your original ideas and some new CSS3 codes.

6. The Technique that we all need: HTML5 with CSS3

During this tutorial beginners can learn how browser vendors implemented the finalized specifications of any website using HTML5 & CSS3 codes.

html-tutorials

 

7. Offline Web Application – An application to Grab

Beginning developers can learn how to develop mobile applications in offline mode using HTML5 standards with this guide.

This are the 7 most helpful tutorials related to HTML5 for beginners. Use a search engine to look for more. Hopefully these tutorials have provided help and inspiration to beginners who want to proceed with their web designing ideas.

Share and Enjoy !

0Shares
0 0

Creating Custom Flat and Flipping Style CSS Checkboxes

Published February 25, 2015 by saurav.roy.

In this tutorial, we will create some flat style toggle switches purely using CSS. Those switches could be used instead of the generic, dull looking, checkboxes.

Usually, while we are creating new websites, we use checkboxes to give users the option to select certain things on the site. Most of the time those standard checkboxes look dull: they just don’t fit in the websites’ modern and clean design. So, designers create their own stylish checkboxes or, in other words, toggle switches.

There’s no pure CSS way to style a generic checkbox. It’s an element whose style is managed by the browser engine, so different browsers would display the checkboxes differently. Wouldn’t it be nice to have smoother. cleaner checkboxes? Using some CSS tricks can easily solve that problem, and by combining the :checked, :before, and :after pseudo classes with our checkbox input, you can achieve beautiful toggle switches with smooth transition effects. So let’s get started!

Flat Switch

Flip Switch

Setting the Basics:
We’ll use the standard checkbox input with a label, and then we’ll wrap those label/input combinations inside a div. Each style will be targeted by a class that is attached to the input element. Labels will be targeted using the input + label selector targeting so they don’t need class names of their own.

   <div class="block-switch">
      <input id="toggle-flat" class="toggle toggle-flat" type="checkbox">
      <label for="toggle-flat"></label>
      <h4>Flat Switch</h4>
    </div>

    <div class="block-switch">
      <input id="toggle-flip" class="toggle toggle-flip" type="checkbox">
      <label for="toggle-flip" data-on="Yes" data-off="No"></label>
      <h4>Flip Switch</h4>
   </div>

For the CSS, we want the actual checkbox to be hidden, so, w’ll apply all the styling we want on the label. So clicking on the label will actually “check” or “uncheck” the checkbox. Here’s what we will achieve:

input.toggle {
  position: absolute;
  visibility: hidden;
}

input.toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Writing the style for the switch (Flat):

The label will be the container of the style so we give it a background color, width and height to simulate the border. Then we use the :before pseudo element to simulate the inner background of the switch which switches from red to green depending on the state. The :after pseudo element will be the white button that sits on top and slides from left to right on click. We’ll change the background color of the :before pseudo element and the position of the :after pseudo element when the input takes on the pseudo class :checked, and everything will transition smoothly. Just as follows:

input.toggle-flat + label:before,
input.toggle-flat + label:after{
  display: block;
  position: absolute;
  content: "";
}
input.toggle-flat + label {
  width: 100px;
  height: 20px;
  background-color: #BF2A23;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
input.toggle-flat + label:before{
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}
input.toggle-flat+label:after{
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 45px;
  background-color: #fff;
  -webkit-transition: margin 0.5s, background 0.5s;
  -moz-transition: margin 0.5s, background 0.5s;
  -o-transition: margin 0.5s, background 0.5s;
  transition: margin 0.5s, background 0.5s;
}
input.toggle-flat:checked+label {
  background-color:#00C176;
}
input.toggle-flat:checked+label:after {
  margin-left: 47px;
  background-color:#fff;
}

Result:

Flat Switch

Writing the style for the switch (Flip):
Now that we’re done with the flat boxed switch. We’re going to create flip switch. The default view will be red with “OFF” text, and the checked view will be green with “ON” text. When the label is clicked, the switch will flip over, spinning 180 degrees on its x-axis, revealing the opposite side. We’re going to populate the content of the unchecked/checked switch by using data-attributes. These data-attributes were specified in the HTML by data-on and data-off, each of which will populate the :after and :before pseudo elements respectively. We’ll use backface-visibility property on the :after element, which initially hides its back side due to its starting point at -180 degrees. Just as follows:

input.toggle-flip + label {
  height: 20px;
}
input.toggle-flip + label:before, input.toggle-flip + label:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 20px;
  color: #fff;
  text-align: center;
  line-height: 20px;
}
input.toggle-flip + label:before {
  background-color: #BF2A23;
  content: attr(data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.toggle-flip + label:after {
  background-color: #00C176;
  color:#fff;
  content: attr(data-on);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.toggle-flip:checked + label:before {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
input.toggle-flip:checked + label:after {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}

Result:

Flip Switch

Here is a codepen preview of everything put together!

That’s it! Now we created two flat design hope you enjoyed this tutorial.

Share and Enjoy !

0Shares
0 0

Cross-Browser Rounded Buttons with CSS3 and jQuery

Published April 22, 2010 by saurav.roy.

So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.

So let’s make it simple!

Right away I knew that I wanted to present as simple a solution for the developer as I could. I didn’t want to force them to use tons of extra markup in their HTML to pull this trick off. This was a piece of cake in modern browsers, as you’ll see in a moment. Unfortunately, this site also has a large IE user base, so I needed to account for less-modern browsers as well.

Border-Radius for Those Who Can

I decided I wanted to use border-radius for the rounded buttons for any browsers that could support it. I also decided that I wanted to create a single class, “button,” for any buttons, and it should work more-or-less the same on anchor tags, button tags, and “submit-type input tags. Read On…

Share and Enjoy !

0Shares
0 0

Show Your Google Analytics Top Content in WordPress

Published March 25, 2010 by saurav.roy.

Google Analytics Top Content on WordPress

If you’re a typical blog owner, one of your biggest goals is to keep visitors browsing your site. One of the best methods for doing that is to provide links to additional content on your site that your visitors might like. I’ve been doing this for a while with the “Related Articles” section at the bottom of every article (check it out if you haven’t noticed it before).

But many top-tier blogs also showcase their overall most popular posts. These are the articles that often bring in a lion’s share of the site’s traffic, so they must have something going for them, right?

There are a lot of plugins out there that help bloggers rate and publicize the popular content on their blogs. Alex King’s Popularity Contest is a perennial favorite, but it has a lot of overhead, and it often breaks when a new version of WordPress comes out. For that reason, I’ve stopped using it on my site. At one point I’d even written a simple WordPress plugin for my own use that tallied up the number of comments, trackbacks and pingbacks each post had and used that to determine “popularity.”

But let’s say you have a WordPress site and are tracking your stats with Google Analytics. You and I have that in common. If that’s the case, then you already know which pages on your site are the most popular. Google Analytics’ Top Content section makes it a breeze to see what pages on your site get the most traffic (Content -> Top Content, in case you haven’t found it before).

What isn’t as easy is to take that information and display it on your site. But earlier this week I figured out a pretty simple way by piggybacking on an existing popular Google Analytics WordPress Plugin. Read On…

Share and Enjoy !

0Shares
0 0

How To Emulate a Foreach Loop in JavaScript

Published January 21, 2010 by saurav.roy.

JavaScript does many things well, but one area I’ve always had trouble with is the array and array-manipulation department. For example, this weekend I was working on a project that required me to iterate through a JavaScript array and peform a set of functions on the values within. In PHP, that would have looked something like this:

$myArray = array("item 1", "item 2", item 3");
foreach($myArray as $item) {
	$item = "Do Something Here";
}

Nice and simple, right? All we’re doing is iterating through the array with the foreach() construct and replacing each item with the phrase “Do Something Here,” but you can see how this could/would expand. A similar construct exists in Perl, another language I grew up on.

But JavaScript lacks a specific “foreach” statement, which trips me up every time. So how do we fake it? Read On…

Share and Enjoy !

0Shares
0 0

Advanced jQuery Tabbed Box Techniques

Published January 25, 2009 by saurav.roy.

animated tabbed box interface

Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. Specifically, I’ll show you how to:

  • Make your tabs all the same height
  • Automatically rotate through your tabbed content
  • Stop the rotation when the user is interacting with the content

Equal Height Tabs

The tabbed interface we built last week was fully functional, but one nicety I’d like to add is the option to have all your tabs be the same height – a height that is determined by the content within the tabs, not any number I arbitrarily determine in advance. Read On…

Share and Enjoy !

0Shares
0 0

Perma-Closing Message Boxes with JavaScript + CSS

Published April 2, 2008 by saurav.roy.

message box

Earlier this week I talked a bit about message boxes – how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get annoying. It’d be useful to give your users the ability to close those messages. For that, we’ll turn to our friend JavaScript.

We’ll start by building our message box in XHTML. Mine looks like this:

<div id="message-1" class="msgbox">
	<a href="#" id="close" title="Close This">X</a>
	<p>My uber-important message goes here!</p>
</div>

I’ve made a div with both an ID and a class. This will come in handy later when we need to reference our object in our JavaScript. Inside, I put an anchor tag with a class of “close.” This will become my close button later. And then I simply added a paragraph to hold my message.

Next up, we’ll want to style that message box. You can make it look pretty much however you want, and Woork has a nice article on styling message boxes, if you’re interested in discovering alternative styles. For my message box, I wrote this:

.msgbox {
	position: absolute;
	top: 15px;
	right: 20px;
	width: 20em;
	background-color: #b00;
	border: 1px solid #333;
	color: #fff;
	font-weight: bold; }
.msgbox p {
	margin: 0;
	padding: 5px 10px; }
.msgbox a.close {
	float: right;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	background-color: #fff;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 0 4px;
	margin-left: 5px; }

Three rules are at play here. First, I’m styling the message box itself, using the class I gave it. I’m absolutely positioning the element and giving it a width. I’m also giving it a red background, bolding the text inside and turning it white, and applying a border. Then I’m applying a bit of styling to the paragraph inside to push it away from the side of the box.

Why didn’t I apply that padding to the message box itself? Because of the “close” link. I wanted to be able to float it to the right of the box and give it some styles to make it look more like a “close” button. After all of that CSS, this is what I have:

example message box

But so far, we just have a message box. That close button doesn’t do much of anything. For the rest, we’ll turn to JavaScript. All we need is a little function like this:

function closeBox(toClose) {
	document.getElementById(toClose).style.display = "none";
}

This function takes a single argument (toClose) which tells it the ID of the element we want to make disappear. We supply argument when we call the JavaScript. In this case, because we want it to happen when someone clicks our close box, we’d add it to our XHTML like this:

<a href="#" class="close" 
onclick="closeBox('message-1'); return false;" 
title="Close This">X</a>

We’ve added the “onclick” attribute to our “close” link tomake it fire a bit of JavaScript when the element is clicked. We’re telling it to call our closeBox function that we just wrote, and we’re giving it the ID of the message box we want to close. The “return false” part basically tells it to stop (that is, not to actually go to our specified href afterwards).

That’s all we need to create a message box that closes! However, if your users close the box and then refresh the page, the message box comes right back. What if we want it to close permanently? For that, we’ll need some more fancy JavaScript, because we’ll need to make use of cookies.

The cookie will act as a check that we can refer back to. When the user closes the message box, we’ll set a cookie. Then, when they come back to the page, we’ll check to see if the cookie is set. If there’s no cookie, we’ll show them the message. If there is a cookie, we’ll keep the message box hidden.

First, we’ll make a small change to our CSS:

.msgbox {
	display: none; /* Start out hidden. */
	position: absolute;
	top: 15px;
	right: 20px;
	width: 20em;
	background-color: #b00;
	border: 1px solid #333;
	color: #fff;
	font-weight: bold; }

All we’re doing is adding a “display: none” to the top of the element. By default, we don’t want our message box to show up. Instead, we’ll use JavaScript to display it if we want to see it. Why? It’s a usability thing: this way, if a user doesn’t have JavaScript enabled, they don’t see the message box. That may seem like a bad thing, but consider the alternative: if we didn’t set this rule, then anyone without JavaScript couldn’t get rid of your message box. And depending on its placement, that could be a big usability problem.

So now we need two extra functions in our JavaScript: one to set the cookie when we close the box, and another to check to see if the cookie exists when the user comes back. Our JavaScript now looks like this:

function closeBox(toClose) {
	document.getElementById(toClose).style.display = "none";
	setCookie(toClose, "closed", 365);
}
function setCookie(cName, value, expiredays) {
	var expDate = new Date();
	expDate.setDate(expDate.getDate()+expiredays);
	document.cookie=cName + "=" + escape(value) + 
	";expires=" + expDate.toGMTString();
}
function loadMsg(msgClass) {
	msg = document.getElementsByTagName("div");
	for (i=0; i<msg.length; i++) {
		if(msg[i].className == msgClass) {
			if(document.cookie.indexOf(msg[i].id) == -1) {
				msg[i].style.display = "block";
			}
		}
	}
}

First off, we modified our closeBox() function to make a call to the setCookie() function after it’s hidden the message box.

Next comes the setCookie() function. It takes three arguments: the name of the cookie, the value to be set, and how long the cookie should last before it expires (in days). We could have hard-coded some of this stuff to save time and space, but this way you can reuse this same function to set cookies all over your site – not just for this purpose.

Also, note that we’re using the toClose variable for our cookie name in setCookie()… which you might also remember is the ID of the message box itself. This is a useful trick, because this means you could theoretically have multiple message boxes with different IDs (all with the same .msgbox class) on your page, and you could open and close them separately, because each of their states would be set in a unique cookie.

Next comes the loadMsg() function. It takes one argument: msgClass. This variable represents the class you’ve set on all your message boxes. Our loadMsg() function cycles through all the <div> tags on your website and checks to see if they have the “msgClass” class set (whatever that happens to be… in my document, that was “msgbox”). If it finds such a div, it checks to see if it can find a cookie with a name that matches the ID set on that div – in our example it would be looking for “message-1.” If it doesn’t find a match (meaning the user hasn’t closed the box), then it sets that div to “display: block,” meaning it will show up normally. Otherwise, the message box stays hidden.

Now, all we need to do is ensure the loadMsg() function runs when the page first loads. To do that, I just modified my body tag like so:

<body onload="loadMsg('msgbox');">

The “onload” attribute fires when the page has finished loading, and it will call the loadMsg() function for us, displaying our message boxes as needed. And that’s all there is to it! You can see a functioning example here.

Now, I did want to mention a couple of things before you try this on your own:

  • I’ve built this example specifically to make it work with multiple message boxes. Otherwise, it would have been easier and faster to reference our message box by its ID in our loadMsg() function.
  • This obviously only works if your users have JavaScript and cookies enabled. If they have JavaScript turned off, they won’t see a message box. If they have cookies turned off, they won’t be able to get rid of your message box. And I don’t know of a good way around this usability problem. That’s just the way the cookie crumbles.
  • You could achieve this same functionality in about half the space using a JavaScript framework. I have nothing against frameworks generally, but I do have something against forcing your users to download 50KB+ of JavaScript if you’re only going to use 1KB (or less) of it. For some things, frameworks make sense. For others, it’s better to just write it by hand.

But enough from me… I want to hear what you have to say about this technique. Leave me a comment!

Share and Enjoy !

0Shares
0 0