サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.456bereastreet.com
The Lightbox effect is showing up pretty much everywhere on the web these days. There are approximately one million different implementations that basically do the same thing: when the user clicks on an image, the screen is dimmed and a larger version of the image is displayed until the user closes it by clicking a ”Close” link or icon. Many people love this effect, and it definitely can be very u
This is a box This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery. This is another box This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table. Instead, display:table, display:table-row a
In some cases you should Use the fieldset and legend elements to group HTML form controls. One problem that may lead to though is when the legend text is too long to fit the width of its containing fieldset element. It could be because the legend text simply is longer than it really should be (legend texts should be as brief as possible) or because its parent fieldset isn’t wide enough (it may be
My favourite coding tool at the moment is TextMate. For anyone who is new to TextMate or considering trying it out, I thought I’d share a few tips. These tips are nothing revolutionary for many Textmate users, but nevertheless they make my workdays a little easier. Several of these tips may not be all that obvious, so I hope you will find something new here. 1. Insert close tag When editing an HTM
What? An entire book just about designing navigation on the Web? Yes, that's right. And if you think about it for a while you'll probably realise that there is a need for a book on that subject. Heck, considering the number of sites out there that are incredibly hard to navigate, there is room for plenty of books that explain how to create Web navigation that works. And you're very likely to have
Sometimes when people first learn about Web accessibility they look for quick ways of improving the sites they build. This often leads to misuse or overuse of certain HTML features that are meant to aid accessibility, but when used wrongly have no effect and can actually have the opposite effect by making the page less accessible and less usable. Many of the commonly misused accessibility features
This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a three column layout, read on as this tutorial explains a basic concept that can be used to create as many columns as you need. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty
Inverted Sliding Doors tabs This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se (my colleague Tobias Nilsson did the design). By inverted tabs I mean that they are bottom-aligned, and as text size is increased, more and more of the tabs is revealed from the top down, instead of from the bottom up as in th
For both accessibility and usability reasons, all input fields and other form controls except buttons should have an associated label that clearly states what the purpose of the control is, or what kind of input the user is expected to fill it with. Sometimes the visual design places restrictions on those labels, in some cases to the extent that there is no room for a label. Perhaps one of the mor
One thing that is particularly frustrating with caring about Web standards and accessibility is what often happens after your work is done and a site is handed over to the client. I’m sure most of you have been there. Despite your hard work to educate the client’s editor(s), regardless of the style guide you wrote, and no matter how much time you spent patching the CMS they use, there will be prob
On the about page of this site I used to call myself a "developer/designer/occasional writer". It's a bit confusing, and I still find it hard to know what to answer when someone asks me what I do for a living. Am I a Web designer? A Web developer? A Web programmer? All of them? Neither? It really is a difficult question to give a simple answer to. My answer depends on who is asking, when, why, and
A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites. A successfull bulletproof i
This page is related to the articles Styling form controls and Styling even more form controls. For more info on what the image on this page shows, please read the articles. The following CSS rules were used to style these submit buttons: #el01 {color:#00f;} #el02 {background-color:#ddd;} #el03 {color:#fff; background-color:#33b;} #el04 {border-width:4px;} #el05 {border-color:#00f;} #el06 {border:
Over two years ago, in September 2004, I posted an article called Styling form controls. My intention with that article (and its follow-up, Styling even more form controls) was to show that attempting to use CSS to make form controls look similar across browsers and operating systems in an exercise in futility. It simply cannot be done. Since discussions about applying CSS to form controls continu
A question many web designers ask themselves each time they start working on a new project is whether the site should use fixed or fluid width. The debates on the subject are many and sometimes heated. This is not one more of those debates. Instead I'll explain how I combined some of the benefits of both fixed and fluid layouts when redesigning this site. The result is an elastic width layout, a c
One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating. How the CSS box model works has been
A client recently reported that there was a problem with their print stylesheet causing content to be cut off at the right margin. I had a look at it and couldn’t see a problem until I tried printing from Internet Explorer. There was a problem alright. It was really puzzling since all the print CSS for that site does is basically hide parts that are irrelevant when printing. There shouldn’t be any
Update: The technique described here is not ideal. Read why in New windows with JavaScript and the target attribute. My script for opening new windows without using the target attribute became more popular than I thought it would. A lot of people commented on the post, Using JavaScript instead of target to open new windows, with suggestions for improvement. A few days after the original post, I up
Transparent custom corners and borders, version 2 This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks! To create your own corners and borders, follo
It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders. Well, it’s time for an update. I haven’t added any revolutionary new feature
Way back in August of 2003 I wrote a short article called CSS Frames, in which I described a technique to emulate the visual appearance of HTML frames with CSS. That is more than three years ago, so I think it’s about time to revisit the technique and improve it a bit, especially as the original CSS Frames demo page has been receiving loads of traffic lately. I only had to take a quick look at the
When Eric Meyer posted Unitless line-heights (you do not need to use a unit when specifying line-height in CSS) earlier this year, I knew that at some point I had run into problems with that. After reading the article I did a bit of testing, but was unable to reproduce the problem. I thought maybe I had just imagined things. After all it was a while since I had last run into any line-height proble
Want to have a style switcher that lets your site's visitors choose a different style sheet? Want it to work even if there is no JavaScript support? The trick is to use a server-side language like PHP, which is what I used to use for my style switcher. Note: I have now taken the style switcher offline since I kept forgetting to maintain multiple stylesheets. It's not because having a style switche
What’s up with the current design trend of light text on dark backgrounds? Many web designers seem to favour inverted colour schemes, but what happened to readability and usability? I know I am not the only person to find it very uncomfortable to read text on sites with inverted, high contrast designs. Light-on-dark designs aren’t new. What’s new is that they have been appearing more frequently in
Inspired by Emil Stenström’s Levels of CSS knowledge, I started thinking about the extreme difference in HTML knowledge among people working in the web industry. It spans all the way from people who know next to nothing about it to those who know it well enough to write the actual HTML specifications. I thought I’d describe a few different levels of HTML knowledge. For some people, these levels ar
Update: The technique described here is not ideal. Read why in New windows with JavaScript and the target attribute. After considering the suggestions made in the comments on my article Using JavaScript instead of target to open new windows and thinking some more about it, I've made some changes to the script. For the full story, please read the original article if you haven't already. The revised
This demo is related to the article Flexible box with custom corners and borders. I also suggest you take a look at my updated method for creating this kind of box: Transparent custom corners and borders. This is a demo of a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide befor
The feature article in the latest issue (4/2006) of Swedish design magazine CAP&Design is called 10 dödssynder i webbdesign (Ten deadly sins of web design). I didn't write this article, but I was interviewed for it and contributed with some examples of web design gone wrong. Like the title says, the article brings up things that no web designer should ever do. Unfortunately, many of the sins menti
Update: The technique described here is not ideal. Read why in New windows with JavaScript and the target attribute. In my recent post about The target attribute and opening new windows, I stated that when I am faced with no other choice but to open a link in a new window, I prefer using unobtrusive JavaScript instead of the target attribute. The reason is that I always use a strict doctype, which
次のページ
このページを最初にブックマークしてみませんか?
『456 Berea Street: Articles and news on web standards, accessibility, and usab...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く