45 ציטוטים מעוצבים Blockquotes לבוני אתרים

3946
24-03-2015

Warning: Use of undefined constant get_the_title - assumed 'get_the_title' (this will throw an Error in a future version of PHP) in /home/customer/www/sagive.co.il/public_html/wp-content/themes/sagive/functions/misc-functions.php on line 305

ברוכים הבאים, כמיטב המסורת אנחנו מפרסמים מעת לעת סדרת מסוגננת של אלמנטים מעוצבים עבור בוני אתרים והיום התיישבנו לעסוק בציטוטים או על פי שם התג שלהם בHTML (שם התג) Blockquotes. כבר מזמן הגענו למסקנה שזה לא אפקטיבי להתחיל לבנות עיצוב בכל פעם שאנחנו רוצים אלמנט HTML מסוים ולכן אנחנו יוצרים אוספים שקל לבנות על פיהם ולחסוך זמן ומאמץ.

45 ציטוטים מוכנים להטמעה באתר שלכם בקלות ובחינם!

אהבתם? שתפו!
��

קוד HTML +

[html] <blockquote class="bq0"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq0 {padding: 0px 15px; margin: 20px 0 30px; border-right: 5px solid #EEE; border-left: none; font-size: 18px; line-height: 24px; padding-left: 70px; background: url('https://sagive.co.il/wp-content/uploads/2015/03/blockquote.gif') no-repeat; background-position: 2% 2px;} [/css]

קוד HTML +

[html] <blockquote class="bq1"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq1 {border-left: 3px solid #DDD; background: #F3F3F3; font-size: 20px; line-height: 28px;} [/css]

קוד HTML +

[html] <blockquote class="bq2"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq2 {border-top: 3px solid #DDD; border-bottom: 3px solid #DDD; background: #F9F9F9; font-size: 20px; line-height: 25px; padding: 0 20px 20px;} blockquote.bq2:before {color: #CCC;content: open-quote;font-size: 6em;line-height: 0.5em;margin-right: -0.25em;margin-bottom: -40px;} blockquote.bq2 p {display: inline;} [/css]

קוד HTML +

[html] <blockquote class="bq3"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq3 {background: #F9F9F9; border-left: 1em solid #EEE; padding: 1em 2.5em 1em 1em; quotes: "\201C""\201D"; position: relative; font-size: 18px; line-height: 24px;} blockquote.bq3:before{color: #808080; content: open-quote; font-size: 6em; line-height: .1em; margin-top: 26px; position: absolute; right: -0.1em;} [/css]

קוד HTML +

[html] <blockquote class="bq4"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq4{line-height: 20px; padding:1em 1em;border-left:5px solid #fce27c;background-color:#f6ebc1; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq5"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq5{line-height: 20px; padding:1em 1em;border-left:5px solid #5BC0DE;background-color:#F4F8FA; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq6"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq6{line-height: 20px; padding:1em 1em;border-left:5px solid #D9534F;background-color:#FDF7F7; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq7"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq7{line-height: 20px; padding:1em 1em;border-left:5px solid #F0AD4E;background-color:#FCF8F2; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq8"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq8{line-height: 20px; padding:1em 1em;border-left:5px solid #E3CFA3;background-color:#FBF8DB; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq9"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq9{line-height: 20px; padding:1em 1em;border-left:5px solid #B6D7E8;background-color:#E9F7FE; font-size: 18px; line-height: 24px;} [/css]

קוד HTML +

[html] <blockquote class="bq10"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq10 {quotes: "\201C""\201D"; position: relative; float: right; width: 45%; margin: 10px 0; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 40px;} blockquote.bq10:before{color: #808080; content: open-quote;font-size: 4em; float: left; margin-left: -10%;} blockquote.bq10:after{color: #808080; content: close-quote;font-size: 4em; float: right; margin-top: 10%;} [/css]

קוד HTML +

[html] <blockquote class="bq11"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq11 {border: solid 2px #ccc; position: relative; float: left; width: 45%; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 45px;transform: skewX(3deg);-moz-transform:skewX(3deg);-webkit-transform: skewX(3deg); -webkit-box-shadow: 1px 1px 1px 1px #333; box-shadow: 1px 1px 1px 1px #333; -webkit-border-radius: 10px; border-radius: 10px;} blockquote.bq11:before{color: #808080;content: "\201d";font-size: 4em; float: left; margin-top:5%; margin-left: -8%;} [/css]

קוד HTML +

[html] <blockquote class="bq12"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq12 {border: solid 2px #ccc; position: relative; float: right; width: 45%; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 45px;transform: skewX(-3deg);-moz-transform:skewX(-3deg);-webkit-transform: skewX(-3deg); -webkit-box-shadow: 1px 1px 1px 1px #333; box-shadow: 1px 1px 1px 1px #333; -webkit-border-radius: 10px; border-radius: 10px;} blockquote.bq12:before{color: #808080;content: "\201d";font-size: 4em; float: left; margin-top:5%; margin-left: -8%;} [/css]

קוד HTML +

[html] <blockquote class="bq13"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq13 {border: 1px solid #FFF; position: relative; float: left; width: 45%; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 45px; background-color: #F6F6F6; background: -webkit-gradient(linear,left top,left bottom,from(#FFF),to(#F6F6F6)); background: -moz-linear-gradient(top,#fff,#f6f6f6); background: -o-linear-gradient(top,#fff,#f6f6f6); background: linear-gradient(top,#fff,#f6f6f6); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);} blockquote.bq13:before{color: #808080;content: "\201d";font-size: 4em; float: left; margin-top:5%; margin-left: -8%;} [/css]

קוד HTML +

[html] <blockquote class="bq14"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq14 {quotes: "\2026""\2026"; position: relative; float: left; width: 60%; margin: 10px 15px 30px 0; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 40px;} blockquote.bq14:before{color: #808080; content: open-quote;font-size: 4em; float: left; margin-left: -10%; margin-top: -10%;} blockquote.bq14:after{color: #808080; content: close-quote;font-size: 4em; float: right; margin-top: 2%;;} [/css]

קוד HTML +

[html] <blockquote class="bq15"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq15 {quotes: "\2308""\230B"; position: relative; margin: 30px 15px 30px 0; color: #AAA; font: 16px/17px Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; padding-left: 40px;} blockquote.bq15:before{color: #808080; content: open-quote;font-size: 4em; float: left; margin-left: -6%;} blockquote.bq15:after{color: #808080; content: close-quote;font-size: 4em; float: right; margin-right: -2%; margin-top: -2%;} [/css]

קוד HTML +

[html] <blockquote class="bq16"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq16{line-height: 20px; padding:1em 1em;color: #fff; background: #EE5665;} [/css]

קוד HTML +

[html] <blockquote class="bq17"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq17{line-height: 20px; padding:1em 1em;color: #fff; background: #A0D569;} [/css]

קוד HTML +

[html] <blockquote class="bq18"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq18{line-height: 20px; padding:1em 1em;color: #fff; background: #FFCE55;} [/css]

קוד HTML +

[html] <blockquote class="bq19"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq19{line-height: 20px; padding:1em 1em;color: #fff; background: #4FC0E8;} [/css]

קוד HTML +

[html] <blockquote class="bq20"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq20{line-height: 20px; padding:1em 1em;color: #00529B; border: 1px solid #38AEE5; background-color: #BDE5F8; background: -moz-linear-gradient(center top , #FFFFFF, #BDE5F8); background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#BDE5F8)); background: -o-linear-gradient(top, #FFFFFF 0%,#BDE5F8 99%); background: -ms-linear-gradient(top, #FFFFFF 0%,#BDE5F8 99%);} [/css]

קוד HTML +

[html] <blockquote class="bq21"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq21{line-height: 20px; padding:1em 1em;color: #00529B; color: #4F8A10; border: 1px solid #A0CF4C; background-color: #DFF2BF; background: -moz-linear-gradient(center top , #FFFFFF, #DFF2BF); background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#DFF2BF)); background: -o-linear-gradient(top, #FFFFFF 0%,#DFF2BF 99%); background: -ms-linear-gradient(top, #FFFFFF 0%,#DFF2BF 99%);} [/css]

קוד HTML +

[html] <blockquote class="bq22"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq22{line-height: 20px; padding:1em 1em;color: #9F6000; border: 1px solid #E5BC3B; background-color: #FEEFB3; background: -moz-linear-gradient(center top , #FFFFFF, #FEEFB3); background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#FEEFB3)); background: -o-linear-gradient(top, #FFFFFF 0%,#FEEFB3 99%); background: -ms-linear-gradient(top, #FFFFFF 0%,#FEEFB3 99%);} [/css]

קוד HTML +

[html] <blockquote class="bq23"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq23{line-height: 20px; padding:1em 1em;color: #D8000C; border: 1px solid #FF7878; background-color: #FFBABA; background: -moz-linear-gradient(center top , #FFFFFF, #FFBABA); background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#FFBABA)); background: -o-linear-gradient(top, #FFFFFF 0%,#FFBABA 99%); background: -ms-linear-gradient(top, #FFFFFF 0%,#FFBABA 99%);} [/css]

קוד HTML +

[html] <blockquote class="bq24"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq24{line-height: 20px; padding:1em 1em;color: #61ADB0; border: 1px solid #C1DEF2; background: #E0F2FF;} [/css]

קוד HTML +

[html] <blockquote class="bq25"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq25{line-height: 20px; padding:1em 1em;color: #D86D6D; border: 1px solid #FCC1C1; background: #FADDDD;} [/css]

קוד HTML +

[html] <blockquote class="bq26"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq26{line-height: 20px; padding:1em 1em;color: #7EB244; border: 1px solid #CEF4A4; background: #EBFDD7;} [/css]

קוד HTML +

[html] <blockquote class="bq27"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq27{line-height: 20px; padding:1em 1em;color: #989426; border: 1px solid #E7E48B; background: #F8F6BC;} [/css]

קוד HTML +

[html] <blockquote class="bq28"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq28 {position: relative;float: left;width: 300px;height: 300px;margin: 30px 15px;border: 1px solid #CCC;color: #FFF;font: 16px/17px Helvetica, Arial, sans-serif;font-weight: normal;font-style: italic;padding: 60px 55px;border-radius: 100%;text-align: justify;background: #888;} blockquote.bq28:before{color: #FFF; content: "\201d"; font-size: 8em; margin-top: 0%; left: 40%; position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq29"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq29 {position: relative;float: right;width: 300px;height: 300px;margin: 30px 15px;color: #FFF;font: 16px/17px Helvetica, Arial, sans-serif;font-weight: normal;font-style: italic;padding: 60px 55px;border-radius: 100%;text-align: justify;background: #3D93CC; border: 1px solid #3D93CC; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;} blockquote.bq29:before{color: #FFF; content: "\201d"; font-size: 8em; margin-top: 0%; left: 40%; position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq30"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq30 {position: relative;float: left;width: 300px;height: 300px;margin: 30px 15px;color: #FFF;font: 16px/17px Helvetica, Arial, sans-serif;font-weight: normal;font-style: italic;padding: 60px 55px;border-radius: 100%;text-align: justify;background: #E84C3D; border: 1px solid #E84C3D; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;} blockquote.bq30:before{color: #FFF; content: "\201d"; font-size: 8em; margin-top: 0%; left: 40%; position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq31"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq31 {position: relative;float: right;width: 300px;height: 300px;margin: 30px 15px;color: #FFF;font: 16px/17px Helvetica, Arial, sans-serif;font-weight: normal;font-style: italic;padding: 60px 55px;border-radius: 100%;text-align: justify;background: #90C33A; border: 1px solid #90C33A; -moz-box-shadow: 2px 2px 2px 1px #666; -webkit-box-shadow: 2px 2px 2px 1px #666; box-shadow: 2px 2px 2px 1px #666;} blockquote.bq31:before{color: #FFF; content: "\201d"; font-size: 8em; margin-top: 0%; left: 40%; position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq32"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq32 {position: relative;; background: #3C3C3C; color: #fff; padding: 20px;} blockquote.bq32 .inner {border-right: 3px solid #696969; padding: 0 10px;} [/css]

קוד HTML +

[html] <blockquote class="bq33"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq33 {position: relative; background: #297FB8; color: #fff; padding: 20px;} blockquote.bq33 .inner {border-right: 3px solid #60B9E5; padding: 0 10px;} [/css]

קוד HTML +

[html] <blockquote class="bq34"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq34 {position: relative; background: #FFBC39; color: #fff; padding: 20px;} blockquote.bq34 .inner {border-right: 3px solid #FEE75B; padding: 0 10px;} [/css]

קוד HTML +

[html] <blockquote class="bq35"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq35 {position: relative;float: left;margin: 50px 15px;color: #fff;font-weight: normal;font-style: italic;padding: 15px;border-radius: 10px;text-align: justify;background: #4FC0E8;} blockquote.bq35 span {position: absolute;left: 5%;top: 130%;color: #4FC0E8;font-size: 14px;} blockquote.bq35:after{color: #4FC0E8;content: "\25bc";font-size: 3em;top: 100%;left: 5%;position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq36"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq36 {position: relative;float: left;margin: 50px 15px;color: #fff;font-weight: normal;font-style: italic;padding: 15px;border-radius: 10px;text-align: justify;background: #EE5665;} blockquote.bq36 span {position: absolute;right: 2%;top: -45%;color: #EE5665;font-size: 14px;} blockquote.bq36:before{color: #EE5665;content: "\25b2";font-size: 3em;top: -15%;right: 5%;position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq37"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq37 {position: relative;float: left;margin: 50px 15px;color: #fff;font-weight: normal;font-style: italic;padding: 15px;border-radius: 10px;text-align: justify;background: #297FB8;} blockquote.bq37 span {position: absolute;right: 2%;top: -45%;color: #297FB8;font-size: 14px;} blockquote.bq37:before{color: #297FB8;content: "\25b2";font-size: 3em;top: -15%;right: 5%;position: absolute;} [/css]

קוד HTML +

[html] <blockquote class="bq38"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq38 {background: #2DD5D6; position: relative; width: 45%; padding: 1em 1.5em; margin: 2em auto; color: #fff;} blockquote.bq38:before{border-color: #19C1C2 #fff; display: block; content: ""; position: absolute; top: 0; right: 0; width: 0; border-width: 0 16px 16px 0; border-style: solid;} [/css]

קוד HTML +

[html] <blockquote class="bq39"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq39 {background: #EE3111; position: relative; width: 65%; padding: 1em 1.5em; margin: 2em auto; color: #fff;} blockquote.bq39:before{border-color: #B9260C #fff; border-width: 0 0px 30px 30px; display: block; content: ""; position: absolute; top: 0; left: 0; width: 0; border-style: solid;} [/css]

קוד HTML +

[html] <blockquote class="bq40" title="כותרת ניסיון"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq40 {background: #EE3111; position: relative; width: 350px; height: 350px; padding: 4em 2.5em 0; margin: 2em auto; color: #FFF; text-align: center; -webkit-border-radius: 50%; border-radius: 50%;} blockquote.bq40:before{border-color: #B9260C #FFF;border-width: 25px;display: block;content: "";position: absolute;bottom: 30px;left: 0;width: 350px;right: 0;border-style: solid;} blockquote.bq40:after{content: attr(title); margin-right: -45px; position: absolute; bottom: 48px; font-size: 20px; color: #FFF; text-align: center;} [/css]

קוד HTML +

[html] <blockquote class="bq41" title="כותרת ניסיון"> טקסט גולמי של תעשיית ההדפסה וההקלדה. Lorem Ipsum היה טקסט סטנדרטי עוד במאה ה-16, כאשר הדפסה לא ידועה לקחה מגש של דפוס ועירבלה אותו כדי ליצור סוג של ספר דגימה. ספר זה שרד לא רק חמש מאות שנים אלא גם את הקפיצה לתוך ההדפסה האלקטרונית, ונותר כמו שהוא ביסודו. </blockquote> [/html]

קוד CSS +

[css] blockquote.bq41 {background: #3D93CC; position: relative; width: 350px; height: 350px; padding: 5.5em 2.5em 0; margin: 2em auto; color: #FFF; text-align: center; -webkit-border-radius: 50%; border-radius: 50%;} blockquote.bq41:before{border-color: #297FB8 #FFF;border-width: 25px;display: block;content: "";position: absolute;top: 30px;left: 0;width: 350px;right: 0;border-style: solid;} blockquote.bq41:after{content: attr(title); margin-right: -45px; position: absolute; top: 48px; font-size: 20px; color: #FFF; text-align: center;} [/css]

רוצים להוריד את הקובץ המלא?

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

לחצו כאן להורדת הקובץ

אז למה הכנו את המאגר הזה?

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

המון בהצלחה, שגיב SEO.