I've been friends with Richard for years. In between sending funny links back and forth to each other, we've been able to kick out a few projects (Are My Sites Up, LyricSift). I design, he develops. I've always been impressed with Richard's work ethic, problem solving ability and how he always has his finger on the pulse of the tech industry.
Richard's personal company is ShiftedFrequncy, he works at Gatorworks in Baton Rogue, blogs at FreshArrival…
In looking back through some emails, I found an email from Soh in October 2008. It was a very nice message introducing himself, saying he has enjoyed CSS-Tricks, and that he was just getting into blogging and if I had any advice. This is what I said:
My best advice? Write, write, write. Write good original content and keep at it! Be honest, be real, and keep working on your site to make it the best it can be. And …
I first met Jeff when he emailed me in early March of this year introducing himself as a High School Web Design Teacher at Damascus High in Maryland. He told me he makes his advanced students subscribe to this blog! Jeff is passionate about teaching and web design, and I wouldn't be surprised if his 4-Year curriculum at Dasmascus was the best in the country.
As part of the Advanced Web Tools class, Jeff brings in speakers from the professional …
Collis Ta'eed is the kind of guy that every web designer with a little entrepreneurial spirit wants to be. He is a trend-setting designer who's work is seen, used, and interacted with by millions of people a day on Envato's sites like PSDTUTS and FlashDen. I would list all of the sites here, but there is just too darn many of them it would take up the whole paragraph! If Collis merely designed all these sites, that would be …
If you are like me and commonly find yourself Googling around for JavaScript solutions to coding problems, there is a good chance you've come across James Padolsey's Blog. James is a prolific blogger with a clear teaching style I think we all appreciate when looking for solutions. I've referenced his articles many times, for example, when needing to dynamically resize textareas, shuffle DOM elements, or animate to a particular CSS class. All this, and James is …
I've gotten to be interviewed a few times, but I've always wanted to be the interviewer myself. I've finally made that happen. Next week on CSS-Tricks I'm going to be posting interviews all week long. Here's the plan:
David Berlow commenting on font rendering abilities in the browser:
...it’s not treated beyond a fourth-grader’s crayoning abilities; no shadows, in-lines, outlines, fill variety, twisting, perspective, set on a bouncing line, or opaque over another object, much less in motion. If the web’s imaging language is going to call the mighty capabilities of digital outlines for display type all the way to the user’s PC, when will it be a worthwhile shift of rendering power? Can we aim a little …
CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this:
img {
vertical-align: middle;
}
Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does "sit inline" mean exactly? …
When it comes to setting the size of type in CSS, you have lots of options. You can apply a "keyword", like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course. Let's take a look:…
Hey everybody, I have some news. I've alluded to it a few times in the past, but now I'm officially saying it: I'm writing a book. I am not going to share too much detail about it now, but here are the facts:
We have been working on it for quite a while now and I'm very pleased with it. Both …
I mused on Twitter recently:
CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.
I quickly thought it would be fun to collect other people's ideas on what CSS is like. Here is what you said:
@BenTortora:CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way.
@colinismyname:CSS is like marching orders for pixels.
@peterwilsoncc:CSS is like …
Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:
I am not an SEO expert. I said not long ago that I believe it's mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should.
One …
A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action take place was resize the browser window.
Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes …
I used to work in pre-press before I got into web design. I worked at three different somewhat large printing shops. Pre-press is the department that is in between clients (designers) files and actually getting those files to press. It might not be obvious, but there is a TON of work that needs to be done to prepare client files to actually be printed and through the bindery. This isn't the time or place to get into all that grisly …
One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different "reason" why it's on special. Perhaps it's discontinued, perhaps its special pricing, perhaps it's free shipping. Originally they wanted a special page built for a new type of discount: "rollback pricing". We argued that in general, a visitor on the web doesn't really care why a product is on sale, just that …
We've been chugging along over at Are My Sites Up keeping things running smoothly and working on new features for ya'll. First and foremost, we were closed for new registrations for a while there while we worked out some growth issues. We're happy to say that's been worked out and we are open for new registrations again. So if you don't have a free account yet, go get one.…
I had a unique programming challenge the other day that I thought I'd share here. It's rather specific and probably won't be of huge general use, but hey, it might be interesting.
The idea was to have 160 characters become "selected" when you click on any letter in a block of text:
…
It was time for another design refresh! The best part about this one, for me, was that all the work I did last time made this one very easy to do.
As usual, it's not extremely drastic. Evolutionary, not revolutionary. The old one wasn't bad, I just felt playing and improving where I could.
Feel free to critique. Good or bad, but try to keep it constructive.…
I had to build a quiz for a client a little while ago. A few multiple choice questions, submit button, and it grades the quiz and tells you how you did. It's kinda dorky and really really simple PHP, but I figure it might be a good starter for some folks and a good primer in the basic theory of building a form in HTML and dealing with the data on another page with PHP.
I thought I would take a crack at a couple of common multi-column fluid-width layout styles that are notoriously quirky with CSS.
One way to accomplish a multi-column fluid layout is to set the columns with percentages. For example, floating a left column that is 19% wide and a right column that is 80% wide (keeping it under 100 prevents them from knocking into each other and knocking down). I really dislike doing it this way. It prevents you from …
...is now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image/font replacement, "max sides" on images, and a bunch of "quickfire questions".…
Devthought had a little CSS tip the other day that is definitely worth repeating. It's not new, it's just an important little trick to know.
And here it is:
img { -ms-interpolation-mode: bicubic; }
If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn't recommended, but of course there are always exceptions.
…
I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It's a very common scenario I think. For example, you have a homepage that is different from your blog post pages that is different from your about page that is different from your contact page.
Here are some considerations:
There should always be one main stylesheetIn all liklihood, there is quite …
You think it's a bad business move on their part. It's going to cost them a lot of money and you don't think it has a snowballs chance in hell of making any money back.
I mused this (totally hypothetical) situation on Twitter a few days ago, and quite a lot of people had something to say about it. I was actually quite surprised, most people said do the job. My initial feeling …
It's a fact of CSS life that the 'border' of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. …
Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.
jQuery UI makes creating tabbed areas very easy, so the framework is based on that. But we …
For the last two book giveaways I did, I promised I would pick a winner totally at random from the comments. There were hundreds of comments, so I wasn't about to write the numbers on little bits of paper and pick them from a hat. I actually have a dice-rolling iPhone app I was going to use, but then I figured what the heck I might as well build a little webpage to do it quick.
Congratulations to itaniumdesign, the randomly selected winner of the Joomla! Template Design book contest. These last few book giveaways have been fun. Next time I do it I'll try to get more stuff to give away so everyone has a bit better of a chance. Thanks to all for playing!
In other news, I have put together a pretty cool tutorial for net.tuts+ this week: Build an Awesome Popup jQuery Calculator. It's a tutorial complete with written instructions, …
Links of Interest aren't "back", but I have some cool ones I really wanted to share, I'll probably do this from time to time, but just not on a planned schedule like they were.
LyricSiftRichard had a neat little idea to build a music discovery site based on great lyrics. He coded it up, I designed it. Reload the page, get a new lyric. If you like it, go check it out on iTunes, Last.fm, or Amazon. It's called …
Remote Linking is what I call it when a single anchor link has multiple clickable areas in different locations. It can be used for pretty neat effects and requires nothing but CSS.
It's not a brand new idea and in fact I've covered it before, but I thought I'd put together a more 'real-world' example for ya'll.
So we have Forums here on CSS-Tricks which are a lovely place to get and give help about web design. Now that I've posted almost 500 posts there, I think I have a pretty good feel for what kind of questions make for a good thread and are the most likely to be helpful. Here are some pointers:
1. Provide a link to a live exampleThis sometimes isn't possible, but if there is any way you can, please do. …
There are lots of dropdown menus already out there. I'm not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:
I get asked from time to time to do more stuff about Joomla. Joomla just happens to be one of those things I know very little about. I've never worked with it and I haven't run across the need for it just yet. I tend to reach for WordPress by default because I'm really comfortable with it and I feel like I can do about anything I want to do with it. However, there are some scenarios that I …
DISCLAIMER: I don't "really" know anything about SEO. What I do know is the folks at Google and other big search engines are just human beings like us who have created and constantly tweak the search algorithms. Their goal is to give us what we want when searching, the best possible websites relevant to what we are searching for.
So let's set aside all the fancy technical stuff and just use some good ol' common sense.
1. Does this page…I didn't get anything prepared for today, but my latest installment of "Ask Smashing Magazine" just went out, and it's full of good stuff!
(I forgot to take a screenshot before I changed it! So, this is the old Photoshop document)
More Reason to VisitFar more people subscribe to Script & Style than visit it on the web. That's wonderful I think. Script & Style is stream of articles and RSS is the best way to digest that. At the same time, we certainly …
Eric Meyer said today in "Wanted: Layout System":
Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse. Using element names other than table and td to create layout tables, and then claiming it’s not using tables for layout, borders on self-deception.
Not to mention doing things that way means you’re doing your layout in a highly source-order-dependent fashion, …
The full questions is:
If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?
It's so tough to decide, since we want it all and we want it now! RSS readers will have to jump over to make a choice, poll is in the sidebar as usual. The choices are:
We've been down the jQuery "sliders" path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider.
Many of the concepts presented in those tutorials are the same with this slider, so I'm not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!
UPDATED …
How about that for a cool animated GIF chart graphic eh? I'll have to post how I got that to work sometime.
Well the results are in and it's a landslide. Over 50% of you said "I don't use CSS frameworks". This time I happen to be with the majority. I don't hate them or anything. If you use a framework and it speeds up your development time and you get good results, more power to you.
In second, 18%…
I have an article in the March 2009 (Issue #186) issue of .net magazine, sold as Practical Web Design in the United States. It is actually a two-part article and this is just part one. In this first part, I talk about building a web form with HTML/CSS that anyone can use. Then in the next month, I talk about enhancing the fun and functionality of the form with jQuery.
You'll have to snag the magazine to read the full …
I recently received an email from Ben Sima who had a few questions for me:
I'm a high school junior preparing to go to an art school and study graphic design, and I would like to know about your experiences in the art world in an effort to better prepare myself. I would also like to get some testimonials to convince my parents that opportunities for work do exist in the art world, and that not every artist is starving.…
I probably won't announce it every single time here anymore, but I am doing a regular column of Question & Answer over on Smashing Magazine now. The second installment is up, where I answer questions about list bullet colors, rollover buttons, website widths, left-tab navigation, and bringing up a modal box on page load. Most of them have demos!…
This guest article has been written by Marco Kuiper, just another creative design geek that loves xHTML, CSS and jQuery. Marcos home blog can be found on Marcofolio.net.
Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the …
Check out Abe up there hanging out. Abe is pretty stoked about the new Premium Service over on Are My Sites Up, and I am too. I really think any serious freelancer or web design agency should have at least some kind of system in place to be keeping an eye on their sites. These things are your babies, you should be responsible with them!
The new Premium Service has some awesome new features, some of which have just went …
The whole reason that web standards exist is so that we don't have to write specific code for specific environments. We should write code that adheres to established standards and software in charge of displaying our code should display it as the standards dictate.
... which has a hilariously disastrous history and is easily spoofable.
Example: you …
In my little Quotes on Design project, some of the quotes are longer than others. I thought it might be kind of nifty to beef up the font-size on the shorter quotes and trim down the size for the longer quotes so they all match a bit better in terms of the size they take up on the screen.
Rather than do this with a hard-coded number in each of the quotes, I did it with JavaScript. This allows for …
Congratulations to: Witti, Robhert, Daniel Groves, Noclegi, and Hunter Satterwhite. You are all the winners of a FREE SSL Certificate from SSLmatic.
Thanks to everyone who entered. They'll be more free stuff soon.…