Articles tagged with “css”
- Obsessive CSS Code Formatting: Opening and Closing Brackets
- Following my recent post on CSS code formatting, I was delightfully surprised to have received such insightful, enthusiastic feedback. Apparently, I am not the only person passionate about the subtle nuances involved with the formatting of CSS code. So, to continue the conversation, let’s explore several techniques for writing the opening and closing brackets of CSS declaration blocks.
Formatting method #1
I ...
- Pure CSS: Better Image Preloading without JavaScript
- After reading my previous article on preloading images without JavaScript 1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique:
/* ADD THIS TO CSS */
div#preloaded-images {
position: absolute;
overflow: hidden;
...
- Perishable Press Gets Naked
- In celebration of CSS Naked Day, Perishable Press has disabled it’s CSS stylesheet for today, April 9th, 2008 (which also happens to be my 36th birthday)!
What are you waiting for? Go get naked!! ;)
- Obsessive CSS Code Formatting: Patterns and Trends
- Call me strange, but I format each of my CSS rules according to the following pattern:
div#example element {
margin: 5px 15px 5px 0;
border: 1px solid #444;
line-height: 1.5em;
text-align: center;
background: #222;
font-size: 10px;
display: block;
padding: 5px;
color: #888;
float: left;
}
div#another div.example element {
border: 1px solid #444;
margin: 7px 0 17px 0;
letter-spacing: 1px;
font-weight: bold;
background: #222;
font-size: 1.1em;
cursor: pointer;
display: block;
padding: 3px;
width: 308px;
color: #888;
clear: left;
float: left;
}
div#another div.example element {
text-indent: -9999px;
overflow: hidden;
position: fixed;
display: block;
z-index: 9999;
padding: 0px;
margin: 0px;
bottom: 0px;
right: 0px;
}
Notice how the right-hand edge of each block suggests ...
- More Killer CSS Reset Styles
- Just a note to let everyone know that I have updated my previous CSS reference article, A Killer Collection of Global CSS Reset Styles. The updated version features two more excellent CSS resets, as well as the updated Meyer reset and a link to Eric’s official ...
- How to Display Your Twitter Posts on Your WordPress Blog
- Alright, time for another “How’d-you-do-that-thing-on-your-site?” post. This question comes from the one and only Mr. Graham of ImJustCreative.com. In a recent email, Graham literally begged me to share my “secret recipe” for displaying my latest Twitter Tweets (wow, did I actually just say that?) right here on Perishable Press:
...Would be really really decent of you if you could let me know how to do it? Pretty please? ...
- CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu
- Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people ...
- XHMTL/CSS Remix: Creative Commons License
- Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the ...
- Perishable News: Site Upgrades, Upcoming Interview, and PageRank Update
- Ever since writing that last review article, I have been feeling the need to cut loose, relax, and blog about something a little more “down-to-earth,” like recent things that have been happening around here. If you are new to Perishable Press, rest assured that I try to keep these “site/personal news” update posts down to a minimum. Whenever possible, I ...
- Lessons Learned Concerning the Clearfix CSS Hack
- I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. Over the course of the ...
- Coldskins: Custom CSS Skins for Contact Coldform
- With the recent release of my latest WordPress plugin, Contact Coldform, I am also creating a series of free, “drop-in” CSS skins for easy, “plug-n-play” customization. These skins employ valid, optimized CSS code designed for the following browsers:
Firefox 2 (mac & pc)
Internet Explorer 6
Internet Explorer 7
Opera 9 (mac & pc)
Netscape
Camino
Safari
The goal for these skins involves minimizing the amount ...
- Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom
- By now, everyone is familiar with the Yahoo Developer Network’s 14 “best-practices” for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the ...
- New Mobile CSS Styles for Perishable Press
- The amount of time I spend surfing the Web from a mobile device has steadily increased since the acquisition of my new favorite mobile device. Unfortunately, many sites have yet to implement (or even consider) support for mobile devices. Without proper formatting, such sites are virtually useless, requiring unnecessary download times, displaying unreadable pages, and serving unusable content. Given the inevitable ubiquity of mobile access to ...
- A Killer Collection of Global CSS Reset Styles
- Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a prefect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many ...
- Miscellaneous Happenings
- Many changes around here lately — new styles, new software, new hardware, and a whole lot more. I will be covering several of these items in greater depth in future posts, but for now, here is an overview of some of the recent happenings unfolding here in Perishable land..
New Mobile Styles
I finally took the time to throw down some tuff mobile CSS styles for Perishable Press. Before, the site was virtually impossible to use ...
- Absolute Horizontal and Vertical Centering via CSS
- Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:
[...] the div solution works well, only one problem maybe somebody can help:...
- CSS Throwdown: Preload Images without JavaScript
- Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!)
Step 1 — Place this in your CSS file:
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
Step 2 — Place this at the bottom ...
- Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign
- [ Keywords: Microsoft, MS, IE, DNS, 404, CSS, Error, Monzilla, Explorer, redesign ]
Default DNS Error page for Internet Explorer
First of all, congratulations if you are geeky enough to understand the title of this article. Many would be like, "CSS, MS.. IE, error ..what..?" Whatever. If you get the title, you will get the point of this utterly pointless exercise. If that is the case, ...
- Maximum and Minimum Height and Width in Internet Explorer
- Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!
Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit ...
- Keep it Dark: Hiding and Filtering CSS
- Hiding and filtering CSS rules for specifically targeted browsers is often a foregone conclusion when it comes to cross-browser design considerations. Rather than dive into some lengthy dialogue concerning the myriad situations and implications of such design hackery, our current scheduling restraints behoove us to simply cut to the chase and dish the goods. Having said that, we now consider this post a perpetually evolving repository of CSS filters..
Hide CSS from IE3, IE4, NS4
This method employs JavaScript ...
- minimalist Theme
- The minimalist theme is crisp and clean. Featuring a three-column satellite menu-page to reduce clutter and streamline usability, the minimalist theme is designed to present site content with sophistication and elegance.
The minimalist theme is XHTML 1.1 strict, employs nearly valid CSS (ha!), and features browser-safe colors and universal fonts all delivered via concise, two-column liquid layout.
Mindfully detailed and carefully prepared, the minimalist theme provides plenty of room for customization and expansion.
This theme is offered absolutely ...
- Preloading Images with CSS and JavaScript
- Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be "reuse, optimize, and preload.". While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases ...
- Firefox CSS Magic
- Consider this post an evolving receptacle for Firefox-specific CSS tricks.
Change the color of highlighted text
*::-moz-selection {
background: #FF3C00; /* the background color of the highlight */
color: #FFF; /* the color of the text within the highlight */
}
Change the opacity of an element
div#division { /* choose either attribute */
-moz-opacity: 0.99; /* possible values: 0-1 */
-moz-opacity: 99%; /* possible values: 0%-99% */
}
Control item selection of an element
div#division { ...
- Theme Edits for IE7
- This post is a working repository of code edits and other changes made to Perishable Press themes in order for them to function properly in Internet Explorer 7 (IE7)..
Jupiter Theme
*:first-child+html div.comwrap {
overflow: visible;
}
Lithium Theme
*:first-child+html div.comwrap {
overflow: visible;
}
Casket Theme
Removed html selector from first ruleset.
- Extreme Makeover for Gravatars in WordPress
- Strategic Methods for Improving Gravatar Functionality in WordPress
Gravatars have become a popular way of adding spice to the "comments" page of many WordPress-powered sites. So popular, in fact, that the gravatar server is often overloaded, bogged down with millions of gravatar requests every second. This immense server load effects user pages everywhere, resulting in slow loading times, unresolved server requests, and missing gravatars. Such broken presentations appear unprofessional, tarnish reputations, and may provoke ...
- Compressed CSS Compression
- In this article, we have consolidated the priceless information provided in fiftyfoureleven.com’s fine post, The Definitive Post on Gzipping your CSS, which discusses two practical methods for compressing CSS documents. Complete and utter credit for the contents of this article is hereby attributed to fiftyfoureleven.com.
Method One
Overview: This method involves adding a small PHP script to your CSS document and replacing its .css extension ...
- Absolutely Centered Layout
- Absolute Centering with CSS & (X)HTML
Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML:
And employ this CSS (commented with explanations):
body {
background-color: #333; /* cosmetic */
margin: 0px; /* required */
}
div#wrapper {
background-color: red; /* cosmetic */
height: 0px; /* set to taste */
/* required */
position: absolute;
overflow: visible;
display: block;
width: 100%;
left: ...
- IE Scrollbar Colors
- Changing the color of scrollbars for Internet Explorer may very well be the oldest trick in the book. In fact, this post exists mostly for the sake of prosperity, as we here at Perishable Press strive to eliminate our entire offline library of website design notes by transferring them to the World Wide Web. Although library conversion requires time, patience, and determination, changing the color of IE scrollbars is relatively simple. Simply associate these CSS rules to ...
- Nifty CSS Link Hover Effect
- This nifty CSS link hover effect magically reveals a hidden span of text after specified links. The trick employs an anonymous span nested within an anchor tag. CSS then acts upon the markup with a set of rules that basically says hide the nested span until the link is hovered. Here is an example.
Here is the CSS code and XHTML markup that makes it happen:
a:link, a:visited {
text-decoration: underline;
color: #990000;
}
a:hover, a:active {
text-decoration: none;
color: #990000;
}
li a:link span, ...
- CSS Code Repository
- Here is our online (i.e., public) repository of interesting, mysterious, and/or perhaps even useful CSS code:
Perishable Press CSS Code Repository [downloads ]
- Crazy CSS Underline Effects
- Check out these crazy CSS underline effects:
u.double { /* -- double underline -- */
border-bottom: 1px solid;
}
.altdouble { /* alternate double */
border-bottom: 3px double;
line-height: 1.7em;
}
u.triple { /* -- triple threat -- */
border-bottom: 3px double;
line-height: 1.9em;
}
Double Underline Effects! (via u.double class)
Alternate Double Underline! (via .altdouble class)
Triple Underline Effects! (via u.triple class)
- CSS Hack Dumpster
- Consider this page a virtual dumpster of wonderful CSS hacks..
Commented Backslash Hack V2
This hack effectively hides anything after the “\*/” from MacIE5:
/* commented backslash hack v2 \*/
div#something {
boder: thin solid red;
}
/* end hack */
May also be used for CSS import directives:
/* commented backslash hack v2 \*/
@import url(http://www.site.com/stylesheet.css);
/* end hack */
Fix Division Widths in IE
Fix IE’s crazy box rendering. The first line limits to only IE. The second line
* html ...
- A Complete CSS Template File
- To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake ...
- Perishable Press Print CSS
- [ Editor’s Note: This article applies exclusively to our Lithium theme, which is no longer the default site theme. Different themes may or may not include print style sheets of their own. Click here to check out the Lithium theme, to which this article applies. Click here to see a list of all available themes. ]
Perishable Press now with fully printable articles! Check ...