Video Screencasts. 50 New Useful CSS Techniques, Tutorials and Tools - Smashing Magazine. Advertisement These are great times for front-end developers. After months of exaggerated excitement1 about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes2. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.
Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. CSS Techniques CSS3 range slider, checkbox + radio button4A demo of HTML input elements made with CSS3. Animated wicked CSS3 3D bar chart26Create a beautiful 3D bar chart. Popout Details on Hover w/ CSS. Quick Tip: A Crash-Course in CSS Media Queries. In the past, in order to create layouts based upon the width of the user's browser, we had to use JavaScript -- perhaps combined with a server-side language. Fortunately, the process is now becoming far simpler, thanks to CSS media queries. Method 1: Within your Stylesheet Method 2: Import from within your Stylesheet Note that you can also add addition rules, by applying a comma -- much like you would when using multiple selectors.
Method 3: Link to a Stylesheet Method 4: Targeting the iPhone An interesting note, after a bit of research around the web, is that, despite the fact that iPhone 4 sports a resolution of 640x960, it still we pick up mobile.css, referenced in the code above. Browsers that Support CSS Media Queries Firefox 3.5+ Opera 9.5+ Safari 3+ Chrome Internet Explorer 9+ Accordion using only CSS. An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Result CSS3 Accordion Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Animation works in recent WebKit based browsers. Experiment updated. Transitions are now widely supported, including Opera, Firefox and IE10.
How To Each part of the accordion has an ID, heading and content region. <div class="accordion"> <h2>Accordion Demo</h2> <div id="one" class="section"> <h3> <a href="#one">Heading 1</a> </h3> <div> <p>Content</p> </div> </div> <div id="two" class="section"> <h3> <a href="#two">Heading 2</a> </h3> <div> <p>Content</p> </div> </div></div> The CSS then relies on the :target pseudo-class to apply different styles to the chosen section — increasing the height and, in large content cases, altering the overflow behaviour to allow scrolling.
Critique. CSS Absolute Positioning: Create A Fancy Link Block. Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive. The final result of our work will be as same as the demo below. Check it out or download it. Write your link block elements in HTML code We will create the HTML code first. Our HTML will be: Before applying CSS code, let’s see how our link block would be Applying CSS code And this is our CSS code For the List of links: For the Title of the links: We need to set margin left 45px for the title to display image in this space. CSS for the description: The same as the title, you should remember to set clear is none.
Add CSS code for image: Now, we will review our HTML code. Remember to set z-index for the link to make sure it is always on top. Related Articles. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine. Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development.
Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Where Are CSS Sprites Used? Learn To Create A Simple CSS Image Gallery. DetachedDesigns's Channel. CSS: Menu Descriptions - Mike’s Experiments. Drop-Down Menus, Horizontal Style. Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require.
But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Article Continues Below Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself.
That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Now the fun bit. CSS-Only Accordion Effect: Horizontal Accordian. Advanced CSS Menu. Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.
View Demo CSS menu Download Demo ZIP Overview Here are the required graphics to assembe the menu (you can download from the zip). 1. Open the Photoshop file. 2. Turn off the background Layer Group and leave only the menu text layers visible. Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Here is how the hover effect will work. Repeat this step for the other buttons. 3. When you are done with the graphics, let's start coding. #menu Reset the menu to no padding, no margin, and no list-style. #menu span #menu a The key point here is the text-indent property. How to Make a CSS Sprite Powered Menu. We haven’t gone back to basics in a while. Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image.
It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results. The end goal is to create a navigation menu that loads quickly, and does not require any dated JavaScript for hover effects. The Goal This CSS sprite will keep HTTP requests down and increase load speed.
Design the Menu Breaking from the usual flow of tutorials, we’re going to take a look at part of the Photoshop process before hitting the code. Love the Grid Rulers and markers are your best friend when it comes to CSS sprites. In order for the positioning to work in CSS, you’ll need to know the rough coordinates of each menu item inside the sprite. Structure with HTML A Brief Word on SEO. CSS-Tricks.