css

A 3-post collection

FontAwesome Icons with Toastr

What do you get when you combine FontAwesome icons with Toastr? Maybe ToastrAwesome or ToastAwesomer. If you have used Toastr then you know you can use your own CSS styling and make the toast look however you desire. Toastr comes with 4 basic icons as background images, but what FontAwesome allows you to do is use its icons instead of a background image. This post will show you how to do that so you can use any of the FontAwesome icons with Toastr, using only CSS. This technique uses the CSS psuedo-selectors and works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers, according to CanIUse.com. First, we need to remove the background-image and then we...


Centering toastr with CSS and Media Queries

Toastr was released almost 2 months ago and has had a nice response so far. We’ve kept it simple yet extendable and we’ve received a lot of good feedback over it. One interesting point we never explored was how customizable toastr already. Much of its appearance and behavior can be customized through CSS or JavaScript. For example, Hans and I provided 4 standard positions for the toastr messages in the 4 corners of the page, but you can change that too. Over in my original toastr post a reader asked a question about if it is possible to center toastr’s messages at the top center. The answer is yes, and in fact you can...


CSS3 Background Gradients

CSS3 background gradients can add jut the right amount of pop to a web page when used properly, but its important to know how they work differently in the major browsers. This month in my Papa’s Perspective column in Visual Studio Magazine I discuss CSS3 background gradients and show some tips on how to use them across Chrome, Safari, Firefox and IE. It’s a quick article that will help get you jump started and coding with them in just a few minutes. You can check out my article on CSS3 background gradients here....