HOW TO CREATE AN AWESOME RESPONSIVE MENU FOR YOUR WORDPRESS THEME

Making your WordPress site accessible on mobile devices starts – but doesn’t end – with the installation of a responsive theme. Navigation is hugely important to the user experience of any site and forcing menus designed for much larger devices onto mobile users could undo all the good work of the responsive design. Here’s five…

10 Amazing Pure CSS3 Image Sliders

Here are 8 amazing pure CSS3 image sliders that can help you in making your website carry large contents in a stylish way. CSS3 Image Slider This slider used radio input buttons and their labels with the :checked pseudo class to control the sliding images. CSS3 image slider with stylized thumbnails Learn to make a…

10+ Best HTML5 Web Form Templates

HTML5 Web Form Templates designed with HTML5 have become very popular among the folks. Here is collection more than 10 of the best HTML5 Web Form Templates which help you create creative web forms with great specifications. Best HTML5 Website Web Form Templates to create a new form layout. Build a responsive form without needing to write any code.…

Building a Responsive Two Column Layout

Introduction This tutorial will explain how to create a two column layout with one fixed column and one fluid column. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. We will start with a mobile first view that consists of the columns stacked on top of each…

10 Best CSS Gradient Generators

Creating CSS gradients can be time-consuming and tough. This short list of free online tools will help you quickly generate CSS gradients by giving you a graphical user interface and other useful functionality. These gradient generators will be handy when you’re trying to produce more complex gradients or when you’re just starting to learn CSS3.…

Create fancy-looking call outs with lightweight CSS

A recent calendar project included the requirement for a call out for images and anchor linking which would format the content with spacing, indentation, alignment, font styling, and position. This led me to create a simple yet fancy call out / tool tip to replace the default alternate (alt=””) or title (title=””) attributes for image…

2013 CSS Wishlist

I’m pretty happy with CSS. I know it’s common to complain about CSS and how it was never meant to build web pages like we do now and it’s ill-suited to many tasks and yadda yadda. But I dunno. I work with it every single day and I feel like it’s getting the job done…

CSS Timing Notifications, Animations, and Progress Bars

The article in review did a great job of illustrating and articulating its point on how and when to use animations. The basic fact is that many legacy browsers do not support animations and never will. You need to gauge your audience and see if animations will benefit you in the long run or if…

50 Useful Fresh CSS3 and jQuery Tutorials

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “write less, Do more”. Modern web sites are designed to provide various types of…

CSS Button Tutorial: How to Code Buttons in 5 Simple Steps

Here at Design Shack we like to feature a full range of tutorials, from expert PHP projects to very simple CSS tips. Today’s tutorial is targeted at those still in the beginner stages of CSS. One of the most frequent questions I get from CSS beginners is, “How do I create a button?” It’s a…

Pure CSS3 Navigation Menu Generators and Tutorials

The introduction of CSS3 has brought great possibilities for web designers and developers. With the support of 3D transform, CSS3 animation and advanced styling, it’s possible to build a navigation menu without Javascript but still able to display it with visually impressive subtle animation and styling. Depend on how much time you have, we have…

CSS Masking

Two commonly used operations in computer graphics are clipping and masking. Both operations hide visual portions of an element. If you have worked with SVG or HTML Canvas before, these operations are probably not new for you. Clipping defines the region of an element that is visible. Everything around this region does not get rendered – it gets “clipped”.…

Rock Solid HTML Emails

At some stage in your career, it’s likely you’ll be asked by a client to design a HTMLemail. Before you rush to explain that all the cool kids are using social media, keep in mind that when done correctly, email is still one of the best ways to promote you and your clients online. In fact,…

30 Creative Implementations Of CSS In Web Design

Writen by Bogdan CSS is one of the favorite technique in website designs for designers. This is the most popular technology among the web designers and web developers. Now a days, some technologies are mostly used in website designs such as Ajax, JavaScript, CSS, jQuery, HTML5 and CSS 3. CSS 3 is the new web standard and…

20 Very Useful CSS Snippets Which Will Make Your Work A Lot More Easier

20 Very Useful CSS Snippets Which Will Make Your Work A Lot More Easier Writen by Bogdan Being one of the most important tool for creating web sites, CSS is highly required and used as many times as possible. Due to its popularity, you can find yourself spending a lot of time practically reinventing existing things…

CSS3 SLIDING ANIMATIONS

Most of the image gallery display nice little image with a cute description underneath it. If you want to make yours a little better, here’s a quick tutorial on how to improve the the user experience of your image gallery. The concept is easy, each images are displayed but not the text. The text will…

13 Best CSS Hack

1. Target IE6, IE7, and IE8 with only 4 characters (hack) See the source above for a quick explanation. And don’t ask me to explain why 9 works for IE8…but it does. Use these with caution. [css] body { color: red; /* all browsers, of course */ color : green9; /* IE8 and below */ *color…

Resize image and rounded corners using CSS

The idea is to use the background-size: cover; CSS property which handles the centering, cropping and, well, covering. Here’s an extract from the fiddle: div.yourWrapper { width: 50px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: url(‘some_image.jpg’) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Basic Pure CSS3 Form Styling. No JS Required.

Pure CSS3 form styling is becoming more popular. It has its drawbacks, but the increased loading time from the traditional JS overlay is wasted tenths of seconds when talking about optimizing to maximize for your entire audience. Most forms are fairly straight forward and only utilize inputs and text areas rather than radios and check…