1. Centering an Element
Centering an element both horizontally and vertically can be easily achieved using Flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
}
2. Customizing Scrollbars
You can style the scrollbars for a more personalized look.
/* WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #3498db;
border-radius: 6px;
}
::-webkit-scrollbar-track {
background: #f2f2f2;
}
3. Creating a Responsive Grid with CSS Grid
CSS Grid makes it easy to create responsive layouts.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
4. Hover Effects with Transitions
Adding smooth transitions to hover effects can improve user experience.
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
5. CSS Variables for Theming
CSS variables allow you to define and reuse values, making them great for theming.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
}
6. Text Overflow Ellipsis
To handle overflowing text within a fixed-width container, use the following:
.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
7. Object-fit for Responsive Images
Ensure images cover the container without distortion.
.image {
width: 100%;
height: 300px;
object-fit: cover;
}
8. Creating a CSS Triangle
CSS triangles are useful for tooltips, dropdowns, and other UI elements.
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #3498db;
}
9. Overlay Text on an Image
Position text over an image using absolute positioning.
.container {
position: relative;
text-align: center;
}
.image {
display: block;
width: 100%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
10. CSS Shapes with clip-path
Create interesting shapes with the clip-path
property.
.shape {
width: 200px;
height: 200px;
background: #3498db;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
11. Sticky Positioning
Make an element stick to the top of the viewport when scrolling.
.sticky {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
12. Using CSS Counters
Create automatic numbering in lists.
.counter {
counter-reset: section;
}
.counter h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
13. Custom Checkbox and Radio Buttons
Style custom checkboxes and radio buttons.
/* Hide the default checkbox */
input[type="checkbox"] {
display: none;
}
/* Create a custom checkbox */
input[type="checkbox"] + label {
position: relative;
cursor: pointer;
}
input[type="checkbox"] + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: white;
border: 2px solid #3498db;
border-radius: 3px;
margin-right: 10px;
}
input[type="checkbox"]:checked + label:before {
background-color: #3498db;
}
14. CSS Gradients
Use gradients to create beautiful backgrounds.
.background {
background: linear-gradient(45deg, #3498db, #2ecc71);
}
15. Responsive Typography with vw
Use viewport width units for responsive font sizes.
.responsive-text {
font-size: 4vw; /* 4% of the viewport width */
}
16. Dark Mode with CSS Variables
Easily switch between light and dark themes using CSS variables.
:root {
--background-color: #ffffff;
--text-color: #000000;
}
body.dark-mode {
--background-color: #000000;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
17. CSS Filters
Apply visual effects like blur, grayscale, and brightness.
.image {
filter: grayscale(100%);
}
.image:hover {
filter: grayscale(0%);
}
18. Smooth Scroll Behavior
Add smooth scrolling to your page.
html {
scroll-behavior: smooth;
}
19. Fullscreen Overlay Navigation
Create a fullscreen navigation overlay.
/* Overlay */
.overlay {
height: 0%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
/* Overlay content */
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover {
color: #f1f1f1;
}
/* When the height of the overlay is 100%, show the overlay content */
.overlay.show {
height: 100%;
}
20. Advanced CSS Selectors
Use advanced selectors like :nth-child
, :nth-of-type
, and :not
.
/* Select every second element */
li:nth-child(2n) {
background-color: #f2f2f2;
}
/* Select every third element of type */
li:nth-of-type(3n) {
font-weight: bold;
}
/* Select all but the first element */
li:not(:first-child) {
margin-left: 10px;
}
Conclusion
CSS offers a plethora of features that can enhance the visual appeal and functionality of your web pages. By mastering these CSS tricks, you can create more engaging, dynamic, and responsive designs. Keep experimenting with these techniques and discover new ways to leverage CSS in your projects. Happy coding!
Комментариев нет:
Отправить комментарий