As designers I am sure we have encountered cases where we have begun cross browser testing of a new website only to find some elements not displaying consistently on all browsers. By beginning our projects with a CSS reset helps us to ensure our websites and mobile apps looks as close as possible to original design regardless of browser. All browsers have their own set of default CSS settings and if we not overwrite these during our project they will rear their ugly head in some unexpected way during browser testing.
There are many different CSS resets out there and simple goggle search will come up with many but I am just going to cover the basic here today. Continue reading
In this tutorial we will show you how to set up Joomla(2.5 or 3.0 and up) in Dreamweaver CS6 so that you may edit the CSS of your layout while still making good use of Dreamweaver’s great productivity tools. One warning before we proceed though, Whilst working with Joomla in Dreamweaver CS6 do not edit any of the core Joomla files. This goes for all of Joomla’s PHP and CSS files. Only work with the CSS files directly assosciated with the template you are working on. If it isn’t a CSS file you should probably not be using Dreamweaver for this task. If you touch anything else the risks of you breaking something are significant.
In this quick tip I will show you how to create unevenly corners on a CSS3 HTML element. There is a lot of information out there on how to create evenly rounded corners but not a lot on how to create a more elongated rounded effect on our corners.
CSS3: Uneven Rounded Corners
Unevenly rounded corners only works on the… Continue reading
This is more of a tip than an actual tutorial but we will be showing you how to round off the corners of an image using just CSS3. This tip will work for all browsers except for a few older IE versions.
This tutorial carries on from Dreamweaver CS5.5: Creating a WordPress 3.1 Theme in Dreamweaver CS5
In the second part of this tutorial we will look at how to change the content, sidebar and footer sections of your WordPress template using Dreamweaver CS5.5.
Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.
In this tutorial we will show you how to set up Joomla(1.5 or 1.6) in Dreamweaver CS5 so that you may edit the CSS of your layout while still making good use of Dreamweavers great productivity tools. One warning before we proceed though, Whilst working with Joomla in Dreamweaver do not edit any of the core Joomla files. This goes for all of Joomla’s PHP and CSS files. Only work with the CSS files directly assosciated with the template you are working on. If it isn’t a CSS file you should probably not be using Dreamweaver for this task. If you touch anything else the risks of you breaking something are significant.
In this tutorial we will be showing how to create an amazing background blending images into a standard gradient background. For this we will be using the color dodge tool and a gradient mask in Photoshop CS5. We will then combine a few CSS tricks to create our background for a website.
When Completed we should have a back ground image that looks something like this:This is down one side of a website I am working on. The background itself slide under the edge of the page itself where the shadow can be seen.
In this tutorial we will look at the basics of bending a logo around a logo. We will only be looking at the basic of doing ti today. To get a menu to wrap around your logo will require you to fine tune the positioning of menu list items. Every logo is different and every menu item need to be place using CSS individually. So unfortunately there is no cut and paste solution to this problem. However we can show you the basic’s so that you can begin wrapping your menu around your logo as suits you.
This is an image of roughly what it looks like. This is a rough menu and before I used it I would refine the positioning more but it does give you an idea of what is posible using this technique.
In this tutorial we will show you a simple way of staggering images as they go down your website. With this method if you wish to control the position of a particular photo you still can with inline CSS, however if you do not style a particular image the CSS will automatically stagger your images down the page.
The images will stagger like the images do in this screenshot I took of a test site.