I’ve come across a few techniques and tips in my career, and one of them is this neat trick to create triangles in CSS. Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that…
Archive for December, 2009
-
Creating Triangles in CSS
Posted: 2 months ago in Tutorials
Read More: Creating Triangles in CSS
-
Creating a Time Saving CSS Template
Posted: 2 months ago in Tutorials
If you are a freelance developer then saving time always works in your favor. One way to help you save time, especially if like me, you find yourself doing a lot of the same kind of work over and over, is setting up templates. In the case of web development, having a customized template for your CSS stylesheet can save you from repetitiously typing the same bits of code that you include in most of your web dev projects…
Read More: Creating a Time Saving CSS Template
-
CSS Performance: UI with Fewer Images
Posted: 2 months ago in Tutorials
Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there’s even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn’t have to be this way. This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old. They all have in common the “fewer or no images” mantra. Using fewer images comes with some pronounced benefits…
Read More: CSS Performance: UI with Fewer Images
-
Practical Uses of CSS3
Posted: 3 months ago in Tutorials
CSS3 is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3…
Read More: Practical Uses of CSS3
-
RMSforms – A flexible CSS Forms Framework
Posted: 3 months ago in Tools
If you are a Web designer or developer, you know that styling forms with CSS is a huge pain. Not only are browser inconsistencies rampant in form elements, but it is very difficult to get an advanced form to layout correctly, both visually & semantically. To alleviate these issues and to help designers / developers avoid unwanted stress, I took a crack at developing “RMSforms”, a CSS forms framework. To apply it to your forms, simply download the RMSforms CSS Stylesheet, link to it from your HTML and apply the correct classes to the HTML structure described below and you will be on your way to creating complex CSS-based, tableless, flexible forms with ease…
Read More: RMSforms – A flexible CSS Forms Framework
-
What You Need To Know About Behavioral CSS
Posted: 3 months ago in Tutorials
CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3.
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience…
Read More: What You Need To Know About Behavioral CSS
-
Cleaner Code with CSS3 Selectors
Posted: 3 months ago in Tutorials
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code…
Read More: Cleaner Code with CSS3 Selectors
-
CSS Animations
Posted: 3 months ago in Tutorials
What do we need to make a spinner with CSS animations? One image, and one element on our webpage we can hook on to. Yes, that’s it. I created a simple transparent PNG that looks it might be a spinner, and for the element on the page, I wrote this piece of genius HTML…
Read More: CSS Animations
-
Shadows and CSS3
Posted: 3 months ago in Tutorials
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one…
Read More: Shadows and CSS3
-
Going Nuts with CSS Transitions
Posted: 3 months ago in Tutorials
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site…
Read More: Going Nuts with CSS Transitions