Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame…
Articles in the ‘Code’ Category
-
CSS3 Border-Radius & Rounded Avatars
Posted: 4 weeks ago in Code
Read More: CSS3 Border-Radius & Rounded Avatars
-
10 Awesome CSS3 Buttons
Posted: 1 month ago in Code
10 awesome and beautiful buttons with CSS3 for you! There are buttons for every kind of website and I think that you will love them! Feel free to use them everywhere…
Read More: 10 Awesome CSS3 Buttons
-
Vendor-prefixed CSS Property Overview
Posted: 2 months ago in Code
Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines…
Read More: Vendor-prefixed CSS Property Overview
-
Wrapping Long URLs and Text Content with CSS
Posted: 3 months ago in Code
By default, the white-space property is set to normal. So you might have problems when trying to force long URLs and other continuous strings of text to wrap. To force long, continuous strings of text to wrap within the width of our <pre> content or other block-level element, such as <div> and <p>, we need a different value for the white-space property. Here are our options…
Read More: Wrapping Long URLs and Text Content with CSS
-
Our Solar System in CSS3
Posted: 3 months ago in Code
An experiment with CSS3 border-radius, transforms & animations. At the time of writing, animations only work in Webkit browsers…
Read More: Our Solar System in CSS3
-
The New Lens Flare – CSS3
Posted: 3 months ago in Code
By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo…
Read More: The New Lens Flare – CSS3
-
Flip an Image
Posted: 4 months ago in Code
You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions…
Read More: Flip an Image
-
CSS3 Buttons
Posted: 4 months ago in Code
Read More: CSS3 Buttons
-
Hide Stylesheet for IE6
Posted: 5 months ago in Code
IE6 has become the source of our frustrations — and for certain sites, giving it an unstyled, naked view is exactly what I want to do. Alpha-channel PNGs, min-width, max-width, rendering bugs galore — there are plenty of sites I’ve designed and maintain where the IE6 stats are low enough to drop the axe and move on. Now is the time! We can use conditional comments to hide styles from IE6 only…
Read More: Hide Stylesheet for IE6
-
Quick and Easy CSS @font-face Code
Posted: 5 months ago in Code
What seems to be an ideal chunk of CSS code for implementing the @font-face rules. Tested on quite a few browsers, including the following:
Safari 3.1+, Opera 10+, Firefox 3.5+, Chrome 4.0+, Internet Explorer 6+
This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it…
Read More: Quick and Easy CSS @font-face Code