CSS3 Solutions for Internet Explorer Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). The Demonstration This is the same element without the opacity settings. The Drawbacks Rounded Corners (border-radius)
Styling form controls with CSS, revisited Over two years ago, in September 2004, I posted an article called Styling form controls. My intention with that article (and its follow-up, Styling even more form controls) was to show that attempting to use CSS to make form controls look similar across browsers and operating systems in an exercise in futility. It simply cannot be done. Since discussions about applying CSS to form controls continuously crop up, new versions of browsers and operating systems, and entirely new browsers have been released since September 2004, it was time for an update. Because of all this I spent way too much time creating a total of 224 screenshots showing the effects of various CSS rules applied to form controls. I have created a demo page for each type of form control: Each page contains screenshots from each of the tested platforms, as well as a set of styled form controls that you can use to check the results in browsers that I did not include. So what does this experiment show?
Fluid CSS3 Slideshow with Parallax Effect In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%.
CSS: Getting Into Good Coding Habits Set for printing In this article we will look at what might be considered best practices, or perhaps, good coding habits to get into. To begin, we will look at removing any defaults that a browser may add to our elements and then look at how we can explicitly set the values we want. If you are new to CSS, you may want to bring yourself up to speed by reading a series of tutorials I wrote called An introduction to CSS. The beauty of CSS is the control it gives us. We can use CSS in three ways. Inline CSS Embedded CSS External CSS Inline CSS is the least flexible of the three options listed above. <p style="margin: 20px;" >My paragraph text</p> The inline style in Listing 1 above is highlighted. This situation is further complicated when we need to make changes to our code. Embedded CSS is somewhat of a halfway house between inline styles and an external style sheet. p { margin: 20px; An embedded style sheet is contained in an opening and closing pair, and it exists in the head of your page.
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
A CSS Sticky Footer A CSS Sticky Footer that just works We've all tried to use a CSS Sticky Footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS Sticky Footer are thankfully over. Usage of the CSS Sticky Footer Great! Absolutely. View the CSS or learn about using it NEW: HTML5 Sticky Footer How to Build a Fully Functional CSS3-Only Content Slider Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless. Demo & Source Files View the DemoDownload the Source Files Screenshot Some simple HTML to start with Granted, that looks scary. We have a “content-slider” div, which holds all the content. Then, we have two sections: the “content” div and the “nav” ul. Now, right inside the “content” div, you’ll notice 6 nested divs: “content-inner-1” through “content-inner-6“. The Magical CSS As I said, all we did to the “content-slider” div was center it, and move it 100px from the top of the page. The “content” div styling is very important. Now, the “content-inner” div is what holds all of the pages. Now, we have some generic styling. Here’s the code:
35 Designers x 5 Questions Advertisement 35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. In March we’ve selected over 35 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers. Here on Smashing Magazine. 35 Designers: how did we find them? How do you find the best designers worldwide? We didn’t choose by our intuition, we weren’t looking for any suggestions. We’ve browsed through numerous articles and hundreds of portfolios and in the end we’ve managed to select over 45 out of them. Five Questions Link We’ve asked five questions. 1 aspect of design you give the highest priority to.1 most useful CSS-technique you use very often.1 font you use in your projects very often.1 design-related book you highly recommend to read.1 design magazine you read on a daily/weekly basis (online or offline).
CSS button, 110 best! Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. All of them great looking, with neat effects and really easy to include them in your code. Some people says there’s nothing new under the sun, however, we can always come up with new and exciting ways of apply and use things we already have, so the results will be a mind blower. btn_example{ display: inline-block; padding: 10px 20px; background:#066; border: 1px solid #f3f3f3; you’ll enhance hugely your button. There are many advantages to using CSS only buttons, as no images need to be downloaded, buttons expand to fit any amount of text and it’s easy to alter the size, colour and effects. BonBon Buttons The goal was to create CSS buttons that were sexy looking, really flexible, but with the most minimalistic markup as possible. TypeKit CSS Buttons Pure CSS 3D Button
CSS Image Maps - Flickr-like Technique? Skip to Example An alternative to image-only CSS maps has been published. If you're looking for an easier way of creating image maps involving a single image, you may be interested in reading CSS Image Maps, Redux Below is a sample image map that's built entirely using CSS and XHTML. The initial idea for this came from a blog posting I read over at Gina Trappini's blog, Scribbling.net. I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the <title> tag to display notes about a hotspot. In the end, I decided to make use of Doug Bowman's Sliding Doors technique combined with a definition list (<dl></dl>). The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the background-position CSS property to "shift" the image in any direction. What I did was build the image map in Photoshop. The code also degrades gracefully. Translations:
Overthrow A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. Disable Overthrow What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. But wait - many browsers actually support overflow very well! What is Overthrow? Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! A few example pages The examples directory has some sample responsive layouts that use overthrow. That's about it. Here's some extra demo content to scroll through... Example Embedded Overthrow Block Form elements
Stir it Up! » Blog Archive » 12 Invaluable Sites for Web Design Whether you are a professional or amateur web designer, or simply want to learn more about how web design works, these are great resources to browse and bookmark. This collection covers various design styles, guides and tools as well as free fonts, stock photographs and vector images. These have been organized into three complimentary categories: inspiration, guides and resources. Enjoy! Web Design Inspiration: CSS Zen Garden A demonstration of what can be accomplished visually through CSS-based design. Web Design Inspiration is a Flickr image set collecting a variety of successful web designs of all different kinds, over 400 total. Web Creme provides frequently updated screenshots in an elegant-but-simple blog-like format for web designers to browse. Unmatched Style is a constantly growing community dedicated to acknowledging those who have made exceptionally gorgeous web sites using Cascading Style Sheets and web standards. Web Design Guides: Web Design Resources:
Convert a Menu to a Dropdown for Small Screens The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda.