Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? To find out, I set a little time aside each day to play with it. The result is 39 ridiculous little experiments that, due to whatever issues, can only be viewed in Chrome 11 or better…
Articles in the ‘Code’ Category
-
39 Ridiculous Things To Do With CSS3 Box Shadows
Posted: 10 months ago in Code
-
A new micro clearfix hack
Posted: 10 months ago in Code
The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required…
Read More: A new micro clearfix hack
-
Absolutely Positioned Textareas
Posted: 10 months ago in Code
A handy technique for absolutely positioning textareas using left, right, top and bottom values to lock inner elements relative to an outer container. This avoids any issues with padding in various browsers…
Read More: Absolutely Positioned Textareas
-
CSS Specific for Internet Explorer
Posted: 11 months ago in Code
As much as we don’t like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…
Read More: CSS Specific for Internet Explorer
-
The Shapes of CSS
Posted: 12 months ago in Code
Example page of shapes created with CSS. All use just a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser…
Read More: The Shapes of CSS
-
Pure CSS GUI Icons Experimental
Posted: 1 year ago in Code
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set…
Read More: Pure CSS GUI Icons Experimental
-
CSS Box Shadow & Text Shadow Experiments
Posted: 1 year ago in Code
Using a little HTML and some CSS we take a trip to the dark side of the moon, create a periodical table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party…
Read More: CSS Box Shadow & Text Shadow Experiments
-
Hardboiled CSS3 Media Queries
Posted: 1 year ago in Code
Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now…
Read More: Hardboiled CSS3 Media Queries
-
Fun With CSS Text-Shadow
Posted: 1 year ago in Code
I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury…
Read More: Fun With CSS Text-Shadow
-
BonBon Buttons – Sweet CSS3 buttons
Posted: 1 year ago in Code
There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let’s take a tour trough the candy store…
Read More: BonBon Buttons – Sweet CSS3 buttons