Designing for WordPress: Complete Series & Downloads Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme. Part One: Download, Install, "Reset" Theme Video PageDirect Video Download (.mov) Part Two: Structure Video PageDirect Video Download (.mov) Part 3: Finishing Touches, Extra Stuff Video PageDirect Video Download (.mov) Download - "Personal Homepage Theme" I figured I might as well call it what it is! I literally designed this for use on my personal site, so you can see it live on chriscoyier.net. Download Theme Note: The orginal Photoshop file is included in the download in a folder called "orig" in the theme folder. In case you don't already know. Share On
Buttons - A button library built with Sass Flat Buttons press mepress mepress mepress mepress mepress me Sexy CSS3 menu – Red Team Design One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way. In today's article, you'll learn how to create a good looking menu using some CSS3 magic. View demo The idea If you are a web developer you may have heard of tools called CSS pre-processors. While visiting LESS's site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only. LESS download button - at this time The HTML <nav><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Categories</span></a></li><li><a href="#"><span>About</span></a></li><li><a href="#"><span>Portfolio</span></a></li><li><a href="#"><span>Contact</span></a></li></ul></nav> Pretty clean, except for the span element. The CSS Removing the default list styles Style the proper links Multiple CSS3 properties were used to create the above.
15 Tips and Techniques for Styling the button element - Speckyboy Web Design Magazine Lets be honest, most of the form buttons that you come across are ugly, they work as intended, but really, really look awful. There are reasons for this, firstly form buttons, as with almost anything to do with forms, are notoriously tricky to style with consistency, and secondly, styling can cause major problems with cross browser and cross platform compatibility. The button element defines the submit button. Designers may choose to use the input element to specify these buttons, but are limited to only very basic styling. In this article we highlight 15 methods and techniques for improving the styling of your form button. Super Awesome Buttons with CSS3 and RGBa With a little more refinement, you can make your html buttons look more actionable and refined while maintaining the ability to function as a button across browsers. Simply-Buttons v2 Simply-Buttons v2 is a technique for creating beautiful cross-browser buttons with pure CSS (can be improved with JavaScript). Rounded Form Buttons
How to create slick effects with CSS3 box-shadow – Red Team Design Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips
CSS Buttons: Tutorials and examples Creating buttons with CSS is one of the most experimented-with web design techniques around. Examples and tutorials abound. The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. Below we’ve collected more than twenty tutorials, examples, and tools for creating CSS buttons, most of which use CSS3. Included are buttons to suit virtually every design style. If you have other tutorials or examples you’d like to share, please do so in the comments! Tutorials and articles Rediscovering the button element A really helpful article discussing the button element in CSS, which is often overlooked by designers. Beautiful CSS buttons with icon set Here’s another article that talks about how to create buttons with icons, though using span classes rather than the button element. Build kick-ass practical CSS3 buttons Beautiful Photoshop-like buttons with CSS3 Better button and navigation interactions Super awesome buttons with CSS3 and RGBA
12 Excellent CSS3 Button and Menu Techniques | Tutorials 1139 shares 20 Fresh CSS3 Tutorials The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Read More 559 shares Developing Streamlined and Efficient CSS Styles CSS can be compared to the sculptor’s tool set when crafting a sculpture.
Ghost Buttons - THE Minimalist Web Design Trend Feb 04 2015 The times of gloss and 3D effects are over – at least for now. The trend in web design goes towards minimalism which is also reflected in the style of buttons. The hot so-called ghost buttons fit perfectly with the reserved look of modern websites based on flat design or even more trendy material design. Ghost buttons basically consist only of a very thin outline with some text in it. They can hardly be created more basic – at least, if you want them to be recognized as what they are. Parallax website with simple ghost buttons Easy to Design and Mark Up Ghost buttons have a very basic design and can be easily marked up through a style sheet. However, a button is not always created with a button element. The Background Counts Minimalism alone is not a guarantor for a well made website. Creative Ad Awards website Apart from large-sized photographs, format-filling background videos become more and more popular. Union Room website with video background Website with radio ghost buttons