Tag: CSS

Add Depth to Flat UI with Flat Shadow.js

A while ago, I stumbled upon a post called Flat design casts a long shadow by the fine folks at Web Designer Depot and I was amazed by how adding a simple shadow could create such a beautiful depth of design to the flat UI elements. What if we bring this effect to the web? Today, let… Continue reading Add Depth to Flat UI with Flat Shadow.js

CSS 3D Image Flip Gallery With Dynamic Shadows

My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows

Tutorial: How To Build Input Fields with Tag-Style Item Blocks

Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself. For this tutorial I want… Continue reading Tutorial: How To Build Input Fields with Tag-Style Item Blocks

How To Build a Range Slider Input with jQuery UI

Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them. I want… Continue reading How To Build a Range Slider Input with jQuery UI

Type & Grids: Free Responsive HTML5 Template

Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple. Its extensive customization options set Type & Grids apart from other templates… Continue reading Type & Grids: Free Responsive HTML5 Template

Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

In this tutorial, I’m going to show you how to create portfolio page with filtering and also hover effect for each of your project item. We will be using a CSS3 and jQuery filter & sort plugin called MixItUp. This script should work pretty well with our previously published tutorial – display images with shape masking and… Continue reading Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

10 Simple and Effective CSS Tricks for Web Designers

CSS is one of the important powers for web developing. You should have known lot of CSS tricks and tips which is simple but effective. Sometime a simple code makes a sweet impact in design. In this post you can learn 10 Simple and Effective CSS Tricks to implement in design. I supposed to post… Continue reading 10 Simple and Effective CSS Tricks for Web Designers

Create a Simple jQuery Image Lightbox Gallery

When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it… Continue reading Create a Simple jQuery Image Lightbox Gallery

New Features of Edge Reflow CC

Edge Reflow application is used by web designers to create a native web surface with CSS design and layout features in a familiar and intuitive way. Edge Reflow helps designers to create resizable layouts that simulate the look and feel of both desktop and mobile devices; control media query breakpoints in design for custom device sizes, add typography to their projects using the integrated Edge Web Fonts, and preview their work on desktops as well as mobile devices using the integrated Edge Inspect plug-in. You can extract CSS code and hand off to developers with confidence that your design vision will remain uncompromised throughout development.

Source: http://designmodo.com/edge-reflow-cc/#ixzz2Z0l3DYR3

Top 10 Skills Employers Look For In A Graphic Designer

Thanks to the digital revolution, graphic designers are now more in demand than ever in 2013. From logo and banner creation to newsletter and app design, graphic design roles today can be extremely diverse and can vary wildly from employer to employer. Despite this, the sector still remains one of the most competitive in the… Continue reading Top 10 Skills Employers Look For In A Graphic Designer

25 Free Tools for Creating Responsive Website Layouts

Free open source tools and resources have been getting online over these past few years. Many of these tools are geared directly towards responsive web design, handling CSS and other typical features. The performance of these tools can vary greatly which is why so many designers are hesitant to jump right into a new library.… Continue reading 25 Free Tools for Creating Responsive Website Layouts

20 Useful CSS Snippets Which Can Help You A Lot

CSS is extremely used when it comes to web development because it helps creating a lot of things with ease. Using CSS means that you will not only be able to create a great web site but it also means that you can optimize it very well. If you combine it with HTML5 and jQuery… Continue reading 20 Useful CSS Snippets Which Can Help You A Lot

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into… Continue reading Create An Animated CSS Box Menu

10 Powerful Responsive Lightboxes

Lightbox has always been one of the great method to display images without having to refresh a page. Nowadays, with the booming of responsive websites, lightboxes also have evolved to adapt nicely with the trendy responsive layout. Here we have 10 responsive lightboxes. Its modal window resizes itself to fit into the window viewport. We… Continue reading 10 Powerful Responsive Lightboxes

Super Smooth CSS Transitions for jQuery

Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still… Continue reading Super Smooth CSS Transitions for jQuery

Responsive Retina-Ready Menu

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to… Continue reading Responsive Retina-Ready Menu

10 Useful Tools for Quick CSS Development

CSS development is a major part of web design; however, it takes a significant amount of time and effort for a web designer to develop CSS from scratch. The good thing is, there are some great tools out there which make this tedious task much simpler. These CSS Development tools will help you in simplifying… Continue reading 10 Useful Tools for Quick CSS Development

25 Free Professional PSD Web Templates

Free PSD templates are very helpful for designers, developers, bloggers and anyone who wants to make a website. Normally web designers create Photoshop PSD website templates as the first step before start coding HTML and CSS to create a web page. Here we have gathered 25 hand picked premium quality website PSD templates for free… Continue reading 25 Free Professional PSD Web Templates

Simple YouTube Menu Effect

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is… Continue reading Simple YouTube Menu Effect