Recreating Photoshop Effects in CSS – Part 2 – The CSS Code

00-featured-preview-buttons-in-css

In part 1 of this tutorial series I demonstrated how to create vector shape buttons with layer styles in Photoshop. For part 2 I’ll explain how to write code to recreate these layer styles in CSS. Modern development techniques have advanced along with browser support to make CSS3 a viable option for everyone. Photoshop layer […]

Recreating Photoshop Effects in CSS – Part 1 – The PSD

00-featured-buttons-psd-styles-photoshop

Freelancers and agencies both require a smooth design workflow. This typically starts out with drafting wireframes that eventually turn into full mockups. These mockups are coded into HTML/CSS layouts that are finalized and handed off to the client. It may seem daunting but if you want to understand the full creation process then it’s worth […]

10 Tutorials for Aspiring Web Designer

ocean in coffee mug

Creativity has no ends and web design is all about creating new designs online. We see web designers learning about new design skills everyday & surfing the web to know the latest web design trends most of the time. This is the very reason, the best design magazines and blogs continuously share the collection of […]

Building a Company Team Page with Dynamic Content

company-team-page-details

Any business with a large team of employees might consider publishing more detailed information online. This helps customers and clients build a deeper connection with the business, and it offers a more personal touch for each team member. It’s pretty simple to list employees into a table – but what about dynamically-driven content? In this […]

Coding a Magazine-Style Blog Post Layout with CSS3 Effects

featured-magazine-post-layout-preview

Average weblogs have slowly been transformed into content-packed online magazines. Over the past 5 years I have noticed a rise in digital magazines curating their posts online instead of print. One early example would be Mashable but today there are hundreds of different sites. For this tutorial I’d like to demonstrate how to build a […]

How To Code an HTML5/CSS3 Shopping Cart Webpage Layout

spyre-shopping-cart-ui-preview

I’ve wanted to put together a frontend web tutorial for a few months now. These types of articles provide an excellent point of reference for new designers who are growing accustomed to popular UI/UX trends. Specifically for designers who aren’t sure where to go on their next project, and may need a small boost of […]

How To Build a Tabbed Ajax Content Widget using jQuery

featured-tabbed-content-widget

Blogs are usually full of different posts all with varying degrees of popularity. Readers don’t always know how to find related posts without using the search feature. It helps to build smaller widgets right into the page that can automatically sort through content based on different criteria. In this tutorial I want to demonstrate how […]

How To Build Tag Input Autocomplete Suggestions with Tokeninput

dynamic-tag-input-suggestions-preview

Tag-based input fields are becoming more common amongst social networks. Also consider new applications such as user-submitted news which provide another method for predefined tags. There are other plugins available which display tag choices in a formatted list using a typical input field. But in this tutorial I want to showcase how we can include […]

How To Build a Grid-Style Image Gallery with jQuery Modal Popups

jquery-lighter-image-modal-preview

There are a number of free open source image gallery plugins you can build with jQuery. Each has their own unique features and reasons you may incorporate the design into your website. But I really like the simplicity of jQuery Lighter. The plugin focuses around smaller image thumbnails which provide a mini-lightbox once clicked. I […]