Cascading Style Sheets posts

Developing a Responsive Website: Secondary Page

We’re going to begin to wrap up our tutorial on creating a responsive website this week by creating a secondary services page to feature the necessary, and important, content of our site.  Keeping a sites layout visually appealing is a crucial aspect of keeping a visitor on your site. Having a simple box filled with verbiage running from left to right is not very inviting, nor aesthetically pleasing.  When displayed like that, the sheer amount of text could be enough to cause your visitor to quickly...

Scaling Web Page Elements Using The CSS3 Scale Transform

CSS3 transforms allow you to apply various visual effects to the items in your Web pages, including scaling elements to either increase or decrease their size. The scale transform requires only a single CSS declaration, but to ensure your pages work in the different CSS3 supporting browsers, you do need to add amended versions of the declaration to your code. As with any transform, you can apply the CSS3 scale effect on user interaction, as well as using an animated transition. Create a Page ... Create...

Moving Web Page Elements Using The CSS3 Translate Transform

CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we'll go through the process of translating a page element using a CSS3 transform. The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex....

Developing a Responsive Website: The Footer

At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions. Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright...

Developing a Responsive Website: The Homepage Portfolio Slider

We are going to continue on with our designing a responsive website tutorial where we have already learned about the background images, the site's navigation and the content. This week we’re going to work on adding a little more content to our homepage. At this point you should have a site that looks similar to this. You should have a full-screen background image that changes in size to match the viewers screen resolution, a main navigation bar, and a little blurb that will grab the attention of the viewer...

Responsive Widgets

Responsive design is a hot topic of web development these days, and with a simple (and now well supported) way of handling the ‘one site for all clients’ model (and I mean clients as in browsers/platforms/devices, not the people that give you money in return for a web site) it should well be. Redirecting mobile users to /m/ or some other cut-down area of your site is becoming a technique of the past. Using collections of utilities, such as the excellent 320&up, makes building responsively much...

Developing a Responsive Website: Background Images

A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways.  Now that we’ve seen a few examples in action, let’s create a responsive website of our own.  In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions. Before we dive in to the HTML, let’s cover the “viewport”...

Designing a Clean Website Part 4: The Secondary Page

This week we’re going to finish up our series on how to develop a clean website by laying out a secondary page. We’re going to include a secondary navigation bar along the top of our design, as well as include all of our text for the section on one page.  This will eliminate the unnecessary loading of other pages when all that’s changing is the text.  It will allow the visitor to browse your site quicker and be less work for you to develop. When all is said and done, this is what you’ll have developed:...

Designing a Clean Website: Gradients

This is our third installment of how to design a clean a minimalist website. First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3.  Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3. Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage. We left off in part two after we pulled our header, navigation and main image in to our layout.  Now that we have...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns