CSS, short for Cascading Style Sheets, is a web developer's go-to toolkit for styling and design. Just like algorithms in computer science, CSS employs unique techniques to achieve various visual goals. Here, I'll walk you through my top eight CSS tactics.
1. Focus, Hover and nth-child
Focus, Hover, and nth-child are a few of the most useful pseudo classes in CSS. A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Pseudo-classes allow you to apply styles to elements based on various conditions that cannot be represented by simple selectors alone.
1. Hover. :hover allows you to change the style of the element when the user's mouse hovers over it.
2. Focus. :focus allows you to change the style of the selected element when an element is in focus, and the style remains as long as the element is in focus.
3. nth-child. :nth-child(n) allows you to change the style of element "n" contained in the parent block.
These classes are demonstrated below :
As shown above, the nth-child class is given "odd" as a parameter, allowing it to change the color of the odd-numbered spans contained inside the section (keep in mind it does not depend on the TEXT contained in the spans). Instead, you can pass in even or any number of your choice.
2. Transitions and animations
In CSS, transitions and animations are powerful tools for adding dynamic and visually appealing effects to web elements. Transitions enable smooth changes in property values over a specified duration, offering a seamless transition between different states. For instance, you can use transitions to smoothly alter the color or size of an element when a user hovers over it. On the other hand, animations provide more complex and customizable motion effects. CSS animations allow you to define keyframes that describe the style changes at different points in time, creating more intricate and dynamic movements. Whether it's a subtle fade-in effect or a complex sequence of transformations, transitions and animations enhance the user experience by bringing life and interactivity to web interfaces, making them more engaging and responsive.
The following clip demonstrates the above :
As shown above, transition: , allows for a gradual change in the background-color attribute of the button instead of a harsh one. Some transitions are demonstrated below:
The @keyframes rule defines an animation named "rotate" that gradually rotates an element 360 degrees. The .spinner class applies this animation, creating a spinning effect. This animation is relatively simple, but you can create a lot more complex animations using CSS, which an article in the near-future might elaborate on.
3. 3d effects
We can make use of the box-shadow and text-shadow provided by CSS to create 3d illusions. box-shadow as the name suggests allows you to add a shadow, or multiple, to an element such as a div or section, whereas text-shadow does the same for text inside tags. The following clip illustrates a few designs you can create :
At first glance, these effects may seem complex, but all you need to do is tweak the four parameters to get the effect you desire. Any text, or box, shadow is added as such :text/box-shadow : x y blur-radius color;
The first parameter determines the position of the shadow on the x axis, the second determines how far away from the y axis it will be, the third determines how far the shadow will be stretched out and the last determines the color. Using these four parameters, you can create any number of combinations to get the effect you need.
4. Translating and rotating
Translating and rotating in CSS is a simple yet impressive task, which can be done via keyframes. Both translate and rotate are enclosed in the transform attribute, as demonstrated below:
5. Translating and rotating in the third dimension
CSS can be used to create 3d transforms as well. However, to do this, you have to define a perspective attribute of the body. In CSS, the perspective property is used in combination with 3D transformations to create a sense of depth and perspective for transformed elements. When applied to a parent container, the perspective property determines the distance between the viewer and the z=0 plane (the plane at which elements appear without any perspective). This allows for functions such as translateX and translateY etc.
As the object approaches us, we can see it get bigger, which is a result of translating in the z axis.
6. Filters and Gradients
CSS filters enable the manipulation of visual content by applying a variety of effects. Filters such as blur, brightness, contrast, grayscale, sepia, and more can be used to alter the appearance of images and elements. For example, applying a blur filter can create a subtle or dramatic softening effect, while adjusting brightness and contrast allows for fine-tuning the overall visual impact. For example :
CSS gradients provide a way to smoothly transition between two or more colors, either horizontally, vertically, or radially. Gradients can be applied to backgrounds or even as text colors, creating visually appealing and dynamic designs. Linear gradients move from one color to another in a straight line, while radial gradients radiate from a central point.
7. Fonts, and Font awesome
While there are a limited number of inbuilt fonts in CSS, you can use import to import fonts from libraries on the internet, such as google fonts. For example:
To get the import code for these fonts, head over to the google fonts webpage and copy the text from there.
Coming on to font awesome. Font Awesome is a true gem for web designers and has saved me much time and effort personally. To use, head over to cdnjs.com and copy the font awesome cdn and add it to your html. Or, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. You place Font Awesome icons by using the prefix fa and the icon's name. To find the icon of your choice, head over to Font Awesome and copy the imbed link, and add it to your html.
8. Button styles
In CSS, button styling is a fundamental aspect of creating visually appealing and interactive user interfaces. Buttons can be customized to match the overall design theme of a website, providing a cohesive and engaging user experience. CSS properties such as background-color, color, border, padding, and box-shadow allow developers to control the visual aspects of buttons. Hover and active states can be further enhanced using pseudo-classes like :hover and :active, enabling smooth transitions or color changes when users interact with the button. Additionally, CSS frameworks and methodologies like Flexbox and Grid can be employed for layout consistency and responsiveness. I have created a couple of button styles using the ::before and ::after pseudo classes, shown below.
And that concludes this list!