background preloader

CSS3 Responsive Slider / Carousel Using Radio Buttons

CSS3 Responsive Slider / Carousel Using Radio Buttons
Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.

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?

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.

John Manoogian III » Blog Archive » (The Only) Ten Things To Kno AKA, “Secrets of the patented JM3 Gasbag Model™” - a getting-started list to make sense of CSS. [2,547 diggs and counting.] The Point of CSS is to use clean, simple HTML in your page, then write CSS “rules” that style the objects on your page. The page stays clean and looks cool, and your HTML page works on both mobile devices and regular browsers. That’s the point of CSS. But The Art of CSS is quickly and easily referring to the right objects in your page from your CSS rules. The act of matching CSS rules to HTML tags is like a conversation: both sides need to be clear and in sync with each other, or they’ll talk over each other and you’ll get a headache from all the yelling.General or Specific Matching: suppose you want to style an **<h1>** header in your page. You can combine the above rules in different ways, too; to style all <h1>tags of type "barleymash" inside of forms of type "magicform", use css rule **form.magicform h1.barleymash { Hacks are stupid.

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 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 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, 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:

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:

CSS Advertisement Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy. One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without where we provided references to the most useful CSS-techniques which are often used in almost every project. In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. Thanks to all developers who contributed to the CSS-based design over the last year. CSS-Techniques 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.

100+ Resources for Web Developers | BlogWell Photo Credit: SMITHMag Update #1 – March 14, 2008 Update #2 – September 22, 2008 Translated into Italian at Geekissimo There is some amazing stuff out there on the Web–resources, tools, tricks, and tips. Problem is, as a Web developer, you spend so much of your time just keeping up with new technologies – learning, playing – and this doesn’t leave much time to go hunting for the latest and greatest tool, or for a better way of doing things. So we’ve put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end. Code Photo Credit: Josh Lewis 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. .htaccess Creator Online tool to create .htaccess files 12. 13. 14. 15. 16. 17. 18. 19. jQuery jQuery is a fast, concise, JavaScript Library that simplifies how you write your web pages. Cool Online Tools 20. 21.

10 AJAX Effects to Boost Your Website’s Fanciness Factor | Six R There comes a point in time where we want to improve our website’s interface or provide a captivating experience that our users will remember. We have three main options (from hardest to easiest): write the scripts ourselves, use a JavaScript framework such as jQuery or mootools (which will make coding easier), use a pre-made script that works with existing JavaScript frameworks or that the author has developed from scratch. This article’s for the individuals who chooses to make things a bit easier and those who don’t want to re-invent the wheel. Here’s a collection of 10 powerful – yet easy-to-implement — JavaScript effects to supplement your web page’s interface. Author’s note: Title of this article, by request, was changed to reflect the content featured in this list. 1) GreyBox GreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). 2) instant.js 3) mooTable 4) FancyForm 5) image menu 6) AmberJack: Site Tour Creator

Top 10 CSS Table Designs | CSS, Events Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap! First things first Link We start with a valid xhtml 1.0 strict markup. <table id="..." You can read more about xhtml table markup in HTML Dog’s Table Section1. Before we start, let’s review the general rule of thumb for styling of tables: Tables love space. Now that we are all set up let’s get going, shall we? 1. Horizontal tables are tables that are read rather horizontally than vertically. Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. Important! 2. Important! 3. Important! 4. ... Important! 5.

Ten CSS tricks you may not know 1. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! 2. Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. <p class="text side">... Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. 3. When writing a border rule you'll usually specify the color, width and style (in any order). If you were to write just border: solid then the defaults for that border will be used. 4. Lots of web pages have a link to a print-friendly version. So, your page header should contains links to two CSS documents, one for the screen, and one for printing: 5. <h1>Buy widgets</h1>

Fluid Grids Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1 Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” Of course, when I was coding the site, I didn’t have the luxury of writing a diatribe on the evils of fixed-width design. As it turns out, it’s simply a matter of context. Do I really have to thank IE for this? With ems, it’s easily done.