Category Archive for “Presentation”
Here is a list of all articles categorized as “Presentation”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.
- CSS Hacks for Different Versions of Firefox
- In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox. Some of these CSS hacks don’t validate, others are proprietary, and ...
- Perishable Press Featured at CSS Perk!
- Yet another fine reason to celebrate the current Quintessential theme design here at Perishable Press is graciously provided by the fine folks at CSS Perk. CSS Perk features a growing collection of superior CSS-designed websites, and is always a great source of inspiration and ideas for new design projects. Seeing my current theme showcased at CSS Perk is very inspiring, and a super-cool way to celebrate my upcoming April-9th birthday. Many thanks to the awesome peeps at CSS Perk for sharing ...
- The Voice of the World Wide Web (Consortium)
- Check out this sweet composition of aural styles discovered in the stylesheet for the W3C’s website: /* AURAL STYLES (via W3C) */ @media aural { h1, h2, h3, h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 } h1 { pitch: x-low; pitch-range: 90 } h2 { pitch: x-low; pitch-range: 80 } h3 { pitch: low; pitch-range: 70 } ...
- Cross-Browser Transparency via CSS
- Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet: selector { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } Check the code comments to see what’s doing what, and feel free to adjust the level of transparency by editing the various property values. Also, remember to replace “selector” with the target element of your choice. By the way, I’ve got a metric tonne ...
- Better Image Caching with CSS
- I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions. Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via ...
- Perishable Press Featured at Divine CSS!
- Yay! Perishable Press is now featured at one of my favorite CSS-design showcase sites, Divine CSS! Divine CSS features a mouth-watering collection of CSS and Flash-based website designs, and is always a great source of inspiration and ideas for new projects. Seeing my current theme (Quintessential) showcased at Divine CSS is very inspiring, and a nice way to celebrate the (relatively) new design. Many thanks to the fine folks at Divine CSS for ...
- Perfect Rounded Corners with CSS
- A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corder” effect. For example, throughout the current design for this site, I am using rounded corners on several different types of elements, including image borders, content panels, and even pre-formatted code blocks. Some of these rounded-corner effects are accomplished via multiple s and a few background images, while others are created strictly with CSS. Of these two different methods, extra images and markup are used whenever I need the rounded corners to appear in ...
- The Ultimate Guide to swfIR Image Replacement
- In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation. The Challenge.. There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image ...
- CSS Implementations of the Rich and Famous
- A great way to improve your CSS skills is to check out the stylesheets used by other websites. Digging behind the scenes and exploring some applied CSS provides new ideas and insights about everything from specificity and formatting to hacks and shortcuts. Learning CSS by reading about ideal cases and theoretical applications is certainly important, but actually seeing how the language is applied in “real-world” scenarios provides first-hand knowledge and insight. While there are millions of standards-based, CSS-designed ...
- Pure CSS: Remove Link Properties for Linked Images with Borders
- There are many ways to style images with CSS. You can add borders: img { border: thin solid black } ..padding and margins: img { border: thin solid black padding: 3px; margins: 3px; } ..and even background graphics: img { background: url(images/grunge.png) repeat 0 0; border: thin solid black padding: 3px; margins: 3px; } You can also use images as links to other images: If so, you will probably want to style your links: a:link, a:visited { border-bottom: 1px solid red; text-decoration: underline; color: red; } a:hover, a:active { border-bottom: 3px solid red; text-decoration: none; color: maroon; } But wait! By styling your text links you are also styling your image links, leaving them with unwanted bottom-borders and text-underlines. Assuming we want to fix this, a quick search on the ...
- Series Summary: Minimalist Web Design Showcase
- Here at Perishable Press, I love to write about minimalism, simplicity, and usability in user-interface and web design. I have always enjoyed the minimalist aesthetic, as my Perishable Theme plainly illustrates. Fortunately, many designers and developers have embraced the minimalist concept, and continue to produce and promote minimalist design principles in their designs. As often as my schedule allows, I like to take the time to explore and share some of my favorite minimalist designs, and so far have managed to post the following in-depth reviews: Minimalist Web ...
- Beware of Margins or Padding when Using the min-width Hack for IE
- While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this: /* set the minimum width for IE 6 */ #target_element { width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */ min-width: 333px; /* min-width for all standards-compliant ...
- Series Summary: Obsessive CSS Code Formatting
- My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and concise delivery. These posts are extremely subjective, opening dialogue concerning the ...
- Perishable Press CSS Hackz Series Summary
- The “CSS Hackz Series” focuses on useful hacks, tricks, and workarounds for specific presentational and styling issues on various browsers. Although a majority of these articles provide solutions for Internet Explorer, other browsers are covered as well, either specifically or in general. The articles in the “Hackz” series are written to be as clear and concise as possible, focusing on application rather than theory. Thus, these posts cut right to the chase, presenting comprehensive methods and techniques aimed at those already familiar with the basic principles of Standards-based Web design. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles ...
- Choosing the Best Title Separators
- While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly ...
- CSS Hackz Series: Targeting and Filtering Internet Explorer 7
- Continuing the CSS Hackz Series, I present a small army of hacks for targeting and filtering Internet Explorer 7! Here, “targeting” IE 7 means to deliver CSS and/or (X)HTML to IE 7 only, while “filtering” means to deliver CSS and/or (X)HTML to every browser that is not IE 7. In other words, targeting is to include (apply), filtering is to exclude (hide). Let’s dive right in.. Conditional Comments Conditional comments are a proprietary Microsoft technique for targeting and filtering different versions of Internet Explorer. Other browsers do not ...
- Obsessive CSS Code Formatting: Organization, Comments, and Signatures
- One of my favorite aspects of producing clean, well-formatted CSS code is “meta-organizing” the document using comments. In CSS, comments are included in the stylesheet like so: /* i am the walrus */ When used constructively, CSS comments serve to break down documents into distinct regions, provide key information about specific declarations, and bring order to even the most complex stylesheets. In my experience, a well-commented stylesheet improves efficiency and optimizes comprehension. Working with CSS, you can add comments any way you want. There are many different ways to use CSS comments, and endless ways to get there. Let’s ...