CSS on Lin's Blog

CSS Inner Border: Drawing a Border Inside the Box

Wed, 26 Apr 2017 09:54:28 +0000

While designing my personal landing page, I wanted to create an inner border effect, and I learned a clever technique for it. When it comes to a CSS inner border, your first instinct is probably to use padding or margin to make the box bigger. But that doesn’t work: when you enlarge the box, the border moves along with it, so you can’t create an inner border style this way.

Fixing HTML Anchor Content Hidden Behind a Menu

Mon, 20 Feb 2017 23:28:39 +0000

HTML anchors are very handy. When a page is long, an anchor lets visitors jump quickly to a specific section. This technique shows up in many technical documents and blogs. If you’ve seen a URL like https://coder.tw/?p=123#section1, that’s the HTML anchor feature at work. Although it’s convenient, it brings some problems. The most common one: there is a floating menu at the top of the page. When a visitor clicks an anchor link, the browser does scroll to the section, but part of the text ends up hidden behind the menu. I had always been annoyed by this, and today, while reading Facebook’s technical documentation, I found their solution, which is pretty good.

SASS Basics: Variables, Mixins, Extend, and Nesting

Tue, 07 Feb 2012 23:14:55 +0000

In the previous article, “When CSS Meets Variables and Functions, It Becomes SASS: SASS Installation Tutorial”, I showed how to install SASS. In this article I’ll show you how to use SASS. It covers four of SASS’s main features: variables, mixins, extend, and nesting.

When CSS Meets Variables and Functions, It Becomes SASS: SASS Installation Tutorial

Tue, 07 Feb 2012 21:31:00 +0000

Anyone who writes both programs and CSS has probably wished that CSS could have variables and functions, the things programming languages have. Many CSS rules are repetitive, and if CSS had variables and functions, writing it would be a lot faster. Generally, that kind of dream seems impossible… But today I’ll introduce a new toy called SASS. With SASS, CSS can become something very different~

Zen Coding: A Great Tool for Speedy Web Development, a Must-Have for Anyone Who Likes Hand-Writing Web Pages～

Mon, 22 Aug 2011 21:40:44 +0000

I think many people are like me: when building a web page, they don’t like dragging out the layout directly in DW, and instead prefer to open Notepad and write the HTML by hand～ The upside of this approach is that it sharpens your skills XD, but the downside is that development is a bit slow (actually, once you get used to working this way, you’re faster than you would be with DW… XD). Today I want to introduce Zen Coding to you — it can make you write web pages N times faster! You can write web pages directly using CSS-style syntax～

[CSS 3] Tilt Images and Web Pages with transform: rotate

Sat, 23 Apr 2011 09:22:08 +0000

A while ago, the news reported that if you searched for the Chinese word “傾斜” (meaning “tilt”) on the mobile version of Google, the results page would lean to the right. This effect isn’t hard to make at all. It only takes one line of CSS, because it is one of the CSS 3 standards. For now, IE browsers don’t support this CSS 3 tilt syntax (including IE 9). Also, it isn’t really one line: each browser has its own syntax, so you have to write several lines. Hopefully this will improve in the future.

[CSS 3] Give Your Website Rounded Corners with Pure CSS!

Sat, 16 Apr 2011 11:32:53 +0000

Back in the CSS 2 days, giving images or div elements rounded corners was quite a hassle. The simple option was to use a function that someone had already written in jQuery. If you preferred to do it yourself, you had to design rounded-corner images and overlay them on each other. In short, it was very complicated. But in CSS 3 you no longer need such cumbersome tricks. You can just set it directly in your CSS!

How to Detect IE and Apply the Matching Code? (The If IE Technique)

Mon, 28 Feb 2011 13:54:10 +0000

If you are a web designer, the thing you hate most when designing pages is browser compatibility. Every browser supports CSS and JavaScript differently. Your CSS might look perfectly fine in Chrome, but show different results in Firefox. This happens most often with IE, because IE has the weakest support for CSS and JavaScript. Other browsers might just look a little different, while in IE the effect may not show up at all… So this article shows you how to apply specific code or CSS only to IE, or only to non-IE browsers.

W3C Validation: Checking Whether Your Site's CSS Meets the Standards

Sun, 06 Sep 2009 13:36:56 +0000

About the W3C:

The W3C is an organization dedicated to standardizing the web. It is responsible for drafting all kinds of web-related specifications. For example, the CSS4 standard and XHTML were both created by the W3C. Why create these standards? The reason is simple. Web pages are displayed in different browsers. If every browser used different syntax, web designers would have a hard time. But getting all browser vendors to agree on one standard is difficult. I think the main reason is that they're all competing with each other. That's why the W3C was created: an impartial third party drafts the standards, and each browser vendor (such as IE, Opera, and Firefox) must follow these basic rules. Of course, browsers can add their own syntax if they want. Still, not every browser follows the W3C specifications. Big names like IE don't, which is why many web designers have a love-hate relationship with IE (love, because so many people use it; hate, because it doesn't play by the rules). Now that you have a basic understanding of the W3C, let me show you how to check whether a web page meets the standards.

[CSS] Setting the Maximum Width and Height of Images

Fri, 15 May 2009 21:00:17 +0000

You can use a CSS rule to set the maximum width and height of an image.

Maximum width:
tag-name img{
max-width:width-value
}
Maximum height:
tag-name img{
max-height:height-value
}

Also, the height (width) value can be expressed as a percentage.

These rules help keep your blog’s images from overflowing their area.

However, this rule doesn’t work in IE6.

I’m still researching how to make it work in IE too.

It probably requires JavaScript.