CSS3 Animated Text Field – Quick and Easy

Animating different parts of a webpage has nearly became a trend. Modern websites tend to be more responsive in sense of giving beautiful visual feedback. There are some Jquery based animated text field libraries out there, but doing it with CSS is more cooler. Specially when CSS3 offers more robust and powerful APIs.

I recently went through a CSS inspirational library of animated text field at codrops. This library is experimental but if you know that majority of your visitors are using modern web browsers, then you can rely on it. Making your text fields animated will make your next project even more eye catchy.Animated Text Field - Yoko

The Markup:

Html markup of the input field is simple. In order to make a simple text field animated, you will have to go through following modifications:

  1. Wrap your text field in <span> with class name of the desired CSS effect.
  2. Then add your <input> text field tag. Again with the a specific class name.
  3. After <input> add a <label> tag. Its is used for the animation of text field on focus.
  4. Inside the <label> add a <span> tag to decorate and position the label of the text field.

Now you are done with the HTML. A typical markup for the above GIF of YOKO animated text field will be as follow.

<span class="input input--minoru">
    <input class="input__field input__field--yoko" type="text" id="animated-text-field">
    <label class="input__label input__label--yoko" for="animated-text-field">
        <span class="input__label-content input__label-content--yoko">City</span>
    </label>
</span>

Be sure, that you will have to use the default HTML attributes for <input> and <label>. Like id and for.

The CSS:

There is not much to do with CSS. It is already well written with proper class names. All you have to do is to include the file in your HTML page. And then add the proper class names to <span>,<input>,<label> and again to the child <span>. Some GIF demos which I have captured are as follow along with the class names:

 1. Haruki

Animated Text Field - Haruki

  • <span>: input input–haruki
    • <input>: input__field input__field–haruki
    • <label>: input__label input__label–haruki
      • <span>: input__label-content input__label-content–haruki
2. Hoshi

Hoshi has following animation for text fields

Animated Text Field - HoshiJust replace haruki with hoshi at the end of all class names.

3. Kuro

Animated Text Field Kuro

Same as hoshi,replace with kuro

The best thing about these animated text fields is that you can easily implement them. They are easy to switch and are more dependent on CSS. Though if you are using some jQuery library like Live Search Plugins then there are chances that things can get messy.

Also, if you don’t have adequate space to accommodate the animated text field in width and height as coded by the developer then there is probability of poor readability and animations. So try to use them on roomy pages like Login Page.

You can download the library from GitHub. If you are interested in more technical details then you can read the article on the author website above. There are about 26 animated text field effects to choose from. So download the library, experiment with it, use it and let me know if it helps : )

 

CSS Hacks for Internet Explorer

Internet Explorer is a curse to web developers. I wonder when will Microsoft close that franchise. As a developer its always a headache to fix the CSS proprieties whether its IE5,6,7,8 or 10 and so on. A simple CSS code which will work in every other browser will refuse to show its effects when it enters the Kingdom of IE. You always have to use CSS hacks for Internet Explorer.

CSS hacks for internet explorer

Lately, I have been searching for a lot of Fixes for CSS in IE and i will like to share them all with you here.

1. Include a CSS file only for IE:

Its the most common way, include a separate CSS file in your page just for Internet Explorer. You can even specify the Version for which you want to include the CSS file.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css"/>
<style>
.header {
//your code here
}
</style>
<![endif]-->

Use this code in your HTML page, the <!–[if IE]–> makes sure that the code is loaded only when the user is using IE. If you want to load a specific CSS file for a specific version of internet explorer then use this code in the following way.

<!--[if IE 7]> <!--For IE 7-->
<link rel="stylesheet" type="text/css" href="ie7.css">
<style>
.header {
//your code here
}
</style>
<![endif]-->

<!--[if IE 8]> <!--For IE 8-->
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

<!--[if IE 9]> <!--For IE 9-->
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

Another amazing idea is to use the IE conditional comment to add specific class to the body tag, referring to that class, you can then select any child element and add CSS properties to it in just one file.

<!--[if IE]> <!--Add the body tag if browser is IE-->
<body class="ie">
<![endif]-->
<!--[if !IE]> <!--if browser is not IE then just add body without class-->
<body>
<![endif]-->

Now after adding that to your HTML page, you can easily control the proprieties for IE as follow:

//regular class for good guys
.header {
width:100px;
}
//for Internet explorer
.ie .header {
margin-left:50px;
}

2. Hack For inline CSS or for few CSS proprieties:

Sometimes, you might want to adjust a few properties or have to adjust an inline CSS. You may not want to increase the requests to your server by creating additional CSS files. So here is the hack for writing Internet Explorer specific CSS properties without loading the a new file.

<style>
.header {
width:10px; //for normal guys
_width:10px; //an _ for that old IE6
*width:10px; //an * For Grandpa IE7
\0width:10px; //let the IE8 now that its worth zero 0
\9width:10px; //For IE9, worth Oops!
</style>

Now that CSS looks pretty ugly and will not even get validated by W3C CSS validator, it will work.But honestly speaking, Who Cares?

3. Using Media Queries as CSS Hack for Internet Explorer:

Well, I will totally do not recommend these methods because it uses flaws in internet Explorer. IE will run an invalid media query as valid while other browsers will simply discard it. Thanks to Microsoft, there are different flaws in different versions and using them, you can target specific versions of Internet Explorer. Here we Go.
Target the older Versions i.e 6 and 7

@media screen\9 {
.header { margin-left: 100px; }
}

Target IE6,7 and 8

@media \0screen\,screen\9 {
.header { margin-left: 100px; }
}

Just target Internet Explorer 8

@media \0screen {
.header { margin-left: 100px; }
}

To Target IE9 and 10

@media screen and (min-width:0) {
.header { margin-left: 100px; }
}

So that was about fixing the Crap created by Microsoft. No offense intended (some should be taken though). But whenever I create a wonderful site and then see it on internet explorer, I get a mini heart attack. Fixing them is sometimes like creating some parts of the site from the scratch. Using CSS hacks for internet explorer is not a good practice which we all do because there is no other way. My last wish will be to see IE closed officially. According to the stats from w3schools, which are reliable in no way but are good to make your self apparently happy, Internet explorer’s market share are going down day by day.

Browsers-market-share

If you haven’t used Internet Explorer yet which I bet You would have then don’t be so lucky and download it here.

If you have any questions or want to share your thoughts, please let me know in comments. Alternatively, ask me on twitter or Facebook.

Beautiful and Simple CSS3 Loader

As more and more sites are using Ajax to load contents, ajax loaders are getting more and more popular. Web developers usually use .GIF animated images as loaders. Some use SVG images to show a loader while content is loading. With advancement of CSS and with addition of new properties like transform and keyframes, now creating animations in CSS3 isn’t a difficult task. Using CSS, developers have created a lot of loaders.

Today, I saw a Pure css3 build loader at wifeo. The loader is amazing and I thought it would be worth sharing with you guys. Here is the demo:

 
 
 
 

Usage:

You can use this CSS loader in two simple steps:

1. Add the following CSS code to your website:

.contener_general
{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
width:88px; height:88px;
}
.contener_mixte
{

width:88px; height:88px; position:absolute;
}
.ballcolor
{

width: 40px;
height: 40px;
}
.ball_1, .ball_2, .ball_3, .ball_4
{
position: absolute;
-webkit-animation:animball_one 1.3s infinite ease;
-moz-animation:animball_one 1.3s infinite ease-in;
-ms-animation:animball_one 1.3s infinite ease-in;
animation:animball_one 1.3s infinite ease-in;
}
.ball_1
{
border:1px solid #cb2025;
top:0; left:0;
}
.ball_2
{
border:1px solid #f8b334;
top:0; left:48px;
}
.ball_3
{
border:1px solid #00a096;
top:48px; left:0;
}
.ball_4
{
border:1px solid #97bf0d;
top:48px; left:48px;
}
@-webkit-keyframes animball_one
{
0%{ position: absolute;-webkit-transform:rotate(0deg);}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-webkit-transform:rotate(360deg);}
}
@-moz-keyframes animball_one
{
0%{ position: absolute;-moz-transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-moz-transform:rotate(360deg)}
}
@-ms-keyframes animball_one
{
0%{ position: absolute;-ms-transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-ms-transform:rotate(360deg)}
}
@keyframes animball_one
{
0%{ position: absolute;transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;transform:rotate(360deg)}
}

2. Then add the following HTML to the page:

<div class="contener_general">

<div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
</div>

You can also check the orignal post from wifeo at http://www.wifeo.com/code/43-css3-simple-loader.html

Let me know if you need further help with this in comments.