Browsing all articles tagged with css3
Sep
23

Build a Responsive Website Using HTML5 and CSS3 Tutorial

3.2

In this tutorial we will teach you how to create a responsive website using HTML5/CSS3. So rather than talking about, let’s get straight to it. We hope you will leave comment in as we would like to get hear some of your opinions very, very much!

 

 

read more

Aug
8

50 really good plugins for extending Twitter Bootstrap

4.7

Collections of Bootstrap Enhancements

Fuel UX

Fuel UX is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Website | Github

Fuel UX

Fuel UX

read more

Oct
17

Superlative Practices for Efficient HTML5 coding

4

HTML5 is definitely among the hits of year 2012 and this goes without a saying that HTML5 deserves to be a hit. The best thing about HTML5 is that it has made lives of developers/designers a lot easier because it is exciting to use and is easily understandable. If we look at the history of HTML, by far this has been the best thing introduced.

As far as front-end coding is concerned, HTML has quickly paved his way into the world of web development. Since it is the most ‘IN’ things, being a developer, you should definitely learn coding of HTML5 websites. But before you start with that, it is very important to understand the difference between CSS3 and HTML5 because there is a thin line when it comes to these two technological terms. Today, in this article we will discuss some of the best practices for proficient HTML5 coding and if you learn these practices well, I can assure that you will be able to produce some extra ordinary and quality websites.

read more

Aug
28

HTML5 and CSS3 Templates Freebies

4.3

Folder

HTML5 and CSS3 are playing a prominent role in the field of web design. Web developers and designer consider the CSS3 and HTML5 as the first option when designing a web site due to its additional functionality and great features. It let them to create some really stylish and trendy website. So in order to help them, today we have some creatively designed HTML5 and the CSS3 templates and layouts in order to give a professional look to your website.

read more

Aug
23

Awesome PHP & jQuery Tutorials


PHP can be a beautiful thing and that is definitely the case with these awesome tutorials. In this roundup, you will find The Best PHP tutorials on the web today. Click through, learn something. Enjoy!

Ajax-Enabled Sticky Notes With PHP & jQuery

sticky notes

read more

Aug
6

Clean and Minimal Website Example

5

Olivier Staub

A well-designed website is important for the growth of a business and often to create a fresh and clear image for a company or a product. Minimalism has been a popular website design style for years. With more and more designers adopting this type of style there are now lots of great clean and minimal designs around on the Web.

Minimal design is actually a lot more difficult to achieve than you might think; keeping your designs clean but bursting with important information is a fine balance. So for today, we have collected some fresh and stunning examples of clean and minimal web designs to inspire you for your next project.

read more

Jul
31

CSS3 For Internet Explorer : Compatibility Tools And Resources

5

CSS3 has changed the way of representing websites, with lots of advanced properties like border-radius, box-shadow, border-image, transform etc. CSS3 gives web designers complete independence to achieve the desired results. CSS3 has opened up many exciting options to refresh the creativity levels of a designer. Despite being futuristic web styling technology, CSS3 has not yet been accepted completely, or in other words we can say CSS3 still has a long way to go to prove itself to the entire community of web designers.

CSS3 Compatibility Tools, Resources and References for Internet Explorer

The main problem with CSS3 is its compatibility issues with web browsers, most of the modern web browsers have full or partial support for CSS3 and other related web technologies. If you are an Internet Explorer user or you want your site to be IE compatible then you have to think twice before using CSS3, because IE has major compatibility issues regarding some CSS3 properties.

Now you have two options to solve the problem – first change your choice of Internet Explorer and adopt other browsers like Firefox, Chrome or Safari or second, use the following tools and resources for Internet Explorer to beat the compatibility issue.
read more

Jul
25

How to Develop a Responsive Navigation Menu


One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.

There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second.

However, rather than applying an instant solution, in this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.
read more

Dec
4

Pushing Your Buttons With Practical CSS3


Step 1: The Super-Awesome Button

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa.” Those buttons will be our first step to creating buttons that really click. We will briefly review the technique and then extend it, fixing the problems that we have encountered along the way.

Using Box-Shadow and RGBa

Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. As you can see below, we can use box-shadow to create a drop-shadow, but the shadow color doesn’t work on both dark and light backgrounds. To get around that, we used a color model that is available in new browsers: RGBa.

Buttons-1 in Pushing Your Buttons With Practical CSS3

RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. In the buttons above, the gray shadow that we created for the white background is much too light against the dark background. However, using RGBa we can create a black shadow that is transparent. This allows the shadow to work against any kind of background:

Buttons-2 in Pushing Your Buttons With Practical CSS3

button.awesome, .button.awesome {
	…
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	…
}

That solves our box-shadow problems. All that’s left is a dash of CSS properties and a simple PNG overlay to create a finished button that can be restyled with any color, on any background, and that will work just fine.

read more