29 CSS כעדערז און פאָאָטערס פֿאַר דיין בלאָג אָדער וועבזייטל

CSS פוטער

די כעדערז און פאָאָטערס זענען יקערדיק עלעמענטן ווען איר שאַפֿן אַ נייַע בלאַט וועב אָדער אַ בלאָג, אָדער אויב גאָרנישט אַנדערש מיר דאַרפֿן צו דערהייַנטיקן זיי צו טרעפן די קראַנט סטאַנדאַרדס פון וועב פּלאַן. זיי זענען ספּייסאַז צו וואָס די באַזוכער פון אונדזער וועבזייטל יוזשאַוואַלי באַצאָלן גרויס ופמערקזאַמקייט, אַזוי מיר האָבן צו נעמען קעיר פון זיי און באַלעווען זיי גענוג אַזוי אַז זיי זענען וואוילגעפעלן צו די אויג, אַחוץ פון פאַנגקשאַנאַל.

דעריבער מיר וועלן צו טיילן 29 CSS כעדערז און פאָאָטערס וואָס איר קענען נוצן אויף דיין בלאָג אָדער וועבזייטלאון אַזוי געבן עס די קוואַליטעט פון וואָס איר געווען קוקן פֿאַר. די רשימה איז קאַמפּרייזד פון פול פאַרשטעלן אַרטיקל כעדערז, ווי געזונט ווי די סטאַנדאַרט גרייס, פאַרפעסטיקט אָדער פאַרפעסטיקט כעדערז, פאָאָטערס און עטלעכע ווידעא כעדערז צו געבן אן אנדער פונט פון פּערספּעקטיוו צו דיין וועבזייטל.

קערווד כעדער

קערווד כעדער

א כעדער וואָס איז יידענאַפייד דורך זייַן קערווד נוסח אין די דנאָ וואָס מאכט עס אַ זייער ספּעציעל כעדער פֿאַר אַ וועבזייטל אָדער בלאָג. עס איז ריין CSS, אַזוי עס נעמט שוין צייט צו פּרובירן דיין וועב סטאַגינג ווי עס וועט זיין אויב איר טאָן דאָס אין דיין בלאָג.

כעדער בילד פּאַראַללאַקס

פּאַראַללאַקס

מיט אַ גרויס פּאַראַללאַקס בילד ווירקונג, דעם כעדער אידענטיפֿיצירט זיך דורך נוצן CSS הינטערגרונט-בילד שטעלע. די כעדער בילד וואָלט זיין פּאַזישאַנד אין די שפּיץ פון די בלאַט פֿאַר גרויס ווירקונג קאָד.

כעדער פאַרפעסטיקט ווינקלדיק

אַנגלעד כעדער

דער כעדער איז געזונט פאַרפעסטיקט אין די שפּיץ פון די וועב בלאַט צו דיפערענטשיייט מיט די דיאַגאָנאַל שורה וואָס קראָסיז די גאנצע האָריזאָנטאַל פון די מיינונג פון די באַניצער. עס ווייזט ווי CSS פּסעוודאָ-עלעמענטן קענען ווערן גענוצט צו שאַפֿן אַ פאַרפעסטיקט כעדער מיט אַ הינטערגרונט בילד.

סקעוועד כעדער

סקעוועד

CSS און HTML פֿאַר דעם כעדער אַז אין די געגעבן ביישפּיל איז קעראַקטערייזד צוזאמען די דיאַגאָנאַל שורה אַז קראָסיז די גאנצע פאַרשטעלן פון איין זייַט צו די אנדערע.

כעדער מיט SVG אַנאַמיישאַן

קערווד סווג

א זייער פּשוט כעדער, כאָטש עס ניצט אַ SVG אַנאַמיישאַן צו ויסטיילן זיך פון די וואָס מיר האָבן אויף דער רשימה. איר קענען אַקסעס אַ גרויס רשימה פון וועב זייַטלעך מיט SVG אַנאַמיישאַנז פֿון דאָ.

פאַרפעסטיקט כעדער מיט דיוו

דיוו פאַרפעסטיקט

מיט פּאַראַללאַקס בילד ווירקונג, אַ פאַרפעסטיקט כעדער וואָס שטייט אויס פֿאַר די גרויס ווירקונג אַטשיווד מיט די פאַרפעסטיקט הינטערגרונט בילד בשעת די מנוחה סקראָולז ווען מיר מעגילע מיט די מויז.

פּאַראַללאַקס מאַלטי-שיכטע געמעל

מולטי-שיכטע

א כעדער פון גרויס ענדיקן אין מולטי-לייערד HTML, CSS און דזשאַוואַסקריפּט און וואָס קענען זיין בישליימעס געניצט פֿאַר אַ וועבזייטל וואָס איז פארבונדן צו דער וועלט פון ווידעא שפּילערייַ. גרויס ענדיקן איבער.

פאַרפעסטיקט פּאָסטן כעדער

פאַרפעסטיקט פּאָסטן

א פאַרפעסטיקט כעדער פֿאַר יעדער פּאָסטן געמאכט אין HTML, CSS און דזשאַוואַסקריפּט. דער מאָמענט מיר זעמל אַראָפּ, די כעדער איז מינאַמייזד און פאַרפעסטיקט אין דער שפּיץ.

גאַנץ פאַרשטעלן כעדער מיט אַנאַמיישאַן

אַנימאַטעד כוואליעס

א כעדער וואָס אָפפערס אַ אַנאַמיישאַן אַז באוועגט לאַטעראַל און וואָס טראגט אַ רילאַקסינג ווירקונג אויף די צוקוקער.

גאַנץ פאַרשטעלן העלד בילד

העלד בילד

מיט אַ פארגרעסער ווירקונג, this כעדער פול פאַרשטעלן עס איז גילוי ווי איינער פון גרויס ערידזשאַנאַליטי. שליימעסדיק פֿאַר אַ וועבזייטל אין וואָס דער גאַסט וועט נוצן די סקראָללינג און מאַך אַרום אים.

פלעקסבאָקס מיט קנעפּל 

פלעקסבאָקס מיט קנעפּל

א כעדער וואָס נעמט די גאנצע ברייט פון די פאַרשטעלן צו אַרויסווייַזן אַ קנעפּל. שליימעסדיק פֿאַר לאַנדינג בלעטער מיט CSS פלעקסבאָקס.

פלעקסבאָקס העלד כעדער

פלעקסבאָקס העלד

א כעדער מיט ווירקונג פּאַראַללאַקס און פלעקסבאָקס גאַנץ פּשוט וואָס דער הויפּט שטייען פֿאַר די עלאַגאַנס פון זייַן פּלאַן.

קלעפּיק כעדער אויף מעגילע

קלעפּיק כעדער

ווי זיין נאָמען סאַגדזשעס, אַ פאַרפעסטיקט כעדער ווען מיר מעגילע מיט די מויז ווען מאָווינג צו זען די רעשט פון די וועב בלאַט.

אָפּרופיק סקראָללינג קלעפּיק

אָפּרופיק מעגילע

אן אנדער פאַרפעסטיקט כעדער מיט גרויס ווירקונג ווען די מעניו ריטשאַז די שפּיץ פון די בלאַט, וואָסאון אין דעם מאָמענט עס בלייבט פאַרפעסטיקט און מיר קענען האַלטן סקראָללינג אויף דעם פּלאַץ.

מעגילע כעדער

מעגילע כעדער

עס איז אַנדערש פון די מנוחה געהעריק און יידל אַנאַמיישאַן ווי מיר מאַך. אין די סוף, די כעדבאָרד בלייבט פאַרפעסטיקט אין דער שפּיץ.

אָפּרופיק מעגילע כעדער

אָפּרופיק מעגילע כעדער

אן אנדער גרויס אַנאַמיישאַן פֿאַר ויסטיילן דעם כעדער פון די מנוחה מיט HTML, CSS און JavaScript.

כעדער אין / אויס

ופלעבן כעדער

א כעדער וואָס איז אונטערשיידן דורך די ווירקונג אין / אויס נאָך סקראָללינג און וואָס טראגט די געפיל פון אָפּבאַלעמענ זיך.

כעדער וועלקן

כעדער וועלקן

אן אנדער אַנאַמיישאַן ווירקונג טשיקאַווע און זייער עלעגאַנט אין HTML, CSS און JavaScript.

כעדער וואָס איז פאַרבאָרגן

אַוטאָ באַהאַלטן

א אַנדערש כעדער ווען כיידינג לויט מיר נוצן סקראָללינג מיט אַן אַנאַמיישאַן אַז גייט אַננאָוטיסט אָבער פון גרויס קוואַליטעט.

פּאַראַללאַקס פוטער

פּאַראַללאַקס פוטער

א פאַרפעסטיקט אָדער פאַרפעסטיקט פוטער מיט HTML, CSS און דזשאַוואַסקריפּט. פון גרויס קוואַליטעט מיט שיידינג אין ווירקונג.

פוטער מיט אינהאַלט וואָג

פוטער וואָג

א הויך קוואַליטעט און אָריגינעל פוטער פֿאַר דערשטוינען די גאַסט פֿאַר די גראַציעז וועג צו אַרויסווייַזן דעם וועב פּלאַץ.

פוס פון סאציאל מעדיע

סאציאל מעדיע

א פוטער וואָס שטייט אויס פֿאַר די קנעפּלעך וואָס ווייַזן צו געזעלשאַפטלעך נעטוואָרקס בעסטער באַוווסט. די אַנאַמיישאַן געשאפן ווען געלאזן די מויז טייַטל איבער יעדער פון די געזעלשאַפטלעך נעטוואָרקס.

אַנימאַטעד רירעוודיק פוטער מעניו

אַנימאַטעד פוטער רירעוודיק

דורך רידוסינג די וועב בלעטערער פֿענצטער צו זען דעם פוטער, איר קענען געפֿינען די 2-3 סעקשאַנז אַז דער באַניצער קענען געפֿינען אויף אַ רירעוודיק מיטל. עס איז געוויזן ביי 767 פּקס.

פּשוט פיקסט פוטער

פּשוט פיקסט

געמאכט אין HTML און CSS איז אַ פּשוט פוטער אָן פיל פאַנפער און בליען.

רעאַגירן ווידעא כעדער

רעאַגירן ווידעא כעדער

א קעפל מיט פּשוט ווידעא React.js.

ווידעא כעדער

ווידעא כעדער

אַנדערער כעדער מיט פּשוט ווידעא און פון גרויס קוואַליטעט.

גאַנץ סקרין ווידעא כעדער מיט מיקס-בלענד

פוללסקרעען

ווייַזן אַ פול פאַרשטעלן ווידעא מיט טעקסט אויף שיכטע ניצן מישן-צונויפגיסן מאָדע.

ווידעא כעדער אַנאַמיישאַן

ווידעא כעדער אַנאַמיישאַן

די אַנאַמיישאַן איז געווען קאַסטאַמייזד מיט Adobe After Effects צו זיין קאַמפּאַטאַבאַל מיט אַלע בראַוזערז. עס קען נישט אַרבעטן אויף רירעוודיק.

אָפּרופיק ווידעא כעדער מיט גראַדיענט

אָפּרופיק

El גראַדיענט איז וואָס שטייט אויס צו דעם ווידעא כעדער פֿון די מנוחה.


דער אינהאַלט פון דעם אַרטיקל אַדכיר צו אונדזער פּרינציפּן פון לייט עטיקס. צו מעלדונג אַ טעות גיט דאָ.

2 באַמערקונגען, לאָזן דיין

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס. Required fields זענען אנגעצייכנט מיט *

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.

  1.   TecnOku דאָס

    זיי אַלע קאַנווינסט מיר. דאַנקען