Untitled
unknown
plain_text
3 months ago
10 kB
3
Indexable
{
"CSS Basic with Footer Styles": {
"prefix": "css-basic",
"body": [
":root {",
" --background-color: #f4f4f4;",
" --text-color: #333333;",
" --nav-background-color: #ffffff;",
" --nav-text-color: #333333;",
" --nav-border-color: #dddddd;",
" --nav-hover-background-color: #e0e0e0;",
" --nav-hover-text-color: #007bff;",
" --footer-background-color: #222222;",
" --footer-text-color: #f4f4f4;",
"}",
"",
"* {",
" margin: 0;",
" padding: 0;",
" box-sizing: border-box;",
"}",
"",
"html, body {",
" height: 100%;",
"}",
"",
"body {",
" display: flex;",
" flex-direction: column;",
" min-height: 100%;",
"}",
"",
"main {",
" flex: 1;",
"}",
"",
"header {",
" margin-top: 0;",
" background-color: var(--background-color);",
" padding: 1.5rem 2rem;",
" text-align: center;",
" box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);",
"}",
"",
"nav ul {",
" display: flex;",
" background-color: var(--nav-background-color);",
" color: var(--nav-text-color);",
" padding: 1rem;",
" list-style-type: none;",
" justify-content: space-between;",
" border-bottom: 0.4rem solid var(--nav-border-color);",
"}",
"",
"nav ul li {",
" text-align: center;",
" margin: 0 1.5rem;",
" padding: 1rem;",
" border-radius: 0.5rem;",
" transition: background-color 0.3s ease, transform 0.3s ease;",
"}",
"",
"nav ul li:hover {",
" background-color: var(--nav-hover-background-color);",
" transform: scale(1.1);",
"}",
"",
"nav ul li a {",
" text-decoration: none;",
" color: var(--nav-text-color);",
" font-size: 1.8rem;",
" transition: color 0.3s ease;",
"}",
"",
"nav ul li a:hover {",
" color: var(--nav-hover-text-color);",
"}",
"",
"footer {",
" margin-top: 3rem;",
" background-color: var(--footer-background-color);",
" width: 100%;",
" box-shadow: 0 -0.4rem 0.8rem rgba(0, 0, 0, 0.1);",
" text-align: center;",
" padding: 1.5rem;",
" position: relative;",
" bottom: 0;",
"}",
"",
"footer p {",
" color: var(--footer-text-color);",
" font-size: 1.6rem;",
"}"
],
"description": "CSS with basic styles, including header, nav, and footer."
},
"Grid Layout Starter": {
"prefix": "grid-starter",
"body": [
"display: grid;",
"grid-template-columns: repeat(${1:3}, 1fr);",
"gap: ${2:1rem};"
],
"description": "Basic grid layout starter"
},
"Button Styles": {
"prefix": "btn-styles",
"body": [
".btn {",
" display: inline-block;",
" padding: 0.75rem 1.5rem;",
" border: none;",
" border-radius: 0.25rem;",
" text-align: center;",
" font-size: 1rem;",
" cursor: pointer;",
" box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);",
" transition: box-shadow 0.3s ease, transform 0.3s ease;",
"}",
"",
".btn:hover {",
" box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);",
" transform: translateY(-2px);",
"}"
],
"description": "A reusable button style snippet with a nice shadow effect."
},
"Card Component": {
"prefix": "card-component",
"body": [
".card {",
" border: 1px solid ${1:#ddd};",
" border-radius: 0.5rem;",
" box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);",
" padding: 1.5rem;",
" background-color: ${2:#fff};",
" transition: box-shadow 0.3s ease, transform 0.3s ease;",
"}",
"",
".card:hover {",
" box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);",
" transform: translateY(-4px);",
"}",
"",
".card-title {",
" font-size: 1.5rem;",
" margin-bottom: 1rem;",
"}",
"",
".card-text {",
" font-size: 1rem;",
" color: ${3:#666};",
"}"
],
"description": "CSS for a card component with shadows and hover effects."
},
"Dark Mode Styles": {
"prefix": "dark-mode",
"body": [
":root {",
" --bg-color: ${1:#fff};",
" --text-color: ${2:#000};",
"}",
"",
"[data-theme='dark'] {",
" --bg-color: ${3:#121212};",
" --text-color: ${4:#fff};",
"}",
"",
"body {",
" background-color: var(--bg-color);",
" color: var(--text-color);",
"}"
],
"description": "Styles for enabling dark mode."
},
"Centered Content": {
"prefix": "center-content",
"body": [
"display: flex;",
"justify-content: center;",
"align-items: center;",
"height: ${1:100vh};"
],
"description": "Center content both vertically and horizontally."
},
"CSS Animation (Flexible)": {
"prefix": "css-animation-flex",
"body": [
"@keyframes ${1:animation-name} {",
" from {",
" ${2:transform: scale(0);}",
" ${3:opacity: 0;}",
" }",
" to {",
" ${4:transform: scale(1);}",
" ${5:opacity: 1;}",
" }",
"}",
"",
".${6:element} {",
" animation: ${1:animation-name} ${7:2s} ${8:ease} ${9:0s} ${10:normal|infinite};",
"}"
],
"description": "Flexible CSS animation for various effects with customizable properties."
},
"CSS Transition": {
"prefix": "css-transition",
"body": [
"transition: ${1:all} ${2:0.3s} ${3:ease};"
],
"description": "Add transition effect to elements."
},
"Hover Glow and Scale Effect": {
"prefix": "hover-glow",
"body": [
".${1} {",
" transition: all 0.3s ease-in-out;",
"}",
"",
".${1}:hover {",
" transform: scale(1.05);",
" box-shadow: 0 0 8px rgba(255, 255, 255, 0.4),",
" 0 0 15px rgba(0, 255, 255, 0.6),",
" 0 0 25px rgba(0, 255, 255, 0.8);",
"}"
],
"description": "Generalized hover effect combining glow and scale for interactive elements."
},
"Responsive Media Queries": {
"prefix": "media-query",
"body": [
"@media screen and (max-width: ${1:768px}) {",
" .${2:element} {",
" ${3:font-size: 1.5rem;}",
" }",
"}",
"",
"@media screen and (max-width: ${4:480px}) {",
" .${2:element} {",
" ${5:font-size: 1rem;}",
" }",
"}"
],
"description": "Basic responsive media queries for various screen sizes."
},
"Aside Styling": {
"prefix": "aside-style",
"body": [
"aside {",
" background-color: ${1:#f4f4f4};",
" border: ${2:1px solid #ccc};",
" padding: ${3:20px};",
" margin: ${4:20px auto};",
" border-radius: ${5:8px};",
" box-shadow: ${6:0 2px 10px rgba(0, 0, 0, 0.15)};",
" max-width: ${7:300px};",
"}",
"",
"aside h2 {",
" font-size: ${8:1.5rem};",
" margin-bottom: ${9:10px};",
" color: ${10:#333};",
"}",
"",
"aside p {",
" font-size: ${11:1rem};",
" color: ${12:#666};",
" line-height: ${13:1.5};",
"}",
"",
"aside ul {",
" list-style-type: ${14:square};",
" margin-left: ${15:20px};",
"}",
"",
"aside a {",
" color: ${16:#007BFF};",
" text-decoration: none;",
"}",
"",
"aside a:hover {",
" text-decoration: underline;",
" color: ${17:#0056b3};",
"}",
"",
"aside:hover {",
" box-shadow: ${18:0 4px 15px rgba(0, 0, 0, 0.2)};",
"}"
],
"description": "CSS styling for a general aside element with hover effects"
},
"flexbox-css": {
"prefix": "flexbox-css",
"body": [
"display: flex;",
"flex-wrap: wrap;",
"justify-content: space-between;",
"align-items: center;",
"gap: 1rem;",
"flex: 1 1 30%;"
],
"description": "Core flexbox properties."
},
"Image Hover": {
"prefix": "img-style-hover",
"body": [
"img {",
" max-width: 100%;",
" height: auto;",
" border-radius: 10px;",
" box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);",
" display: block;",
" margin: 0 auto;",
" transition: transform 0.3s ease, box-shadow 0.3s ease;",
"}",
"img:hover {",
" transform: scale(1.05);",
" box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);",
"}",
"img:active {",
" transform: scale(0.95);",
" box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);",
"}"
],
"description": "CSS styling for img elements with hover and active effects."
},
"Image Style Hover": {
"prefix": "img-style-hover",
"body": [
],
"description": "css-gneral hover-style without selectors that i can add on any selector"
},
"H1 Header Style with Hover (Responsive)": {
"prefix": "h1-style-hover-responsive",
"body": [
"h1 {",
" font-size: 4vw;",
" font-weight: bold;",
" text-align: center;",
" color: #2c3e50;",
" background-color: #ecf0f1;",
" padding: 2rem;",
" margin-bottom: 2rem;",
" text-transform: uppercase;",
" letter-spacing: 0.1rem;",
" border-radius: 1rem;",
" box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);",
" transition: all 0.3s ease;",
"}",
"h1:hover {",
" color: #fff;",
" background-color: #3498db;",
" transform: scale(1.05);",
" box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);",
"}"
],
"description": "Responsive CSS snippet for a styled h1 header with hover effect"
},
"Colorful Spinner": {
"prefix": "colorful-spinner",
"body": [
".spinner {",
" width: 50px;",
" height: 50px;",
" border: 5px solid transparent;",
" border-top: 5px solid #3498db;",
" border-right: 5px solid #e74c3c;",
" border-bottom: 5px solid #f39c12;",
" border-left: 5px solid #2ecc71;",
" border-radius: 50%;",
" animation: spin 1.5s linear infinite;",
"}",
"",
"@keyframes spin {",
" 0% {",
" transform: rotate(0deg);",
" }",
" 100% {",
" transform: rotate(360deg);",
" }",
"}"
],
"description": "Colorful and entertaining spinner with rotating animation"
},
}
Editor is loading...
Leave a Comment