ಆನ್‌ಲೈನ್ ಸಂಪನ್ಮೂಲಗಳು ಬಹುತೇಕ ಅನಂತವಾಗಿವೆ, ಆದರೆ ಗುಣಮಟ್ಟವನ್ನು ಕಂಡುಹಿಡಿಯುವುದು ನಿಜವಾಗಿಯೂ ಕಷ್ಟದ ವಿಷಯಸ್ವಲ್ಪ ಹುಡುಕಿದರೂ ಮತ್ತು ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಮೀಸಲಾಗಿರುವ ವೆಬ್‌ಸೈಟ್‌ಗಳ ಉತ್ತಮ ಪಟ್ಟಿಯನ್ನು ಹೊಂದಿದ್ದರೂ, ವಿಷಯಗಳು ಸುಲಭವಾಗುತ್ತವೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ನಂತಹ ಭಾಷೆಗಳು ಉತ್ತಮ ಆಕಾರದಲ್ಲಿರುವಾಗ, ಉಚಿತ, ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಹತ್ತಿರವಾಗುವುದು ಕೆಲವು ಕ್ಲಿಕ್‌ಗಳ ದೂರದಲ್ಲಿದೆ.
ನಾವು ಸರಣಿಯನ್ನು ಪಟ್ಟಿ ಮಾಡಲಿದ್ದೇವೆ HTML ಮತ್ತು CSS ನಲ್ಲಿ ಉಚಿತ ಕಾರ್ಡ್ಗಳು ಅದು ಎಲ್ಲಾ ರೀತಿಯ ಬ್ಲಾಗ್, ವ್ಯವಹಾರ, ಇ-ಕಾಮರ್ಸ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ದೀರ್ಘ-ಶ್ರೇಣಿಯ ಸಂಗ್ರಹ, ಇದರಿಂದಾಗಿ ನೀವು ಎಲ್ಲಾ ರೀತಿಯ ಕ್ಲೈಂಟ್‌ಗಳಿಗಾಗಿ ಮಾಡುತ್ತಿರುವ ಕೆಲವು ಕೆಲಸಗಳಲ್ಲಿ ಇದನ್ನು ಸೇರಿಸಿಕೊಳ್ಳಬಹುದು. ಕೋಡೆಪೆನ್.ಓ ಅನ್ನು ಬಳಸುವ ಈ ಪಟ್ಟಿಯೊಂದಿಗೆ ನಾವು ಇದನ್ನು ಮಾಡಲಿದ್ದೇವೆ ಇದರಿಂದ ನೀವು HTML ಮತ್ತು CSS ಎರಡರಲ್ಲೂ ಕೋಡ್ ಪಡೆಯಬಹುದು.
ಬ್ಲಾಗ್ ಕಾರ್ಡ್ ವಿನೋದ # 1
ಉನಾ ಉತ್ತಮ ವಿನ್ಯಾಸ ಕಾರ್ಡ್ ಅದು ಪ್ರತಿನಿಧಿಸುವ ಚಿತ್ರವನ್ನು ಬಹುತೇಕ ಹೇಳುತ್ತದೆ, ಅನುಗುಣವಾದ ಕೋಡ್ ಪಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಅದನ್ನು ಸ್ಥಾಪಿಸಲು ನೀವು codepen.io ಗೆ ಹೋಗಬಹುದು.
ಸಿಎಸ್ಎಸ್ ನ್ಯೂಸ್ ಕಾರ್ಡ್ಗಳು ಕೇವಲ ಸಿಎಸ್ಎಸ್
ಈ ಕಾರ್ಡ್, ಇದರೊಂದಿಗೆ ಸ್ಟ್ರೇಂಜರ್ ಥಿಂಗ್ಸ್ ಹಿನ್ನೆಲೆ, ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಅದರ ನಯವಾದ ಅನಿಮೇಷನ್‌ಗಾಗಿ ಎದ್ದು ಕಾಣುತ್ತದೆ. ಇದು ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ಆಗಿದೆ.
ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಐಟಂ
ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಅದರ ಮೇಲೆ ತರುವ ಮೂಲಕ ವೆಬ್‌ನ ಪೂರ್ವವೀಕ್ಷಣೆ. ಇದು ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಹೊಂದಿದೆ ಸುಲಭ ಸಂಯೋಜನೆಗಾಗಿ.
ಬ್ಲಾಗ್ ಕಾರ್ಡ್ಗಳು
ಕನಿಷ್ಠ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಬ್ಲಾಗ್ ಕಾರ್ಡ್ ವಿನ್ಯಾಸ. ವೇಗದ ಮತ್ತು ನಯವಾದ ಅನಿಮೇಷನ್ಗಳು ಯಾರನ್ನೂ ಅಸಡ್ಡೆ ಬಿಡದ ಉತ್ತಮ ಗುಣಮಟ್ಟ.
ಜವಾಬ್ದಾರಿಯುತ ವ್ಯಾಪಾರ ಕಾರ್ಡ್ಗಳು
ಇದಕ್ಕಾಗಿ ನಿಂತಿದೆ ಸ್ವಲ್ಪ ಅನಿಮೇಷನ್ ಕಾರ್ಡ್ ಚಿತ್ರದ ಮೇಲೆ ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಸುಳಿದಾಡುವ ಮೂಲಕ.
ಮತ್ತೊಂದು ಬ್ಲಾಗ್ ಕಾರ್ಡ್
ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಸುಳಿದಾಡುವಾಗ ಕಾರ್ಡ್ ಪಠ್ಯ ಅದೇ.
ವ್ಯಾಪಾರ ಕಾರ್ಡ್ಗಳು
ಉನಾ ಸರಳ ಆದರೆ ಪ್ರಸ್ತುತ ಕಾರ್ಡ್ HTML ಮತ್ತು CSS ನಲ್ಲಿ ಡೆಮೊ ಮತ್ತು ಕೋಡ್‌ನೊಂದಿಗೆ ಭೇಟಿ ನೀಡಿ.
3D ವ್ಯಾಪಾರ ಕಾರ್ಡ್
ಈ ಕಾರ್ಡ್ ಮೌಲ್ಯಯುತವಾಗಿದೆ HTML ಮತ್ತು CSS ನೊಂದಿಗೆ 3D ಅನಿಮೇಷನ್. ಎಲೆನಾ ನಜರೋವಾ ಅವರಿಂದ ತಯಾರಿಸಲ್ಪಟ್ಟಿದೆ, ಇದು ಬಣ್ಣವನ್ನು ಹೊಡೆಯುವ ವ್ಯವಹಾರ ಕಾರ್ಡ್‌ಗೆ ಸೂಕ್ತವಾಗಿದೆ.
ಸಿಎಸ್ಎಸ್ ವ್ಯವಹಾರ ಕಾರ್ಡ್
ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ಬಹಳ ಗಮನಾರ್ಹವಾದ ವ್ಯಾಪಾರ ಕಾರ್ಡ್ 3D ಯಲ್ಲಿ ತಿರುಗುತ್ತದೆ ನಾವು ಅದನ್ನು ಇರಿಸಿದ ಕ್ಷಣದಲ್ಲಿ ಮೌಸ್ ಪಾಯಿಂಟರ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ URL ವಿಳಾಸಗಳ ಸರಣಿಗೆ ದಾರಿ ಮಾಡಿಕೊಡುತ್ತೇವೆ.
ಕಾರ್ಡ್ ಗ್ರಿಡ್ಗಳು
ಇದರೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಇರಿಸಿದ ಕಾರ್ಡ್‌ಗಳ ಸರಣಿ ಕಣ್ಮನ ಸೆಳೆಯುವ ವಿನ್ಯಾಸ. ಅದರ ಸರಳವಾದ ಸೌಂದರ್ಯಶಾಸ್ತ್ರಕ್ಕೆ ಇದು ಆಶ್ಚರ್ಯಕರವಾಗಿದೆ, ಆದರೆ HTML, CSS ಮತ್ತು SCSS ಕೋಡ್‌ನಲ್ಲಿ ಉತ್ತಮ ಯಶಸ್ಸನ್ನು ಹೊಂದಿದೆ.
3 ಡಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸಲಾಗುತ್ತಿದೆ
ಕಾರ್ಡ್ ಗ್ರಿಡ್‌ಗಳ ಈ ಸರಣಿ ಈ ಸಮಯದಲ್ಲಿ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಬಹಿರಂಗಪಡಿಸಿ ನಾವು ಐಕಾನ್ ಮೇಲೆ ಮೌಸ್ ಅನ್ನು ಹಸಿರು ಬಣ್ಣದಲ್ಲಿ ಬಿಟ್ಟಿದ್ದೇವೆ. ನಾವು ಪಾಯಿಂಟರ್ ಅನ್ನು ಬಿಡುವ ಅದೇ ಸಮಯದಲ್ಲಿ, ಉಳಿದ ಗ್ರಿಡ್ ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಚಲಿಸುತ್ತದೆ.
ರೆಸ್ಪಾನ್ಸಿವ್ ಮೆಟೀರಿಯಲ್ ಡಿಸೈನ್ ಕಾರ್ಡ್
ಜೊತೆ google ವಿನ್ಯಾಸ ಭಾಷೆ, ಈ ಸರಣಿಯ ಕಾರ್ಡ್ಗಳು ಮೆನು ಐಕಾನ್‌ಗಾಗಿ ಎದ್ದು ಕಾಣುತ್ತವೆ, ಅದು ಉದಾಹರಣೆಯಂತೆ ನಟರ ಎಲ್ಲಾ ಮಾಹಿತಿಯನ್ನು ತೆರೆಯುತ್ತದೆ. ಉತ್ತಮ ದೃಶ್ಯ ನೋಟವನ್ನು ಹೊಂದಿರುವ ಸುಂದರ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಅನಿಮೇಷನ್.
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಕಾರ್ಡ್ ಗ್ರಿಡ್
ಕಾರ್ಡ್ ಮೂಲಮಾದರಿ ಗ್ರಿಡ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಸ್ವರೂಪವನ್ನು ಬಳಸುವುದಕ್ಕಾಗಿ ಅವರು ಎದ್ದು ಕಾಣುವ ಅದೇ ಎತ್ತರದಲ್ಲಿ. ಸಿಎಸ್ಎಸ್ ಆಕಾರ ಅನುಪಾತಗಳು ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಫಿಲ್ಟರ್‌ಗಳ ಬಳಕೆಯು ಅದರ ಮತ್ತೊಂದು ಮೌಲ್ಯವಾಗಿದೆ.
ಕ್ಲಾನ್ಸ್ ಕಾರ್ಡ್‌ಗಳ ಕ್ಲಾಷ್
El ಜನಪ್ರಿಯ ಮೊಬೈಲ್ ಆಟ ಆಂಡ್ರೆ ಮದರಂಗ್ ರಚಿಸಿದ HTML ಮತ್ತು CSS ನಲ್ಲಿ ಅದರ ಕಾರ್ಡ್‌ಗಳನ್ನು ಹೊಂದಿದೆ. ನಿಖರವಾದ ಮತ್ತು ಹೆಚ್ಚು ದೃಶ್ಯ ಅನಿಮೇಶನ್‌ನೊಂದಿಗೆ ನಾವು ಅವುಗಳ ನಡುವೆ ಹಾದುಹೋಗಬಹುದು.
ಐಕಾಮರ್ಗಾಗಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ಸ್ಲೈಡ್ ಮಾಡಿ
ಎ ಚುರುಕುಬುದ್ಧಿಯ ಅನಿಮೇಷನ್, ಈ ಕಾರ್ಡ್ಗಳು ಅವುಗಳ ಬಗ್ಗೆ ಏನೆಂದು ಕಂಡುಹಿಡಿಯಲು ಅವುಗಳ ಅಂಶಗಳನ್ನು ಹುಡುಕಲು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತವೆ. ಒಮರ್ ಡಿಸೋಕಿಯಿಂದ ಉತ್ತಮ ವಿನ್ಯಾಸದೊಂದಿಗೆ.
ಇಂಟರ್ಫೇಸ್ ವಿನ್ಯಾಸ - ಉತ್ಪನ್ನ ಕಾರ್ಡ್
ಇವುಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಪರಿಪೂರ್ಣ ಕಾರ್ಡ್ ನಮ್ಮ ಐಕಾಮರ್ಸ್‌ನ ಉತ್ಪನ್ನ. HTML ಮತ್ತು CSS ನಲ್ಲಿ ತಯಾರಿಸಲಾಗುತ್ತದೆ.
ಉತ್ಪನ್ನ ಕಾರ್ಡ್
ಅದೇ ಕಾರ್ಡ್‌ನಿಂದ ನಾವು ಮಾಡಬಹುದು ಹಲವಾರು ಚಿತ್ರಗಳನ್ನು ರವಾನಿಸಿ ಉತ್ಪನ್ನವನ್ನು ಉತ್ತಮವಾಗಿ ನೋಡಲು. ಇದು ಆಡ್ ಟು ಕಾರ್ಟ್ ಬಟನ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ ಮತ್ತು HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.
ಹೊಂದಿಕೊಳ್ಳುವ ಉತ್ಪನ್ನ ಕಾರ್ಡ್ಗಳು
ಅದರ ಹೆಸರೇ ಸೂಚಿಸುವಂತೆ, ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಬಳಸುತ್ತದೆ ನಾವು ಆಡ್ ಟು ಕಾರ್ಟ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಆಸಕ್ತಿದಾಯಕ ಅನಿಮೇಷನ್ ರಚಿಸಲು.
ಕಾರ್ಡ್‌ಗಳನ್ನು ಫ್ಲಿಪ್ ಮಾಡಿ
ನಯವಾದ ಮತ್ತು ಕೆಲವು ಕಾರ್ಡ್‌ಗಳಿಗೆ ಸ್ವಲ್ಪ ಕೋಡ್ ಪರಿಪೂರ್ಣ ಅನಿಮೇಷನ್. ಕೆಲವೇ ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಅವುಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು. ಇತ್ತೀಚೆಗೆ ಕೋಡೆಪೆನ್‌ಗೆ ಸೇರಿಸಲಾಗಿದೆ.
3D ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳಾಗಿ ಕಾರ್ಡ್ಗಳು
ಈ ಕಾರ್ಡ್ಗಳು ಎಂದು ಗಮನಿಸಬೇಕು ನಾವು ಮೇಜಿನ ಮೇಲೆ ಕಾರ್ಡ್‌ಗಳ ಸರಣಿಯನ್ನು ಹೊಂದಿರುವಂತೆ. ಪಾಯಿಂಟರ್ ಅನ್ನು ಒಡ್ಡಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು o ೂಮ್ ಇನ್ ಆಗುತ್ತವೆ, ಪ್ರತಿಯೊಂದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಉತ್ಪನ್ನದ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸಲು ಕಾರ್ಡ್‌ನ ಹಿಂಭಾಗವನ್ನು ತೋರಿಸುತ್ತವೆ. ನಾವು ಮತ್ತೆ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಮುಂಭಾಗದಲ್ಲಿದ್ದಂತೆ ಬಿಡುತ್ತೇವೆ. 3D ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕಲಿಯಲು ಸೂಕ್ತವಾಗಿದೆ.
ಭ್ರಂಶ ಕಾರ್ಡ್
ಎ ಯೊಂದಿಗೆ ಬಹಳ ದೃಶ್ಯ ಪ್ರಯೋಗ ಕಣ್ಣಿಗೆ ಕಟ್ಟುವ ಫ್ಲಿಪ್ ಪರಿಣಾಮ. ಅದು ಏನು ಮಾತನಾಡುತ್ತಿದೆ ಎಂದು ತಿಳಿಯಲು ನೀವು ಅದನ್ನು ನೋಡುವುದು ಉತ್ತಮ.
ಕಾರ್ಡ್‌ಗಳಿಗಾಗಿ ಹೂವರ್ ಪರಿಣಾಮ
ಸರಳ ಪರಿಣಾಮ ಆದರೆ ಗಿಮಿಕ್ ಹೂವರ್ ಕಾರ್ಡ್‌ಗಳ ಬಗ್ಗೆ.
ಸರಳ ಹೂವರ್ ಪರಿಣಾಮ
ಸರಳ ಪರಿಣಾಮವನ್ನು ಹೊಡೆಯುವುದು, ಆದರೆ ನಾವು ಅದನ್ನು ದೃಶ್ಯೀಕರಿಸುವ ಕ್ಷಣದಲ್ಲಿ ಅದು ಉತ್ತಮ ಪರಿಣಾಮವನ್ನು ಬೀರುತ್ತದೆ.
ಭ್ರಂಶ ಆಳದ ಕಾರ್ಡ್ಗಳು
ಈ ಕಾರ್ಡ್ಗಳು ಭ್ರಂಶ ಪರಿಕಲ್ಪನೆ ಮೇಲಕ್ಕೆ ವಿನ್ಯಾಸದ ಮೂಲಕ ಕೆಲವು ಗಮನಾರ್ಹ ಕಾರ್ಡ್‌ಗಳನ್ನು ರೂಪಿಸಲು. ನಮ್ಮ ಬ್ಲಾಗ್‌ನಲ್ಲಿನ ಕೆಲವು ವರ್ಗಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ಅದು ಬಳಕೆದಾರರ ಮೇಲೆ ಉಂಟುಮಾಡುವ ಪರಿಣಾಮವನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನೀವು ಅದನ್ನು ನೋಡಬೇಕಾಗಿದೆ.
ಚಲನಚಿತ್ರಗಳಿಗಾಗಿ ಯುಐ ಕಾರ್ಡ್
ಒಂದು ಕಾರ್ಡ್ HTML ನೊಂದಿಗೆ ಮಾಡಿದ ಉತ್ತಮ ವಿನ್ಯಾಸ ಮತ್ತು ಸಿಎಸ್ಎಸ್.
ಪ್ರೊಫೈಲ್ ಕಾರ್ಡ್
ತುಂಬಾ ಉತ್ತಮ ಅನಿಮೇಷನ್ ಸಂಪರ್ಕ ಕಾರ್ಡ್ಗಾಗಿ ನಾವು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ರೊಫೈಲ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು. ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್.
ಪೋಲರಾಯ್ಡ್ ಕಟ್ಟುಗಳ ಕಾರ್ಡ್ಗಳು
ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ, ಫಿಲ್ಟರ್‌ಗಳು ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಕಸ್ಟಮ್ ಪರಿವರ್ತನೆಗಳು ಪೋಲರಾಯ್ಡ್ ಗುಂಪಿನ ಕಾರ್ಡ್‌ಗಳ ಈ ಸರಣಿಯನ್ನು ರಚಿಸಲಾಗಿದೆ; ಈ ಎಸ್‌ವಿಜಿ ಚಿತ್ರಗಳ ವೆಬ್ ಅನ್ನು ಕಳೆದುಕೊಳ್ಳಬೇಡಿ.
ಈ ಯಾವುದೇ ಕಾರ್ಡ್‌ಗಳನ್ನು ವರ್ಡ್ಪ್ರೆಸ್ ಹೊಂದಿರುವ ಪುಟದಲ್ಲಿ ಸೇರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ
ನಾನು ಅವುಗಳನ್ನು ಪ್ರೀತಿಸುತ್ತೇನೆ