Use CSS Sprites to Beautify your WordPress Post Dates Ever wonder how to super style your blog’s post date? I am going to show you how to do this using CSS sprites in about 18 minutes. Editorial Note: This post is geared toward theme designers. Prior knowledge of CSS and WordPress is recommended. What you will need: A graphics program (I use Adobe Photoshop CS4)A simple text editor What you will accomplish in this tutorial: The dates on your blog’s posts will be super styled using CSS Sprites Let’s get started… Step #1 Fire up your graphics program. Step #2 Basically you want to create a grid using months, days, and years. Step #3 On to the coding… Don’t worry it’s really easy, especially if you are using my PNG or have used the PSD file (It includes guidelines to keep your “grid” nice and neat plus you can then cut and paste the CSS code in this step directly into your themes’ stylesheet without any math.) The CSS is as follows: Explanation: .postdate – Sets the width and height of the entire date. .m-01 through .m-12 – You guessed it! Step #4 Step #5
Increasing the Clickable Area of Inline Links Demo It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Why aren’t we taking this one step further? Now keep in mind that this is only a thought. The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this technique? Tweet this
Five Useful Design Techniques and Coding Solutions For Web Designers - Smashing Magazine Advertisement As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don’t have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. 1. This effect (pictured below) can be a great way to add some oomph to a Web page, and make it more user-friendly. For comment counts, visitors can quickly see where the discussions are at. Pictured below are two examples of this design. Left, Dribbble1 (number of tags). How Is It Done? Recreating this solution is really quite easy. Lay out the full list of features,Create the effect in plain (X)HTML and CSS,Pull in the counts dynamically and put them into our static version. Breaking the feature down into simple, specific steps give us the beginnings of a solution. The (X)HTML: 2.
LESS « The Dynamic Stylesheet language Six Questions: Eric Meyer on CSS3 - Six Revisions Eric A. Meyer knows a thing or two about standards-based CSS and HTML development. He’s a distinguished expert on CSS and HTML, an author of numerous books on CSS, co-founder of An Event Apart, a coveted guest speaker, a member of the A List Apart crew, and founder of Complex Spiral Consulting (I could go on – but I think you get the picture). Eric Meyer was also a prominent invited expert for seven years in the CSS Working Group, the folks in charge of maintaining and developing CSS. Needless to say, he’s a person you’d want to ask about the CSS3. Today I ask Eric Meyer six questions on the topic of CSS3, and here’s what he has to say. What do you think are the most exciting developments and extensions of CSS in CSS3? [Eric Meyer]: This will confirm once and for all that I’m basically a big huge code nerd, but honestly, the advanced selectors. Well, and Web Fonts are kind of cool too. Let’s discuss the modularization of CSS specifications. I don’t honestly know what it’s done to adoption.
Kick-Start Your Project: A Collection of Handy CSS Snippets Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns! Today we are going to see how we can continue this exercise with some things a little bit more technical. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Of course you do my friends! Before we go, let me tell you how I divided this article: Shorthand classes Let’s begin with shorthand classes, which are a very common things. The best example is probably the one where you have some text and an image you want to include on the left side of the text. Miscellaneous
50+ CSS Techniques Designers Should Know 118 Flares Twitter 9 Facebook 0 Google+ 0 StumbleUpon 109 Pin It Share 0 118 Flares × CSS (Cascading Style Sheets) is just an important part of Web Designing. Without CSS, Websites can look untidy as it used to happen before. Designers can alter images, graphics, shading, spacing and other design elements. It can provide the designers with number of new styles to design a website. Navigation Matrix Reloaded Advance CSS Menus Block Hover Effect for a List of Links Cross Browser CSS SlideShow Hoverbox Image Gallery CSS Tabs Make Clickable Areas Bigger CSS-Based Forms: Techniques CSS Based Image Maps Sliding Photograph Galleries CSS For Bar Graphs Control Tabs Some styles for your Pagination No JavaScript LightBox Using CSS Drop shadow on an image CSS Shadows Styling blockquotes with CSS Glowing Tabs Menu Image Replacement for Buttons Cross Browser Multi-Page Photograph Gallery Footer Stick CSS Star Rating Part Redux Zebra Table with JavaScript and CSS Animated Navigation Menu using CSS CSS Photo Zoom
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.
CollyLogic | Simon Collison's Illogical Waffle HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck 30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials Navigation is one of those things you have to get right in order to provide your users with easy access to your website’s content. Today we’ll take a look at 30 well-designed navigation menus. Some of them use CSS sprites, some use jQuery or another library, and others take advantage of the great properties available in CSS3. I hope you will enjoy this post. Please feel free to chime in by leaving a comment at the end of this post as well! 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 3.7 Designs 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. If you enjoyed this article, get email updates (it's free).