Scribd
Upload
82 views6 pages

678678

The document contains code snippets and explanations for different CSS techniques including: - Creating a custom hover effect for navigation links using pseudo-elements - Hiding an element visually while still allowing it to be accessible - Adding a fading gradient to indicate more content can be scrolled - Creating a polka dot background pattern - Customizing scrollbar styles - Making content unselectable - Displaying the URL for links with no text - Vertically and horizontally centering an element using display table - Creating a loading donut spinner animation

Uploaded by

Navdeep Kaur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
82 views6 pages

678678

The document contains code snippets and explanations for different CSS techniques including: - Creating a custom hover effect for navigation links using pseudo-elements - Hiding an element visually while still allowing it to be accessible - Adding a fading gradient to indicate more content can be scrolled - Creating a polka dot background pattern - Customizing scrollbar styles - Making content unselectable - Displaying the URL for links with no text - Vertically and horizontally centering an element using display table - Creating a loading donut spinner animation

Uploaded by

Navdeep Kaur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- Creates a custom hover and focus effect for navigation items, using CSS transformations.

- Use the `::before` pseudo-element at the list item anchor to create a hover effect. Hide it using
`transform: scale(0)`.

- Use the `:hover` and `:focus` pseudo-class selectors to transition the pseudo-element to `transform:
scale(1)` and show its colored background.

- Prevent the pseudo-element from covering the anchor element by using `z-index`.

```html -->

<nav class="hover-nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>
<!-- Hides an element completely (visually and positionally) in the DOM while still allowing it to be
accessible.

- Remove all borders and padding and hide the element's overflow.

- Use `clip` to define that no part of the element is shown.

- Make the `height` and `width` of the element `1px` and negate them using `margin: -1px`.

- Use `position: absolute` so that the element does not take up space in the DOM.

- **Note:** This technique provides an accessible and layout-friendly alternative to `display: none` (not
readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).

```html -->

<a class="button" href="https://google.com">

Learn More <span class="offscreen"> about pants</span>

</a>

<!-- Adds a fading gradient to an overflowing element to better indicate there is more content to be
scrolled.

- Use the `::after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white`
(top to bottom).

- Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.

- Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it
to still be selectable/interactive.

```html -->

<div class="overflow-scroll-gradient">

<div class="overflow-scroll-gradient-scroller">

Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />

Iure id exercitationem nulla qui repellat laborum vitae, <br />


molestias tempora velit natus. Quas, assumenda nisi. <br />

Quisquam enim qui iure, consequatur velit sit? <br />

Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />

Iure id exercitationem nulla qui repellat laborum vitae, <br />

molestias tempora velit natus. Quas, assumenda nisi. <br />

Quisquam enim qui iure, consequatur velit sit?

</div>

</div>

<!-- -->

<!-- Creates a polka dot background pattern.

- Use `background-color` to set a black background.

- Use `background-image` with two `radial-gradient()` values to create two dots.

- Use `background-size` to specify the pattern's size. Use `background-position` to appropriately place
the two gradients.

- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.

```html -->

<div class="polka-dot"></div>

<!--

Customizes the scrollbar style for elements with scrollable overflow.

- Use `::-webkit-scrollbar` to style the scrollbar element.

- Use `::-webkit-scrollbar-track` to style the scrollbar track (the background of the scrollbar).
- Use `::-webkit-scrollbar-thumb` to style the scrollbar thumb (the draggable element).

- **Note:** Scrollbar styling doesn't appear to be on any standards track. This technique only works on
WebKit-based browsers.

```html -->

<div class="custom-scrollbar">

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />

Iure id exercitationem nulla qui repellat laborum vitae, <br />

molestias tempora velit natus. Quas, assumenda nisi. <br />

Quisquam enim qui iure, consequatur velit sit?

</p>

</div>

<!-- Makes the content unselectable.

- Use `user-select: none` to make the content of the element not selectable.

- **Note:** This is not a secure method to prevent users from copying content.

```html -->

<p>You can select me.</p>

<p class="unselectable">You can't select me!</p>

<!-- Displays the link URL for links with no text.


- Use the `:empty` pseudo-class to select links with no text.

- Use the `:not` pseudo-class to exclude links with text.

- Use the `content` property and the `attr()` function to display the link URL in the `::before` pseudo-
element.

```html -->

<a href="https://30secondsofcode.org"></a>

<!-- title: Display table centering

Vertically and horizontally centers a child element within its parent element, using `display: table`.

- Use `display: table` to make the `.center` element behave like a `<table>` element.

- Set `height` and `width` to `100%` to make the element fill the available space within its parent
element.

- Use `display: table-cell` on the child element to make it behave like a `<td>` elements.

- Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and
vertically.

- The outer parent (`.container`) must have a fixed `width` and `height`.

-->

<div class="container">

<div class="center"><span>Centered content</span></div>

</div>
Creates a donut spinner that can be used to indicate the loading of content.

- Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading
indicator for the donut.

- Define and use an appropriate animation, using `transform: rotate()` to rotate the element.

<div class="donut"></div>

</body>

</html>

You might also like