Pure CSS Timeline – Notebook | MattBango.com I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. Introduction First and foremost, is the solution I’m about to share with you the best solution? What are we building? Let’s take a look at a screenshot of the timeline that we’re building in this tutorial. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? What would make this better is if the labels for the x-axis of the timeline would work better with the timeline block labels. The Markup I chose to use a unordered list implementation. The CSS The CSS is as simple as the markup. Summary Take the timeline a step further. Further Reading
300+ Resources to Help You Become a Photoshop Expert Adobe Photoshop is arguably the most powerful graphics and photo manipulation software on the market. You can do virtually anything with Photoshop, from fantasy image collages to complete website designs, and everything in between. Although while Photoshop is incredibly powerful, it can also be incredibly complicated, especially when trying to perform advanced functions. Below are over 300 resources to get you on your way to Photoshop mastery. There’s everything from cheat sheets to brushes to tutorials to action scripts, as well as collections of even more resources and tools. With the resources below, you should be able to do just about anything possible with Photoshop. pCheat Sheets and Reference Guides Keeping cheat sheets and reference guides at hand can speed up your design process and make you a more efficient designer. Adobe Photoshop Keyboard Shortcuts – This site offers a collection of cheat sheets for keyboard shortcuts for each version of Photoshop (as far back as Photoshop 5).
An Introduction To CSS3 Keyframe Animations - Smashing Coding Advertisement By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. A Simple Animated Landscape Scene For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. I’ll describe the CSS related to only one of the elements: the animated sun. The @keyframes At-Rule Here’s the @ rule we’ll be using: @keyframes sunrise { }
12 best places to get free images for your site Adding a few high quality photos is a great way to improve a website, article or presentation - but be careful. A search engine like Google Images will quickly locate just about any shot you could ever want, but using them will almost certainly violate someone's copyright. What's more, search tools like TinEye mean there's a very real chance that the original photographer will find out what you've done. Which could be embarrassing, and maybe expensive, too. Fortunately there's a simple and safe alternative. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Liked this? Sign up for TechRadar's free Weird Week in Tech newsletterGet the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox.
CSS3 Animations I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification). What are CSS Animations? CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes. A simple example Let’s take a look at the code for a simple CSS3 Animations example: 01..animation-container { 02. 03. 04. 05. 06. 09. 10. from { 11. width: 200px; 12. background: #f00; 13. opacity: 0.5; 14. 16. to { 17. width: 400px; 18. background: #ffffa2; 19. opacity: 1; 20. There are a number of new things we see above. The most interesting part here is the animation name, which is, contrary to what you might believe, any name of your choosing. In this example, the element will rotate to being straight, fade in and become twice as wide at the end of the animation. Using keyframe values and iteration-count 02. height: 60px; 03. padding: 10px; 05. 08. 10. width: 200px;
10 Blogs to Help You Become a Photography Expert | Web Design Ledger Photography often plays a major role in web design. So It’s no surprise that many web designers have an interest in it. However, there are so many aspects to photography such as lighting, composition, and equipment features that can make it difficult to master. In this article I’ve rounded up 10 of the best blogs that consistently produce valuable tips and resources to help you with your photography. Digital Photography School Digital Photography School is a website with simple tips to help digital camera owners get the most out of their cameras. The Photo Argus The Photo Argus is a resource for photographers novice to advanced. Epic Edits Epic Edits is a resource and community for photography enthusiasts of all experience levels. PetaPixel PetaPixel was born in May of 2009, and is a blog about photography geared towards tech-savvy digital photographers. Strobist Strobist is about one thing: learning how to use off-camera flash with your dSLR to take your photos to the next level. Photojojo
70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. HTML 5 Resources
15 Great And Free Photoshop Alternatives Adobe Photoshop is definitely the most powerful image editing software. It had a lot of great features and can be used by professional such as web designers and graphics designers. Its filters, plugins, actions, brushes and easy-to-use are the main reasons why most designers prefer Photoshop than other tools. However, Photoshop is very expansive and not all designers afford to buy the original license of it. So, some designers try to look for free alternatives to Photoshop. If you are one of them, you consider yourself lucky as we are going to look into 15 Great And Free Photoshop Alternatives today. GIMP is probably the most popular Photoshop Alternative. 2. For Windows users, you may try Paint.NET. 3. Seashore is an open source image editor for Mac OS X’s Cocoa framework. 4. Artweaver is a simple graphic tool that offers all artistic effects which you need for your work. 5. PhotoPlus is an award winning digital photo editing software. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
The No-Pressure Introduction to CSS3 | Onextrapixel - Web Design & Development Magazine It's difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior. Although they are correct in saying CSS3 can be used now, the decision must still fall to the individual, even if their opinions are based on inaccurate assumptions. In this article I'll try to cover some of the more widely adopted CSS3 advancements, showing you not only how to use them but also the support you will likely expect from the major browsers. Why We Can Use CSS3 Now The arguments as to why we cannot use CSS3 include such things as the specification not being finalised or that some elements of CSS3 are either poorly supported or not supported at all. Vendor Prefixes Vendor prefixes that are in use today are : Examples