| Welcome, Guest |
You have to register before you can post on our site.
|
| Online Users |
There are currently 1798 online users.
» 0 Member(s) | 1796 Guest(s)
Yandex, Bing
|
| Latest Threads |
SELECT statement with MS ...
Forum: MS Access SQL Tutorials
Last Post: Qomplainerz
07-27-2023, 03:35 PM
» Replies: 0
» Views: 1,076
|
SELECT statement with the...
Forum: MS Access SQL Tutorials
Last Post: Qomplainerz
07-27-2023, 03:31 PM
» Replies: 0
» Views: 528
|
Creating hyperlinks in HT...
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 01:23 PM
» Replies: 0
» Views: 822
|
What's new in HTML5?
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 12:48 PM
» Replies: 0
» Views: 546
|
What is HTML5?
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 12:43 PM
» Replies: 0
» Views: 513
|
Neck isometric exercises
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:44 AM
» Replies: 0
» Views: 808
|
Shoulder shrug
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:43 AM
» Replies: 0
» Views: 464
|
Neck retraction
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:43 AM
» Replies: 0
» Views: 433
|
Neck flexion and extensio...
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:42 AM
» Replies: 0
» Views: 501
|
Neck rotation
Forum: Exercises
Last Post: Qomplainerz
07-27-2023, 11:42 AM
» Replies: 0
» Views: 473
|
|
|
| CSS Conic Gradients for Circular Progress Bar |
|
Posted by: Qomplainerz - 07-26-2023, 07:48 PM - Forum: CSS3 Tutorials
- No Replies
|
 |
Description:
CSS conic gradients can be used to create visually appealing circular progress bars.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Conic Gradients for Circular Progress Bar Example</title>
<style>
.progress-bar {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
green 0%,
green 50%,
lightgrey 50%,
lightgrey 100%
);
/* Rotate the gradient to start from the top */
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="progress-bar"></div>
</body>
</html>
Explanation:
In this example, the .progress-bar div has a width and height of 100px, making it a perfect circle due to border-radius: 50%. The circular progress bar is achieved using a conic gradient, defined by conic-gradient(). The gradient starts from 0 degrees (the top) and progresses from green (0%) to light grey (100%). To make it look like a progress bar, we rotate the gradient by -90 degrees using transform: rotate(-90deg).
|
|
|
| CSS Grid Subgrid |
|
Posted by: Qomplainerz - 07-26-2023, 07:46 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
CSS Grid's subgrid value allows you to create nested grids that inherit the column and row sizes from the parent grid.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Subgrid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 150px);
grid-gap: 10px;
}
.grid-item {
border: 1px solid black;
padding: 10px;
}
.nested-grid {
display: grid;
grid-template-columns: subgrid;
grid-gap: 5px;
}
.nested-item {
background-color: lightblue;
padding: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<div class="nested-grid">
<div class="nested-item">A</div>
<div class="nested-item">B</div>
</div>
</div>
<div class="grid-item">
<div class="nested-grid">
<div class="nested-item">C</div>
<div class="nested-item">D</div>
</div>
</div>
</div>
</body>
</html>
Explanation:
In this example, the .grid-container creates a 2x2 grid layout. Each .grid-item contains a .nested-grid, which uses display: grid and grid-template-columns: subgrid to inherit the column size from the parent grid. This way, the nested grids automatically align with the parent's column sizes, creating a consistent layout.
|
|
|
|
| CSS Variable Fonts Animation |
|
Posted by: Qomplainerz - 07-26-2023, 07:44 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
You can create smooth font size transitions using CSS transitions and variable fonts.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Variable Fonts Animation Example</title>
<style>
.variable-font-text {
font-family: 'Inter Variable', sans-serif;
font-size: var(--font-size, 16px);
transition: font-size 0.3s ease;
}
button {
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<p class="variable-font-text">Variable Fonts are Awesome!</p>
<button onclick="increaseFontSize()">Increase Font Size</button>
<script>
function increaseFontSize() {
const element = document.querySelector('.variable-font-text');
const computedStyle = window.getComputedStyle(element);
const currentFontSize = parseFloat(computedStyle.getPropertyValue('font-size'));
element.style.setProperty('--font-size', `${currentFontSize + 4}px`);
}
</script>
</body>
</html>
Explanation:
In this example, the .variable-font-text paragraph uses the 'Inter Variable' font family, which is a variable font. The font-size property is set using a CSS variable (--font-size). When the button is clicked, the increaseFontSize() JavaScript function increases the font size by 4 pixels, creating a smooth transition due to the transition property. Variable fonts allow for more dynamic control over typography, and with CSS variables, you can create fluid font size animations.
|
|
|
|
| CSS Scrollbar Styling |
|
Posted by: Qomplainerz - 07-26-2023, 07:43 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
You can customize the appearance of scrollbars in modern browsers using the ::-webkit-scrollbar pseudo-element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Scrollbar Styling Example</title>
<style>
/* Style the scrollbar track and thumb */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
</style>
</head>
<body>
<div style="height: 300px; overflow-y: auto;">
<!-- Add long content to enable scrollbar -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</body>
</html>
Explanation:
In this example, we use the ::-webkit-scrollbar pseudo-element to style the scrollbar in WebKit-based browsers (e.g., Chrome, Safari). The ::-webkit-scrollbar allows you to customize the scrollbar's width and appearance. ::-webkit-scrollbar-track styles the track (the background area behind the thumb), and ::-webkit-scrollbar-thumb styles the thumb (the draggable scrolling handle).
|
|
|
|
| CSS Grid Auto-fit and Minmax |
|
Posted by: Qomplainerz - 07-26-2023, 07:41 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
CSS Grid's auto-fit and minmax() functions are helpful for creating responsive and flexible grid layouts with a fixed minimum and maximum size for grid items.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Auto-fit and Minmax Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<!-- Add more items here -->
</div>
</body>
</html>
Explanation:
In this example, the .grid-container uses display: grid to create a grid layout. The grid-template-columns property uses repeat(auto-fit, minmax(200px, 1fr)) to generate as many columns as possible with a minimum width of 200px and a maximum width of 1fr (one fractional unit of the remaining space). This ensures that the grid items adjust responsively, creating new columns when the container width increases and collapsing them when the width decreases.
|
|
|
|
| CSS clip path |
|
Posted by: Qomplainerz - 07-26-2023, 07:38 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
The clip-path property allows you to create custom clipping paths to control the visibility of an element. It's particularly useful for creating unique shapes or revealing parts of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Clip Path Example</title>
<style>
.clipped-element {
width: 200px;
height: 200px;
background-color: lightblue;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<div class="clipped-element"></div>
</body>
</html>
Explanation:
In this example, the .clipped-element div has a custom clipping path defined by the clip-path property. The polygon() function creates a diamond shape by specifying the coordinates of the four points (50% 0%, 100% 50%, 50% 100%, and 0% 50%). The element's content is clipped within this diamond shape, giving it a unique appearance.
|
|
|
|
| @supports Rule in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:35 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
The @supports rule allows you to apply styles based on whether a specific CSS feature is supported by the user's browser.
Example:
@supports (display: grid) {
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@supports not (display: grid) {
body {
float: left;
width: 50%;
}
}
|
|
|
|
| Custom font loading in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:34 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
You can use @font-face to load custom fonts in your web pages. This way, you can have more control over typography and design.
Example:
@font-face {
font-family: "CustomFont";
src: url("path/to/custom-font.woff2") format("woff2"),
url("path/to/custom-font.woff") format("woff");
}
body {
font-family: "CustomFont", sans-serif;
}
|
|
|
|
| Sticky positioning in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:33 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
Sticky positioning allows elements to stick to a specific position relative to the viewport when scrolling. It's useful for creating sticky navigation bars or sidebars.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Positioning Example</title>
<style>
.sticky-element {
position: sticky;
top: 20px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky-element">This element sticks to the top when scrolling.</div>
<div style="height: 1000px;"></div>
</body>
</html>
|
|
|
|
| More about grids in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:30 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Description:
CSS Grid is a powerful layout system that allows you to create complex two-dimensional grid-based layouts. It enables you to define rows and columns and place items within the grid, providing precise control over the layout of your web pages.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Example</title>
<style>
/* Create a 3x3 grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
|
|
|
|
|
