Refreshing Your Website

Rate this item
(1 Vote)
refreshing your website with css refreshing your website with css

Refreshing your web design with CSS styling

CSS style changes and fine tweaking for site content

You can do many things to refresh the appearance of your website without having to undertake a complete redesign. You can easily alter how it looks and feels by making some simple changes.

In the same way a new coat of paint can brighten up your home, making adjustments to CSS styling can freshen up your website - without requiring any changes to its core functionality

By adjusting a few snippets of code, you can give your website a cosmetic makeover, transforming its appearance to present visitors with a fresh and dynamic visual experience.

Size & Colour

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

You can use 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.

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, 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 & Typefaces

Different fonts can be added using CSS. Instead of using the same old font, you can call in new fonts to use on your website.

You might want to match your website font to your company brand guidelines. Often, you can buy a typeface to use in print and online. It’s worth bearing in mind that not all fonts work well online and are often remastered especially for this purpose. Most well-known typefaces have online versions available.

You don’t always need to buy fonts – many web fonts are available for free. Google fonts have 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 & Corners

Set borders for a whole box or a single side (top, right, bottom or left). You can set the border's thickness with set sizes such as ‘Thin, Medium or Thick” or use standard sizes such as px, em, rem etc.

Border styles can be set as solid, dotted, grooved, ridge, dashed or double. Colour values can be added to borders as a single value for all sides or multiple values for different colour 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, as a visitor hovers their cursor over text or a box, you can have text or a box change colour. This effect is commonly used to identify buttons and other areas of interactivity.

Any effect that can be set as standard can also be set to be applied when the cursor hovers over it. While hover effects work well on desktop browsers, they do not work on mobile devices. For mobile users therefore, you’ll need to set effects to happen on the click action using JavaScript or jQuery.

Hover to change colour

Click to change colour works on mobile

Transition & Animation

Transitions can be added to CSS between states, using the transition effects to set timing and delays between states and generate animation effects. For example, you might set a box width to 10px – and set it to 100px on hover. The box will instantly change from 10px width to 100% on hover. If you use a transition delay of 2 seconds, the box will gradually increase from 10px to 100px over a period of 2 seconds.

There is also the option to ease the animation in and out so that there’s less of a sudden start and finish to your animation.

 

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

2D & 3D effects

There are options to move items in 2D or 3D dimensions. 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.

Wicko Design logo panel 2d css effect
web design 2D animated css effect

2D box rotated in CSS.

image rotated in 3D css effect
image side panel 3D css effect
image panel 3D css effect

3D box in CSS.

Combining code

Combine CSS with html5, JavaScript or jQuery code, and you can do even more. If you want to know how any changes you make will affect your website's performance, try them out first with A/B testing. Make your changes visible only to a set percentage of your web visitors and compare the results against visitors viewing the original site. In this way, you can be sure of the results before changing the entire website.

Click to open and close the box in 3D.

animated 3D css effect
web styling animated 3D css effect
refresh animated 3D javascript
website 3D javascript
Wicko Design logo panel 3D effect

Click the box to open it.

With relatively little effort, you can make significant style changes to you site and improve the visitor experience.

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

 

More in this category: Are You Src Set? »
Newsletter subscription
Sign up to receive our Newsletter with updates and news

Please enable the javascript to submit this form