שלום חברים, היום… אספתי לכם 15 חוצצים מעוצבים שאתם יכולים לשלב באתרים שאתם בונים / בניתם בקלות. את כל הקבצים כמו גם קובץ הדגמה ניתן להוריד בסוף המדריך. ניסיתי ליצור גיוון של צבעים וסגנונות כך שתמצאו משהו שמתאים בדיוק מקסימלי לאתר שלכם. אתם מוזמנים להרשם לרשימת התפוצה שלנו כדי להשאר מעודכנים בכל המשאבים החמים לבוני ומקדמי אתרים.
סדרה 1
הסדרה הראשונה מתבססת על קו נטוי קטן אשר חוזר על עצמו. מדובר על תמונת רקע קטנה אשר מופיעה לאורך כל השורה בעזרת Repeat.
קוד Html +
[html]
<div class="seperator sep-01 grey"></div>
<div class="seperator sep-01 orange"></div>
<div class="seperator sep-01 red"></div>
<div class="seperator sep-01 green"></div>
<div class="seperator sep-01 blue"></div>
[/html]
קוד Css +
[css]
.seperator {width: 100%; height: 20px; margin: 20px 0;}
.sep-01.grey {background: url(images/divider-01-grey.png) repeat-x center top;}
.sep-01.orange {background: url(images/divider-01-orange.png) repeat-x center top;}
.sep-01.red{background: url(images/divider-01-red.png) repeat-x center top;}
.sep-01.green {background: url(images/divider-01-green.png) repeat-x center top;}
.sep-01.blue {background: url(images/divider-01-blue.png) repeat-x center top;}
[/css]
סדרה 2
עוד
עוד
עוד
עוד
עוד
חוצץ ייחודי שמושך את העין לעבר הפסקה הבא או אפילו מאפשר להציג מידע נוסף בלחיצת כפתור על האייקון (דורש שינוי) כמה צבעים לבחירתכם.
קוד Html +
[html]
<div class="sep-02 grey"><div class="mask"></div> <span><i>עוד</i></span></div>
<div class="sep-02 orange"><div class="mask"></div> <span><i>עוד</i></span></div>
<div class="sep-02 red"><div class="mask"></div> <span><i>עוד</i></span></div>
<div class="sep-02 green"><div class="mask"></div> <span><i>עוד</i></span></div>
<div class="sep-02 blue"><div class="mask"></div> <span><i>עוד</i></span></div>
[/html]
קוד Css +
[css]
.sep-02 {text-align: center; margin: 40px 20%; position: relative;}
.sep-02 .mask {overflow: hidden; height: 20px;}
.sep-02 .mask:after {content: ";display: block;margin: -25px auto 0;width: 100%;height: 25px;border-radius: 125px / 12px;box-shadow: 0 0 8px #000;}
.sep-02 span {width: 50px;height: 50px;position: absolute;bottom: 100%;margin-bottom: -25px;left: 50%;margin-left: -25px;border-radius: 100%;box-shadow: 0 2px 4px #999;background: #FFF;}
.sep-02 span i {position: absolute;top: 4px;bottom: 4px;left: 4px;right: 4px;text-align: center;line-height: 40px;font-style: normal; -webkit-border-radius: 100%; border-radius: 100%;}
.sep-02.grey span i {border: 2px dashed #B2B2B2; color: #B2B2B2;}
.sep-02.orange span i {border: 2px dashed #333; color: #333;}
.sep-02.red span i {border: 2px dashed #A9D96B; color: #A9D96B;}
.sep-02.green span i {border: 2px dashed #FB5F51; color: #FB5F51;}
.sep-02.blue span i {border: 2px dashed #3597DB; color: #3597DB;}
[/css]
סדרה 3
חוצץ צבעוני וצעיר שהוא למעשה 2 קווים רוחבים עם נטיה של אחוז בודד, קו תחתון וקו עליון בצבעים משתנים (וריצאיה של עד 5 צבעים שונים) ללא תמונות.
קוד Html +
[html]
<div class="relative mb1"><div class="sep-03 grey"></div></div>
<div class="relative mb1"><div class="sep-03 orange"></div></div>
<div class="relative mb1"><div class="sep-03 red"></div></div>
<div class="relative mb1"><div class="sep-03 green"></div></div>
<div class="relative mb1"><div class="sep-03 blue"></div></div>
[/html]
קוד Css +
[css]
.sep-03{margin: 20px 0;}
.sep-03::before, .sep-03::after {position: absolute;content: ";pointer-events: none;}
.sep-03::before, .sep-03::after {left: 50%;width: 100%;height: 10px;-webkit-transform: translateX(-50%) rotate(1deg);transform: translateX(-50%) rotate(1deg);}
.sep-03::after {height: 3px;}
.sep-03::before {top: -1px;}
.sep-03::after { bottom: 6px; z-index: 10; background: #ccc;}
.sep-03.grey::before {background: #B2B2B2;} .sep-03.orange::before {background: #FFD723;} .sep-03.red::before {background: #A9D96B;} .sep-03.green::before {background: #FB5F51;} .sep-03.blue::before {background: #3597DB;} [/css]
סדרה 4
חוצץ עננים פופולרי שרבים משתמשים בו כדי לתחום את החלק התחתון של האתר שלהם או אפילו מתחת לאלמנטים מסוימים באתר. את המקור אפשר למצוא: כאן
קוד Html +
[html]
<div class="sep-04 grey"><svg id="clouds" xmlns="https://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z"></path></svg></div>
<div class="sep-04 orange"><svg id="clouds" xmlns="https://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z"></path></svg></div>
<div class="sep-04 red"><svg id="clouds" xmlns="https://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z"></path></svg></div>
<div class="sep-04 green"><svg id="clouds" xmlns="https://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z"></path></svg></div>
<div class="sep-04 blue"><svg id="clouds" xmlns="https://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z"></path></svg></div>
[/html]
קוד Css +
[css]
.sep-04.grey #clouds path {fill: #B2B2B2; stroke:#B2B2B2;}
.sep-04.orange #clouds path {fill: #FFD723; stroke:#FFD723;}
.sep-04.red #clouds path {fill: #A9D96B; stroke:#A9D96B;}
.sep-04.green #clouds path {fill: #FB5F51; stroke:#FB5F51;}
.sep-04.blue #clouds path {fill: #3597DB; stroke:#3597DB;}
[/css]
סדרה 5
חוצץ קו מקווקו פשוט ונפוץ, קל משקל ועם תמונת רקע שחוזרת על עצמה. משקל התמונה 77 ביט (כן זהו!) ולכן זה ממש בקטנה. הורידו בקובץ בסוף את הכל.
קוד Html +
[html]
<div class="seperator sep-05 grey"></div>
<div class="seperator sep-05 orange"></div>
<div class="seperator sep-05 red"></div>
<div class="seperator sep-05 green"></div>
<div class="seperator sep-05 blue"></div>
[/html]
קוד Css +
[css]
.seperator {width: 100%; height: 20px; margin: 20px 0;}
.sep-05.grey {background: url(images/divider-05-grey.png) repeat-x center top;}
.sep-05.orange {background: url(images/divider-05-orange.png) repeat-x center top;}
.sep-05.red{background: url(images/divider-05-red.png) repeat-x center top;}
.sep-05.green {background: url(images/divider-05-green.png) repeat-x center top;}
.sep-05.blue {background: url(images/divider-05-blue.png) repeat-x center top;}
[/css]
סדרה 6
סט חוצצים ציוריים לאתרים ציוריים. מריחת מכחול עם מברשת קריאון בחמישה צבעים שונים. חוצצים נראים לאתרים צבעוניים שמאתימים את עצמם לרוחב החלל.
קוד Html +
[html]
<div class="seperator sep-06 grey"></div>
<div class="seperator sep-06 orange"></div>
<div class="seperator sep-06 red"></div>
<div class="seperator sep-06 green"></div>
<div class="seperator sep-06 blue"></div>
[/html]
קוד Css +
[css]
.seperator {width: 100%; height: 20px; margin: 20px 0;}
.sep-06.grey {background: url(https://sagive.co.il/wp-content/uploads/2015/02/divider-06-grey.png) repeat-x center top;}
.sep-06.orange {background: url(https://sagive.co.il/wp-content/uploads/2015/02/divider-06-orange.png) repeat-x center top;}
.sep-06.red{background: url(https://sagive.co.il/wp-content/uploads/2015/02/divider-06-red.png) repeat-x center top;}
.sep-06.green {background: url(https://sagive.co.il/wp-content/uploads/2015/02/divider-06-green.png) repeat-x center top;}
.sep-06.blue {background: url(https://sagive.co.il/wp-content/uploads/2015/02/divider-06-blue.png) repeat-x center top;}
[/css]
סדרה 7
סט חוצצים פשוט מאוד ונקי מאוד, שוב… באותו סט של חמישה צבעים – הפעם זה נטו CSS אז קל להחיל איזה צבע שרוצים. שימו לב שהרוחב נקבע ידנית בתוך ההגדרה.
קוד Html +
[html]
<div class="sep-07 grey"></div>
<div class="sep-07 orange"></div>
<div class="sep-07 red"></div>
<div class="sep-07 green"></div>
<div class="sep-07 blue"></div>
[/html]
קוד Css +
[css]
.sep-07 {width: 100%; margin: 20px auto;display:block;border:none;color:white;height:1px;}
.sep-07.grey {background:#555; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#555), to(#fff));}
.sep-07.orange {background:#FFD723; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#FFD723), to(#fff));}
.sep-07.red{background:#A9D96B; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#A9D96B), to(#fff));}
.sep-07.green {background:#FB5F51; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#FB5F51), to(#fff));}
.sep-07.blue {background:#3597DB; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#3597DB), to(#fff));}
[/css]
סדרה 8
סט חוצצים אשר נבנה בעזרת CSS טהור וללא שום תמונות ועוזר ליצור הצללה אלגנטית ופס מפריד בעיצוב עדין ואלגנטי שעושה בדיוק מה שהוא אמור לעשות מבלי להכביד על העין.
קוד Html +
[html]
<div class="sep-08 grey"></div>
<div class="sep-08 orange"></div>
<div class="sep-08 red"></div>
<div class="sep-08 green"></div>
<div class="sep-08 blue"></div>
[/html]
קוד Css +
[css]
.sep-08 {width: 100%; margin: 20px auto;display:block;border:none;color:white;height:5px;}
.sep-08.grey{background:rgba(226,226,226,1);background:-moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));background:-webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);background:-o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);background:-ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);background:linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0 );}
.sep-08.orange{background:rgba(241,231,103,1);background:-moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));background:-webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);background:-o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);background:-ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);background:linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );}
.sep-08.red{background:rgba(248,80,50,1);background:-moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));background:-webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background:-o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background:-ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background:linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );}
.sep-08.green{background:rgba(210,255,82,1);background:-moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));background:-webkit-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);background:-o-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);background:-ms-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);background:linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=0 );}
.sep-08.blue{background:rgba(73,155,234,1);background:-moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));background:-webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);background:-o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);background:-ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);background:linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );}
[/css]
סדרה 9
עוד סט אלגנטי של חוצצים בעיצוב קו פשוט עם הצללה – נטו CSS אז אין צורך בשום תמונות, קל לשלב באתר ומגיע בחמישה צבעים שאתם יכולים להטמיע בהתאם לצבעי האתר שלכם.
קוד Html +
[html]
<div class="sep-09 grey"></div>
<div class="sep-09 orange"></div>
<div class="sep-09 red"></div>
<div class="sep-09 green"></div>
<div class="sep-09 blue"></div>
[/html]
קוד Css +
[css]
.sep-09 {width: 100%; margin: 20px auto;height:10px;}
.sep-09.grey{box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);}
.sep-09.orange{box-shadow: inset 0 12px 12px -12px rgba(255, 215, 35, 1);}
.sep-09.red{box-shadow: inset 0 12px 12px -12px rgba(169, 217, 107, 1);}
.sep-09.green{box-shadow: inset 0 12px 12px -12px rgba(251, 95, 81, 1);}
.sep-09.blue{box-shadow: inset 0 12px 12px -12px rgba(53, 151, 219, 1);}
[/css]
סדרה 10
חוצץ ייחודי עם שימוש בגבול עליון מקווקו ותוכן שהוא תו HTML אשר מייצג מספריים נחמדים שיוצרים אפקט של לגזור ולשמור – מעולה לאתר מכירות ומתווה את הרעיון.
קוד Html +
[html]
<div class="sep-10 grey"></div>
<div class="sep-10 orange"></div>
<div class="sep-10 red"></div>
<div class="sep-10 green"></div>
<div class="sep-10 blue"></div>
[/html]
קוד Css +
[css]
.sep-10{height: 1px;}
.sep-10:after {content: '\002702'; display: inline-block; position: relative; top: -17px; left: 40px; padding: 0 3px; font-size: 22px; font-weight: bold;}
.sep-10.grey{color: #333; border-top: 1px dashed #333;}
.sep-10.orange{color: #FFBB01; border-top: 1px dashed #FFBB01;}
.sep-10.red{color: #A9D96B; border-top: 1px dashed #A9D96B;}
.sep-10.green{color: #FB5F51; border-top: 1px dashed #FB5F51;}
.sep-10.blue{color: #3597DB; border-top: 1px dashed #3597DB;}
[/css]
סדרה 11
חוצץ מדליק עם לב ממורכז ללא תמונות אלא רק בעזרת תווי HTML וCSS. קל ליישום ומגיע כבר עם 5 צבעים מוכנים. גם ההתאמה של הצבעים קלה במיוחד כך שתוכלו ליישם באתר שלכם.
קוד Html +
[html]
<div class="sep-11 grey"></div>
<div class="sep-11 orange"></div>
<div class="sep-11 red"></div>
<div class="sep-11 green"></div>
<div class="sep-11 blue"></div>
[/html]
קוד Css +
[css]
.sep-11{height: 1px; margin: 20px 0; text-align: center;line-height: 23px;}
.sep-11:after {content: '\002665'; display: inline-block; position: relative; top: -14px; padding: 0 5px; background: #fff; font-size: 22px; font-weight: bold;}
.sep-11.grey{color: #555; border-top: 4px double #999;}
.sep-11.orange{color: #FFBB01; border-top: 4px double #FFBB01;}
.sep-11.red{color: #A9D96B; border-top: 4px double #A9D96B;}
.sep-11.green{color: #FB5F51; border-top: 4px double #FB5F51;}
.sep-11.blue{color: #3597DB; border-top: 4px double #3597DB;}
[/css]
סדרה 12
חוצץ פשוט מאוד ונקי מאוד שמתאים לכל אתר אבל במקום קווקו רגיל הפעם קו ושתי נקודות שחוזר על עצמו. נוצר עם CSS בשילוב תמונה במשקל מינימלי של 74ביט. קל ליישום ומגיע בחמישה צבעים.
קוד Html +
[html]
<div class="sep-12 grey"></div>
<div class="sep-12 orange"></div>
<div class="sep-12 red"></div>
<div class="sep-12 green"></div>
<div class="sep-12 blue"></div>
[/html]
קוד Css +
[css]
.sep-12 {width: 100%; height: 20px; margin: 20px 0;}
.sep-12.grey {background: url(images/divider-12-grey.png) repeat-x center top;}
.sep-12.orange {background: url(images/divider-12-orange.png) repeat-x center top;}
.sep-12.red{background: url(images/divider-12-red.png) repeat-x center top;}
.sep-12.green {background: url(images/divider-12-green.png) repeat-x center top;}
.sep-12.blue {background: url(images/divider-12-blue.png) repeat-x center top;}
[/css]
סדרה 13
עוד חוצץ נקי שעושה שימוש בתמונה (קלת משקל במיוחד) וCSS שגורם לתמונה לחזור על עצמה כדי לייצר חוצץ אלגנטי ונאה לעין. כל התמונות כלולות בקובץ אשר מוצע להורדה בסוף המאמר.
קוד Html +
[html]
<div class="sep-13 grey"></div>
<div class="sep-13 orange"></div>
<div class="sep-13 red"></div>
<div class="sep-13 green"></div>
<div class="sep-13 blue"></div>
[/html]
קוד Css +
[css]
.sep-13 {width: 100%; height: 20px; margin: 20px 0;}
.sep-13.grey {background: url(images/divider-13-grey.png) repeat-x center top;}
.sep-13.orange {background: url(images/divider-13-orange.png) repeat-x center top;}
.sep-13.red{background: url(images/divider-13-red.png) repeat-x center top;}
.sep-13.green {background: url(images/divider-13-green.png) repeat-x center top;}
.sep-13.blue {background: url(images/divider-13-blue.png) repeat-x center top;}
[/css]
סדרה 14
חוצץ ייחודי שכולל נקודת סימון מפה בתחילת השורה (או לבחירתכם במיקום רצוי לאורך השורה). מגיע עם חמש צבעים וסמן מפה לגמרי עם CSS – בלי תמונות ובלי זמן טעינה!
קוד Html +
[html]
<div class="sep-14 grey"><div class="pin"></div></div>
<div class="sep-14 orange"><div class="pin"></div></div>
<div class="sep-14 red"><div class="pin"></div></div>
<div class="sep-14 green"><div class="pin"></div></div>
<div class="sep-14 blue"><div class="pin"></div></div>
[/html]
קוד Css +
[css]
.sep-14 {border-bottom: 1px solid #ccc; margin-bottom: 30px;}
.sep-14 .pin {margin:0 0 0 3%; width: 20px; height: 20px; -webkit-border-radius: 50% 50% 50% 0; border-radius: 50% 50% 50% 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.sep-14 .pin:after {content: "; width: 10px; height: 10px; margin: 5px 5px 0 0; position: absolute; -webkit-border-radius: 50%; border-radius: 50%;}
.sep-14.grey .pin {background: #333;} .sep-14.grey .pin:after {background: #B2B2B2;} .sep-14.orange .pin {background: #FF9400;} .sep-14.orange .pin:after {background: #FFD723;} .sep-14.red .pin {background: #CB1D0D;} .sep-14.red .pin:after {background: #FB5F51;} .sep-14.green .pin {background: #80CB1F;} .sep-14.green .pin:after {background: #A9D96B;} .sep-14.blue .pin {background: #0981D3;} .sep-14.blue .pin:after {background: #3597DB;} [/css]
סדרה 15
עוד חוצץ פשוט במבנה של קווים מוטים צפופים בחמישה צבעים. מדובר על תמונת רקע שחוזרת על עצמה לרוחב המסך. כל התמונות מצורפות בקובץ בסוף המאמר. שיהיה בהצלחה…
קוד Html +
[html]
<div class="sep-15 grey"></div>
<div class="sep-15 orange"></div>
<div class="sep-15 red"></div>
<div class="sep-15 green"></div>
<div class="sep-15 blue"></div>
[/html]
קוד Css +
[css]
.sep-15 {width: 100%; height: 20px; margin: 20px 0;}
.sep-15.grey {background: url(images/divider-15-grey.png) repeat-x center top;}
.sep-15.orange {background: url(images/divider-15-orange.png) repeat-x center top;}
.sep-15.red{background: url(images/divider-15-red.png) repeat-x center top;}
.sep-15.green {background: url(images/divider-15-green.png) repeat-x center top;}
.sep-15.blue {background: url(images/divider-15-blue.png) repeat-x center top;}
[/css]
מקורות מידע ומאמרים נוספים מהעולם
סיימנו אבל יהיה עוד בקרוב
יצרתי את הפוסט כדי לאגד יחדיו חוצצים (hr) מעוצבים בסטייל. אני מבטיח להוסיף לכאן עוד בזמן המתאים ועם יצירת פרויקטים אשר דורשים חוצצים מעוצבים שמותאמים לאתר אשר נבנה באותו העת. אם אתם רוצי להוריד את כל הפרויקט כולל קבצי המקור – שתפו והורידו.
