website refresh

CSS style changes and fine tweaking

There are a lot of things you can do to a website to refresh its appearance without having to do a complete redesign. Often there are simple changes that can be made which will alter the look and feel of your website.

Rebranding of your website can be done via styling without having to change the core functionality. In the same way a new coat of paint can freshen up your home, adjustments to CSS styling can freshen up your website.

A cosmetic makeover for your website, a few tweaks, snipets of code and a colour change can enhance your websites appearance and give your viewers more confindence.

Size and colour

Making simple edits to CSS code can totally alter the look of your website.

You canuse CSS to:

  • Change the colour of text, background boxes and images.
  • Italicise, underline or adjust font sizes and weights.
  • Set headlines in capitals or sentence case.
  • Add shadows or blend colours together.
Depending on how your website has been coded, a small coding edit can change all headlines and text throughout your site. By making just a few CSS changes these you can completely refresh the visual appearance of your website without needing to change the functional coding.

Red Bold Text

All cap text in Orange

Text with a shadow.

Colour blend and box size.

Fonts and typefaces

Different fonts can also be added using CSS. Instead of using the same old font you can call in a new fonts to be used on your website. You might want to match your website font to your company brand guidelines. Quite often you can buy a typeface to be used on print and also have the same font online. Not all fonts work well online and often typefaces have been remastered especially for use online. Most well-know typefaces have online versions available. You don’t need to always need to buy the font as there are many web fonts available for free. Google fonts has a good selection of online web fonts that have been specially designed and optimised for web use. Adobe fonts also have a good range of web fonts available.

Merienda soft script font from Google.

Merriweather serif font from Google.

Poppins sans serif font from Google.

Borders and corners

Set a border for a complete box or a single side (top, right, bottom or left). You can set the thickness of the border with set sizes such as ‘Thin, Medium or Thick” or use standard sizes such as px, em, rem etc. The border style can be set as solid, dotted, grooved, ridge, dashed or double. Colour values can be added to borders as single value for all sides or multiple values for different colours for each sides. Using a corner radius will curve the box or border. The radius can be set to a fixed size or a percentage.

different borders.

50% corner radius.

corner radiuses 5px , 10px, 20px and 40px.

Hover effects

Using CSS you can set an effect to occur as an item is hovered over, for example to change the colour of text or a box to change colour as you hover over it. This is commonly used to identify buttons and other interactivity. Any effect that can be set as standard can also be set to be applied when the curser hovers over it. Hover effects work well on desktop browsers but there is not a hover facility when you use a mobile device, therefore any hover effects will not be visible when using a mobile or tablet. For mobile you will need to set the effects to happen on click using javascript or jQuery.

Hover to change colour

Click to change colour works on mobile

Animation and transition

Transitions can be added to CSS between states, using the transition effects to set timing and delays between states and generate animation effects. For instance, it you were to set a box width to 10px and set to 100px on hover then the box will instantly change from 10px width to 100% on hover. If you use a transition delay of 2 seconds then the box will gradually increase from 10px to 100px over the period of 2 seconds. There is also the option to ease the animation in and out so there is less of a sudden start and finish to your animation.

 

Hover over the orange box above to see the box increase in size over 2 seconds.

2D and 3D effects

There are options to move items within a 2D or 3D. You can move items across an X or Y dimension and rotate by degrees in a 2D dimension. With a bit more advanced CSS coding you can also create 3D effects using a Z dimension for depth. You can use CSS to tilt and rotate items in 3D dimensional space. Flip an image over or create a cube that spins as you hover over it, all achievable with CSS code. Set the scene with a perspective value and you can make the cube scale and adjust within the 3D landscape.

2D box rotated in css.

3D box in css.

Combining code

Combine CSS with html5 and/or javascript or jQuery code and you can do even more. If you are not sure if your website will benefit from these changes then perhaps try the changes out first with A/B testing. Make your changes and display them to a set percentage of viewers on your website and compare the results against people who have viewed the original site. In this way you can be sure of the results before making a change to the entire site.
Click to open and close the box in 3D.

Click the box to open it.

Fine tuning and tweaking all the changes across your site can make significant style changes to you site and improve the visitor experience.

Wicko Design have considerable experience in recoding and styling websites using html, CSS, jQuery and javascript. Contact us to see how we can help restyle your website.

 

Related Articles

Building an online shop Building an online shop
Add a shop to an existing website or build a new website with an online shop...
Website security Website security
Security on your website Protect your wesbite and content on your website. Most web hosting option now offer and SSL...
AB Testing AB Testing
A/B testing Want to make change to your website? Are you sure that the changes you make will improve your sites...
Linking APIs Linking APIs
Linking APIs to your website API stands for Applciation Programming Interface and are used to communicate with other...