Filed under Articles, Coding, CSS, css3, Design, generators, interface, links, Resources, roundup, Tips, Tools, Web Design by Chris Spooner
With the latest advances in CSS3 many of the effects that were once only achievable in Photoshop can now be replicated in CSS code, but it’s sometimes difficult to visualise the appearance of these effects when staring at a few lines of syntax. This is where CSS generators come in handy, this roundup of tools [...]
Continue Reading "Handy Roundup of CSS3 Generators and Tools"Filed under Coding, css3, Design by Tom Giannattasio
 |
This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you haven’t seen it yet, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.
Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).
Continue Reading "Beercamp: An Experiment With CSS 3D"Filed under Animation, Articles, Coding, CSS, css3, Design, keyframes, links, Resources, Web Design by Chris Spooner
We started seeing experimentation and articles about CSS3 @keyframes animation in 2011, but back then support was limited to webkit browsers. As of mid 2011 Firefox 5 gained support, and we can expect the next incarnation of Internet Explorer (10) to also show support, so now is the perfect time to get to grips with [...]
Continue Reading "Useful Links for Learning CSS @Keyframes Animation"Filed under Coding, CSS, css3, Design, interface, layouts, media queries, responsive, techniques, Tips, Tutorial, Tutorials, Web Design by Chris Spooner
If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure. If you cast your mind back [...]
Continue Reading "Create a Responsive Web Design with Media Queries"Filed under Coding, CSS, css3, form, How to, HTML, techniques, Tips, Tutorial, Tutorials, Web Design by Chris Spooner
Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting. The form we’re [...]
Continue Reading "How To Build a Handwritten Letter Style Contact Form"Filed under ads, Apps, Art, best of, books, color theory, Compilation, css3, cURL, films, flash, header, html5, infographic, multitasking, PHP, Posters, sass, social networks, Steve Jobs, Twitter, web forms, Wordpress by Cameron
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of [...]
Continue Reading "Our favorite tweets of the week Feb 6-Feb 12, 2012"Filed under Code, Coding, Contests, css3, drupal, html5, Joomla, psd to html, Web Design, Wordpress by Cameron
Designing a new website is great, but not everyone loves taking their PSD designs and converting them into actual, working HTML and CSS. In fact, there are some designers who positively hate it (and often get someone else to do that part for them rather than suffer through it themselves). A PSD to HTML service [...]
Continue Reading "Win $1,000 in PSD to HTML services!"Filed under css3, Design, Resources, Web Design by Kevin Muldoon
|
|
If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it.
Continue Reading "40 CSS Reference Websites and Resources"Filed under accessibility, cms, css3, framework, grids, media queries, mobile, responsive design, Web Design by 352 Media
When you already have a full plate of client work, it can be difficult to get into new technologies. Responsive design is a big buzz-phrase right now, but it’s unnecessary to force it on a client unless their users will see a benefit from it. At 352 Media Group, we recently saw an opportunity to [...]
Continue Reading "Responsive design in the corporate world"Filed under Art, best of, Compilation, creativity, CSS, css3, Design, e-commerce, freelancing, Infographics, Inspiration, lists, newsletters, Pricing, sculpture, Steve Jobs, taxonomy, Twitter, User Experience, Web Design, wireframing by Cameron
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of [...]
Continue Reading "Our favorite tweets of the week Jan 2-Jan 8, 2012"Filed under Coding, css3 by Peter Gasston
|
|
Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature.
That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.
Continue Reading "Adventures In The Third Dimension: CSS 3D Transforms"Filed under bloggers, blogging, contributors, css3, freelancing, html5, mobile design, News, responsive design, Wordpress, writing by Cameron
Webdesigner Depot is always looking to add some new regular content contributors! With more than 80,000 RSS subscribers and over 340,000 Twitter followers, WDD is great exposure for bloggers and designers alike. We’re looking to hire some regular paid bloggers with a strong design background. Contributors should be able to write at least one blog [...]
Continue Reading "Interested in contributing to Webdesigner Depot?"Filed under css3, General, gradient by Nicola Armellini
Retracing the steps you’ve taken is a helpful way to understand how well you’ve executed your vision – whatever that might be. What could you have done better? What should have been avoided? Today, I’ll share what we’ve le…
Continue Reading "From Idea to Market: How We Built Gradient"Filed under Coding, css3 by Divya Manian
|
|
A few concerns keep bobbing up now and then for Web developers, one of which relates to how to lay out a given design. Developers have made numerous attempts to do so with existing solutions. Several articles have been written on finding the holy grail of CSS layouts, but to date, not a single solution works without major caveats.
At the W3Conf, I gave a talk on how the CSS Working Group is attempting to solve the concerns of Web developers with multiple proposals. There are six layout proposals that are relevant to us, all of which I described in the talk. Here is a little more about these proposals and how they will help you in developing websites in the future.
Continue Reading "Six CSS Layout Features To Look Forward To"Filed under advertising, Clients, color Schemes, Compilation, css3, Design, e-commerce, Fonts, forms, Frameworks, freelancing, Icons, javascript, jQuery, Resources, responsive design, Typography, Web Apps by Cameron
The December edition of what’s new for web designers and developers includes new web apps, frameworks, some JavaScript tools and resources, color tools, e-commerce platforms, and a number of great new fonts. Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and [...]
Continue Reading "What’s new for designers, December 2011"Filed under Coding, CSS, css3, Design, interface, techniques, Tips, Tutorials, Typography, Web Design by Chris Spooner
Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with [...]
Continue Reading "How To Create a Stylish Drop Cap Effect with CSS3"Filed under Art, awards, best of, Compilation, content, creativity, css3, facebook, freelancing, image hierarchy, legos, mobile, office design, practice, print styles, responsive design, sculpture, sopa, talent, Twitter, Typography, ui, Wallpaper, workspace by Cameron
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of [...]
Continue Reading "Our favorite tweets of the week Nov 28-Dec 4, 2011"Filed under css3, Design, html5, templates by Kevin Muldoon
|
|
There have been some great free templates released over the last year so we thought it would be appropriate to share some of these great new designs with you all. In web development, it’s important to move with the times and embrace the latest changes. As such, all of the templates listed in this article were designed using HTML5 and CSS3; both of which will help future proof your website and make them more accessible.
Continue Reading "40 Beautiful Free HTML5 & CSS3 Templates"Filed under animations, Art, best of, blogging, Compilation, copywriting, css3, flash, Fonts, Hacks, Icons, illustration, javascript, local search, photoshop, plugins, reference, Resources, Twitter, Wordpress by Cameron
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of [...]
Continue Reading "Our favorite tweets of the week Nov 21-Nov 27, 2011"Filed under accessibility, Articles, Coding, CSS, css3, Design, Fonts, HTML, interface, javascript, links, Resources, Typography, Web Design, web fonts by Chris Spooner
Over the past few years the number of fonts available for use in web design has dramatically increased. It wasn’t long ago that we all knew not to stray further than the basic Arial, Helvetica, Times, Georgia mix, but now there’s a range of services that allow the use of almost any font imaginable in [...]
Continue Reading "Which Custom Web Fonts Solution Should You Use?"