KEY TERMS In CSS Report PDF

**KEY TERMS IN THE REPORT** The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. **Grid Element** A grid layout consists of a parent, with one or more child elements. A Grid Layout mu...

**KEY TERMS IN THE REPORT** The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. **Grid Element** A grid layout consists of a parent, with one or more child elements. A Grid Layout must have a parent element with the display property set to grid or inline grid. Direct child element(s) of the grid container automatically. **Subgrids** in CSS refer to a feature that allows nested grid to share the grid lines of their parent grid container. This can be particularly useful in grid layout when you have grids within grids. By using the subgrid value for the grid-template-columns and grid-template-rows properties in a nested grid, you can make the child grid align its rows an columns with those of the parent grid, creating a more coherent layout CSS PERPECTIVE The perspective property in CSS is a fundamental tool for creating three-dimensional effects in web design. It is primarily used in conjunction with CSS transformations like \"rotateX\", \"rotateY\", and \"rotateZ\" to control the depth and perspective of elements on a webpage. By defining a value for \"perspective,\" you establish a viewpoint from which the 3D transformations are observed, giving objects a sense of depth and realism. Smaller values make objects appear more dramatic and closer together, while larger values create a subtler, more distant perspective. Overall, the \"perspective\" property is essential for enhancing web content\'s visual depth and interactivity, especially when creating engaging user interfaces and animations. The **shape-outside property** is specified using the values below, which define the float area for float elements. The float area determines the shape inline content (float elements) wraps around. **Tooltips** display text (or other content) when you hover over an HTML element. The tooltip class defines the element to hover over (the tooltip container). The text class defines the tooltip text. **Scroll Snapping** Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning. **Clipping in CSS** can help us move away from everything in our designs looking like a box. By using various basic shapes or an SVG, you can create a clip path. Then, cut away the parts of an element you don\'t want to show. Elements on web pages are all defined inside a rectangular box. The **flexible grid control** allows you to divide a layout into multiple columns and rows in which you can place UI elements. You can customize the grid by aligning and arranging your elements to suit your content. Also, a flexible grid is being able to write a column layout that doesn\'t explicitly declare the number of rows or columns but automatically creates them based on somewhat loose instructions and the content you provide. CSS **text animation** involves using Cascading Style Sheets (CSS) to create dynamic effects on text elements. This technique allows designers to animate transitions between different styles, making static text come alive through various movements and transformations. The primary goal is to capture user attention and improve the overall user experience by adding a layer of interactivity to web content. **Gradient text** involves applying a gradient color effect to text elements, enhancing their visual appeal without relying solely on solid colors. This technique can be combined with animations for even more striking effects. **Text animation** refers to the use of CSS to create animated effects on text elements. This can include various effects like fading, sliding, typing, or bouncing text, which can draw attention to specific content on a webpage. Text animation, as the name implies, involves moving letters, words, or even paragraphs. They follow a certain pattern, move across the screen, or occupy a certain area on the screen. Common Effects: Fade-in: Gradually increases the opacity of text from transparent to opaque. Typing Effect: Simulates text being typed out character by character. Glitch Effect: Creates a distorted appearance for text that mimics a glitch in digital media Fading: Gradually changing the opacity of text to make it appear or disappear. Sliding: Moving text in from one side of the screen or container. Typing Effect: Simulating the appearance of text being typed out character by character. Purpose : Grab viewers' attention and keep it (which is why they're great for video intros or outros) Highlight important information, such as a short promo or quote Smoothly transition from one topic to another Increase viewers' ability to remember the message **CSS gradients** let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) The **\@keyframes** rule in CSS defines the intermediate steps in a CSS animation sequence. It specifies an element\'s styles at various points during the animation, allowing for smooth transitions between different states. **CSS clipping** refers to the process of hiding or revealing portions of an element using the clip property or other related properties like clip-path. It allows you to create interesting visual effects by defining a specific area of an element that should be visible, while the rest is hidden. A **CSS loader** is typically a component in web development that allows you to manage, load, and sometimes even bundle CSS files more efficiently. When working with modern web development tools like Webpack, Parcel, or similar build tools, CSS loaders play a crucial role in handling CSS files. **Scroll shadows** are a CSS technique used to enhance user experience by visually indicating that a container can be scrolled. They provide a subtle cue to users, suggesting the presence of additional content either above or below the visible area of the container. This is particularly useful in designs where traditional scrollbars are hidden or not present. **Selectors** - A tool in CSS (Cascading Style Sheets) that allows you to pick specific HTML elements and apply styles to them, like changing their color or size. **CSS selectors** are used to target HTML elements for styling. Here are some common selector syntaxes **Scroll animations** are effects that happen when you scroll down a web page. It could be making an image slide into view, text fading in, or other cool movements. It helps make websites more engaging and interactive. For example, as you scroll down, an image might slide from the side into the center of the screen. **Rollover Image** When a user hovers their cursor over an image, it changes to a different image or effect. This can include fading in a new image, changing colors, or displaying additional content. Image Hover Overlay This involves displaying an overlay (like text or icons) on top of an image when a user hovers over it. **Resizing images to fit a div container\"** means ensuring pictures are the right size to look good in a designated space on a webpage. Imagine you have a photo that's too big for a frame; resizing it makes it fit perfectly, so you can see the whole picture without any parts sticking out or looking weird. In web design, we use CSS to do this automatically, keeping everything neat and tidy! **Shadow effects text.** The term \"shadow\" for text effects means making the letters look like they have a little dark shape behind them. It's like when you stand in the sun, and your body produces a shadow on the ground. This shadow makes the letters pop out and look cooler! **Box Shadow**. A \"box-shadow\" is like a shadow you see behind a box on a webpage. Imagine putting a toy box on the ground; it casts a shadow on the floor. In the same way, a box on a website can look like it's floating above the page by having a shadow behind it. : **hover** - We can use this selector to change the style of a button when you move the mouse over it. A \"**Hard Stop Gradient\"** in web design refers to a gradient where the transition between colors is abrupt rather than smooth. This can create a visually striking effect often used in backgrounds, buttons, and other UI elements. By manipulating the color stops in CSS, designers can achieve a clean, defined look. CSS **Gradient**: A smooth transition between two or more specified colors in CSS, used for backgrounds or other visual elements. **Color Stop**: A specific point in a gradient where a particular color is defined. In a hard stop gradient, these stops are placed close together to create a sharp transition. **Linear Gradient:** A gradient that moves in a straight line, defined by an angle or direction. **Linear Gradient:** A gradient that moves in a straight line, defined by an angle or direction. **Conical gradients** are a powerful and versatile tool in CSS for creating visually appealing designs. Unlike linear and radial gradients, conical gradients transition colors around a center point in a circular manner, allowing for unique visual effects. This technique can be particularly useful for creating dynamic backgrounds, interactive elements, and graphical components in web design. Conical Gradient: A gradient that transitions colors in a circular fashion around a central point, defined by angles and color stops. **SVG stands for Scalable Vector Graphics,** a format used to define vector-based graphics in XML format. Unlike pixel-based images (like PNG or JPEG), SVGs are vector graphics, meaning they can scale up or down without losing quality. This makes them ideal for responsive designs or sharp, high-quality graphics at any size. SVGs are lightweight and resolution-independent, which makes them excellent for web usage, especially as backgrounds. They are easily styled using CSS and can be manipulated via JavaScript, providing flexibility. Furthermore, since SVG is XML-based, it can be edited directly in code, making it easier to customize than other image formats. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.