אפקט של פינה מקופלת עם CSS (בלבד)

3421
07-04-2015

ברוכים הבאים, היום מדריך מיני קצר עם המון דוגמאות של שימוש בCSS כדי ליצור אפקט של פינה מקופלת בדומה למה שהיינו מקבלים אם היינו מקפלים את הפינה בדף נייר כולל הצללה וכל הפוזה הנלווית. אלמנט נחמד מאוד, במיוחד עבור ציטוטים או הדגשות טקסט מיוחדות

ישר ולעניין – בואו נרוץ על דוגמאות והקוד שלהם. מתחת לכל דוגמה תמצאו תיבה מתרחבת עם קוד CSS וקוד HTML רלוונטי עבור הדוגמה. למרות ההשקעה האדירה (שאמורה לזכות אותנו בלייק – נודה לכם) אתם מוזמנים כמו תמיד להשאיר תגובה / שאלה ונשמח לעזור.

דוגמה 1: עם הצללה בצד ימין

טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. ספר זה הפך פופולרי יותר בשנות ה-60 עם ההוצאה לאור של גליון פונטי המכיל פסקאות של Lorem Ipsum. ועוד יותר לאחרונה עם פרסום תוכנות המחשב האישי כגון Aldus page maker שמכיל גרסאות של Lorem Ipsum.

קוד CSS + HTML +

קוד HTML

[html] <div class="folded-01"></div> [/html]

קוד CSS

[css] /*** FOLDED 1 ***/ .folded-01 {color: #fff;background: #49ACEF; font-size: 18px; position: relative;padding: 1.5em 1.7em;margin: 2em auto;} .folded-01:before {border-color: #3598DB #fff; content: "";position: absolute;top: 0;right: 0;border-width: 0 25px 25px 0;border-style: solid; -webkit-box-shadow:-4px 3px 2px rgba(0,0,0,0.3), -2px 2px 1px rgba(0,0,0,0.2); -moz-box-shadow:-4px 3px 2px rgba(0,0,0,0.3), -2px 2px 1px rgba(0,0,0,0.2); box-shadow:-4px 3px 2px rgba(0,0,0,0.3), -2px 2px 1px rgba(0,0,0,0.2);} [/css]

דוגמה 2: עם הצללה בצד שמאל

קוד CSS + HTML +

קוד HTML

[html] <div class="folded-02"></div> [/html]

קוד CSS

[css] /*** FOLDED 2 ***/ .folded-02 {color: #fff;background: #A4D74E; font-size: 18px; position: relative;padding: 1.5em 1.7em;margin: 2em auto;} .folded-02:before {border-color: #90C33A #fff; content: "";position: absolute;top: 0;left: 0;border-width: 0 0 25px 25px;border-style: solid; -webkit-box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2); box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2);} [/css]

דוגמה 3: בלי הצללה בצד ימין

קוד CSS + HTML +

קוד HTML

[html] <div class="folded-03"></div> [/html]

קוד CSS

[css] /*** FOLDED 3 ***/ .folded-03 {color: #fff;background: #80DEDD; font-size: 18px; position: relative;padding: 1.5em 1.7em;margin: 2em auto;} .folded-03:before {border-color: #19C1C2 #fff; content: "";position: absolute;top: 0;right: 0;border-width: 0 25px 25px 0;border-style: solid;} [/css]

דוגמה 4: בלי הצללה בצד שמאל

קוד CSS + HTML +

קוד HTML

[html] <div class="folded-04"></div> [/html]

קוד CSS

[css] /*** FOLDED 4 ***/ .folded-02 {color: #fff;background: #69BBF8; font-size: 18px; position: relative;padding: 1.5em 1.7em;margin: 2em auto;} .folded-02:before {border-color: #238DE4 #fff; content: "";position: absolute;top: 0;left: 0;border-width: 0 0 25px 25px;border-style: solid; -webkit-box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2); box-shadow:0 1px 0px rgba(0,0,0,0.3), 2px 3px 2px rgba(0,0,0,0.2);} [/css]

זהו, קצר ולעניין

הפוסט / מיני מדריך הזה הוא פוסט שיצרתי כדי שאוכל לגשת לכאן בקליק ולמצוא את הCSS הנדרש שאני צריך כשאני רוצה ליצור פינה מקופלת עם CSS. מקווה שאהבתם – אם כן, נודה לכם על לייק, טוויט או פרגון עם פלוס בגוגל פלוס. נתראה במדריך הבא, שגיב SEO.