CSS3

A different approach to Bootstrap Alert

A Different approach to Bootstrap Notificaion

I was working on a project, where I had to design a login panel. It had two columns, one for Login and one for registration. Now the problem was, when I made the initial commit to git, I forgot to insert an alert notification. I have to show some error when someone use wrong username password or missed a field in the registration form, or the username he is trying to get is already registered. That sort of stuff.

Now as I was using bootstrap, I can simply use the bootstrap alert. All I needed to do is insert the HTML code. But that I thought, why not a different approach? Especially I loved the alert UI of WordPress admin panel. So I figured, let’s shake some code ( not booty ).

I was about to write the whole thing here, but a friend suggested that I should circulate it to a broad network. And my first choice was Bootsnip. Probably the largest collection of bootstrap snippets. Helping me in my work for more than a year. So i put it there.

 

CSS3 Modal – The Smart Way

So I believe You must have Heard about modal. IF not, I can bet you have already seen it, Just don’t know what it was. Lets just say, One of your Facebook Status got 50 Likes, Now you wanna see, By whom. Like ” Bill Gates, Linus Torvalds, Mark Shuttleworth And 47 others like this“. You will click on ” 47 Others like this ” and a box will come up, With the name of all those people liked it. Basically that box is a smart Example of HTML modal. Its one Kind of Inside Pop-up Window. You can use it for Login box, For Ads, For Information, For Anything. Now There are a lots of jQuery Stuff to create a model. Even The Great Bootstrap Has a modal built in. By the Way, Some people Even Call it Dialog ( As jQuery Officials Did ) .

Here is Some nice Example And link of JQuery Modal Aka Dialog [ Link ] .

 

Our Way

But, The Awesomeness of HTML5 And CSS3, Opened a new era of Web Development. Now, You can do the Complex work with jQuery or Simple Javascript [ If you prefer working much ]. Ad leave the Design Section to CSS3. Well, We will make a Similar modal with CSS3. So, if the client Browser Failed to load jQuery [ Lets just guess Google Was Sleeping ], Your Modal Will still work.

So what do we need? Nothing. Just get a Text Editor, Anything you prefer and Let set go.

The HTML

To Trigger the modal, You will be needing a Action, What will be done with a link. A Anchor.

So, Now we need the Content of The modal,

Remember, The Model Will be triggered using the anchor, So you have to carefull about choosing the model ID.

 The CSS

So, Lets Kick some CSS.

 

Well, The Code is Pretty Clear, If you know what you are doing actually. Now Lets Get a Live View of It,

 

 

Hope You find It useful.

CSS3 Tooltip – The Easy way

From last few days, I am getting addicted to CSS3 and Its awesomeness. Practically it will save lots of typing and brain damage of a developer. From last 2 hour, I was trying to do something with what i’ve learned about css3 these days.

What is a Tooltip?

A tooltip is basically a suggestion or Hint text, That will tell you what is behind a link or a text. The best example a facebook comment link, Take a look,

facebook_like_tooltip

As you can see, Someone liked a Comment, And When you mouse over the like count, you can see who liked it.

Lets Do it

First, Lets do some HTML

 

Now the Code above is very simple. If you know HTML, You already know what i wrote up there. A Question might come up about the <span> Tag, I will Explain it later.

Now Here

This class is a real important deal. It will do the rest.

Time to do some CSS.

And Its done, Here is a Working Demo, [ Direct link ]

Note: As the Browser Show Any title added with a Tag automatically, We need to remove the main title in order to make the tooltip visible enough. the <span> Tag contain a title attribute which will shown by the browser when some one mouse over the link. Safe and Secure :D