CSS Pagination

This isn’t an inbuilt CSS property but by using various inbuilt properties you can add a foot-pager on the website.

 

Eg:

 

We’ve created hyperlinks for each page here and now let’s add the styling for our pages.

Note: not(.active) tells the website to not use the rule on the active class.

Output:

The purple box indicates the active page, and the black indicates the page on which the cursor has hovered.

 

CSS Masking

Masking is used to blend one layer over other either partially or fully. There can be various methods of doing so like using an image as a layer, using a linear gradient, radial gradient, conic gradient, etc.

 

CSS ToolTip Text

It is a special hover method to show extra text about the element when moved over it. When the mouse is hovered over that element, a tooltip dialogue box is displayed conveying the required information.

 

To implement tooltip let’s create some HTML text first.

Here we have created to distinct classes to implement the CSS. Now the CSS rules would be written as follows.

Until the mouse hovers, the display is kept “hidden” and the rules of the tooltip text are written. The moment we hover the visibility of the dialogue box is set to be true.

 

Output:

This way we can add a dialogue box on the elements to add accessibility to our website.

You can also experiment with the tooltip animation by including: CSS Transitions properties here.

 

CSS Shadows

When it comes to web design, CSS (Cascading Style Sheets) plays an indispensable role in enhancing the visual aesthetics of a website. Among its vast array of properties, the ones that help bring depth and focus to an element are the shadow and outline properties. Let’s delve into the magic of CSS shadows and outlines.

Box Shadows

box-shadow is a popular CSS property that enables designers to add shadow effects around an element's frame. It can be used to give any element, be it a div, image, or button, a 3D feel or to emphasize on hover.

box-shadow: h-offset v-offset blur spread color inset;

• h-offset and v-offset: Determines the shadow's horizontal and vertical position.
• blur: The larger the value, the blurrier the shadow.
• spread: Expands or shrinks the shadow size.
• color: Defines the shadow color.
• inset: Makes the shadow inner.

Here is an example:

.div-element { box-shadow: 5px 5px 15px 5px #888888; }

Text Shadows

text-shadow is utilized to give shadows specifically to the text. It can elevate the readability of the text or give it an elegant appearance.

 

The Syntax for Text-Shadows is as follows:

text-shadow: h-offset v-offset blur color;

Here is an example:

.text-element { text-shadow: 2px 2px 4px #888888; }

Outlines

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out". It's commonly used for accessibility purposes, like highlighting focused elements.

The Syntax for Outlines is as follows:

outline: width style color;

• width: Sets the outline width.
• style: Determines the style of the outline such as solid, dotted, or dashed.
• color: Sets the outline color.

Here is an example:

.button-element:focus { outline: 2px solid blue; }

Differences between Outlines and Borders:

While both can visually appear similar, outlines differ from borders in a few ways:

1. Position: Outlines don't take up space; they're drawn around the element, outside of any border.
2. Offset: Using the outline-offset property, you can set the space between an outline and the edge or border of an element.
3. Width: Borders can have varying widths on different sides, outlines have a uniform width.
4. Rounded Corners: Borders can have rounded corners using border-radius, while outlines generally cannot.