| Welcome, Guest |
You have to register before you can post on our site.
|
| Online Users |
There are currently 1751 online users.
» 0 Member(s) | 1749 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: 823
|
What's new in HTML5?
Forum: HTML5 Tutorials
Last Post: Qomplainerz
07-27-2023, 12:48 PM
» Replies: 0
» Views: 547
|
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: 465
|
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
|
|
|
| Pseudo-classes in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:14 PM - Forum: CSS3 Tutorials
- No Replies
|
 |
Example:
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-classes Example</title>
<style>
/* Style the link when hovered */
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Hover over this link</a>
</body>
</html>
Explanation:
Pseudo-classes target elements based on their state or user interaction. In this example, the a:hover pseudo-class selects the anchor (<a>) element when the user hovers over it and applies a red color to the text. When you hover over the link, the text turns red.
|
|
|
| Attribute selectors in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:12 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors Example</title>
<style>
/* Select input elements with a "required" attribute and style their borders */
input[required] {
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" required placeholder="This input is required">
<input type="text" placeholder="This input is not required">
</body>
</html>
Explanation:
Attribute selectors target elements based on their attributes. In this example, the input[required] selector selects all input elements with a "required" attribute and applies a red border to them. The first input element in the HTML has the "required" attribute, so it gets the red border, while the second input element without the "required" attribute remains unaffected.
|
|
|
|
| CSS Feature Queries |
|
Posted by: Qomplainerz - 07-26-2023, 07:05 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Feature Queries Example</title>
<style>
/* Apply different styles based on feature support */
p {
color: blue;
}
@supports (background: linear-gradient(to right, lightblue, lightgreen)) {
p {
background-image: linear-gradient(to right, lightblue, lightgreen);
color: white;
}
}
</style>
</head>
<body>
<p>This is a paragraph with blue text color.</p>
</body>
</html>
Explanation:
CSS Feature Queries (@supports) allow you to apply styles based on whether a particular CSS feature is supported by the browser. In this example, we initially set the text color of the p element to blue. If the browser supports the background: linear-gradient property, the @supports rule applies, and the p element will have a gradient background and white text color.
|
|
|
|
| CSS Custom properties (Variables) |
|
Posted by: Qomplainerz - 07-26-2023, 07:04 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Custom Properties Example</title>
<style>
/* Define a custom property */
:root {
--primary-color: blue;
}
/* Use the custom property to apply styles */
p {
color: var(--primary-color);
}
</style>
</head>
<body>
<p>This is a paragraph with a custom primary color.</p>
</body>
</html>
Explanation:
CSS Custom Properties, also known as CSS Variables, allow you to define reusable values. In this example, we define a custom property --primary-color with the value blue. The p element then uses this custom property to set its text color, resulting in blue text.
|
|
|
|
| How to make a grid layout with CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:03 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout Example</title>
<style>
/* Apply grid layout to the container element */
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
}
/* Apply grid items */
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Explanation:
CSS Grid Layout is used for creating complex grid-based designs. In this example, the container class is a grid container with the property display: grid. The grid-template-columns property sets the columns to repeat three times with a width of 100 pixels each, and grid-gap adds a 10-pixel gap between grid items. The item class represents the grid items with a width and height of 100 pixels and a light blue background color.
|
|
|
|
| How to make a flexbox in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:02 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Example</title>
<style>
/* Apply flexbox to the container element */
.container {
display: flex;
justify-content: space-around;
}
/* Apply flex items */
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Explanation:
CSS Flexbox is used for creating flexible and responsive layouts. In this example, the container class is a flex container with the property display: flex, and the justify-content property is set to space-around, which distributes the flex items evenly with space around them. The item class represents the flex items, each with a width and height of 100 pixels and a light blue background color.
|
|
|
|
| Responsive web design techniques in CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:01 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<style>
/* Apply different font sizes based on screen width */
p {
font-size: 16px;
}
@media screen and (max-width: 600px) {
p {
font-size: 12px;
}
}
</style>
</head>
<body>
<p>This is a paragraph with responsive font size.</p>
</body>
</html>
Explanation:
CSS @media rule is used for media queries, which apply different styles based on the screen size or device. In this example, the p element has a font size of 16 pixels by default, but when the screen width is 600 pixels or less, the font size changes to 12 pixels.
|
|
|
|
| How to make animations with CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 07:01 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Animations Example</title>
<style>
/* Define the animation keyframes */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Apply the animation to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
animation: slide-in 1s ease;
}
</style>
</head>
<body>
<div>This div slides in from the left.</div>
</body>
</html>
Explanation:
CSS animations are created using @keyframes to define the intermediate steps of the animation. In this example, the div element slides in from the left using the slide-in animation that lasts 1 second with an ease timing function.
|
|
|
|
| How to make transitions with CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 06:59 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Transitions Example</title>
<style>
/* Apply a transition to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
transition: width 0.5s ease;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hover over this div to see the transition effect.</div>
</body>
</html>
Explanation:
CSS transition property is used to add smooth transitions to element property changes. In this example, when hovering over the div element, its width transitions from 200 pixels to 300 pixels with a duration of 0.5 seconds and an ease timing function.
|
|
|
|
| How to make shadows with CSS3 |
|
Posted by: Qomplainerz - 07-26-2023, 06:58 PM - Forum: CSS3 Tutorials
- No Replies
|
|
Example:
<!DOCTYPE html>
<html>
<head>
<title>Shadows Example</title>
<style>
/* Apply a box shadow to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div>This div has a shadow.</div>
</body>
</html>
Explanation:
CSS box-shadow property is used to create a shadow effect for an element. In this example, the div element has a light blue background color and a box shadow with horizontal and vertical offsets of 5 pixels each, a blur radius of 10 pixels, and a shadow color defined using RGBA notation.
|
|
|
|
|
