எளிதில் பயன்படுத்தக்கூடிய காட்சி இடைமுகத்துடன் கிரேடியன்ட்கள், பெட்டி நிழல்கள், எல்லை வட்டம் மற்றும் உரை நிழல்கள் ஆகியவற்றிற்கான தனிப்பயன் சிஎஸ்எஸ் குறியீட்டை உருவாக்கவும். ஸ்லைடர்களுடன் அளவுகோல்களை சரிசெய்யவும் மற்றும் நேரடி முன்னோட்டங்களை காணவும்.
CSS ಪ್ರಾಪರ್ಟಿ ಜನರೇಟರ್ ಶಕ್ತಿಯುತವಾದ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಸಾಧನವಾಗಿದೆ, ಇದು ವೆಬ್ ಡೆವೆಲಪರ್‌ಗಳು ಮತ್ತು ಡಿಸೈನರ್‌ಗಳಿಗೆ ಸುಂದರ CSS ಪರಿಣಾಮಗಳನ್ನು ಬರೆಯುವ ಅಗತ್ಯವಿಲ್ಲದೆ ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಹಿತಾಯಿಸುವ ಜನರೇಟರ್ ನಿಮಗೆ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು, ಬಾಕ್ಸ್ ಶಾಡೋಸ್, ಬೋರ್ಡರ್ ರೇಡಿಯಸ್ ಮತ್ತು ಪಠ್ಯ ಶಾಡೋಸ್ ಸೇರಿದಂತೆ ಪ್ರಮುಖ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ದೃಶ್ಯವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ, ನಂತರ ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ನಕಲು ಮತ್ತು ಅಂಟಿಸಲು ತಕ್ಷಣವೇ ಸಂಬಂಧಿತ CSS ಕೋಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ನೀವು ಕಾಲ್ಪನಿಕ ಡೆವೆಲಪರ್ ಆಗಿರಬಹುದು ಅಥವಾ CSS ಕಲಿಯುತ್ತಿರುವ ಪ್ರಾರಂಭಿಕ ವ್ಯಕ್ತಿಯಾಗಿರಬಹುದು, ಈ ಸಾಧನವು ನಿಮ್ಮ ವೆಬ್ ಅಂಶಗಳಿಗೆ ವೃತ್ತಿಪರವಾಗಿ ಕಾಣುವ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ನಮ್ಮ CSS ಪ್ರಾಪರ್ಟಿ ಜನರೇಟರ್ ಮೂಲಕ ನೀವು:
ಈ ಸಾಧನವು ನಿಮ್ಮ ಕಸ್ಟಮೈಸೇಶನ್‌ಗಳ ನೈಜ ಸಮಯದ ಪೂರ್ವಾವಲೋಕನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ನಿಮ್ಮ CSS ಪರಿಣಾಮಗಳು ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಮೊದಲು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ನೋಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ದೃಶ್ಯಮಯ ಹಿತಾಯಿಸುವ ವಿಧಾನವು ವಿಭಿನ್ನ ಸೆಟಿಂಗ್‌ಗಳನ್ನು ಪ್ರಯೋಗಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಂಶಗಳಿಗೆ ಪರಿಪೂರ್ಣವಾದ ರೂಪವನ್ನು ಸಾಧಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
CSS ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಎರಡು ಅಥವಾ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣಗಳ ನಡುವಿನ ಮೃದುವಾದ ಪರಿವರ್ತನೆಯನ್ನು ರಚಿಸಲು ಶಕ್ತಿಯುತ ಮಾರ್ಗವಾಗಿದೆ. ಇವು ಚಿತ್ರ ಫೈಲ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿಲ್ಲ, ಲೋಡ್ ಮಾಡುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸಗಳಿಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಮ್ಮ ಜನರೇಟರ್ ಎರಡು ರೀತಿಯ ಗ್ರಾಡಿಯಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:
ಲೀನಿಯರ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಬಣ್ಣಗಳನ್ನು ನೇರ ಸಾಲಿನಲ್ಲಿ ಪರಿವರ್ತಿಸುತ್ತವೆ. ನೀವು ನಿಯಂತ್ರಿಸಬಹುದು:
ಲೀನಿಯರ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳಿಗೆ CSS ವ್ಯಾಕರಣ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
1background: linear-gradient(angle, color1 position1%, color2 position2%);
2ಉದಾಹರಣೆಗೆ, 45-ಡಿಗ್ರಿಯಲ್ಲಿ ಕೆಂಪಿನಿಂದ ನೀಲಿಗೆ ಗ್ರಾಡಿಯಂಟ್:
1background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
2ರೇಡಿಯಲ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಕೇಂದ್ರ ಬಿಂದುದಿಂದ ವೃತ್ತಾಕಾರದ ಅಥವಾ ಎಲಿಪ್ಟಿಕಲ್ ಮಾದರಿಯಲ್ಲಿ ಬಣ್ಣಗಳನ್ನು ಹೊರಗೆ ಪರಿವರ್ತಿಸುತ್ತವೆ. ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು:
ರೇಡಿಯಲ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳಿಗೆ CSS ವ್ಯಾಕರಣ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
1background: radial-gradient(shape, color1 position1%, color2 position2%);
2ಉದಾಹರಣೆಗೆ, ಕೇಂದ್ರದಲ್ಲಿ ಕೆಂಪಿನಿಂದ ಕಡೆಯಲ್ಲಿನ ನೀಲಿಗೆ ವೃತ್ತಾಕಾರದ ಗ್ರಾಡಿಯಂಟ್:
1background: radial-gradient(circle, #ff0000 0%, #0000ff 100%);
2ಬಾಕ್ಸ್ ಶಾಡೋಸ್ ಅಂಶಗಳಿಗೆ ಆಳ ಮತ್ತು ಆಯಾಮವನ್ನು ಸೇರಿಸುತ್ತವೆ, ಶಾಡೋ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸುತ್ತವೆ. ನಮ್ಮ ಜನರೇಟರ್‌ನಲ್ಲಿ ನೀವು ನಿಯಂತ್ರಿಸಬಹುದು:
ಬಾಕ್ಸ್ ಶಾಡೋಸ್‌ಗಾಗಿ CSS ವ್ಯಾಕರಣ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
1box-shadow: h-offset v-offset blur spread color;
2ಇನ್ಸೆಟ್ ಶಾಡೋಗೆ, inset ಕೀವರ್ಡ್ ಅನ್ನು ಸೇರಿಸಿ:
1box-shadow: inset h-offset v-offset blur spread color;
2ಉದಾಹರಣೆಗೆ, ಸಣ್ಣ ಡ್ರಾಪ್ ಶಾಡೋ:
1box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
2ಬೋರ್ಡರ್ ರೇಡಿಯಸ್ ಅಂಶಗಳಲ್ಲಿ ವೃತ್ತಾಕಾರದ ಕೋಣೆಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಅವರ ರೂಪವನ್ನು ಮೃದುವಾಗಿಸುತ್ತದೆ. ನಮ್ಮ ಜನರೇಟರ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ:
ಬೋರ್ಡರ್ ರೇಡಿಯಸ್‌ಗಾಗಿ CSS ವ್ಯಾಕರಣ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
ಒಂದು ಸಮ ಕೋಣೆಗಳಿಗೆ:
1border-radius: value;
2ಪ್ರತಿಯೊಂದು ಕೋಣೆಗೆ:
1border-radius: top-left top-right bottom-right bottom-left;
2ಉದಾಹರಣೆಗೆ, ವೃತ್ತಾಕಾರದ ಕೋಣೆಗಳನ್ನು ಹೊಂದಿರುವ ಬಟನ್:
1border-radius: 10px;
2ಅಥವಾ, ವಿಭಿನ್ನ ಕೋಣದ ರೇಡಿಯಸ್‌ಗಳೊಂದಿಗೆ ಮಾತನಾಡುವ ಬಬಲ್:
1border-radius: 20px 20px 5px 20px;
2ಪಠ್ಯ ಶಾಡೋಸ್ ಪಠ್ಯಕ್ಕೆ ಆಳ ಮತ್ತು ಒತ್ತುವಿಕೆಯನ್ನು ಸೇರಿಸುತ್ತವೆ. ನಮ್ಮ ಜನರೇಟರ್‌ನಲ್ಲಿ ನೀವು ನಿಯಂತ್ರಿಸಬಹುದು:
ಪಠ್ಯ ಶಾಡೋಸ್‌ಗಾಗಿ CSS ವ್ಯಾಕರಣ ಈ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
1text-shadow: h-offset v-offset blur color;
2ಉದಾಹರಣೆಗೆ, ಸಣ್ಣ ಪಠ್ಯ ಶಾಡೋ:
1text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
2ನಮ್ಮ CSS ಪ್ರಾಪರ್ಟಿ ಜನರೇಟರ್ ಅನ್ನು ಬಳಸುವುದು ಸುಲಭ ಮತ್ತು ಸುಲಭವಾಗಿದೆ. ನಿಮ್ಮ ವೆಬ್ ಯೋಜನೆಗಳಿಗೆ ಕಸ್ಟಮ್ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ರಚಿಸಲು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:
ನೀವು ಜನರೇಟ್ ಮಾಡಲು ಬಯಸುವ CSS ಪ್ರಾಪರ್ಟಿಯ ಪ್ರಕಾರವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ, ನಾಲ್ಕು ಟ್ಯಾಬ್‌ಗಳಲ್ಲಿ ಒಂದರಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ:
ಪ್ರತಿ ಪ್ರಾಪರ್ಟಿ ಪ್ರಕಾರವು ತನ್ನದೇ ಆದ ಕಸ್ಟಮೈಸೇಬಲ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳ ಸೆಟ್ನೊಂದಿಗೆ ಬರುತ್ತದೆ:
ಗ್ರಾಡಿಯಂಟ್‌ಗಳಿಗೆ:
ಬಾಕ್ಸ್ ಶಾಡೋಗಳಿಗೆ:
ಬೋರ್ಡರ್ ರೇಡಿಯಸ್‌ಗಳಿಗೆ:
ಪಠ್ಯ ಶಾಡೋಗಳಿಗೆ:
ನೀವು ನಿಮ್ಮ ಕಸ್ಟಮೈಸೇಶನ್‌ಗಳೊಂದಿಗೆ ಸಂತೋಷವಾಗಿದ್ದರೆ:
ನೀವು ಸೆಟಿಂಗ್‌ಗಳನ್ನು ಹೊಂದಿಸಿದಂತೆ, ಸಾಧನವು ಸ್ವಾಯತ್ತವಾಗಿ CSS ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಯಾವಾಗಲೂ ನಿಮ್ಮ ಕಸ್ಟಮೈಸೇಶನ್‌ನ ಅತ್ಯಂತ ಪ್ರಸ್ತುತ ಆವೃತ್ತಿಯನ್ನು ನೋಡುತ್ತೀರಿ.
ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ವಿವಿಧ UI ಅಂಶಗಳನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು:
1 .cta-button {
2 background: linear-gradient(45deg, #ff416c 0%, #ff4b2b 100%);
3 color: white;
4 padding: 10px 20px;
5 border: none;
6 border-radius: 5px;
7 }
8 1 header {
2 background: linear-gradient(to right, #2c3e50 0%, #4ca1af 100%);
3 color: white;
4 padding: 20px;
5 }
6 1 .progress-bar {
2 background: linear-gradient(to right, #1fa2ff 0%, #12d8fa 50%, #a6ffcb 100%);
3 height: 10px;
4 border-radius: 5px;
5 }
6 ಬಾಕ್ಸ್ ಶಾಡೋಸ್ ಹಿರಿತನ ಮತ್ತು ಆಳವನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು:
1 .card {
2 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
3 padding: 20px;
4 background: white;
5 }
6 1 .dropdown {
2 box-shadow: 0 6px 12px rgba(0,0,0,0.15);
3 background: white;
4 border-radius: 4px;
5 }
6 1 input:focus {
2 box-shadow: 0 0 0 3px rgba(66,153,225,0.5);
3 outline: none;
4 border-color: #4299e1;
5 }
6 ಬೋರ್ಡರ್ ರೇಡಿಯಸ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಹೃದಯಸ್ಪರ್ಶಿಯಾಗಿ ಮಾಡಬಹುದು:
1 .profile-pic {
2 border-radius: 50%; /* ಪರಿಪೂರ್ಣ ವೃತ್ತ */
3 width: 100px;
4 height: 100px;
5 object-fit: cover;
6 }
7 1 .button {
2 border-radius: 8px;
3 padding: 10px 20px;
4 background: #4299e1;
5 color: white;
6 }
7 1 .message-bubble {
2 border-radius: 18px 18px 18px 4px;
3 background: #e2f5fe;
4 padding: 12px;
5 }
6 ಪಠ್ಯ ಶಾಡೋಸ್ ಓದುಗರನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಶೈಲಿಯನ್ನು ಸೇರಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು:
1 .hero-title {
2 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
3 color: white;
4 font-size: 3rem;
5 }
6 1 .letterpress {
2 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
3 color: #444;
4 font-weight: bold;
5 }
6 1 .neon-text {
2 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
3 color: #fff;
4 }
5 ನಮ್ಮ ಜನರೇಟರ್‌ನಲ್ಲಿ ಎಲ್ಲಾ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಬೆಂಬಲಿಸುತ್ತವೆ, ಆದರೆ ಕೆಲವು ಹೊಂದಾಣಿಕೆ ಪರಿಗಣನೆಗಳಿವೆ:
1 .gradient-element {
2 background: #5433FF; /* ಬFallback ಬಣ್ಣ */
3 background: -webkit-linear-gradient(45deg, #5433FF, #20BDFF);
4 background: linear-gradient(45deg, #5433FF, #20BDFF);
5 }
6 ಬಾಕ್ಸ್ ಶಾಡೋಸ್: ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತ. ಹಳೆಯ IE ಆವೃತ್ತಿಗಳಿಗೆ, ಬೋರ್ಡರ್ ಇಮೇಜ್‌ಗಳು ಅಥವಾ ಹಿನ್ನೆಲೆ ಇಮೇಜ್‌ಗಳನ್ನು ಬಳಸುವ ಪರಿಗಣನೆ ಮಾಡಿ.
ಬೋರ್ಡರ್ ರೇಡಿಯಸ್: ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಮಾನವಾದ ರೂಪವನ್ನು ಖಚಿತಪಡಿಸಲು SVG ಆಕೃತಿಗಳನ್ನು ಅಥವಾ ಚಿತ್ರ ಹಿನ್ನೆಲೆಗಳನ್ನು ಬಳಸುವ ಪರಿಗಣನೆ ಮಾಡಿ.
ಪಠ್ಯ ಶಾಡೋಸ್: ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೊಂದಿದೆ. IE9 ಮತ್ತು ಕೆಳಗಿನವರಿಗೆ, ಪರ್ಯಾಯ ಶೈಲಿಂಗ್ ಅಥವಾ ಶಾಡೋನಿಲ್ಲದಂತೆ ಸ್ವೀಕರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
CSS ಪ್ರಾಪರ್ಟಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮವಾಗಿರುವಾಗ, ಸಂಕೀರ್ಣ ಪರಿಣಾಮಗಳು ರೆಂಡರಿಂಗ್ ವೇಗವನ್ನು ಪರಿಣಾಮಿತಗೊಳಿಸಬಹುದು:
ಬಹು ಬಾಕ್ಸ್ ಶಾಡೋಸ್: ಅಂಶಗಳಿಗೆ ಬಹು ಬಾಕ್ಸ್ ಶಾಡೋಸ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದು ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿಧಾನಗತಿಯಲ್ಲಿ ಮಾಡಬಹುದು. ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಡಿಮೆ ಶಾಡೋ ಲೇಯರ್‌ಗಳನ್ನು ಬಳಸಲು ಪರಿಗಣಿಸಿ.
ಸಂಕೀರ್ಣ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು: ಬಹಳಷ್ಟು ಬಣ್ಣದ ನಿಲ್ಲುವಿಕೆಗಳನ್ನು ಹೊಂದಿರುವ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಣಾಮಿತಗೊಳಿಸಬಹುದು. ಸಾಧ್ಯವಾದಾಗ ಗ್ರಾಡಿಯಂಟ್‌ಗಳನ್ನು ಸರಳಗೊಳಿಸಲು ಅಥವಾ ಬಹಳ ಸಂಕೀರ್ಣ ಮಾದರಿಗಳಿಗೆ ಪೂರ್ವ-ರೆಂಡರ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು ಬಳಸಲು ಪರಿಗಣಿಸಿ.
ಅನಿಮೇಶನ್: ಬಾಕ್ಸ್ ಶಾಡೋಸ್‌ಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವಾಗ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಉಂಟಾಗಬಹುದು. ಸಾಧ್ಯವಾದಾಗ, ಚಲನೆಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ ಪರಿವರ್ತನೆ ಮತ್ತು ಓಪಾಸಿಟಿಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಪರಿಗಣಿಸಿ, ಅಥವಾ ಅನಿಮೇಶನ್‌ಗಳನ್ನು ಸುಧಾರಿಸಲು will-change ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಲು ಪರಿಗಣಿಸಿ.
ಮೊಬೈಲ್ ಸಾಧನಗಳು: ಸಂಕೀರ್ಣ CSS ಪರಿಣಾಮಗಳು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಹೊಂದಬಹುದು. ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಮೊಬೈಲ್ ಆವೃತ್ತಿಗಳಿಗಾಗಿ ಪರಿಣಾಮಗಳನ್ನು ಸರಳಗೊಳಿಸಲು ಪರಿಗಣಿಸಿ.
ಲೀನಿಯರ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ನಿರ್ದಿಷ್ಟ ದಿಕ್ಕಿನಲ್ಲಿ (ಕೋನ) ಬಣ್ಣಗಳನ್ನು ಪರಿವರ್ತಿಸುತ್ತವೆ, ಆದರೆ ರೇಡಿಯಲ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಕೇಂದ್ರ ಬಿಂದುಗಳಿಂದ ಹೊರಗೆ ಬಣ್ಣಗಳನ್ನು ಪರಿವರ್ತಿಸುತ್ತವೆ. ಲೀನಿಯರ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಹಿನ್ನೆಲೆಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಹಾರಿಜಾಂಟಲ್/ವರ್ಧಮಾನ ಪರಿವರ್ತನೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿವೆ, ಆದರೆ ರೇಡಿಯಲ್ ಗ್ರಾಡಿಯಂಟ್‌ಗಳು ಸ್ಪಾಟ್‌ಲೈಟ್ ಪರಿಣಾಮಗಳು, ವೃತ್ತಾಕಾರದ ಬಟನ್‌ಗಳು ಅಥವಾ ಕೇಂದ್ರೀಕೃತ ಬಿಂದುಗಳನ್ನು ರಚಿಸಲು ಉತ್ತಮವಾಗಿವೆ.
ಹೌದು, ನೀವು ಶಾಡೋ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಕಮಾ ಮೂಲಕ ವಿಭಜಿಸುವ ಮೂಲಕ ಒಂದೇ ಅಂಶಕ್ಕೆ ಬಹು ಬಾಕ್ಸ್ ಶಾಡೋಸ್ ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:
1box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
2ಇದು ಅಂಶದ ಕೆಳಗೆ ಪ್ರಾಥಮಿಕ ಶಾಡೋ ಮತ್ತು ಸಣ್ಣ ಮೇಲಿನ ಶಾಡೋವನ್ನು ರಚಿಸುತ್ತದೆ.
ನೀವು ಬೋರ್ಡರ್-ರೇಡಿಯಸ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನಾಲ್ಕು ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರತಿ ಕೋಣೆಗೆ ವಿಭಿನ್ನ ರೇಡಿಯಸ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ಧರಿಸುವ ಮೂಲಕ ನಿರ್ಧರಿಸಬಹುದು: ಟಾಪ್-ಲೇಫ್, ಟಾಪ್-ರೈಟ್, ಬಾಟಮ್-ರೈಟ್, ಬಾಟಮ್-ಲೇಫ್. ಉದಾಹರಣೆಗೆ:
1border-radius: 10px 0 0 10px;
2ಇದು ಕೇವಲ ಎಡ ಕೋಣಗಳನ್ನು (ಟಾಪ್-ಲೇಫ್ ಮತ್ತು ಬಾಟಮ್-ಲೇಫ್) ತಿರುಗಿಸುತ್ತದೆ, ಬಲ ಕೋಣೆಗಳನ್ನು ಚೌಕದಂತೆ ಬಿಡುತ್ತದೆ.
ಪಠ್ಯ ಶಾಡೋಗಳ ರೆಂಡರಿಂಗ್ ಬ್ರೌಸರ್‌ಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಹೊಂದಬಹುದು, ಏಕೆಂದರೆ ಆಂಟಿ-ಆಲಿಯಾಸಿಂಗ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್‌ಗಳಲ್ಲಿ ವ್ಯತ್ಯಾಸಗಳ ಕಾರಣ. ಅತ್ಯಂತ ಸಮಾನವಾದ ಫಲಿತಾಂಶಗಳಿಗಾಗಿ, ಮಧ್ಯಮ ಬ್ಲರ್ ಮೌಲ್ಯಗಳನ್ನು (1-3px) ಬಳಸಲು ಮತ್ತು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಪರಿಗಣಿಸಿ. ಬಹಳ ಸೂಕ್ಷ್ಮ ಶಾಡೋಗಳು (0-1px ಬ್ಲರ್) ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ಹೆಚ್ಚು ವ್ಯತ್ಯಾಸವನ್ನು ತೋರಿಸುತ್ತವೆ.
ಹೌದು, ಹೆಚ್ಚಿನ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬಹುದು, ಆದರೆ ಕೆಲವು ಇತರರಿಗಿಂತ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ:
CSS ಪರಿಣಾಮಗಳನ್ನು ಬಳಸುವಾಗ, ಈ ಪ್ರವೇಶದ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪರಿಗಣಿಸಿ:
prefers-reduced-motion ಮೀಡಿಯಾ ಕ್ವೆರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಪರ್ಯಾಯಗಳನ್ನು ಒದಗಿಸಿನಮ್ಮ ಸಾಧನವು ವೆಂಡರ್ ಪ್ರೀಫಿಕ್ಸ್ ಇಲ್ಲದೆ ಪ್ರಮಾಣಿತ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ಉತ್ಪಾದನಾ ಬಳಸಲು, ನಿಮ್ಮ CSS ಅನ್ನು ಸ್ವಾಯತ್ತವಾಗಿ ವೆಂಡರ್ ಪ್ರೀಫಿಕ್ಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಆಟೋಪ್ರಿಫಿಕ್ಸರ್ ಸಾಧನದ ಮೂಲಕ ಓಡಿಸಲು ಅಥವಾ CSS ಪ್ರೀಪ್ರೊಸೆಸರ್ ಅನ್ನು ಬಳಸಲು ಪರಿಗಣಿಸಿ.
CSS ಪ್ರಾಪರ್ಟಿ ಜನರೇಟರ್ ನಿಮ್ಮ ವೆಬ್ ಯೋಜನೆಗಳಿಗೆ ಸುಂದರ, ಕಸ್ಟಮೈಸ್ಡ್ CSS ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಗ್ರಾಡಿಯಂಟ್‌ಗಳು, ಬಾಕ್ಸ್ ಶಾಡೋಸ್, ಬೋರ್ಡರ್ ರೇಡಿಯಸ್ ಮತ್ತು ಪಠ್ಯ ಶಾಡೋಸ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ದೃಶ್ಯಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಇದು ಸಂಕೀರ್ಣ ವ್ಯಾಕರಣವನ್ನು ನೆನೆಸಿಕೊಳ್ಳುವ ಅಥವಾ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರಯೋಗಿಸುವ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ನೀವು ವೃತ್ತಿಪರ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೂ, ಪ್ರೋಟೋಟೈಪ್ ಅನ್ನು ರಚಿಸುತ್ತಿದ್ದರೂ ಅಥವಾ CSS ಅನ್ನು ಕಲಿಯುತ್ತಿದ್ದರೂ, ಈ ಸಾಧನವು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ಶೀಘ್ರವಾಗಿ ಸಂಪೂರ್ಣಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನೈಜ ಸಮಯದ ಪೂರ್ವಾವಲೋಕನ ವೈಶಿಷ್ಟ್ಯವು ನಿಮ್ಮ ಕಸ್ಟಮೈಸೇಶನ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ನೋಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಮತ್ತು ಒಬ್ಬ ಕ್ಲಿಕ್ ನಕಲು ಕಾರ್ಯವು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ನೀವು ಇಂದು ವಿಭಿನ್ನ CSS ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಆರಂಭಿಸಿ ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಹೆಚ್ಚು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು!
உங்கள் பணிப்பாக்கிலுக்கு பயனுள்ள மேலும் பயனுள்ள கருவிகளைக் கண்டறியவும்