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.
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.
50% corner radius.
corner radiuses 5px , 10px, 20px and 40px.
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.
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.